实现登录前端页面并接入

9、实现页面展示及指定资源文件支持 - 图1

一、登录表单

9、实现页面展示及指定资源文件支持 - 图2

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  5.   <title>IM解决方案</title>
  6.   <link rel="stylesheet" href="/asset/plugins/mui/css/mui.css" />
  7.   <link rel="stylesheet" href="/asset/css/login.css" />
  8.   <script src="/asset/plugins/mui/js/mui.js" ></script>
  9.   <script src="/asset/js/vue.min.js" ></script>
  10.   <script src="/asset/js/util.js" ></script>
  11. </head>
  12. <body>
  14. <header class="mui-bar mui-bar-nav">
  15.   <h1 class="mui-title">登录</h1>
  16. </header>
  17. <div class="mui-content" id="pageapp">
  18.   <form id='login-form' class="mui-input-group">
  19.     <div class="mui-input-row">
  20.       <label>账号</label>
  21.       <input v-model="user.mobile" placeholder="请输入手机号" type="text" class="mui-input-clear mui-input" >
  22.     </div>
  23.     <div class="mui-input-row">
  24.       <label>密码</label>
  25.       <input v-model="user.passwd" placeholder="请输入密码"  type="password" class="mui-input-clear mui-input" >
  26.     </div>
  27.   </form>
  28.   <div class="mui-content-padded">
  29.     <button @click="login"  type="button"  class="mui-btn mui-btn-block mui-btn-primary">登录</button>
  30.     <div class="link-area"><a id='reg' href="register.shtml">注册账号</a> <span class="spliter">|</span> <a  id='forgetPassword'>忘记密码</a>
  31.     </div>
  32.   </div>
  33.   <div class="mui-content-padded oauth-area">
  34.   </div>
  35. </div>
  36. </body>
  37. </html>
  38. <script>
  39.   var app = new Vue({
  40.     el:"#pageapp",
  41.     data:function(){
  42.       return {
  43.         user:{
  44.           mobile:"",
  45.           passwd:""
  46.         }
  47.       }
  48.     },
  49.     methods:{
  50.       login:function(){
  51.         //检测手机号是否正确
  52.         console.log("login")
  53.         //检测密码是否为空
  55.         //网络请求
  56.         //封装了promis
  57.         util.post("user/login",this.user).then(res=>{
  58.           console.log(res)
  59.           if(res.code!=0){
  60.             mui.toast(res.msg)
  61.           }else{
  62.             //location.replace("//127.0.0.1/demo/index.shtml")
  63.             mui.toast("登录成功,即将跳转")
  64.           }
  65.         })
  66.       },
  67.     }
  68.   })
  69. </script>

运行服务，发现页面未找到，这是为什么呢 9、实现页面展示及指定资源文件支持 - 图3

因为没有提供静态文件的支持，接下来编写提供静态资源支持的代码 9、实现页面展示及指定资源文件支持 - 图4

经测试，通过命令行可以直接报漏出代码，如果main.go是敏感的代码，则不安全，那应该怎么办呢？ 9、实现页面展示及指定资源文件支持 - 图5

提供指定目录的静态文件支持 9、实现页面展示及指定资源文件支持 - 图6 上面的动态文件404，下面的静态文件内容正常输出，说明成功了 9、实现页面展示及指定资源文件支持 - 图7