Egg.js基础教程

本文主要是介绍Egg.js基础教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

• • 初始化Egg项目
  • • Egg的目录结构
    • • app目录
      • config目录
  • 路由与控制器
  • • 添加一个controller和router
    • 路由获取参数
    • • get请求
      • post请求
      • 简写形式
  • 插件
  • • nunjucks插件
    • egg-cors插件
    • egg-jwt
  • 中间件
  • sequelzie持久化框架
  • • 数据类型对应关系
    • 数据库操作
    • Service的使用

初始化Egg项目

npm init egg --type=simple
npm install
npm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOA1kRN6-1625839895420)(E:\notebook\Egg.js.assets\image-20210522181804542.png)]

启动成功！

Egg的目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vz8CzwjF-1625839895426)(E:\notebook\Egg.js.assets\image-20210522182330818.png)]

app目录

系统开发文件，内有controller、public目录和router文件

public目录中存放静态资源文件，其中的静态资源可以通过url直接访问到，如图中的demo.html,可直接通过http://localhost:7001/public/demo.html访问

config目录

存放配置文件，config.default.js内有项目配置，plugin.js用于配置插件

路由与控制器

添加一个controller和router

1. controller

   const Controller = require("egg").Controller
   
   class FruitsController extends Controller{
   
       async index(){
           // this.ctx是上下文对象
           this.ctx.body = "我是水果" 
       }
   
   }
   
   module.exports = FruitsController
   

2. router.js

   router.get("/fruits", controller.fruits.index)
   

   访问http://localhost:7001/fruits即可访问到

路由获取参数

get请求

普通风格

Controller类中的上下文对象this.ctx中有query属性，用于存放get请求的参数

async index(){
    let query = this.ctx.query
    console.log(query);
    this.ctx.body = `我是水果${query.index}` //上下文对象
}

请求http://127.0.0.1:7001/fruits?index=100

页面显示为：我是水果100

打印出的值为：{ index: ‘100’ }

fastful风格

router.js中添加

router.get("/fruits/:id", controller.fruits.getId)

fruits.js中添加getId方法

async getId(){
    let id = this.ctx.params.id
    this.ctx.body = `id为${id}`
}

通过this.ctx.params.定义的参数名获取参数

post请求

修改config.default.js文件，关闭其 csrf认证

config.security = {
    csrf:{
   	 enable: false,
    },
};

router.js中添加路由

router.post("/createfruit", controller.fruits.createFruit)

fruits.js中获取请求参数

async createFruit(){
    let fruit = this.ctx.request.body
    this.ctx.body = fruit
}

简写形式

router的简化

// router.resources("接口名", "接口url", "控制器")
router.resources("fruits", "/fruits", controller.fruits)

fruits.js

async index() {
    this.ctx.body = fruitsList
}

async new() {
    //添加页面 url为 /new
    this.ctx.body = `
        <form method='post' action='/fruits'>
        <input name = 'fruitname'/>
        <button>添加</button>
        </form>
        `
}

async create(){
    // 添加数据
    let fruit = this.ctx.request.body
    fruitsList.push(fruit.fruitname)
    // get跳转/fruits
    // 重定向
    this.ctx.redirect("/fruits")
}

async destroy(){
    // 删除数据

}

async update(){
    // 修改数据
}

插件

nunjucks插件

安装

npm install --save egg-view-nunjucks

plugin.js引入插件

nunjucks:{
    enable: true,
    package: 'egg-view-nunjucks'
}

config.default.js配置默认模板引擎

config.view = {
    defaultViewEngine: 'nunjucks'
}

模板文件写在app/view中

在controller/home.js中调用模板index.html

async index() {
    const { ctx } = this;

    // 使用index模板
    await ctx.render("index", {fruits:["香蕉","苹果"]})
}

在index.html中使用数据

<ul>
    {% for item in fruits%}
    <li>{{item}}</li>
    {% endfor%}
</ul>

egg-cors插件

此插件解决跨域问题

下载

npm install --save egg-cors

plugin.js配置

cors:{
    enable: true,
    package: 'egg-cors'
}

config.default.js配置

config.cors = {
    origin: "*",
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  }

egg-jwt

下载

npm install --save egg-jwt

plugin.js配置

jwt:{
    enable:true,
    package: "egg-jwt"
}

config.default.js配置

config.jwt = {
    secret:"qianbaobao"
}

jwt的使用

async index(){

    let user = {
        username: "xiaoming"
    }

    // 调用引入的token插件
    const jwt = this.app.jwt
    const secret = this.app.config.jwt.secret
    // 生成token签名
    let token = jwt.sign(user, secret)
    // 解析token
    let decode = jwt.verify(token, secret)
    this.ctx.body = [token,decode]
}

jwt解析token得到对象与签发token的时间戳

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgUrqRAM-1625839895431)(E:\notebook\Egg.js.assets\image-20210525185045527.png)]

中间件

在app目录中新建middelware目录用于存放中间件

function checktoken() {
    return async function (ctx, next) {
        //TODO
    }
}

module.exports = checktoken

使用中间件,router.js中,将中间件写在url与方法之间,即可启用中间件

router.get('/jwtmessage', app.middleware.checktoken(), controller.jwt.getMessage)

sequelzie持久化框架

下载

npm install --save egg-sequelize mysql2

plugin.js引入插件

sequelize:{
    enable: true,
    package: 'egg-sequelize'
}

config.default.js配置

config.sequelize = {
    dialect: 'mysql',
    database: 'egg_demo',
    host: '192.168.129.130',
    port: 3306,
    username: 'root',
    password: 'root',
    timezone: '+08:00'
}

数据类型对应关系

数据库操作

在app/model目录中创建xxx.js,将对应数据库中的xxx表

// 班级表id name
module.exports = app => {
    // 获取数据类型
    const {STRING} = app.Sequelize

    const Clazz = app.model.define('clazz', {
        // 自动生成id
        
        name: STRING
    })

    return Clazz
    
}

在根目录中新建app.js文件

// 系统启动时执行
module.exports = app =>{
    app.beforeStart(async function(){
        // 根据app/model中的模型创建数据库表
        // await app.model.sync({force: true}) //启动时清空数据
        await app.model.sync({})
    })
}

在Controller中的增删改查

this.app.model.Clazz.findAll()//查询数据
this.app.model.Clazz.findAll({where:{id:1}})//条件查询
this.app.model.Clazz.create({name: 'xxx'})//添加数据
this.app.model.Clazz.update({name:'xx'}, {where:{id:1}})//修改数据
this.app.mode.Clazz.destroy({where:{id:1}})//删除数据

Service的使用

service/student.js中

async getStudentList() {

    try {
        let studentList = await this.app.model.Student.findAll()
        return studentList
    } catch (error) {
        return null
    }

}

controller中调用

async index(){
    let list = await this.ctx.service.student.getStudentList()
    
    if (list) {
        this.ctx.body = {
            code: 2000,
            data: list
        }

    } else {

        this.ctx.body = {
            code: 5000,
            msg: '服务器异常'
        }

    }
}

这篇关于Egg.js基础教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！