二、安装Egg.js及项目配置和相关使用

作者: 执笔于情 | 来源:发表于2022-07-28 14:33 被阅读0次

二、安装Egg.js及项目配置和相关使用
egg-mongoose使用总结
如何使用react进行热加载
vue.js前台+egg.js后台+mongo数据库实现简单的增
sequelize-typescript安装配置
腾讯云 Serverless 部署应用耗时降低了 73%
Laravel5.1框架的安装配置及使用逻辑
egg教程
分布式文件系统FastDFS安装教程1（安装、配置、部署、防盗链
20年第35周：Nginx配置教程

紧接上文, 配置好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
可以看到, 都是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