Sham@双目瞿最近打包v1.5的时候，因为把自己的数据库信息、appid等信息删除了，导致后端如果再次使用或者他人使用时，需要手动查找多个文件进行替换，于是想起来是否能像wordpress初次使用时进行安装生成，于是查询网上资料，有了初步想法和代码，如下：
目前使用layui的话，只能用2个文件来实现，暂时还未找到并到1个文件的方法：
index.php页（设置页）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="js/layui/css/layui.css">
<script src="js/jquery-3.1.1.min.js"></script>
<style type="text/css">
.container{
width: 380px;
height: 600px;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
padding:20px;
z-index:130;
border-radius:8px;
background-color:#fff;
box-shadow:0 3px 18px #ccc;
font-size: 16px;
}
.layui-input{
border-radius: 5px;
width: 260px;
height: 40px;
font-size: 15px;
}
.verity{
float:left;
display: inline;
width:140px;
margin-right:20px;
}
.layui-form-item{
margin-left: -20px;
}
.layui-btn{
margin-left: -60px;
border-radius: 5px;
width: 320px;
height: 40px;
font-size: 15px;
}
#canvas {
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.layui-input-inline{
border:1px solid #ccc;
display: inline-block;
}
</style>
</head>
<body>
<form class="layui-form" action="" method="post">
<div class="container">
<fieldset class="layui-elem-field layui-field-title">
<legend style="font-weight:bolder;">初始化安装</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">数据库地址</label>
<div class="layui-input-block">
<input type="text" name="dbaddress" required lay-verify="required" value="localhost" placeholder="请输入数据库地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="dbuser" required lay-verify="required" placeholder="请输入数据库用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="dbpsw" required lay-verify="required" placeholder="请输入数据库密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库名</label>
<div class="layui-input-block">
<input type="text" name="dbname" required lay-verify="required" placeholder="请输入数据库名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">后端网址</label>
<div class="layui-input-block">
<input type="text" name="wxurl" required lay-verify="required" value="https://<?php echo $_SERVER['HTTP_HOST']; ?>/" placeholder="请输入后端网址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图库网址</label>
<div class="layui-input-block">
<input type="text" name="photourl" required lay-verify="required" value="https://<?php echo $_SERVER['HTTP_HOST']; ?>/photos/" placeholder="请输入后端图库网址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Appid</label>
<div class="layui-input-block">
<input type="text" name="appid" required lay-verify="required" placeholder="请输入Appid" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Appsecret</label>
<div class="layui-input-block">
<input type="text" name="appsecret" required lay-verify="required" placeholder="请输入Appsecret" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
<canvas id="canvas" width="100" height="36"></canvas>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="adminsubmit">生成数据库及文件</button>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
$(function(){
var show_num = [];
draw(show_num);
$("#canvas").on('click',function(){
draw(show_num);
})
$(".layui-btn").on('click',function(){
var val = $(".verity").val().toLowerCase();
var num = show_num.join("");
if(val==''){
layer.msg("请输入验证码",{icon: 2, time: 1500});
}else if(val !== num){
layer.msg("验证码错误！请重新输入！",{icon: 2, time: 1500});
$(".verity").val('');
draw(show_num);
return false;
}else{
form.on('submit(adminsubmit)', function(data){
$.ajax({
url:'install.php',
method:'post',
data:data.field,
dataType:'JSON',
success:function(res){
if(res.code=='0'){
layer.msg(res.msg,{icon: 1, time: 1500},function(){window.location.href='index.php';});
}
else
//alert(res.msg);
layer.msg(res.msg,{icon: 2, time: 1500},function(){location.reload();});
},
error:function (data) {
}
});
return false;
});
}
})
})
});
function draw(show_num) {
var canvas_width=$('#canvas').width();
var canvas_height=$('#canvas').height();
var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
var aCode = sCode.split(",");
var aLength = aCode.length;//获取到数组的长度
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt.toLowerCase();
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
context.font = "bold 20px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
function randomColor() {//得到随机的颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</body>
</html>然后是安装生成页，install.php
<?php
error_reporting(0);
if(isset($_POST['dbaddress']) && isset($_POST['dbuser'])){
$servername = $_POST['dbaddress'];
$username = $_POST['dbuser'];
$password = $_POST['dbpsw'];
$mysqlname = $_POST['dbname'];
$con = mysqli_connect($servername, $username, $password, $mysqlname) or exit("{".'"code": 1,'. '"msg": "数据库连接失败，请检查数据库信息是否准确"'."}");
mysqli_query($con,"set names utf8");
if(!file_exists('public')){
mkdir('public',0777);
}
touch('public/dbcon.php');
$read = fopen('public/dbcon.php','w');
$content = '<?php
$servername = "'.$servername.'";
$username = "'.$username.'";
$password = "'.$password.'";
$mysqlname = "'.$username.'";
$con = mysqli_connect($servername, $username, $password, $mysqlname);
mysqli_query($con,"set names utf8");
$url="'.$_POST['wxurl'].'";
$imgurl="'.$_POST['photourl'].'";
$appid="'.$_POST['appid'].'";
$appsecret="'.$_POST['appsecret'].'";
?>';
fwrite($read,$content);
$sql = file_get_contents('db.sql');
$sqls = explode(';',$sql);
$sqlnum = count($sqls);
for($i=0;$i<$sqlnum;$i++){
$res = $con->query($sqls[$i]);
if($res){
$done++;
}
}
if($i==$sqlnum){
echo "{".'"code": 0,'. '"msg": "初始化成功，可直接访问后台"'."}";
}else{
echo "{".'"code": 1,'. '"msg": "失败，请重试"'."}";
}
}
?>这里的db.sql是已经上传至同一目录里，后面会考虑变成在index.php里上传。
初次使用时，打开index.php，然后会有个表单，提交后，会在数据库内将db.sql导入到数据库，然后再在public目录下生成dbcon.php，里面有数据库信息，网址以及appid等信息，这样就不需要一个个设置了，需要的时候调用就行了。
待优化后放入v2版后端中，先记录备忘
评论前必须登录！
注册