egg学习-抓取数据并ejs渲染到页面的过程
初始化
全局安装egg脚手架
npm i egg-init -g
创建egg项目
mkdir egg-example
cd egg-example
npm init egg --type=simple
npm i
启动项目
npm run dev
代码过程 MVC
M app/service 模型层 获取数据
V app/view 视图层 页面渲染
C app/controller 控制层 业务逻辑处理
router.js 配置路由 访问 controller里
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.get('/news', controller.news.index);
router.get('/newsContent', controller.news.content);
};
service news.js 获取数据return 出去
'use strict';
const Service = require('egg').Service;
class NewsService extends Service {
//抓取新闻列表
async getNewsList() {
let api = this.config.api + 'appapi.php?a=getPortalList&catid=20&page=1';
let response = await this.ctx.curl(api);
let newsList=JSON.parse(response.data)
// console.log(newsList)
return newsList.result
}
//抓取新闻详情
async getNewsContent(aid) {
let api = this.config.api + 'appapi.php?a=getPortalArticle&aid='+aid;
let response = await this.ctx.curl(api);
let newsList=JSON.parse(response.data)
// console.log(newsList)
return newsList.result
}
}
module.exports = NewsService;
controller news.js 拿到service里面返回的数据 并render 到 ejs模板
'use strict';
const Controller = require('egg').Controller;
class NewsController extends Controller {
async index() {
let list= await this.service.news.getNewsList()
await this.ctx.render('news.html',{
list:list
})
}
async content(){
let aid =this.ctx.query.aid
let list=await this.service.news.getNewsContent(aid)
await this.ctx.render('newsContent.html',{
list:list[0]
})
}
}
module.exports = NewsController;
view news.html 渲染数据到页面上
<body>
<h4>新闻列表</h4>
<ul>
<%for(var i=0;i<list.length;i++){%>
<li><a href="/newsContent?aid=<%- list[i].aid%>"> <%- list[i].title%></a> </li>
<%}%>
</ul>
</body>
配置模板引擎 config.default.js
module.exports = appInfo => {
/**
* built-in config
* @type {Egg.EggAppConfig}
**/
const config = exports = {};
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + 'xxxxxx';
// add your middleware config here
config.middleware = [];
// add your user config here配置模板引擎
config.view = {
mapping: {
'.html': 'ejs',
},
};
// 配置公共url地址
config.api = 'http://www.phonegap100.com/';
return {
...config,
};
};
配置 ejs 插件 plugin.js
'use strict';
exports.ejs = {
enable: true,
package: 'egg-view-ejs',
};
