利用egg.js脚手架项目初始化
公司需要做公司的一个官网项目，需要做seo，之前使用nuxt.js框架，后期感觉虽然基于vue.js框架来书写代码很方便，但是在一些配置方便感觉很不爽，在源码中会渲染一些数据源的东西，很乱，所以这次选择使用egg.js+nunjucks的渲染方式，基础数据处理还是后端java提供服务，然后通过本框架获取后端数据，在通过模板渲染，发现nunjuck的模板渲染功能十分强大且优秀，也十分方便。egg.js提供的egg-bin模块也十分强大，处理能力极强，且省去了pm2的监听守护，用起来十分方便。下面介绍一下怎么使用这些技术搭建一个自己的框架。
这里是项目地址，欢迎大家指正。
- 首先创建一个文件目录并切换至该目录
mkdir egg-njk && cd egg-njk
- 项目初始化
npm init egg --type=simple
- 安装项目必要插件
npm i
- 项目启动
开发：npm run dev
生产：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',
},
};
- 创建一个controller
使用vscode插件库提供的eggjs插件能快速的生成代码结构
// 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;
- 创建一个页面模板
// 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>
此时启动项目,已经可以看到一个页面,下面我们来看看nunjucks怎么用？
nunjucks使用
- 创建项目模板
<!--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>
- 创建公共模块
<!--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文件夹下创建文件/文件夹 然后在模板中引入，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模式，数据处理请放在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中调用
'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;
- 在页面中渲染数据
{# 继承自全局的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进行编译，但是没有找到好的方法，所以使用了vscode的easy-sass插件进行编译，如果哪位了解这里应该怎么使用sass进行实时编译，希望能获得您的指点。
