egg.js入门小案例

这篇博客将讲解一下我学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

    
    
    



    
测试渲染结果  <%=data%>
    

然后在我们的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();

最后呈现

最后页面呈现的数据为

这个只是很小的一个小例子，可以快速理解和使用egg中的MVC，如果对上面有什么不懂的地方或者是想一起讨论的，可以添加我的QQ1693490575