（2）模板制作 · 基于ThinkPHP5.0的各项后台小功能代码实现

我在这里就不新建模块了，直接用新的框架的index模块 - 在index模块下面新建一个跟controller同级的view文件夹，在view文件夹下面新建一个后台admin文件夹，一个login文件夹 - 首先在login文件夹下面新建一个login.html文件，代码（标准的HTML5格式）： ``` <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>新码萌学登录</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="{$Think.config.web_root}css/main.css"> </head> <body> <div class="container"> <div class="title"><span class="login">登录</span></div> <div class="form"> <form action="logining" method="post"> <input type="text" name="name" class="username form-control" placeholder="用户名"> <input type="password" name="password" class="password form-control" placeholder="密码"> <div class="captchas"> <input placeholder="请输入验证码" name="captcha" class="captcha form-control"></input> <img src="{:captcha_src()}" alt="captcha" onclick="this.src='{:captcha_src()}'"/> </div> <button type="submit" class="submit">提交</button> </form> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` - 在controller文件夹下面新建一个Login.php的控制器，这里只是先把登录页面渲染出来 ``` <?php namespace app\index\controller; use think\Input; use think\Controller; use Captcha; class Login extends Controller { public function login(){ return $this->fetch('login'); } } ``` 访问http://127.0.0.1/tp5/public/index.php/index/login/login 就能看到登录页面了，画面有点丑，后面再细讲样式优化 - - - - - - 这里强调一下，无论是composer还是在官方下载的框架都不包含验证码扩展包，这个需要自行Composer，所以会报错找不到captcha\_src()，这里我已经composer过了，目录vendor/tothink/think-captcha就是验证码扩展包，在Windows下面Composer官方的扩展包可以看一下这个文档http://www.thinkphp.cn/code/2192.html - - - - - - #### 还有一个后台模板 - 步骤跟上面一样，在view下面新建一个admin文件夹，再在admin下面新建一个admin.html文件，代码： ` {$Think.session.ext\_user\['admin\_name'\]} `页面中的这段代码是session的值，注意写法 ``` <html lang="zh-CN"> <head> <title>后台中心</title> <meta charset="UTF-8"> <meta http-equiv="refresh" content="1800"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="/static/css/admin.css"> </head> <body> <div class="container"> <span class="user">欢迎您：{$Think.session.ext_user['admin_name']}</span> <div class="title"><span class="login">后台中心</span></div> <div class="content"> <p>没有登录访问不进来哦！记得测试一下session。</p> <p>点击退出后，你再尝试输入http://127.0.0.1/tp5/public/index.php/index/admin/admin，会自动退回到登录页面。</p> <div class="button"> <a href="logout" class="btn btn-danger btn-lg active" role="button">退出登录</a> <a href="changepsw" class="btn btn-success btn-lg active" role="button">修改密码</a>  </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` - 上面既然有修改密码的功能，这里就要在admin文件夹下面新建一个changepsw.html的文件，代码： ``` <html lang="zh-CN"> <head> <title>修改密码</title> <meta charset="UTF-8"> <meta http-equiv="refresh" content="1800"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="/static/css/changepsw.css"> </head> <body> <div class="container"> <span class="user">欢迎您：{$Think.session.ext_user['admin_name']}</span> <div class="title"><span class="change">修改密码</span></div> <div class="form"> <form method="post" action="changepassword"> <div class="row"> <div class="cur col-lg-12"><span>原密码：</span><input type="password" name="oldpassword" class="form-control" placeholder="请输入原密码"></input></div> <div class="cur col-lg-12"><span>新密码：</span><input type="password" name="newpassword" class="form-control" placeholder="请输入新密码"></input></div> <div class="cur col-lg-12"><span>再次输入新密码：</span><input type="password" name="newpassword1" class="form-control" placeholder="请再次输入新密码"></input></div> </div> <input type="submit" value="提交" class="btn btn-primary btn-lg btn-block"></input> <a href="admin" type="submit" value="返回上一页" class="btn btn-success btn-lg btn-block">返回上一页</a> </form> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` - 在controller文件夹下面新建控制器Admin.php，代码（ps：要养成写注释的好习惯，从最基本的开始）： ``` <?php namespace app\index\controller; use think\Controller; class Admin extends Controller { /*后台页面*/ public function admin() { return $this->fetch(); } /*修改密码页面*/ public function changepsw() { return $this->fetch(); } } ``` 访问`http://127.0.0.1/tp5/public/index.php/index/admin/admin` 就能看到后台页面了，这里还没做session处理，所以能访问进去，后面再细讲session设置，访问`http://127.0.0.1/tp5/public/index.php/index/admin/changepsw` 就能看到修改密码页面，这个也是必须登陆后才能进行的操作，所以也需要session处理 #### 2. 模板样式的引入和修改 - 我在官网里面搜索了一下\_\_PUBLIC，然后找到一个帖子：<http://www.thinkphp.cn/topic/40122.html> 是讲解静态文件引入的，但是个人认为略繁琐，不过可以学习一下，每次尝试都是进步。 - 这是官方资源文件加载的方法：<http://www.kancloud.cn/manual/thinkphp5/125020> ，我没有尝试成功，后面自己找原因。 - 这里主要讲解一下我已经实现的方法：在application/config.php下面加一条配置： ``` <?php /**** @author：1132w11 2016.10.25 14:02; ****/ return [ "web_root" => "/tp5/public/static/", ]; ``` 然后再模板文件里面加一条： ``` <link rel="stylesheet" type="text/css" href="{$Think.config.web_root}css/main.css"> ``` 这样就成功引入了，也不是很复杂，JS跟images等资源也是同样引入。 #### 4. 模板中静态文件中登录需要注意的事项。这里稍微讲一点，就是做登录的时候，可以加一个验证码输入框之外的隐藏的输入框用于验证登录，也就是所谓的key，双重验证 ``` <input type="hidden" name="check"> ``` 另外，对输入框的各种限制一定要做好，可以用正则，也可以用框架自带的验证，（作为开发者，永远都不要相信用户输入的方式） **最保险的验证方式就是在控制器中检测提交的内容，符合要求才能入库验证登录信息的正确性。这是必须要做的验证！就算是js那边已经做过验证了，这一步希望你不要省事漏掉。**