这篇博客将讲解一下我学egg入门的时候的小案例
首先截图一下文件目录结构
MVC结构
因为egg.js也是比较广泛的mvc结构嘛,所有按照惯例就是先编写C结构。
MVC中的controller
因为在egg.js中controller相当于MVC中的c,所以要先编写它
const Controller = require("egg").Controller
class NewsController extends Controller{
async user_index(){
this.ctx.body = "你好,小明!"
}
}
module.exports = NewsController
要先建立一个类对象,然后继承于egg中的controller。因为egg.js是基于koa开发的,所以建立controller调用函数时应该建立async函数,ctx里面包含了req和res,所以用ctx.body给客户端返回数据。
最后把类对象发布出去,不然外面的对象无法访问这个类。
编写对应的路由
编写路由的文件时app/router.js
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.get("/news",controller.news.user_index);
}
然后运行,输入http://127.0.0.1:7001/news就可以看到后端返回给前端的数据了。
渲染模板
还有的时编写v,也就是渲染模板,这次我们要用到一个插件叫egg-view-ejs
先导入插件npm i egg-view-ejs --save
然后配置插件,在config/plugin.js
exports.nunjucks = {
enable: true,
package: 'egg-view-ejs'
};
在config/config.default.js配置
config.view = {
cache: true, //是否开启缓存,开启后,下次渲染同样路径的模板时不会重新查找
mapping: {
'.html': 'ejs', //这个是配置渲染文件的后缀名,我一般都是喜欢html
},
};
这里的配置一定要注意,要写在module.exports = appInfo => {}包裹中,要不然时不会生效的。
然后我们在app/view中建立一个模板数据index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>egg渲染模板</title>
<script type="text/javascript" src="public/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<p>测试渲染结果 <%=data%></p>
<!--<p>使用helper渲染的时间{{helper.formtime("1476364740")}}</p>-->
</div>
</body>
</html>
然后在我们的controller中渲染模板
const Controller = require("egg").Controller
class UserController extends Controller{
async user_index(){
var data = await this.service.news.user_data();
await this.ctx.render("index.html",data);
}
}
这里要注意,因为渲染模板是异步的所有要加 await
service
上面这个小例子还差一个M就是获取数据处理数据的,data就是从service中获取的。
在service中建立一个news.js的文件。代码如下
const Service = require("egg").Service
class NewsService extends Service{
async user_data(){
//模拟从数据库中获取数据
console.log(await this.service.user.user_data())
var data = {data:"444"};
return data;
}
}
module.exports = NewsService;
在async函数中将数据给返回给controller。
controller将用这种方式获取数据
var data = await this.service.news.user_data();
最后呈现
最后页面呈现的数据为