利用egg.js腳手架項目初始化
公司需要做公司的一個官網(wǎng)項目砰琢，需要做seo迈勋，之前使用nuxt.js框架勉耀，后期感覺雖然基于vue.js框架來書寫代碼很方便，但是在一些配置方便感覺很不爽粗蔚，在源碼中會渲染一些數(shù)據(jù)源的東西尝偎，很亂，所以這次選擇使用egg.js+nunjucks的渲染方式，基礎(chǔ)數(shù)據(jù)處理還是后端java提供服務(wù)致扯，然后通過本框架獲取后端數(shù)據(jù)肤寝，在通過模板渲染，發(fā)現(xiàn)nunjuck的模板渲染功能十分強大且優(yōu)秀抖僵，也十分方便鲤看。egg.js提供的egg-bin模塊也十分強大，處理能力極強耍群，且省去了pm2的監(jiān)聽守護(hù)义桂，用起來十分方便。下面介紹一下怎么使用這些技術(shù)搭建一個自己的框架蹈垢。
這里是項目地址慷吊，歡迎大家指正。
- 首先創(chuàng)建一個文件目錄并切換至該目錄
mkdir egg-njk && cd egg-njk
- 項目初始化
npm init egg --type=simple
- 安裝項目必要插件
npm i
- 項目啟動
開發(fā)：npm run dev
生產(chǎn)：npm run start
停止：npm run stop
使用egg-view-nunjucks插件
- 安裝egg-view-nunjucks
npm i egg-view-nunjucks --save
- 使用插件
// config/plugin.js
'use strict';
/** @type Egg.EggPlugin */
const nunjucks = {
enable: true,
package: 'egg-view-nunjucks',
};
module.exports = {
nunjucks,
// had enabled by egg
// static: {
// enable: true,
// }
};
// config/config.default.js
// 添加 view 配置
config.view = {
defaultViewEngine: 'nunjucks',
mapping: {
'.tpl': 'nunjucks',
},
};
- 創(chuàng)建一個controller
使用vscode插件庫提供的eggjs插件能快速的生成代碼結(jié)構(gòu)
// app/controller/home.js
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
const { ctx } = this;
const text = '首頁';
await ctx.render('home.tpl', { text });
}
}
module.exports = HomeController;
- 創(chuàng)建一個頁面模板
// app/view/home.tpl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
</head>
<body>
<div>{{text}}</div>
</body>
</html>
此時啟動項目,已經(jīng)可以看到一個頁面,下面我們來看看nunjucks怎么用曹抬？
nunjucks使用
- 創(chuàng)建項目模板
<!--app/view/layout/layout.tpl-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block description %}
<meta name="description" itemprop="description" content="description繼承">
{% endblock %}
{% block keywords %}
<meta name="keywords" content="keywords繼承">
{% endblock %}
{% block stylesheet %}{% endblock %}
<title>{% block title %} egg-huk {% endblock %}</title>
</head>
<body>
<div id="header">
{% block header %} {% endblock %}
</div>
<div id="main">
{% block main %} {% endblock %}
</div>
<div id="footer">
{% block footer %} {% endblock %}
</div>
</body>
{% block script %}{% endblock %}
</html>
- 創(chuàng)建公共模塊
<!--app/view/commons/header.tpl-->
<div>頭部</div>
<!--app/view/commons/footer.tpl-->
<div>底部</div>
- 修改home.tpl以使用模板繼承
<# app/view/home.tpl #>
{# 繼承自全局的layout模板 #}
{% extends "./layout/layout.tpl" %}
{# 獨立引入的css #}
{% block stylesheet %}{% endblock %}
{# header #}
{% block header %}
{% include "./commons/header.tpl" %}
{% endblock %}
{# 頁面主體 #}
{% block main %}
<div>
<span>{{text}}</span>
</div>
{% endblock %}
{# header #}
{% block footer %}
{% include "./commons/footer.tpl" %}
{% endblock %}
{% block script %}{% endblock %}
如果需要使用到css溉瓶、js、images等文件谤民，需要在public文件夾下創(chuàng)建文件/文件夾 然后在模板中引入嚷闭，layout文件中引入公共css/js模塊，在.tpl文件中通過繼承引入各自獨立的css/js文件
- layout.tpl 引入公共模塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block description %}
<meta name="description" itemprop="description" content="description繼承">
{% endblock %}
{% block keywords %}
<meta name="keywords" content="keywords繼承">
{% endblock %}
<link rel="stylesheet" href="/public/css/reset.min.css">
<link rel="stylesheet" href="/public/css/animate.min.css">
<link rel="stylesheet" href="/public/css/bootstrap.min.css">
{% block stylesheet %}{% endblock %}
<title>{% block title %} egg-huk {% endblock %}</title>
</head>
<body>
<div id="header">
{% block header %} {% endblock %}
</div>
<div id="main">
{% block main %} {% endblock %}
</div>
<div id="footer">
{% block footer %} {% endblock %}
</div>
</body>
<script src="/public/js/jquery-3.4.1.min.js"></script>
<script src="/public/js/bootstrap.min.js"></script>
{% block script %}{% endblock %}
</html>
- home.tpl中繼承獨立的文件
{# 繼承自全局的layout模板 #}
{% extends "./layout/layout.tpl" %}
{# 獨立引入的css #}
{% block stylesheet %}
<link rel="stylesheet" href="/public/css/home.min.css">
{% endblock %}
{# header #}
{% block header %}
{% include "./commons/header.tpl" %}
{% endblock %}
{# 頁面主體 #}
{% block main %}
<div class="content">
<span>{{text}}</span>
</div>
{% endblock %}
{# header #}
{% block footer %}
{% include "./commons/footer.tpl" %}
{% endblock %}
{% block script %}
<script src="/public/js/home.js"></script>
{% endblock %}
egg.js遵循mvc模式赖临，數(shù)據(jù)處理請放在service文件中
// app/config/default.js
// add you api config here
// config.api = 'https://xxx.xxxx.com/';
// app/service/home.js
'use strict';
const Service = require('egg').Service;
class HomeService extends Service {
async getList() {
// const { config } = this;
// const api = config.api;
// console.log(api);
const userList = [
{
name: 'leehan',
age: 22,
sex: 1,
},
{
name: 'spider man',
age: 16,
sex: 1,
},
{
name: '猩紅女巫',
age: 20,
sex: 2,
},
{
name: '滅霸',
age: 40,
sex: null,
},
];
return userList;
}
}
module.exports = HomeService;
- 在controller中調(diào)用
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
const { ctx, service } = this;
const userList = await service.home.getList();
await ctx.render('home.tpl', { userList });
}
}
module.exports = HomeController;
- 在頁面中渲染數(shù)據(jù)
{# 繼承自全局的layout模板 #}
{% extends "./layout/layout.tpl" %}
{# 獨立引入的css #}
{% block stylesheet %}
<link rel="stylesheet" href="/public/css/home.min.css">
{% endblock %}
{# header #}
{% block header %}
{% include "./commons/header.tpl" %}
{% endblock %}
{# 頁面主體 #}
{% block main %}
<ul class="content">
{% for item in userList %}
<li>
<i>序號</i>：<span>{{loop.index}}</span>
<i>姓名</i>：<span>{{item.name}}</span>
<i>年齡</i>：<span>{{item.age}}</span>
<i>性別</i>：<span>{{item.sex | getSex}}</span>
</li>
{% endfor %}
</ul>
{% endblock %}
{# header #}
{% block footer %}
{% include "./commons/footer.tpl" %}
{% endblock %}
{% block script %}
<script src="/public/js/home.js"></script>
{% endblock %}
框架地址:egg-njk 如果需要可以下載之后改一改直接使用
==注意:== 項目中想要引入sass進(jìn)行編譯胞锰，但是沒有找到好的方法，所以使用了vscode的easy-sass插件進(jìn)行編譯兢榨，如果哪位了解這里應(yīng)該怎么使用sass進(jìn)行實時編譯嗅榕，希望能獲得您的指點。
