图书管理系统Django+Vue

配置跨域Django和Vue点击

后端

  1. 图书管理系统后端接口

    1. 1 books/models.py 中设置表

      from django.db import models

# Create your models here.
from django.db import models


class Books(models.Model):
    btitle = models.CharField(max_length=32)
    bpub_date = models.DateField()
    bread = models.IntegerField()
    bcomment = models.IntegerField()
    is_delete = models.BooleanField(default=False)

    2. urls.py 中设置路由

      1. app/urls.py子路由

        from django.urls import path
from . import views

urlpatterns = [
    path('book/', views.BooksView.as_view()),
]

      2. 项目下/urls.py

        """djangoProject URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('books/', include('books.urls')),
]

    3. book/views.py 视图函数

      from django.views import View
from rest_framework.utils import json

from .models import *


# Create your views here.


class BooksView(View):
    def get(self, request):
        books = Books.objects.filter(is_delete=False)
        book_list = books.values('id', 'btitle', 'bpub_date', 'bread', 'bcomment')
        book_list = list(book_list)
        data = {
            "code": 0,
            "msg": "success",
            "books": book_list
        }
        return JsonResponse(data)

    def post(self, request):
        body_json = request.body.decode()
        # print(body_json)
        body_dict = json.loads(body_json)
        # btitle = body_dict.get('btitle')
        # print(btitle)
        # bpub_date = body_dict.get('bpub_date')
        # bread = body_dict.get('bread')
        # bcomment = body_dict.get('bcomment')
        # book = Books(btitle=btitle, bpub_date=bpub_date, bread=bread, bcomment=bcomment)
        # book.save()
        Books.objects.create(**body_dict)
        return JsonResponse({"code": 0, "msg": "success"})

    def put(self, request):
        body_json = request.body.decode()
        body_dict = json.loads(body_json)
        id = body_dict.get('id')
        btitle = body_dict.get('btitle')
        bpub_date = body_dict.get('bpub_date')
        bread = body_dict.get('bread')
        bcomment = body_dict.get('bcomment')
        book = Books.objects.get(id=id)
        book.btitle = btitle
        book.bpub_date = bpub_date
        book.bread = bread
        book.bcomment = bcomment
        book.save()
        return JsonResponse({"code": 0, "msg": "success"})

    def delete(self, request):
        body_json = request.body.decode()
        body_dict = json.loads(body_json)
        id = body_dict.get('id')
        book = Books.objects.get(id=id)
        book.is_delete = True
        book.save()
        return JsonResponse({"code": 0, "msg": "success"})

  2. 2.测试接口

    1. 测试获取所有图书接口

      http://192.168.56.100:8888/books/book

      在这里插入图片描述

    2. 测试创建图书接口

      添加数据
{
"btitle":"dsad","bpub_date":"2020-10-29","bread":100,"bcomment":10
}

      在这里插入图片描述

    3. 测试修改图书接口

      http://192.168.56.100:8888/books/book/

      在这里插入图片描述

    4. 测试删除数据接口 逻辑删除

      http://192.168.56.100:8888/books/book/

在这里插入图片描述
在这里插入图片描述

前端

  1. 图书管理vue页面

    1. http/apis.js 添加后端请求路由

           /* eslint-disable */
     import {get, post, put, del} from './index'
     // 书籍管理接口
     export const getBookList = (params, headers) => get("/books/book/", params, headers)
     export const addBook = (params, headers) => post("/books/book/", params, headers)
     export const editBook = (params, headers) => put("/books/book/", params, headers)
     export const delBook = (params, headers) => del("/books/book/", params, headers)
 ```

    1.1 http/index.js 添加后端请求路由

     /* eslint-disable */
// 第一步：实例化axios对象，简单封装
const axios = require('axios'); // 生成一个axios实例
axios.defaults.baseURL = 'http://192.168.56.100:8888'; // 设置请求后端的URL地址
axios.defaults.timeout = 10000; // axios请求超时时间
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json'; // axios发送数据时使用json格式
axios.defaults.transformRequest = data => JSON.stringify(data); // 发送数据前进行json格式化
// 第二：设置拦截器
/**
* 请求拦截器(当前端发送请求给后端前进行拦截)
* 例1：请求拦截器获取token设置到axios请求头中，所有请求接口都具有这个功能
* 例2：到用户访问某一个页面，但是用户没有登录，前端页面自动跳转 /login/ 页面
*/
axios.interceptors.request.use(config => {
// 从localStorage中获取token
// let token = localStorage.getItem('token');
// 如果有token, 就把token设置到请求头中Authorization字段中
// token && (config.headers.Authorization = token);
 return config;
}, error => {
 return Promise.reject(error);
});
/**
* 响应拦截器（当后端返回数据的时候进行拦截）
* 例1：当后端返回状态码是401/403时，跳转到 /login/ 页面
*/
axios.interceptors.response.use(response => {
// 当响应码是 2xx 的情况, 进入这里
// debugger
 return response.data;
}, error => {
// 当响应码不是 2xx 的情况, 进入这里
// debugger
 return error
});

/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params, headers) {
 return new Promise((resolve, reject) => {
   // debugger
   axios.get(url, {params, headers}).then(res => {
     resolve(res)
   }).catch(err => {
     reject(err)
   })
 })
}

// 第三：根据上面分装好的axios对象，封装 get、post、put、delete请求
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
**/
export function post(url, params, headers) {
 return new Promise((resolve, reject) => {
   axios.post(url, params, headers).then((res) => {
     resolve(res)
   }).catch((err) => {
// debugger
     reject(err)
   })
 })
}

export function put(url, params, headers) {
 return new Promise((resolve, reject) => {
   axios.put(url, params, headers).then((res) => {
     resolve(res)
   }).catch((err) => {
// debugger
     reject(err)
   })
 })
}

export function del(url, params, headers) {
 return new Promise((resolve, reject) => {
   axios.delete(url, {data: params, headers}).then((res) => {
     resolve(res)
   }).catch((err) => {
// debugger
     reject(err)
   })
 })
}

export default axios;

    1. router/index.js 添加路由

      import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Books from '@/views/books/Books'
import Father from "../components/Father";
import Login from "../views/Login";


Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', name: 'Books', component: Books}, // 图书增删改查
  ]
})

    2. src\views\books\Books.vue 父组件

      <template>
  <div>
    <div>
      <h1>图书管理系统</h1>
      <div style="margin: 30px;">
        <button @click="addNew">新增图书</button>
        <BookEdit
          v-show='dialogVisible'
          :visible.sync='dialogVisible'
          :data='editData'
          @save='save'
        ></BookEdit>
      </div>
      <div>
        <table style='margin: auto; border: solid 1px black;'>
          <tr>
            <th>图书编号</th>
            <th>图书名字</th>
            <th>出版时间</th>
            <th>阅读数</th>
            <th>评论数</th>
            <th>操作</th>
          </tr>
          <tr
            v-for="(book, index) in books"
            :key="book.id">
            <td>{{book.id}}</td>
            <td>{{book.btitle}}</td>
            <td>{{book.bpub_date}}</td>
            <td>{{book.bread}}</td>
            <td>{{book.bcomment}}</td>
            <td>
              <button @click="edit(index)">修改</button>
              <button @click="del(index)">删除</button>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>


</template>

<script>
    import {getBookList, addBook, editBook, delBook} from '@/http/apis'
    import BookEdit from '@/components/BookEdit'

    export default {
        components: {
            BookEdit
        },

        data() {
            return {
                dialogVisible: false,
                books: [
                    // {
                    //     id: 3, btitle: "...", bpub_date: "2020-08-11", bread: 100, bcomment: 50
                    // }
                ],
                editData: { // 编辑的内容
                    btitle: "",
                    bpub_date: "",
                    bread: 0,
                    bcomment: 0
                },

            }
        },
        methods: {
            addNew() {
                this.editData = { // 初始化 编辑内容
                    btitle: "",
                    bpub_date: "",
                    bread: 100,
                    bcomment: 0
                }
                this.dialogVisible = true // 显示弹框
            },
            // 2.获取图书列表
            get() {
                getBookList().then((data) => {
                    console.log(123123123123)
                    console.log(data)
                    // books: [{btitle: "西游记", bpub_date: "2020-08-11", bread: 100,bcomment: 50}]
                    this.books = data.books
                })
            },
            // 3.修改或者添加图书
            save() {
                // 根据editData中的id判断是更新还是新增
            // debugger
                console.log(this.editData)
                if (this.editData.id) {
                    // 如果有id, 修改图书
                    // 修改请求
                    let params = this.editData
                    editBook(params).then((res) => {
                        console.log(res)
                        this.get()
                    })
                } else {
                    // 增加图书
                    addBook(this.editData).then((res) => {
                        this.get()
                    })
                }
            },
            // 点击修改弹出修改页面
            edit(index) {
                this.editData = JSON.parse(JSON.stringify(this.books[index])) // 复制this.books[index]的数据
                // this.editData = this.books[index] //
                this.dialogVisible = true
            },
            // 删除
            del(index) {
                let params = {
                    id: this.books[index].id
                }
                delBook(params).then((res) => {
                    console.log(res)
                    this.get()
                })
            },
        },
        created() {
            this.get()
        }
    }


</script>

<style scoped>
  table tr td {
    width: 150px;
    border: solid 1px black;
  }

</style>
  1. src\components\BookEdit.vue 子组件
    <template>
      <div>
        <el-dialog
          title="新增图书"
          :visible="visible"
        >
          <div><span>图书名称:</span>
            <el-input
              class='elinput'
              v-model="data.btitle"
            ></el-input>
          </div>
          <div><span>发布日期:</span>
            <el-input
              class='elinput'
              v-model="data.bpub_date"
            >
            </el-input>
          </div>
          <div><span>阅读量:</span>
            <el-input
              class='elinput'
              v-model="data.bread"
            ></el-input>
          </div>
          <div><span>评论量:</span>
            <el-input
              class='elinput'
              v-model="data.bcomment"
            ></el-input>
          </div>
          <el-button @click="cancel">取 消</el-button>
          <el-button
            type="primary"
            @click="addBook"
          >确 定
          </el-button>
        </el-dialog>
      </div>
    </template>
    
    <script>
        // import { addbook } from '@/http/apis'
        export default {
            props: ['data', 'visible'],
            data() {
                return {}
            },
            methods: {
                addBook() {
                    this.$emit('update:visible', false)
                    this.$emit('save')
                },
                cancel() {
                    this.$emit('update:visible', false)
                }
            },
            mounted() {
            }
        }
    </script>
    
    <style scoped>
      .elinput {
        width: 220px;
        height: 40px;
      }
    </style>

  1. src/mian.js 引入ElementUI

    ​

    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
// 使用 elementui
// npm i element-ui -S 安装到当前项目
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})


Vue.config.productionTip = false
// 使用 elementui
// npm i element-ui -S 安装到当前项目
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

展示

在这里插入图片描述
在这里插入图片描述

 

 

 

 

posted @ 2020-12-21 11:29  小芒果测开笔记  阅读(414)  评论(0)  编辑  收藏  举报