Vue + Django
2018-09-04 本文已影响940人
Pretty_Boy
写在开头：
1看这里的时候，请确保你已将熟悉JavaScript以及了解Vue的语法， Django的语法也略懂一二。
如果不是很了解，请点击这里查看学习文档Vue、Django，否则下文可能有些不好理解。
2文章有点长 ，因为包含了一个Index.vue页面。
3第一次写长文章，所以排版很尴尬，请指正。
Vue中的安装与插件配置
- 安装Vue环境
- 安装element-ui组件 使用其组件美化界面
npm i element-ui -S || npm install element-ui --save
main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
- 安装axios 使用其完成前端到后端的请求
由于axios 使用Vue.use(无效)，所以要将其绑定在Vue原型上
npm install axios --save | brew install axios --save
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000' //设置axios根路径
// 此处一定不要忘记http:// 否则会报错，一样无法访问（无论是否同源、关于同源政策，请自行百度）
Vue.prototype.$axios = axios
Django中的安装与插件配置
- 安装Django及配置环境
- 配置mysql数据库，使用sqlite3的 跳过此步骤无需配置
settings.py
DATABASES = {
'default': { #
'ENGINE': 'django.db.backends.mysql', # 不同库有不同的殷勤
'NAME': 'python_use', # 使用的库名
'USER': 'root',
'PASSWORD': '',
'HOST': '127.0.0.1',
'PORT': '3306',
}
}
配置完成后请查看django是否报错，不报错即连接成功
- 安装 pip 及 django-cors-headers
// 这里只能使用pip安装 不支持brew 和 npm
pip install django-cors-headers
settings.py
# 导入cors模块
INSTALLED_APPS = {
...
'corsheaders',
...
}
# 添加cors的中间件
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
...
# 尽可能将这两条放在前面
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
# 最后设置允许所有跨域 或者 设置允许跨域的白名单 以下二选一
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
# 'localhost:8080',
# '127.0.0.1:9000'
# )
至此，已将Vue和Django安装并配置好，接下来写一个简单的CRUD操作。
请确认你的整个项目目录与此类似
项目目录结构
以下使用的目录均为此图所示
后端：
- 配置路由
first/urls.py
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'', include('crud.urls')),
]
crud/urls.py
# 根据请求类型的不同采用不同的路由配置
# 在这里请确保在first/settings.py中设置过
# APPEND_SLASH = False
from django.conf.urls import url
from . import views
urlpatterns = [
url('create/', views.create, name = 'create'),
url('read', views.read, name = 'read'),
url('update/', views.update, name = 'update'),
url('delete/', views.delete, name = 'delete'),
url('search', views.search, name = 'search')
]
- 创建models，即在数据库中创建表
from django.db import models
class Books ( models.Model ):
book_name = models.CharField( max_length = 255 )
book_price = models.DecimalField( max_digits = 5, decimal_places = 2 )
book_time = models.DateTimeField( '保存日期', auto_now_add = True )
Models创建完成后运行命令 将其应用到数据库中并创建表
如果不懂 请返回顶部阅读Django文档
python manage.py makemigrations
python manage.py migrate
- 编写views.py 完成增删改查的逻辑
# 1 获取前端传递来的参数
# 1.1 get方法发送的参数
request.GET['content']
# 1.2 post方法发送的参数
obj = json.loads(request.body)
name = obj['name']
# 2 由于使用Books.objects下的方法，获取到的数据为Query Set类型，
# 所以需要使用serializers.serialize("json", books)
# 将查询到的数据进行序列化，变成可读的对象。
# 3 向前端返回处理结果
return HttpResponse(json.dumps(res), content_type="application/json")
# 将res变成json字符串返回给前端。
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from django.http import HttpResponse
import json
from django.core import serializers
from django.utils import timezone
from crud.models import Books
def search(request):
content = request.GET['content']
try:
books = serializers.serialize("json",Books.objects.filter(book_name__contains=content))
res = {
"code": 200,
"data": books
}
print(books)
except Exception,e:
res = {
"code": 0,
"errMsg": e
}
return HttpResponse(json.dumps(res), content_type="application/json")
def create(request):
print('create')
obj = json.loads(request.body)
name = obj['name']
price = obj['price']
try:
book = Books(book_name=name, book_price=price, book_time=timezone.now())
book.save()
res = {
"code": 200,
}
except Exception,e:
res = {
"code": 0,
"errMsg": e
}
return HttpResponse(json.dumps(res), content_type="application/json")
def read(request):
print('read')
try:
res = {
"code": 200,
"data": serializers.serialize("json",Books.objects.filter())
}
except Exception,e:
res = {
"code": 0,
"errMsg": e
}
return HttpResponse(json.dumps(res), content_type="application/json")
def update(request):
print('update')
obj = json.loads(request.body)
pid = obj['id']
name = obj['name']
price = obj['price']
try:
Books.objects.filter(id=pid).update(book_price=price, book_name=name)
res = {
"code": 200
}
except Exception,e:
res = {
"code": 0,
"errMsg": e
}
return HttpResponse(json.dumps(res), content_type="application/json")
def delete(request):
print('delete')
obj = json.loads(request.body)
print(obj)
pid = obj['id']
try:
Books.objects.filter(id=pid).delete()
res = {
"code": 200
}
except Exception,e:
res = {
"code": 0,
"errMsg": e
}
return HttpResponse(json.dumps(res), content_type="application/json")
前端：
- 配置路由
frontend/src/router/index.js
// 更改 或 添加路由匹配
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Index
}
]
})
- 编写路由中使用到的组件 与上面import所用名称和路径需要一致，请耐心看完注释。
// template 中使用html和element组件语法添加相应的组件： 输入框，按钮，表格等
// script 中 使用JavaScript和Vue语法 声明和绑定数据
// style 本页没有使用特殊的css样式，只是使用了element自带样式
// 如果template中看着费劲，请向上找到element-ui阅读语法
// 在 script 中定义了需要渲染的变量， 以及请求后端接口接收json字符串的数据用来完成增删改查操作
// 请求后端的代码如下：
// axios的get方法和post方法传递参数的格式不同，请留意
// 由于Django的限制 get 和 post 方法 所使用的路由路径不同，请留意
this.$axios.get('/search', {
params: { // 此处名字不可更改
content: this.search // 这里才是真正传递的参数
}
}).then(res => {
console.log(res)
})
this.$axios.post('/delete/', JSON.stringify(row)).then(res => {
// 一定将对象转化称JSON字符串传递
console.log(res)
// 接收到的res格式 经过Django的HttpResponse的包装，你所需要的数据在res.data中
// 请保持在传递数据时使用JSON字符串的好习惯，否则坑无数
})
以下为Index.vue的全部页面，包含增删改查的基本操作，以及更改和新增时的弹出框：
frontend/src/components/Index.vue
<template>
<div>
<el-button type="primary" round @click="handleShowCreate">增加书籍</el-button>
<el-input v-model="search" placeholder="请输入内容" style="width: 200px" @keyup.enter.native="handleSearch"/>
<el-button type="primary" round @click="handleSearch">搜索</el-button>
<el-table :data="booksData" height="250" border style="width: 600px; margin: 40px auto;" v-loading="loading">
<el-table-column
prop="book_name"
label="书名"
align="center"
width="200">
</el-table-column>
<el-table-column
prop="book_price"
label="价格"
align="center"
width="200">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="修改书籍" :visible.sync="dialogUpdateVisible">
<el-form :model="updateData">
<el-form-item label="书籍名称">
<el-input auto-complete="off" v-model="updateData.name"></el-input>
</el-form-item>
<el-form-item label="书籍价格">
<el-input-number v-model="updateData.price" :precision="2" :step="0.01" :max="9999"></el-input-number>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel('dialogUpdateVisible')">Cancel</el-button>
<el-button type="primary" @click="handleConfirm('dialogUpdateVisible')">Submit</el-button>
</div>
</el-dialog>
<el-dialog title="增加书籍" :visible.sync="dialogCreateVisible">
<el-form :model="createData">
<el-form-item label="书籍名称">
<el-input auto-complete="off" v-model="createData.name"></el-input>
</el-form-item>
<el-form-item label="书籍价格">
<el-input-number v-model="createData.price" :precision="2" :step="0.01" :max="9999"></el-input-number>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel('dialogCreateVisible')">Cancel</el-button>
<el-button type="primary" @click="handleCreate('dialogCreateVisible')">Submit</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
search: '',
booksData: [],
oldData: {},
updateData: {},
createData: {
name: '',
price: 0
},
dialogUpdateVisible: false,
dialogCreateVisible: false,
loading: true
}
},
methods: {
handleShowCreate () {
this.dialogCreateVisible = true
},
handleCreate () {
if (this.createData.name === '') {
this.$message.error('please input book name')
return
}
if (this.createData.price === 0) {
this.$message.error('please input book price')
return
}
this.$axios.post('/create/', JSON.stringify(this.createData)).then(res => {
if (res.data.code === 200) {
this.$message.success(`create ${this.createData.name} success`)
this.dialogCreateVisible = false
this.handleRead()
} else {
this.$message.error("can't read books database")
}
})
console.log(this.createData)
},
handleRead () {
this.booksData = []
this.$axios.get('/read').then(res => {
this.loading = false
if (res.data.code === 200) {
let books = JSON.parse(res.data.data)
for (let i in books) {
books[i].fields.id = books[i].pk
books[i].fields.book_price = Number(books[i].fields.book_price)
this.booksData.push(books[i].fields)
}
console.log(this.booksData)
} else {
this.$message.console.error("can't read books database")
}
}).catch((res) => {
console.log(res)
})
},
handleUpdate (index, row) {
this.dialogUpdateVisible = true
this.updateData = Object.assign({}, {
id: row.id,
name: row.book_name,
price: row.book_price,
time: row.book_time
})
this.oldData = Object.assign({}, {
id: row.id,
name: row.book_name,
price: row.book_price,
time: row.book_time
})
},
handleDelete (index, row) {
this.$confirm(`are you sure to delete ${this.updateData.name} ?`, '', {
confirmButtonText: 'submit',
cancelButtonText: 'cancel',
type: 'warning'
}).then(() => {
this.$axios.post('/delete/', JSON.stringify(row)).then(res => {
if (res.data.code === 200) {
this.$message.success(`delete ${this.updateData.name} success`)
this.handleRead()
} else {
this.$message.error("can't read books database")
}
})
}).catch(() => {
this.$message.info('cancel delete')
})
},
handleCancel (arg) {
this.$message.info('cancel')
this[arg] = false
},
handleConfirm (arg) {
if (this.updateData.name === this.oldData.name && this.updateData.price === this.oldData.price) {
this.$message.error('please update something or cancel')
return
}
this[arg] = false
this.$axios.post('/update/', JSON.stringify(this.updateData)).then(res => {
if (res.data.code === 200) {
this.$message.success(`update ${this.updateData.name} success`)
this.handleRead()
} else {
this.$message.error("can't read books database")
}
})
},
handleSearch () {
this.$axios.get('search', {
params: {
content: this.search
}
}).then(res => {
if (res.data.code === 200) {
if (res.data.data && JSON.parse(res.data.data).length > 0) {
this.booksData = []
let books = JSON.parse(res.data.data)
for (let i in books) {
let obj = {
id: books[i].pk,
book_name: books[i].fields.book_name,
book_price: Number(books[i].fields.book_price),
book_time: books[i].fields.book_time
}
this.booksData.push(obj)
}
} else {
this.$message.error(`can't search contains of '${this.search}' in database`)
}
} else {
this.$message.error(`can't search books in database`)
}
})
}
},
mounted () {
this.handleRead()
}
}
</script>
到这里，一个增删改查基本操作的页面就写完了，如果哪里有问题可以留言指正。 git源码以上传， 没事可以star/fork 更新将在以下附注后增加。
附注 ：
-
Vue添加事件所用到的修饰符：
Vue事件绑定修饰符
-
Django中模糊查询用到的语法：
YourModels.objects.filter(headline__contains=str)
字段名__contains / __icontains 忽略大小写
