本項目地址:https://github.com/PoorGuy1996/EggNjkLayui
1.下載 layuiAdmin后臺模板資源 , 下載地址:https://www.xiaoyewl.com/detail/70.html
2.將下載的文件放進 app/public/layuiAdmin中 , 本項目對不需要的layuiAdmin文件進行了篩選.
3.新建 app/view/components 文件夾 , 該文件夾用于存放前端公共組件.
4.在 app/view/components 下新建 HeadInfo.njk 文件 , 該文件編輯網(wǎng)站HTML文件公用的head標簽.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=9,IE=10" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="shortcut icon" href="/favicon.ico">
<!-- 引入依賴的JS -->
<!-- 引入依賴的CSS -->
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="../../style/admin.css">
</head>
5.在 app/view 下新建 Login.njk 文件. nunjucks語法請查看https://nunjucks.bootcss.com/api.html
{% include "./components/HeadInfo.njk" %}
<body>
<div class="login-main">
<header class="layui-elip">登錄</header>
<form class="layui-form" action="/login" method="post">
<div class="layui-input-inline">
<input type="text" name="account" required lay-verify="required" placeholder="用戶名" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="密碼" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline login-btn">
<button lay-submit lay-filter="login" class="layui-btn">登錄</button>
</div>
<hr/>
<p><a href="register.html" class="fl">立即注冊</a><a href="javascript:;" class="fr">忘記密碼测萎？</a></p>
</form>
</div>
</body>
<script src="../../layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','layer','jquery'], function (){
var form = layui.form;
var $ = layui.jquery;
// 登錄
form.on('submit(login)', function(data){
console.log("登錄data:",data);
$.ajax({ url:'/login', data:data.field, dataType:'text', type:'post', success:function (data) {
var result = JSON.parse(data);
console.log("登錄結(jié)果:",result);
layer.msg(result.msg);
if(result.status == 200){
window.location.href = "/";
}
}
});
return false;
});
})
</script>
<style>
.login-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 350px;
margin: 0 auto;
}
.login-main header {
margin-top: 200px;
height: 35px;
line-height: 35px;
font-size: 30px;
font-weight: 100;
text-align: center;
}
.login-main header, .login-main form, .login-main form .layui-input-inline {
margin-bottom: 15px;
}
.login-main form .layui-input-inline, .login-main form .layui-input-inline input, .login-main form .layui-input-inline button {
width: 100%;
}
.login-main form .login-btn {
margin-bottom: 5px;
}
.fl {
float: left;
}
.fr {
float: right;
}
</style>
6.在app/controller新建js文件account.js, 用于實現(xiàn)跟賬號相關(guān)的邏輯.
'use strict';
const Controller = require('egg').Controller;
class AccountController extends Controller {
/**
* 登錄頁
*/
async login() {
const { ctx } = this;
await ctx.render('Login.njk' , { title: '登錄' }); // title用于顯示在瀏覽器標簽中
}
}
module.exports = AccountController;
7.修改app/view/components/HeadInfo.njk文件 , 在<head></head>中 , 添加以下代碼 (變量title就是從AccountController中傳遞過去的) :
<title>{{title}}</title>
8.在app/router.js中添加路由/login , 完成后 , 瀏覽器訪問http://127.0.0.1:8080/login , 可以看到對應的登錄頁的頁面效果.
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);//首頁
router.get('/login', controller.account.login);//登錄頁
};
