（3）MVC - V（視圖） · 基于ThinkPHP5.1的各項后臺小功能代碼實現

>[info] #### 視圖主要是用來呈現頁面效果的 ``` 在源碼根目錄下面的 web 文件夾里面 ``` >[info] 將頁面整合到框架里 1、復制 assets文件夾，到 ```public/static``` 目錄下面，如圖： ![](https://box.kancloud.cn/e8f04e9f1b38ddd17797fe2652e55af3_340x676.png) 2、在 ```index``` 模塊下面的 ```view``` 文件夾下面，創建一個新的 ```index``` 文件夾，并將 ```index.html``` ，放入 ```index``` 文件夾里面；創建一個新的 ```login``` 文件夾，并將 ```login.html``` 放入 ```login``` 文件夾，并改名為 ```index.html```如圖： ![](https://box.kancloud.cn/f82d7abd6b902079128b5b297a738cf4_337x277.png) 3、打開 ```login.html``` ，在每一條 CSS，JS鏈接之前，加上 ```__STATIC__/```，代碼如下： ``` <!DOCTYPE html>    <html lang="en">   <head> <meta charset="utf-8" /> <title>用戶登錄界面</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="這是用戶登錄界面！" name="description" /> <meta content="" name="author" />  <link href="__STATIC__/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" /> <link href="__STATIC__/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="__STATIC__/assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />   <link href="__STATIC__/assets/pages/css/login-5.min.css" rel="stylesheet" type="text/css" />    <link rel="shortcut icon" href="favicon.ico" /> </head>  <body class=" login">  <div class="user-login-5"> <div class="row bs-reset"> <div class="col-md-6 bs-reset mt-login-5-bsfix"> <div class="login-bg" style="background-image:url(assets/pages/img/login/bg1.jpg)">  </div> </div> <div class="col-md-6 login-container bs-reset mt-login-5-bsfix"> <div class="login-content"> <h1>用戶登錄</h1> <form action="" class="login-form" method="post"> <div class="alert alert-danger display-hide"> <button class="close" data-close="alert"></button> <span>用戶名或密碼或驗證碼不能為空! </span> </div> <div class="row"> <div class="col-xs-6"> <input class="form-control form-control-solid placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="用戶名" name="username" value="admin" required/> </div> <div class="col-xs-6"> <input class="form-control form-control-solid placeholder-no-fix form-group" type="password" autocomplete="off" placeholder="密碼" name="password" value="123456" required/> </div> </div> <div class="row"> <div class="col-xs-6">  <a class="forget-password"> <img src="{:url('index/login/verify')}" onclick="this.src='{:url(\'index/login/verify\')}?d='+Math.random();"> </a> </div> <div class="col-xs-6 "> <input class="form-control form-control-solid placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="驗證碼" name="code" required/> </div> </div> <div class="row"> <div class="col-sm-4 col-offset-sm-2"> <button class="btn green" type="submit" style="margin-top: 10px">登錄</button> </div> </div> </form>  <form class="forget-form" action="javascript:;" method="post"> <h3 class="font-green">Forgot Password ?</h3> <p> Enter your e-mail address below to reset your password. </p> <div class="form-group"> <input class="form-control placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="Email" name="email" /> </div> <div class="form-actions"> <button type="button" id="back-btn" class="btn green btn-outline">Back</button> <button type="submit" class="btn btn-success uppercase pull-right">Submit</button> </div> </form>  </div> <div class="login-footer"> <div class="row bs-reset"> <div class="col-xs-5 bs-reset"></div> <div class="col-xs-7 bs-reset"> <div class="login-copyright text-right"> <p>Copyright © <a href="http://www.hmoore.net/ifeng/tp5_1_code#/catalog">基于ThinkPHP5.1的各項后臺小功能代碼實現</a></p> </div> </div> </div> </div> </div> </div> </div>    <script src="__STATIC__/assets/global/plugins/jquery.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script> <script src="__STATIC__/assets/global/plugins/backstretch/jquery.backstretch.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/global/scripts/app.min.js" type="text/javascript"></script>   <script src="__STATIC__/assets/pages/scripts/login-5.min.js" type="text/javascript"></script>    <script> $(document).ready(function() { $('#clickmewow').click(function() { $('#radio1003').attr('checked', 'checked'); }); }) </script> </body> </html> ``` 4、修改完之后，進入鏈接 ```http://tp5-1.com/login``` ，會發現，我們的基本樣式有了，但是沒有圖片。 5、到了這里，我們需要修改，```login-5.min.js```這個文件,文件路徑在：``` F:\www\TP5.1\1.0\public\static\assets\pages\scripts\login-5.min.js ```。 >[warning] （這是我這里的路徑，每個人的路徑都是不一樣的，依照源碼路徑來看的）。修改方法如下： ```  "assets/pages/img/login/bg1.jpg", "assets/pages/img/login/bg2.jpg", "assets/pages/img/login/bg3.jpg"  "/static/assets/pages/img/login/bg1.jpg", "/static/assets/pages/img/login/bg2.jpg", "/static/assets/pages/img/login/bg3.jpg" ``` 修改之后，刷新一下頁面，你會發現頁面已經煥然一新了： ![](https://box.kancloud.cn/dede0a1ea9ea76a2b1615864d764298b_1316x656.png) >[info] 到了這里，我們的登錄模板也就算是修改好了。至于首頁模板，我就弄了一個簡單的頁面，用于用戶登錄之后的展示。頁面代碼如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>歡迎來到首頁</title> </head> <body> <h1>{$Think.session.name},歡迎來到{$name}</h1>  你的ID是：{$Think.session.id} <br>  你的用戶名是：{$Think.session.name} <br> <a href="{:url('index/login/logout')}">安全退出</a> </body> </html> ``` 頁面效果如下： ![](https://box.kancloud.cn/c00475a233da7df1ce293fdd55fd3141_583x202.png) >[info] 至此，登錄頁面和首頁的頁面也就制作好了，正常訪問請下載源碼查看演示效果，以上是主要代碼。