本文共 5792 字，大约阅读时间需要 19 分钟。

这里面我们需要插件 这里的内容有与前面的【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/articlesconst 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组件的局部引用 要记得配置路由<template>  <div id="app">    <router-view/>    <van-tabbar v-model="active">      <van-tabbar-item icon="home-o">首页</van-tabbar-item>      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>    </van-tabbar>  </div></template><script>import { Tabbar, TabbarItem } from 'vant';export default {  name:'app',  components:{    [Tabbar.name]:Tabbar,    [TabbarItem.name]:TabbarItem  },  data(){    return{      active:'home'    }  }}</script><style>body,html{  height: 100%;}#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  height: 100%;}</style>

add.vue文件

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

<template>  <div id="add_articles">  //上传图片 部分 自带了 一个方法 当图面显示到渲染界面后触发 他有一个value值 里面包含图片的属性     <div class="upload_box">      <van-uploader :show-upload="showUpLoad" v-model="fileList" :after-read="afterRead" />    </div>    <div>      <!-- 输入任意文本 -->      <van-field v-model="articleInfo.title" type="text" label="文章标题" />      <!-- 输入手机号，调起手机号键盘 -->      <van-field v-model="articleInfo.summery" type="text" label="文章描述" />      <!-- 允许输入正整数，调起纯数字键盘 -->      <van-field v-model="articleInfo.content" type="textarea" label="文章内容" />    </div>    //提交按钮    <div style="height:44px">      <van-button class="publish_btn" type="primary" @click="publish">发布</van-button>    </div>  </div></template><script>import { Uploader, Field, Button } from "vant";import moment from 'moment'export default {  name: "add_articles",  components: {    [Uploader.name]: Uploader,    [Field.name]: Field,    [Button.name]: Button  },  data() {    return {      showUpLoad: true,      fileList: [], //图片的数据集合      articleInfo: { //要上传的数据对象        title: "",        summery: "",        content: "",        createTime: ""      },      img: "" //图片信息     };  },  methods: { //上面提交图片自带的方法    afterRead(value) {      console.log(value)      this.showUpLoad = false;      this.img = value.file;    },    publish() {      let formData = new FormData();      //将时间格式更改为适合上传数据库的格式      this.articleInfo.createTime = moment(new Date()).format(        "YYYY-MM-DD HH:mm:ss"      );      //下面是将各种数据上传到fromData中       formData.append("title", this.articleInfo.title);      formData.append("summery", this.articleInfo.summery);      formData.append("content", this.articleInfo.content);      formData.append("img", this.img);      formData.append("creatTime", this.articleInfo.createTime);      //发送数据      this.$http        .post("http://localhost:7001/articles/publish", formData)        .then(res => {          console.log(res);        });    }  }};</script><style scoped>#add_articles {  padding-top: 15px;  position: relative;  height: 100%;}.upload_box {  text-align: center;}.publish_btn {  width: 100%;  position: relative;  bottom: -290px;}</style>

转载地址：http://cuij.baihongyu.com/