这里面我们需要插件 这里的内容有与前面的【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组件的局部引用 要记得配置路由
<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>
