紧接上文, 配置好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

image.png

image.png

• 下面我们开始第一步: 了解路由
  具体的相关介绍大家可以移步官网, 我这里就不一一介绍水字数了, 首先我们可以直接点开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

image.png

image.png

image.png

image.png

• 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

image.png

image.png

image.png

image.png

image.png

image.png

image.png

• Service服务

具体详情, 可看官方文档, https://www.eggjs.org/zh-CN/basics/service, 我们在这里就不多写了, 具体逻辑, 校验啥的往里丢就行了

image.png

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

"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

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png