紧接上文, 配置好mongodb环境后, 我们就要开始创建Egg.js项目了
附注: 此次是windows环境项目, node.js版本8.x以上, 也不怎么讲原理, 主要是先上手
首先附上Egg.js文档目录: https://www.eggjs.org/zh-CN/intro/quickstart
- 安装Egg.js, 新创建一个文件夹, 这里的为
egg-demo, 执行命令
npm init egg --type=simple
这里采用的是egg.js官方提供的simple的模板
然后就可以看到项目文件:
image.png
然后执行
npm install命令, 安装相关依赖包, 然后可以使用npm run dev启动项目, 启动之后, 会默认生成一个http://127.0.0.1:7001的路径地址, 文件介绍如下:
image.png
运行项目后, 在浏览器地址栏输入
http://127.0.0.1:7001, 就可以看到页面
image.png
由于电脑还有其他egg.js项目启动, 所以我的是
http://127.0.0.1:7002
- 下面我们开始第一步: 了解路由
具体的相关介绍大家可以移步官网, 我这里就不一一介绍水字数了, 首先我们可以直接点开router.js文件
image.png
里面是帮我们配好了自带的home.js的路由, 文件路径在app/controller/home.js
image.png
我们在浏览器页面显示的hi egg就是这个文件显示的,ctx.body = 'hi, egg';
为了了解相关, 我们在app/controller/目录下创建一个product.js的文件
const Controller = require("egg").Controller; // 引入Controller组件
class ProductController extends Controller { // 需使用驼峰命名法
async index() {
const { ctx } = this;
ctx.body = "hello, product!";
}
}
module.exports = ProductController;
然后到router.js文件声明, 为get请求
module.exports = app => {
const { router, controller} = app;
router.get('/', controller.home.index);
router.get("/product", controller.product.index);
}
然后在页面路径改为http://127.0.0.1:7001/procuct, 如图:
image.png
然后介绍一下
get请求的传参, 一般分为两种,
第一种为:
http://127.0.0.1:7001/product?id=100&name=张三
第二种为:
http;//127.0.0.1:7001/product/123
image.png
看图就知道, 第一种为
query的方式, 第二种为params方式, 在路由定义
image.png
在页面可以看到:
image.png
image.png
当然, 这里打印的是对象, 如果要取值的话,
ctx.query.id, ctx.query.name, 关于第二种的话就是ctx.params.id
- router的其他请求
经常用的其实也就是get,post,put,delete我们说的增删改查
image.png
先在config/config.default.js增加如下配置, 后面需要用到postman工具
然后在controller/product.js处, 添加我们的增删改查接口
image.png
然后在路由表添加如下请求
router.get("/product", controller.product.index); // 列表数据
router.post("/product/create", controller.product.create); // 新增接口
router.put("/product/update/:id", controller.product.update); // 修改接口
router.delete("/product/delete/:id", controller.product.delete); // 删除接口
image.png
路由处添加完后, 回到我们的product.js处, 找到create接口, 在里面接收
image.png
然后打开postman软件, 模拟请求我们的新增接口
image.png
image.png
可以看到, 是请求成功的, 接下来我们看修改请求和删除请求, 这两个请求有点类似, 所以放一起说了
image.png
在controller/product.js处的update和delete方法处, 写好代码, 然后到postman处, 尝试去请求, 是否可以拿到ID
image.png
image.png
image.png
可以看到, 都是OK的, 可以拿到相对应的参数
下面我们来说一下它的service服务
-
Service服务
具体详情, 可看官方文档, https://www.eggjs.org/zh-CN/basics/service, 我们在这里就不多写了, 具体逻辑, 校验啥的往里丢就行了
image.png
然后我们在app文件夹下, 新建一个service的文件, 里面再创建一个product.js的文件, 然后模拟一个列表返回请求, 因为我们现在还没到连接数据库阶段, 所以先进行模拟
const Service = require("egg").Service;
class ProductService extends Service {
async index() {
return {
id: 100,
name: "西瓜",
weight: 100
}
}
}
module.exports = ProductService;
然后我们回到路径为app/controller/product.js文件, 在index()方法中稍做修改
image.png
然后再到浏览器
image.png
可以看到, 是返回成功的
那我们在路径为
app/controller/home.js里面是否可以使用到service/product.js里的内容呢?我们一起来试一试
"use strict"
const Controller = require("egg").Controller;
class HomeController extends Controller {
async index() {
const { ctx } = this;
const res = await ctx.service.product.index();
ctx.body = res;
// ctx.body = "hi, egg";
}
}
module.exports = HomeController;
image.png
可以看到, 这样也是OK的, 到了这里, 我们了解egg基础的到这里就结束了, 基于现在都是前后端分离的模式, 后面还会出一节使用egg.js+mongodb+vue3的前后端分离文章
ejs模板引擎
到了这里, 也说一个egg.js的模板引擎, 也就是egg.js官网中的模板渲染: https://www.eggjs.org/zh-CN/core/view, 但我们在这里说的是ejs的一个模板, 全称egg-view-ejs相对来说比较成熟, 给大家放个链接https://www.npmjs.com/package/egg-view-ejs
image.png
image.png
先进行安装
npm install egg-view-ejs --save, 安装完毕后, 在路径为config/plugin.js里面, 复制上面的配置
image.png
然后在路径为
config/config.default.js文件上, 继续配置
image.png
配置完后, 我们在
app文件夹下, 新建一个名为view的文件夹, 然后在view的文件夹下, 新建一个index.html的文件
image.png
然后到路径为
app/controller/home.js文件下, 使用ctx.render()进行渲染, 第一个值为路径, 第二个值为要传进去的变量
image.png
然后回到index.html, 把传进来的变量, 添加进去, ejs使用变量, 有一个特定的格式, 为
<%=变量%>
image.png
然后我们在浏览器输入127.0.0.1:7001
image.png
可以看到, 这是OK的, 那我们怎么在里面渲染列表呢?我们来试一试, 在home.js里面写一个list数组
image.png
然后在index.html页面上, 写一个
ul列表, 使用for循环, 感觉和PHP的是不是差不多
image.png
然后我们去浏览器页面, 可以看到, 是渲染出来的
image.png
如何使用静态资源呢, 也是一样的, egg.js的静态资源是统一放在public文件夹的, 下面我们在public文件夹进行下演示, 创建
css, image, js三个文件夹, 然后在index.html中引入
image.png
image.png
image.png
好了, 这次的就说到这里了, 如果有对ejs感兴趣的, 可以移步https://ejs.bootcss.com/ 官网看看
如果本次的分享对你有用, 请动动你的小手点个赞哦