egg学习-抓取数据并ejs渲染到页面的过程

最新推荐文章于 2022-03-13 16:26:19 发布
最新推荐文章于 2022-03-13 16:26:19 发布
阅读量661 收藏 1
点赞数 2
文章标签： egg.js ejs mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinglianglove/article/details/103492068
版权

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',
};
lijinglianging
关注
通过服务器向数据库请求数据，渲染到页面的操作
weixin_53125457的博客
03-24 1238
目录一、配置文件1、在项目文件夹内打开服务器窗口2、输入命令 `express -e 要创建的文件夹名`3、根据服务器的提示操作，配置文件4、下载安装需要的插件5、配置插件6、在服务器内输入命令`npm run dev`才可以启动服务 配置才算基本完成二、创建数据库并建立连接在路由文件内链入数据库，并获取请求的数据 一、配置文件 1、在项目文件夹内打开服务器窗口 2、输入命令 express -e 要创建的文件夹名 3、根据服务器的提示操作，配置文件 4、下载安装需要的插件 5、配置插件 6、
电商网站项目 动态实现（从数据库获取数据）三 nodejs之ejs
限定小码农的博客
08-28 356
ejs：视图模板 显示html的结构和数据，并进行渲染 模板组成：结构+数据 MVC M：modal 数据库 V：view 视图（页面+数据），给用户展示的（静态的） C：控制，业务处理 如何使用： 1.了解视图模板（页面+数据） 2.下载：npm i ejs 3.引用：const myejs=require(‘ejs’); 配置： app.js： 1.直接使用ejs模板 app.set(“views”,path(__dirname,“view”)); //views是固定的 app.set(“vi
Egg.js 项目中怎么使用前端模板
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-11 848
1、安装插件 egg-view-ejs npm install egg-view-ejs -save 2、配置插件信息 2.1 config/plugin.js 声明需要用到的插件 module.exports = { ejs: { enable: true, package: 'egg-view-ejs' } }; 2.2 config/config.default.js 配置 ejs：将 view 文件夹下的 .html 后缀的文件，识别为 .ejs。 config.vie
egg.js源码解析之render()
weixin_30266885的博客
02-27 211
作为阿里的开源node.js框架，我觉得egg.js是很有前途的，故而学之，github上down了一个项目下来（https://github.com/easy-team/egg-vue-webpack-boilerplate），这是个基于 Egg + Vue + Webpack 多页面和单页面服务端渲染同构工程骨架项目，稍作学习大致有了了解，但是会用并不是目的！！！ egg.js采用了传统的M...
Egg 中的控制器继承与兼容
越陌度阡
03-27 542
1. 控制器的继承 项目中多个控制器使用公共的方法时，可以将这些方法写在一个基类控制器中，其它的控制器全部继承于这个基类控制器，这样基类中的方法就可以在其它的控制器中使用了。 定义基类控制器 // app/core/base.js 'use strict'; const Controller = require('egg').Controller; // 所有控制器的基类 class Ba.........
ejs-compiled-loader：用于Webpack的EJS加载器（无前端依赖项）
02-06
用于webpack的ejs-compiled-loader 用于EJS加载器。 使用函数来编译模板。 要使用使用1.x分支和1.xx版本。 安装 npm install ejs-compiled-loader 用法 var template = require ( "ejs-compiled-loader!./file....
Egg.js中引入egg-view-ejs模板引擎
huangbaokang的博客
02-04 3668
github地址https://github.com/eggjs/egg-view-ejs 在github中有详细的介绍 安装 npm i egg-view-ejs --save 在{app_root}/config/plugin.js中配置，注释掉之前的 'use strict'; /** @type Egg.EggPlugin */ // module.exports = { // /...
gulp-ejs-locals:用于 ejs-locals 支持的 Gulp 插件
06-25
`gulp-ejs-locals` 是一个专门为 EJS 模板引擎设计的 Gulp 插件，主要用于在构建 Web 应用程序时处理 EJS 模板，并为其提供局部变量支持。Gulp 是一个流行的 JavaScript 流构建系统，而 EJS 是一个轻量级的模板引擎...
gulp-min-ejs:缩小ejs本地模板
05-14
gulp-minify-ejs 包裹 gulp-minify-ejs 描述 gulp-minify-ejs是一个gulp插件，可轻松缩小ejs模板文件 安装 npm install gulp-minify-ejs --save-dev 用法 var gulp = require ( 'gulp' ) , //rename = require(...
mysql数据渲染到页面_（三）express+mysql获取数据并渲染
weixin_29796903的博客
02-28 737
在第二讲里面讲了如何连接mysql并获取数据，那么数据如何在页面上渲染呢？有两种方式：一、第一种在原本的项目里面就已经实现了，使用res.render('页面',数据)的方式；二、写一个接口，前端通过ajax请求接口得到数据并渲染；先把之前都放在app.js里面连接mysql的配置单独放在一个配置文件里面:// 创建数据库连接const mysql = require("mysql")const ...
egg.js学习笔记(一)——快速创建一个egg.js应用
朝夕奔梦
03-13 1977
前言 最近在慕课网学习使用egg.js这个框架来编写服务端，所以简单的做一下笔记。 快速开始 快速初始化 这里我直接按照官网的教程使用的脚手架，前提是你的npm版本 >= 6.1.0，然后随便找一个目录来开始创建我们的项目。 mkdir erdan-lego && cd erdan-lego $ npm init egg --type=simple $ npm i 启动项目： npm run dev 这个时候我们的项目就已经创建好了，是不是很快？就是简单的几条命令而
egg学习——简单实例
热门推荐
Yel_Liu的博客
03-15 1万+
最近在储备egg，因为网上的资源太少了，自己也是纠结了好几天，解决了无数的错误，才排除万难完成了这个小demo。 安装就不再赘述了，下面直接介绍：将页面内容保存到数据库中该demo使用的模板引擎为nunjucks,又因为要讲文件保存到数据库中所以需要引入MySQL的插件，于是config/plugin.js文件内容如下 //config/plugin.js exports.nunjucks =
基于egg.js的模版渲染（ssr）
qq_30346089的博客
12-07 4561
目录约定规范 egg-project ├── package.json ├── app.js (可选) ├── agent.js (可选) ├── app | ├── router.js │ ├── controller │ | └── home.js │ ├── service (可选) │ | └── user.js │ ├── middleware (可选) ...
Egg + Vue 服务端渲染开发指南
weixin_33981932的博客
10-28 685
1. 项目初始化 1.1 通过 easywebpack-cli 脚手架初始化 安装脚手架 npm install easywebpack-cli -g 命令行，然后就可以使用 easywebpack 或 easy 命令 命令行运行 easywebpack init 选择 egg+vue server side render boile...
koa2 ctx.render is not a function
thunder_sz的博客
05-07 840
记录一下该BUG，原因主要是因为js的运行是有顺序的，如果先初始化了Router，在访问时先执行了Router但其后面的ctx.render的render方法还没有绑定到上下文上，就会造成该问题。 解决方法： 将Router移动到其他的中间件后面去即可 ...
render渲染函数和jsx用法
越思考越清晰
12-22 3427
jsx 用法 //render-dom.js export default { functional: true, props: { number: Number, renderFunc: Function }, render: (h, ctx) =&amp;amp;amp;amp;amp;amp;amp;gt; { return ctx.props.renderFunc(h, ctx.props.number)...
vue之render基本书写方法
diaolian6603的博客
02-08 1995
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。 render 基本写法 export default { name: 'renderTest', data() {}, render: (createElement)...
Egg 静态资源路径
票票的博客
07-30 3919
egg 的静态资源放在 public 文件夹下，路径显示为 http:localhost:7001/public/1.png
前端获取数据后如何渲染到ejs界面
最新发布
06-03
前端获取数据后可以通过 AJAX 或者 Fetch 等技术将数据传递到后台的 Koa 服务器，然后在 Koa 服务器中将数据渲染到 EJS 模板中，最后将渲染后的 HTML 页面返回给浏览器。 以下是一个简单的示例： 在前端，可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值