I'm 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版后端中,先记录备忘

赞(0) 赏杯咖啡!
未经允许不得转载:Sham@双目瞿 » 关于制作后端初始化安装的想法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果你觉得文章好,请赏1杯速溶咖啡给Sham吧!

微信扫一扫打赏