图书管理系统（modelviewset）前后端调联

使用view Djang接口

books/view

INSTALLED_APPS = [
    'books.apps.BooksConfig',

    'corsheaders',
    'rest_framework',
    'django_filters',

]

配置跨域

#1.添加cors  注销csrf
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


#2.添加
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080',
)

books/models

from django.db import models


# Create your models here.

class Book(models.Model):
    name = models.CharField(max_length=32)
    price = models.IntegerField()
    datatime = models.DateTimeField(auto_now=True)
    browse = models.IntegerField(default=0)

    class Meta:
        db_table = "图书"

books/serializers

"""
author:翔翔
date:
use:
"""
from rest_framework import serializers
from .models import *


class BookSerializer(serializers.Serializer):
    id = serializers.CharField(read_only=True)
    name = serializers.CharField()
    price = serializers.IntegerField()
    browse = serializers.IntegerField()
    datatime = serializers.DateTimeField()

    class Meta:
        model = Book


class BooksModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = "__all__"

迁移数据库

python  manage.py makemigrations
python manage.py  migrate

books/views(使用View)

"""
author:翔翔
date:
use:
"""
import json

from django.http import JsonResponse, HttpResponse
from django.shortcuts import render
from django.views import View
from rest_framework.response import Response
from rest_framework.views import APIView
from .serializers import *
from .models import *
from rest_framework.viewsets import ModelViewSet
from rest_framework.permissions import AllowAny, IsAdminUser, IsAuthenticated, IsAuthenticatedOrReadOnly, BasePermission


class BooksModelViewSet(ModelViewSet):
    permission_classes = [AllowAny, ]   #自定义权限
 
    queryset = Book.objects.all()
    serializer_class = BooksModelSerializer

books/urls

from django.urls import path
from rest_framework.routers import DefaultRouter
from .views2 import *

router = DefaultRouter()
router.register(r'book1', BooksModelViewSet)  # modelviewset 接口  增删改查
urlpatterns = [
]

urlpatterns += router.urls

Vue页面

下载axios@0.19.2 下载element-ui
1. cnpm install --save axios@0.19.2
2. cnpm install --save element-ui
  1. src/main.js引用全局
  2. ```
  //element
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  Vue.use(ElementUI)
```

配置跨域

在http/index.js

import axios from 'axios'
// axios.defaults.baseURL = "http://127.0.0.1:8000/"
axios.defaults.baseURL = "http://192.168.56.100:8888/"


//全局设置网络超时
axios.defaults.timeout = 10000;

//设置请求头信息
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';


axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    const token = localStorage.getItem("token")
    // console.log(token)
    if (token) {
      config.headers.Authorization = 'JWT ' + token
    }
    return config;
  },
  error => {
    return Promise.error(error);
  })


axios.interceptors.response.use(
  // 请求成功
  res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

  // 请求失败
  error => {
    if (error.response) {
      // 判断一下返回结果的status == 401？  ==401跳转登录页面。  ！=401passs
      // console.log(error.response)
      if (error.response.status === 401) {
        // 跳转不可以使用this.$router.push方法、
        // this.$router.push({path:'/login'})
        window.location.href = "http://127.0.0.1:8080/"
      } else {
        // errorHandle(response.status, response.data.message);
        return Promise.reject(error.response);
      }
      // 请求已发出，但是不在2xx的范围
    } else {
      // 处理断网的情况
      // eg:请求超时或断网时，更新state的network状态
      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
      // store.commit('changeNetwork', false);
      return Promise.reject(error.response);
    }
  });


// 封装xiaos请求

// 封装get请求
export function axios_get(url, params) {
  return new Promise(
    (resolve, reject) => {
      axios.get(url, {params: params})
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
        reject(err.data)
      })
    }
  )
}

// 封装post请求
export function axios_post(url, data) {
  return new Promise(
    (resolve, reject) => {
      // console.log(data)
      axios.post(url, JSON.stringify(data))
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
        reject(err.data)
      })
    }
  )
}

// 封装put请求
export function axios_put(url, data) {
  return new Promise(
    (resolve, reject) => {
      // console.log(data)
      axios.put(url, JSON.stringify(data))
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
        reject(err.data)
      })
    }
  )
}

// 封装delete请求
export function axios_delete(url, data) {
  return new Promise(
    (resolve, reject) => {
      // console.log(data)
      axios.delete(url, {params: data})
        .then(res => {
          // console.log("封装信息的的res", res)
          resolve(res.data)
        }).catch(err => {
        reject(err.data)
      })
    }
  )
}

