egg.js【4-往数据库中传数据】

这里面我们需要插件 这里的内容有与前面的【1、2、3】所相连 部分内容不再解释

$ npm i mz-modules --save会在下面的内容中使用
$ npm i commit --save  数据格式化方法

并且 为了快速搭建界面 这里用到了vant 组件

我们先看后台的代码

首先我们要在//app/config/config.default.js文件里
添加crsf 这也是解决post请求时 报403 foibidden的方法
//解决跨域
  config.security = {
	  //就是这里
    csrf: { 
      enable: false,
      ignoreJSON: true
    },
    domainWhiteList: ['*'],
  }
  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  };

书写请求函数

首先我们需要在//app/controller/articles里书写接口函数
const Controller = require('egg').Controller;
const fs = require('fs') // fs是nodejs的文件模块 可以对项目中的文件进行增删改查操作
const path = require('path')
const pump = require('mz-modules/pump')
class ArticlesController extends Controller {
//请求数据的接口函数
  async articles() {
    const { ctx } = this
    var result = await ctx.service.articles.article()
    //   console.log(result)
    ctx.body = {
      code: 1,
      msg: 'success',
      data: result
    }
  }
  // 文章发布接口
  async publish() {
    const { ctx } = this
    const parts = ctx.multipart({ autoFields: true })
    // console.log(parts)
    let stream = await parts()
    // console.log(stream)
    // console.log(path.extname(stream.filename))
    var params = parts.field
    if(stream) {
      // extname可以获取文件的扩展名
      let filename = (new Date().getTime() + Math.random().toString(36).substr(2) + path.extname(stream.filename).toLocaleLowerCase())
      // console.log(filename)
      let target = 'app/public/imgs/' + filename
      params.img = 'http://localhost:7001/public/imgs/' + filename
      // createWriteStream 穿件一个写文件流的方法 可以将文件写入本地文件中
      // createReadStream 读取文件内容的方法
      let writeStream = fs.createWriteStream(target)
      await pump(stream, writeStream);
    }
    // console.log(parts.field, parts.fields)
    let result = await ctx.service.articles.publish(params)
    // console.log(result)
    ctx.body = {
      code: 1,
      msg: result
    }
  }
}

module.exports = ArticlesController

书写服务

之后我们在//app/servie/articels里书写传输数据接口函数
// app/service/articles
const Service = require('egg').Service;

class ArticeService extends Service {
    //请求数据
    async article() {
      const { app } = this
      var result = app.mysql.select('articles')
      console.log(result)
      return result
    }
    //传输数据
    async publish(params) {
      console.log(params)
      const { app } = this
      try {
        var result = app.mysql.insert('articles', params);
        return '发布成功'
      } catch(err) {
        console.log(err)
        return err
      }
    }
  }
  module.exports = ArticeService

书写接口

然后在//app/router.js 书写接口
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/login', controller.login.login);
  router.get('/gengyanfeng', controller.gengyanfeng.qiangpozheng);
  router.get('/html', controller.html.list);
  // 文章列表接口
  router.get('/articles', controller.articles.articles);
  //文章上传接口
  router.post('/articles/publish', controller.articles.publish) 
};

下面是前台的代码

App.vue文件

//首先我们在app.vue中书写了跳转 这里用的是vant组件的局部引用 要记得配置路由

add.vue文件

• 接下来就是在我们的上传界面书写