egg.js基础入门
之前一直使用koa, 刚刚接触egg， 做了一些入门的笔记
准备工作
1 首先安装脚手架,，并创建项目。
$ npm i egg-init -g
$ egg-init egg-demo --type=simple
$ cd egg-demo
$ npm i // 也可以使用yarn
2 . 启动项目
$ npm run dev
浏览器打开http://127.0.0.1:7001/即可进入默认的首页。
3 . 项目目录
1 ) /app ----------- 主要工作目录
/controller ------------- 控制器，比如获取service的数据和渲染view的模板
/extend ------------- 方法扩展，比如封装时间格式化方法
/middleware ----------- 中间件，比如登录权限设置
/public ------------ 静态文件目录，比如css, js, image
/service ------------- 服务，操作数据库增删改查等
/view ------------- 模板目录，存放模板文件，如ejs, jade, pug, nunjucks等
-router.js ------------- 路由文件
2 ) /config ---------- 主要配置目录
-config.default.js ------------ 配置文件,
-plugin.js ----------- 配置插件, 如开启模板引擎
开发阶段
1 . 新建路由
# app/router.js
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index); // 脚手架默认路由
router.get('/user', controller.user.index) // 新建路由
};
访问路径 http://127.0.0.1:7001/user时会指向controller.user.index控制器
controller是app应用的一个属性对象，直接指向controller目录，上面的controller.user.index表示，指向app/controller/user.js的index方法
2 . 新建控制器
# app/controller/user.js
/* egg内置控制器 */
const Controller = require('egg').Controller; /*声明控制器类，并继承与Controller */
class UserController extends Controller {
/*声明异步方法*/
async index() {
/*ctx与koa中的一样，表示整个应用的上下文环境*/
const ctx = this.ctx;
ctx.body = '用户列表'
}
} module.exports = UserController;
3 . 新建服务
# app/service/user.js
const Service = require('egg').Service;
class UserService extends Service {
async findAll() {
/*这里暂时未从数据库获取数据，而是使用了静态数据填充*/
const users = [
{id: 1, name: '兰陵王'},
{id: 2, name: '程咬金'},
{id: 3, name: '诸葛亮'},
]
return users;
}
}
module.exports = UserService;
5. 修改控制器（获取service中的数据, 并渲染到view的模板中）
# app/controller/user.js
const Controller = require('egg').Controller;
class UserController extends Controller {
async index() {
const ctx = this.ctx;
// ctx.body = '用户列表'
const title = '用户列表';
const users = await ctx.service.user.findAll();
await ctx.render('user/index.ejs', {users: users, title})
}
}
module.exports = UserController;
这里使用async..await作为异步获取，可以参考ES6教程，意思是users获取成功了，才会执行下一步。
使用ctx.render()渲染ejs模板， 并带有参数传递。
4 . 新建模板
# app/view/user/index.ejs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2><%= title %></h2>
<ul>
<% users.forEach(function (item) { %>
<li><%= item.name %></li>
<% }) %>
</ul>
</body>
</html>
此时重启服务访问 http://127.0.0.1:7001/user会报错，原因是还没配置模板引擎。
5 . 安装并配置模板引擎
$ yarn add egg-view-ejs
$ yarn add egg-view
# config/plugin.js
module.exports = {
// had enabled by egg
static: {
enable: true,
},
// 开启ejs模板插件
ejs: {
enable: true,
package: 'egg-view-ejs',
}
};
// 简化形式 exports.key = value
// exports.ejs = {
// enable: true,
// package: 'egg-view-ejs'
// }
// 函数形式
// module.exports = () => {
// return {
// ejs: {
//
// }
// }
// }
# config/config.default.js
module.exports = appInfo => {
/*其他代码*/
config.view = {
// 设置ejs为默认的模板引擎
defaultViewEngine: '.ejs',
mapping: {
'.ejs': 'ejs'
}
};
/*其他代码*/
}
最后，重启服务器，并访问http://127.0.0.1:7001/user
结束：
该入门还未连接数据库，如mongodb, mysql
egg.js基础入门的更多相关文章
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
- Nuxt.js 基础入门教程
原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...
- JS基础入门篇（六）— 数据类型
1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
- Underscore.js基础入门
公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...
- gulp.js基础入门
安装 Node 去 nodejs.org 根据系统选择性按照教程安装Node. 创建项目 创建项目文件夹 进入项目文件夹 初始化项目 使用npm命令:npm init,根据提示完成. 安装 Gulp ...
- JS 基础 入门
JS做弹窗效果 //单行注释/*多行注释*/// 网页 标签语言 js语言是脚本语言/* 数据类型: 容器 1.整型 (int) 2.小数类型: float: 单精度的小数: double: ...
- JS基础——入门必备
·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 A ...
- React.js基础入门
本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...
随机推荐
- python serial 模块使用
python3 开始, python 加入了 serial 操作串口的模块 模块的引用 import serial 串口的申请 serial_com1 = serial.Serial("/d ...
- mvc webapi路由重写
修改app_start/webapiconfig.cs using System.Web.Http; using System.Web.Routing; using Ninject; using Tx ...
- Houdini技术体系 基础管线（二） ：Heightfiled与UE4的无缝导入以及对World Composition的支持
Authored by TraceYang 前言 传统的制作做比较真实大世界3D关卡地形时,通常的采用的方式是把HeightMap和SplatMap(Layer Mask)导入到引擎的地形系统里 ...
- springboot-aop
AOP(面向切面编程)是Spring的两大核心功能之一,功能非常强大,为解耦提供了非常优秀的解决方案. 现在就以springboot中aop的使用来了解一下如何使用aop. 写几个简单的Spring ...
- 安装svn客户端后，代码不能提交
转载:https://jingyan.baidu.com/article/e8cdb32b3312f637052badde.html
- Python学习笔记(二)
标识符和关键字 1,邮箱的Python标识符是任意长度的非空字符序列(引导字符+后续字符.) python标识符必须符合两条规则--标识符区分大小写 (1)只要是unicode编码字母都可以充当引导字 ...
- Scikit-learn使用总结
在机器学习和数据挖掘的应用中,scikit-learn是一个功能强大的python包.在数据量不是过大的情况下,可以解决大部分问题.学习使用scikit-learn的过程中,我自己也在补充着机器学习和 ...
- JBPM工作流（二）——数据库表说明
以下为JBMP的数据库说明(18张): 1 流程配置类数据库表: 1.1 JBPM_PROCESSDEFINITION:流程模版表 字段名 字段含义 主键 外键 ID_ 流程模版标识 √ × NAME ...
- postgresql数据库和mysql数据库的对比分析
1.Posgresql是进程模式,多进程,单线程,类似的还有Oracle.而MYSQL采用的是线程模式,单进程,多线程,对此,大家在运行数据库的时候可以查看任务管理器,SQL Server也是如此. ...
- java个人博客源码
初入博客园,请各位多关照,来而不往非礼也. 如需要源码以及学习内容,qq:1397617269,我看到就回你们资源. 直接给链接: 链接:https://pan.baidu.com/s/1S_awtg ...