在http/apis.js

/* eslint-disable */

import {axios_get, axios_post, axios_delete, axios_put} from './index.js'

export const getBooks = (params, headers) => axios_get("/books/book1/", params, headers)
export const AddBooks = (params, headers) => axios_post("/books/book1/", params, headers)
export const UpBooks = (params, headers) => axios_put("/books/book1/" + params.id + '/', params, headers)
export const DelBooks = (params, headers) => axios_delete("/books/book1/" + params.id + '/', params, headers)

views/book-manage/books.vue

<template>

  <div>
    <el-button type="primary" @click="add">上传图书<i class="el-icon-upload el-icon--right"></i></el-button>
    <el-button type="primary" @click="open">上传图书<i class="el-icon-upload el-icon--right"></i></el-button>
    <el-table
      :data="tableData"
      style=" 100%">
      <el-table-column
        label="日期"
        width="300">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.datatime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="书名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>书名: {{ scope.row.browse }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="价格"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>书名: {{ scope.row.price }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.price }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="浏览数"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>书名: {{ scope.row.name }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.browse }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.id,scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <BookEdit
      :visible.sync='dialogVisible'
      :data="editData"
      @book="book"
    ></BookEdit>
  </div>

</template>

<script>
import {AddBooks, DelBooks, getBookList, getBooks, UpBooks} from "../../http/apis";
import BookEdit from "./components/BookEdit";

export default {
  name: "Books",
  components: {
    BookEdit,

  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      editData: {  // 编辑的内容
        name: "",
        datetime: "",
        price: 0,
        browse: 0
      }
    }
  },
  methods: {
    show() {
      getBooks().then(res => {
        console.log(res)
        this.tableData = res.results

      })
    },
    handleEdit(pk, books_list) {
      this.editData = books_list
      this.dialogVisible = true
      console.log(books_list)
    },
    handleDelete(pk) {
      DelBooks({id: pk}).then(res => {
        console.log(res)
        this.show()
      }).catch(err => {
        this.show()

      })
    },
    add() {
      this.dialogVisible = true
    },

    book() {
      if (this.editData.id) {
        let params = {id: this.editData.id}
        console.log(params)
        UpBooks(this.editData).then(res => {
          console.log(res)
          this.show()
        })
      } else {
        AddBooks(this.editData).then(res => {
          console.log(res)
          this.show()
        }).catch(err => {
          this.show()
        })
      }
    },
    open() {
      this.$prompt('请输入邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }


  },
//钩子方法
  mounted() {
    console.log('这是初始化方法');
  }
  ,
  created() {
    this.show()
  }
  ,
//监听属性
  watch: {}
  ,
//计算属性
  computed: {}
}
</script>

<style scoped>

</style>

views/book-manage/components/BookEdit

<template>
  <div>
    <div>
      <el-dialog
        :visible="visible"
      >
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <!--        <el-form :label-position="labelPosition" label-width="80px" :model="data">-->
        <el-form :label-position="labelPosition" label-width="80px">
          <el-form-item label="书名">
            <el-input v-model="data.name"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="data.price"></el-input>
          </el-form-item>
          <el-form-item label="浏览数">
            <el-input v-model="data.browse"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="danger" round @click="cancel">取 消</el-button>
        <el-button type="success" round @click="book">提交</el-button>
      </el-dialog>
    </div>

  </div>

</template>

<script>
export default {
  name: "BookEdit",
  props: ['data', 'visible'],
  data() {
    return {
      labelPosition: 'right',
      // formLabelAlign: {
      //   name: '',
      //   region: '',
      //   type: ''
      // }
    }
  },
  methods: {
    cancel() {
      //$emit(update: prop, "newPropVulue")  这个模式，使子组件向父组件传达：更新属性，并抛出新的属性值
      this.$emit('update:visible', false)
    },
    book() {
      this.$emit('update:visible', false)
      this.$emit('book')
    },
  },


  //钩子方法
  mounted() {
    console.log('这是初始化方法');
  },
  created() {

  },
  //监听属性
  watch: {},
  //计算属性
  computed: {}
}
</script>

<style scoped>

</style>

图书管理系统（modelviewset）前后端调联

使用view Djang接口

books/view

注册

配置跨域

books/models

books/serializers

迁移数据库

books/views(使用View)

books/urls

Vue页面

配置跨域

在http/index.js

在http/apis.js

views/book-manage/books.vue

views/book-manage/components/BookEdit