Vue + Django

作者: Pretty_Boy | 来源:发表于2018-09-04 13:13 被阅读940次

写在开头：
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 更新将在以下附注后增加。

https://github.com/RogersLei/django-vue

附注：

Vue添加事件所用到的修饰符：

Vue事件绑定修饰符
Django中模糊查询用到的语法：

YourModels.objects.filter(headline__contains=str)
字段名__contains / __icontains 忽略大小写

Vue + Django

Vue中的安装与插件配置

Django中的安装与插件配置

后端：

前端：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读