使用nuxt,express,mysql,nginx创建个人博客系列-07

注册登录页面

创建后台公用头部
目录：server/admin/views/header.ejs
说明：<%= module_dir%>是后台传过来的值，这个是进入后台的路由，因为这个是从配置来的，所有经过传参动态改变。

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  crossorigin="anonymous"></script>
<script src="//cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
  crossorigin="anonymous"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
  crossorigin="anonymous"></script>
<script src="//cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="//cdn.bootcss.com/marked/0.3.18/marked.min.js"></script>
<script src="<%= module_dir%>/static/js/axios.js"></script>

创建后台管理员注册页面目录：server/admin/views/register.html
说明：<% include header.ejs%>就是把上面写的header.ejs文件引进来。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <% include header.ejs%>
  <link rel="stylesheet" href="<%= module_dir%>/static/css/login.css">
  <title>博客后台注册</title>
</head>

<body>

  <body class="text-center">
    <div class="form-signin">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <label for="inputName" class="sr-only">用户名</label>
      <input type="email" id="inputName" class="form-control" placeholder="请输入账号" required autofocus>
      <label for="inputPassword" class="sr-only">密码</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </div>
  </body>
  <script>
    var module_dir = "<%= module_dir%>"
  </script>
  <script>
   //提交代后台注册
    $(function () {
      $('.btn').on('click', function () {
        let name = $('#inputName').val(); 
        let password = $('#inputPassword').val();
        if (name && password) {
          $axios.post(`${module_dir}/api/createUser`,{
            name,
            password
          }).then(resp=>{
            console.log(resp);
            window.location.reload()
          })
        } else {
          alert('请输入账号或密码')
        }
      })
    })
  </script>
</body>

</html>

创建后台管理员登录页面目录：server/admin/views/login.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <% include header.ejs%>
  <link rel="stylesheet" href="<%= module_dir%>/static/css/login.css">
  <title>博客后台登录</title>
</head>

<body>

  <body class="text-center">
    <div class="form-signin">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <label for="inputName" class="sr-only">用户名</label>
      <input type="email" id="inputName" class="form-control" placeholder="请输入账号" required autofocus>
      <label for="inputPassword" class="sr-only">密码</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </div>
  </body>
  <script>
     var module_dir = "<%= module_dir%>"
  </script>
  <script>
    //用户登陆代码
    $(function () {
      $('.btn').on('click', function () {
        let name = $('#inputName').val();
        let password = $('#inputPassword').val();
        if (name && password) {
          $axios.post(`${module_dir}/api/login`,{
            name,
            password
          }).then(resp=>{
            console.log(resp);
            window.location.reload()
           })
        } else {
          alert('请输入账号或密码')
        }
      })
    })
  </script>
</body>

</html>

下一个章节我会讲如何实现用户注册，登陆。即请求${module_dir}/api/login,和${module_dir}/api/createUser

上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-06
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-08