在Nunjucks模板中使用Layui

本項目地址: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);//登錄頁
};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市届巩,隨后出現(xiàn)的幾起案子硅瞧,更是在濱河造成了極大的恐慌,老刑警劉巖恕汇,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腕唧,死亡現(xiàn)場離奇詭異,居然都是意外死亡瘾英,警方通過查閱死者的電腦和手機枣接,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來方咆,“玉大人月腋,你說我怎么就攤上這事。” “怎么了榆骚?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵片拍,是天一觀的道長。 經(jīng)常有香客問我妓肢,道長捌省,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任碉钠,我火速辦了婚禮纲缓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘喊废。我一直安慰自己祝高,他們只是感情好,可當我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布污筷。 她就那樣靜靜地躺著工闺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瓣蛀。 梳的紋絲不亂的頭發(fā)上陆蟆,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天,我揣著相機與錄音惋增,去河邊找鬼叠殷。 笑死,一個胖子當著我的面吹牛诈皿,可吹牛的內(nèi)容都是我干的林束。 我是一名探鬼主播,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼纫塌,長吁一口氣:“原來是場噩夢啊……” “哼诊县!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起措左,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎避除,沒想到半個月后怎披,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡瓶摆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年凉逛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片群井。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡状飞,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诬辈,我是刑警寧澤酵使,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站焙糟,受9級特大地震影響口渔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜穿撮,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一缺脉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧悦穿,春花似錦攻礼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至傍衡,卻和暖如春深员,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛙埂。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工倦畅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人绣的。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓叠赐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親屡江。 傳聞我的和親對象是個殘疾皇子芭概,可洞房花燭夜當晚...
    茶點故事閱讀 45,747評論 2 361