一、说明
- 软件安装
- 后端:python、django、djangorestframework、django-cors-hearders
- 前端:nod.js 、vue/cli、axios
- dajngo与vue前后端分离
二、数据流程
![在这里插入图片描述](https://img-blog.csdnimg.cn/85b0f5df497f4d30be856073d8fb176b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_20,color_FFFFFF,t_70,g_se,x_16)
三、后端配置
- 相关软件库安装
python pip install virtualenv django django-cors-headers djangorestframework - 创建项目及djangorestframework配置
注:准备好django中的model(model名统一用model_name)
django-admin startproject test_three
cd test_three
django-admin startapp appthree
![在这里插入图片描述](https://img-blog.csdnimg.cn/3ea2a7d454934274b903608c900ec323.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_12,color_FFFFFF,t_70,g_se,x_16)
from django.db import models
class Blog(models.Model):
title = models.CharField(max_length=30)
content = models.CharField(max_length=300)
class Meta:
db_table = 'tb_blog'
![在这里插入图片描述](https://img-blog.csdnimg.cn/b1ddae322c954a50bcac50e609c0590e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_18,color_FFFFFF,t_70,g_se,x_16)
from rest_framework import serializers
引入Model名
class Model名Serializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Model名
fields = [字段列表] “__all__”
![在这里插入图片描述](https://img-blog.csdnimg.cn/bb992222210c48ebbb536adec39c60e1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_20,color_FFFFFF,t_70,g_se,x_16)
from rest_framework import viewsets
引入Model名
引入新建一个.py件【serializers】Model名Serializer
class Model名ViewSet(viewsets.ModelViewSet):
queryset = Model名.objects.all()
serializer_class = Model名Serializer
Model名与Model名Serializer指向同一个数据库名 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2abac9d3df0442efafb10f8bb9304716.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_17,color_FFFFFF,t_70,g_se,x_16)
from rest_framework import routers
router = routers.DefaultRouter()
router.register(r'users', views.名)
urlpatterns = [
path(' api/', include(router.urls)),
]
![在这里插入图片描述](https://img-blog.csdnimg.cn/606b34b61a34433ebed71f07b2a036c7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_19,color_FFFFFF,t_70,g_se,x_16) 3. 在settings.py配置django-cors-headers
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 放最前面
...
]
CORS_ORIGIN_ALLOW_ALL = True #allow all site request
![在这里插入图片描述](https://img-blog.csdnimg.cn/5fcd24f432fc4a3296b2f05131b676a3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_20,color_FFFFFF,t_70,g_se,x_16)
四、前端
安装前先把npm的镜像替换成淘宝 在国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。 淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 得到原本的镜像地址
npm get registry
https://registry.npmjs.org/
设成淘宝的
npm config set registry
http://registry.npm.taobao.org/
yarn config set registry
http://registry.npm.taobao.org/
换成原来的
npm config set registry https://registry.npmjs.org/
- 安装vue/cli
npm install @vue/cli -g
- 安装axios
npm install --save axios
![在这里插入图片描述](https://img-blog.csdnimg.cn/e6212db10087411299ad1e7f4ee9d806.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_20,color_FFFFFF,t_70,g_se,x_16)
. 创建项目
vue create 项目名
#时间有点长
![在这里插入图片描述](https://img-blog.csdnimg.cn/2f84f66c2a8c4f3e9bf6c393a4917eb8.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/68ebcafd53c842a49c85e5d093cbb487.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaHJqMTk5MDM2,size_20,color_FFFFFF,t_70,g_se,x_16) 3. axios使用
- 新增数据
axios.get(请求地址) axios.功能.then((res)=>{res.data是获取的数据}) - 提交数据,增加
axios.post(请求地址,字典数据) - 更新数据
axios.put(请求地址,字典数据) - 删除数据
axios.delete(请求地址) 要对axios的数据操作用 axios.功能.then(()=>{数据在此操作})
<script>
#导入axios
import axios from 'axios';
export default {
methods:{
getall(){
#获取数据
axios.get(this.base_url)
.then(res=>{
this.blogs=res.data;
this.url='',
this.title='',
this.content=''
})
},
saveBlog(){
if (this.url=='') {
#提交数据,增加
axios.post(this.base_url,{title:this.title,content:this.content})
.then(()=>{
this.getall()
});
}else{
#更新数据
axios.put(this.url,{title:this.title,content:this.content})
.then(()=>{
this.getall()
});
}
},
editblog(blog){
this.url = blog.url;
this.title = blog.title
this.content = blog.content
},
deteleBlog(blog){
#删除数据
axios.delete(blog.url)
.then(()=>{
this.getall()
})
}
},
mounted(){
this.getall()
}
}
</script>
|