一篇文章掌握Egg.js的核心用法
快速创建一个egg项目
- 创建一个文件夹并进行自定义命名
mkdir 自定义名字
- 进入上述文件夹，并初始化egg
npm init egg --type=simple
- 安装依赖
npm install
- 运行项目
npm run dev
推荐使用下面的方式创建项目
- 首先全局安装egg-init
- 使用egg-init创建项目
- 进入项目
- 安装依赖
- 运行
npm i egg-init -g
egg-init eggname --type=simple
cd eggname
npm i
npm run dev
Egg的目录结构
1. app文件夹
app文件夹是我们的主要项目文件夹。
2. config文件夹
config文件夹是我们的主要配置文件和插件配置的位置。
3. logs文件夹
logs文件夹是我们的日志文件夹，一般不适用。
4. node_modules文件夹
这个文件夹是我们的模块安装的文件夹。
5. package.json文件
当前项目所下载的依赖，以及启动设置等。
Egg的约定规范
路由写在哪里？
路由写在app下的router.js
模板写在哪里？
模板写在app文件夹下面的view文件夹中
查询数据，获取数据写在哪里？
写在app文件夹下面的service文件夹中。
业务逻辑写在哪里？
Controller负责处理业务逻辑。
判断权限写在哪里？
写在app文件夹下的middleware文件夹中。
静态文件放在哪里？
静态文件放在app文件夹下的public文件夹中。
拓展功能写在哪里？
app文件夹下的extend文件夹中。
配置Egg的代码提示
安装eggjs插件
如果没有提示找到下面的文件，并修改为下面的内容
{"egg-controller": {"scope": "javascript,typescript","prefix": "egg controller","body": ["'use strict';","const Controller = require('egg').Controller;","class $1Controller extends Controller {"," async index() {"," const { ctx } = this;"," ctx.body = '$2';"," }","}","module.exports = $1Controller;",],"description": "egg 控制器的代码提示"},"egg-service": {"scope": "javascript,typescript","prefix": "egg service","body": ["const Service = require('egg').Service;","class $1Service extends Service {"," async find(uid) {"," const sql = ``;"," const data = await this.app.mysql.query(sql);"," return data;"," }","}","module.exports = $1Service;",],"description": "egg 控制器的代码提示"},"myjuqery": {"prefix": "myjuqery","body": ["<script src='http://code.jquery.com/jquery-3.4.1.min.js'></script>"],"description": "导入juqery工具包"},"myaxios": {"prefix": "myaxios","body": ["<script src='https://unpkg.com/axios/dist/axios.min.js'></script>"],"description": "导入axios工具包"},"react-class": {"scope": "javascript,typescript","prefix": "reactclass","body": ["import React from 'react';","import '../css/$1.css'","","class $1 extends React.Component {"," render() {"," return (",""," );"," }","}","export default $1;",],"description": "react 类组件的代码提示"},"react-function": {"scope": "javascript,typescript","prefix": "reactfunction","body": ["import React from 'react';","","function $1() {"," return (",""," );","}","","export default $1;",],"description": "react 函数组件的代码提示"}
}
Egg如何获取数据处理数据？
Egg给客户端响应数据。
this.ctx.body = 'xxx'
Egg获取客户端的请求参数
this.ctx.query
配置动态路由并获取参数
- 动态路由配置
router.get('/newslist/:id',controller.news.newslist);
- 获取参数
this.ctx.params
注意：配置完动态路由之后，如果访问的路由不带参数返回的是404.
配置模板引擎
- 安装插件
npm i egg-view-ejs --save
- 进行项目配置
- plugin.js
exports.ejs = {enable: true,package: 'egg-view-ejs',
};
- config.default.js
// 配置模板引擎
config.view = {mapping: {'.html': 'ejs',},
};
- 异步调用render
await ctx.render('index.html')
egg会自动向view文件夹中寻找index.html文件的。下面介绍一个index.html实例。
<h1>新闻页面</h1>
<%=msg%>
<h2>下面是一个for循环</h2>
<%for(let i = 0; i < list.length; i++) { %><li><%=list[i]%></li><%}
%>
访问Egg项目中的静态资源
在路径中带上public即可。
<img src="/public/images/CSS.png" alt="">
控制器获取service提供数据的方法
- Controller/news.js
const list = await this.service.news.getNewsList();
await ctx.render('index.html',{msg,list
})
- service/news.js
async getNewsList () {const list = [1,2,3,4]return list;
}
注意：不只是控制器可以调用服务的数据，一个服务也可以调用另一个服务的数据。
一篇文章掌握Egg.js的核心用法相关推荐
- 昨天国际电子商情网站贴出了一篇文章《再论企业核心竞争力：为“黑芯”联发科喊冤》，引来争论无数
再论企业核心竞争力:为"黑芯"联发科喊冤 "联发科"被责并不冤 及相关评论(大多是反对的) 保险起见,我把两片文章copy如下: 再论企业核心竞争力:为&qu ...
- 一篇文章带你发中文核心期刊《计算机科学》
中文核心期刊<计算机科学>发论文过程分享 目录 中文核心期刊<计算机科学>发论文过程分享 1.写论文,找杂志发表 2.寻找投稿的杂志社,修改论文 3.论文审核流程 4.关于怎么 ...
- 3.2.1 一篇文章完全掌握 RecycleView 的六大用法
点此进入:从零快速构建APP系列目录导图 点此进入:UI编程系列目录导图 点此进入:四大组件系列目录导图 点此进入:数据网络和线程系列目录导图 一.RecycleView 简介 (1)RecycleV ...
- 【前端技术】一篇文章搞掂：JS
待补充 //以下等价 if(val) if(val!=null&&val!=undefined&&val!="")//以下等价 if(!val) i ...
- 专访死马：为什么说Egg.js是企业级Node框架
在 7 月 6 日的 ArchSummit 架构师峰会深圳站上,Egg.js 的主要开发者不四(网名死马)将给参会者带来<企业级 Node.js Web 框架研发与落地>的分享,借此机会, ...
- 光脚丫思考Vue3与实战：第02章 安装Vue.js
下面是本文的屏幕录像的在线视频: 02-安装Vue.js 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZf ...
- 一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
- 一篇文章彻底说清JS的深拷贝/浅拷贝
一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...
- 一篇文章搞懂架构师的核心技能
" 这是架构师系列的第一篇:核心技能,希望这个系列能完全揭示架构师这个职位:我先从核心技能开始,后续还有架构师之路,架构实战等架构师系列文章. 本文作者 陈睿 优知学院创始人,前携程定制旅游 ...
- list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
最新文章
- org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid byte tag in constant pool: 19
- nginx无法启动异常
- DBA表现最好的7个习惯
- JAVA字节码指令iload_n为什么只有0到3？
- Effective Java之必要时进行保护性拷贝(三十九)
- vue读取服务器文件跨域,新版vue-cli模板下本地开发环境使用node服务器跨域的方法...
- Position independent code and data (ROPI and RWPI)
- 力扣724.寻找数组的中心索引
- 临时设置mysql数据库最大连接数，重启后需重新设置
- html中如何显示纯文本,从Html中取出纯文本
- 可视化软件有哪些?各自的优缺点?
- vmware 14 激活码
- 每日英语阅读（五十四）
- 高数_证明_级数收敛的莱布尼茨判别法
- UiAutomator2—By、BySelector
- 如何升级到 macOS Mojave
- 论文阅读：You said that?
- 升级macos beta_如何选择退出macOS开发人员或公开Beta版
- 为何要做冒烟测试 如何做冒烟测试
- jvm 面试之参数实战