緊接上文, 配置好mongodb環(huán)境后, 我們就要開始創(chuàng)建Egg.js項目了

附注: 此次是windows環(huán)境項目, node.js版本8.x以上, 也不怎么講原理, 主要是先上手
首先附上Egg.js文檔目錄: https://www.eggjs.org/zh-CN/intro/quickstart

• 安裝Egg.js, 新創(chuàng)建一個文件夾, 這里的為egg-demo, 執(zhí)行命令

npm init egg --type=simple

這里采用的是egg.js官方提供的simple的模板
然后就可以看到項目文件:

image.png

image.png

image.png

• 下面我們開始第一步: 了解路由
  具體的相關(guān)介紹大家可以移步官網(wǎng), 我這里就不一一介紹水字數(shù)了, 首先我們可以直接點開router.js文件
  
  image.png
  
  里面是幫我們配好了自帶的home.js的路由, 文件路徑在app/controller/home.js
  
  image.png
  
  我們在瀏覽器頁面顯示的hi egg就是這個文件顯示的, ctx.body = 'hi, egg';
  為了了解相關(guān), 我們在app/controller/目錄下創(chuàng)建一個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的其他請求
  經(jīng)常用的其實也就是get, post, put, delete我們說的增刪改查
  
  image.png
  
  先在config/config.default.js增加如下配置, 后面需要用到postman工具
  然后在controller/product.js處, 添加我們的增刪改查接口
  
  image.png

然后在路由表添加如下請求

router.get("/product", controller.product.index); // 列表數(shù)據(jù)
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服務(wù)

具體詳情, 可看官方文檔, 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基礎(chǔ)的到這里就結(jié)束了, 基于現(xiàn)在都是前后端分離的模式, 后面還會出一節(jié)使用egg.js+mongodb+vue3的前后端分離文章

ejs模板引擎

到了這里, 也說一個egg.js的模板引擎, 也就是egg.js官網(wǎng)中的模板渲染: 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