之前已经简单的使用egg-init初始化项目,并创建控制器controller和服务service

在实际项目中,

  service主要负责数据的请求,并处理(http请求)

  controll主要负责获取service中得到的最终数据,并渲染给模板view

  view主要负责模板渲染

 

在此,先尝试从远程获取http数据(非数据库获取)

配置新闻列表页和详情页路由

/app/router.js

 router.get('/news', controller.news.index);
router.get('/news/:id', controller.news.detail);

创建控制器

/app/controller/news.js

 const Controller = require('egg').Controller;

 class NewsController extends Controller {
async index() {
// ES6解构赋值
const { ctx, service } = this;
const title = '新闻列表';
const newsList = await service.news.getAll(); // 异步获取service返回的数据,必须使用await
await ctx.render('news', {
title,
newsList
})
} async detail() {
const { ctx, service } = this;
const title = '详情';
const id = ctx.params.id; // 获取路由/:id的参数
const newsItem = await service.news.getOne(id); //异步获取service返回的数据,必须使用await
await ctx.render('detail', {
title,
newsItem
})
}
} module.exports = NewsController;

创建服务

/app/service/news.js

  

 const Service = require('egg').Service;

 class NewsService extends Service {
async getAll() {
const { config } = this;
    // config.url是接口的公共地址,推荐在app/config/config.default.js配置
const re = await this.ctx.curl(`${config.url}/此处是新闻列表的api接口`)
const res = JSON.parse(re.data) // 这里根据实际返回的数据进行格式化处理,最后返回一个对象
// console.log(res)
return res.result;
} async getOne(id) {
const url = this.config.url;
const re = await this.ctx.curl(`${url}/此处是单条新闻的api接口&id=${id}`);
const res = JSON.parse(re.data).result[0]; // 获取第一条
console.log(res);
return res;
}
} module.exports = NewsService;

创建模板

列表模板, app/view/news.ejs

 <ul class="list">
<% newsList.forEach(function (item, index) { %>
<li class="item"><a href="/news/<%= item.aid %>"><%= item.title %></a></li>
<% })%>
</ul>

详情模板,app/view/detail.ejs

 <div class="item-wrapper">
<h3 class="item-title"><%= newsItem.title %></h3>
<p class="item-summary"><%= newsItem.summary %></p>
<div class="item-content">
<!--在ejs语法中, - 表示解析HTML数据 -->
<%- newsItem.content %>
</div>
</div>

在模板中引入静态资源文件如CSS, /public/是默认的路径

<link rel="stylesheet" href="/public/css/news.css">

  

egg.js异步请求数据的更多相关文章

  1. 使用load()方法异步请求数据

    使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项d ...

  2. jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

  3. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  4. python爬虫(3)——用户和IP代理池、抓包分析、异步请求数据、腾讯视频评论爬虫

    用户代理池 用户代理池就是将不同的用户代理组建成为一个池子,随后随机调用. 作用:每次访问代表使用的浏览器不一样 import urllib.request import re import rand ...

  5. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

  6. Java爬虫系列四:使用selenium-java爬取js异步请求的数据

    在之前的系列文章中介绍了如何使用httpclient抓取页面html以及如何用jsoup分析html源文件内容得到我们想要的数据,但是有时候通过这两种方式不能正常抓取到我们想要的数据,比如看如下例子. ...

  7. js中请求数据的$post和$ajax区别(同步和异步问题)

    $.post和$.Ajax都为页面上向后台发送请求,请求数据 1.post 因为post默认为异步请求,可是有时候我们会发现,本来要求请求马上出现,可是异步会导致后面突然再执行,这样就出很多问题 2. ...

  8. ajax异步请求数据

    源码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. Jquery异步请求数据实例

    一.Jquery向aspx页面请求数据 前台页面JS代码: $("#Button1").bind("click", function () { $.ajax({ ...

随机推荐

  1. ajax 函数回调

    var initTaxPriod = function (taxNo) { intitSearch(); $("#taxPeriod").html(""); t ...

  2. request.getParameter和request.setAttribute/request.getAttribute

    https://blog.csdn.net/ryelqy/article/details/79230513 request.getQueryString https://blog.csdn.net/w ...

  3. POJ 2391 Ombrophobic Bovines (二分答案+floyd+最大流)

    <题目链接> 题目大意: 给定一个有$n$个顶点和$m$条边的无向图,点$i$ 处有$A_i$头牛,点$i$ 处的牛棚能容纳$B_i$头牛,每条边有一个时间花费$t_i$(表示从一个端点走 ...

  4. redis启动过程源码解析

    redis整个程序的入口函数在server.c中的main函数,函数调用关系如下图1,调用顺序为从上到下,从左至右. 图1 redis启动函数调用图 main函数源码如下,1-55行根据配置文件和启动 ...

  5. [MNIST数据集]输入图像的预处理

    因为MNIST数据是28*28的黑底白字图像,而且输入时要将其拉直,也就是可以看成1*784的二维张量(张量的值在0~1之间),所以我们要对图片进行预处理操作,是图片能被网络识别. 以下是代码部分 i ...

  6. Centos7安装InfluxDB1.7

    Centos7安装InfluxDB1.7 本操作参照InfluxDB官网:InfuxDB 使用的Red Hat和CentOS用户可以安装InfluxDB最新的稳定版本 yum包管理器: cat < ...

  7. 修改终端terminal

    修改终端路径 显示的颜色 (1)在home目录中,新建 .dircolors: $vi .dircolors 输入下面内容 DIR 00;36 保存退出. (2)在 .bashrc文件中 $vi .b ...

  8. centos7.4中安装docker

    #!/bin/sh # 安装docker # 在docker中安装mysql # 解决了docker容器中无法输入中文的问题 ##########################安装docker # ...

  9. Java演算法-「馬踏棋盤問題」

    /* * 馬踏棋盤問題:(貪婪法求解) * 棋盤有64個位置,“日”字走法,剛好走滿整個棋盤 */ //下一個走法的方向類 class Direction{ int x; int y; int way ...

  10. F#周报2019年第10期

    新闻 .NET Core 3预览版3之宣告 .NET Core 3.0将在2019年下半年发布 .NET Standard 2.1的首个预览版 Docker与cgroup的内存限制 LambdAle ...