一、任务
- 完成博客编辑页的搭建
- 解决跨域问题(后端Django解决)
- 网络请求库的封装以及文章业务的封装
- 与后端完成交互,将文章保存保存到数据库中
二、博客编辑页的搭建
主要使用ElementUI中的模板表单中的代码,修修改改即可完成:
<template>
<h2>文章编辑</h2>
<el-form ref="form" label-width="80px">
<el-form-item label="文章标题">
<el-input placeholder="请输入标题" v-model="formData.title"></el-input>
</el-form-item>
<el-form-item label="文章摘要">
<el-input type="textarea" v-model="formData.abstract" placeholder="请输入摘要"></el-input>
</el-form-item>
</el-form>
<v-md-editor @change="editorChange" height="700px"></v-md-editor>
<el-button type="primary" @click="onSubmit">保存提交</el-button>
<el-button type="danger" @click="onSubmit">清除数据</el-button>
</template>
<script>
export default {
name: "BlogEditorPage",
components:{
},
data(){
return {
formData: {
title: "",
abstract:"",
contentHtml: ""
}
}
},
methods: {
editorChange(text, html){
this.formData.contentHtml = html;
},
onSubmit(){
console.log("提交");
}
}
}
</script>
效果:
三、解决跨域问题
由于我的后端是使用Django搭建的,可以插入两个中间件即可解决跨域
后端Django先下载 django-cors-headers:
pip install django-cors-headers
settings.py添加app:
INSTALLED_APPS = [
...
'corsheaders',
...
]
添加中间件:
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
最后再添加一句:
MIDDLEWARE = [
...
]
CORS_ORIGIN_ALLOW_ALL = True <---添加
这样跨域问题就完全解决了。
四、引入第三方ajax库axios并对其进行封装
下载并引入axios
下载:
npm install axios --save
引入:
先在network文件夹中新建request.js(模块化的思想)
写入:(主要是对拦截器进行了一层的封装,虽然现在还用不到)
import axios from "axios";
export function request(config) {
// 1.创建axios实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
// 2.axios的拦截器
// 2.1请求拦截
instance.interceptors.request.use(config=>{
// console.log(config)
return config
}, error => {
console.log(error)
})
//2.2响应拦截
instance.interceptors.response.use(res =>{
// console.log(res)
return res.data
}, error => {
console.log(error)
})
// 3.发送真正的网络请求
return instance(config);
}
再新建blog.js文件,即为博客编辑与保存提供相应的接口
当前后端已经写好的接口:
文章接口
方式 | url | 功能 |
---|---|---|
get | /blog/articles/ | 提供所有文章记录 |
post | /blog/articles/ | 新增一篇文章 |
get | /blog/articles/<pk>/ | 提供指定id的文章 |
put | /blog/articles/<pk>/ | 修改指定id的文章 |
delete | /blog/articles/<pk>/ | 删除指定id的文章 |
post | /blog/articles/<pk>/article_op_tag/ | * 为指定文章添加一个标签 |
delete | /blog/articles/<pk>/article_op_tag/ | * 为指定文章删除一个标签 |
分类标签接口
方式 | url | 功能 |
---|---|---|
get | /blog/article_tags/ | 提供所有标签记录 |
post | /blog/article_tags/ | 新增一个标签 |
get | /blog/article_tags/<pk>/ | 提供指定id的标签 |
put | /blog/article_tags/<pk>/ | 修改指定id的标签 |
delete | /blog/article_tags/<pk>/ | 删除指定id的标签 |
则我们按照接口为前端也封装一层接口方便调用即可。
// /network/blog.js
import {request} from "@/network/request";
import axios from "axios";
// 获取全部博客文章
export function getArticles(){
return axios.get('/blog/articles/')
}
// 新增一篇文章
export function postArticles(title, abstract, contentHtml){
return request({
method: "post",
url: '/blog/articles/',
data: {
article_title: title,
article_abstract: abstract,
article_content: contentHtml
}
})
}
// 根据id获取单篇文章
export function getArticle(id){
return request({
url: '/blog/articles/'+id+'/'
})
}
export function putArticle(id, title, abstract, contentHtml){
return request({
method: "put",
url: '/blog/articles/'+id+'/',
data: {
article_title: title,
article_abstract: abstract,
article_content: contentHtml
}
})
}
export function deleteArticle(id){
return request({
method: "delete",
url: '/blog/articles/'+id+'/'
})
}
...后面类似
五、调用接口与后端进行交互
由于之前学习vue搭建项目都是使用的vue2.x,而这次本来想体验一下新鲜技术使用了vue3.x,结果踩坑到破防了,有好些莫名其妙的改动,实在是受不了了,于是只能将项目移植到新建的vue2.x中(好在移植的过程并不困难,就是安装第三方包如elementUI之类的时候需要注意一下vue的版本以及不同版本间的差距即可)。
移植后,先为文章编辑页添加文章类别下拉菜单,在组件挂载的时候先使用网络请求将数据请求回来:
mounted() {
blogRequest.getSortTags().then(res=>{
this.existingTags = res
})
},
渲染上去:
...
<el-form-item label="文章分类">
<el-select
v-model="formData.sortTagIds"
multiple
filterable
allow-create
default-first-option
placeholder="请选择文章分类">
<el-option v-for="(tag, index) in existingTags" :key="tag.id" :label="tag.tag_name" :value="tag.id">
</el-option>
</el-select>
</el-form-item>
...
效果:
文章上传
分别先后上传文章的接口和添加标签的接口
onSubmit(){
blogRequest.postArticles(this.formData.title, this.formData.abstract, this.formData.contentHtml)
.then(res => {
console.log(res)
blogRequest.articleAddTags(res['id'], this.formData.sortTagIds)
.then(res=>{
console.log("add tag res:", res)
})
})
},
这样即完成了基本的文章上传。
上一步:Vue+DRF搭建博客之后端篇(二)
下一步:Vue+DRF搭建博客之后端篇(三)