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

<!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();

最后呈现

最后页面呈现的数据为
在这里插入图片描述

这个只是很小的一个小例子,可以快速理解和使用egg中的MVC,如果对上面有什么不懂的地方或者是想一起讨论的,可以添加我的QQ1693490575
发布了28 篇原创文章 · 获赞 14 · 访问量 6786

猜你喜欢

转载自blog.csdn.net/weixin_42304193/article/details/104563511