圖書管理系統（modelviewset）前後端調聯

阿新 • • 發佈：2020-11-24

使用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頁面

下載[email protected] 下載element-ui
1. cnpm install --save [email protected]
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="width: 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 註冊 INSTALLED_APPS = [ \'books.apps.BooksConfig\', \'corsheaders\', \'rest_framework\',

圖書管理系統（view）前後端調聯 (copy)

使用view Djang介面 books/view 註冊 INSTALLED_APPS = [ \'books.apps.BooksConfig\', \'corsheaders\', \'rest_framework\',

Django——圖書管理系統（一）

技術標籤：Djangodjangocss3html5python圖書管理系統首先，我們建立一個名為bookmanager的專案。命令列如下：

用QT+MySQL編寫圖書管理系統（五）——在表格中新增下拉框、長文字格式

技術標籤：技術分享QTmysqlsql資料庫qtnavicat 我們發現在新增/修改如性別、學院等欄位時，資料的內容是有要求的，是不可以由操作者隨意改變的。因此，我們最好在表格中為這些欄位加上下拉框。除此之外，在書籍的

前後端分離開發vue+Elementyui+abpcorewebapi商城管理系統（三）登入退出功能

登入功能概述 token原理分析登入頁面佈局 ElementUI官網文件地址： https://element.eleme.cn/2.0/#/zh-CN/component/form

前後端分離開發vue+Elementyui+abpcorewebapi商城管理系統（十）分類引數管理頁面

功能分析效果圖程式碼Params.vue <template> <div> <el-breadcrumb separator-class=\"el-icon-arrow-right\">

02 圖書管理系統（SSM+LayUi）

資料庫表設計 1、圖書分類表 drop table if exists class_info; /* ================================================= */

03 圖書管理系統（SSM+LayUi）

建立ssm專案工程 3.1 建立maven工程 1、開啟IDEA->file->new->project 2、選擇Maven，勾選Create from archetype，

11 圖書管理系統（SSM+LayUi）

1、DAO層介面和實現在classInfoDao.java裡寫增刪改介面 package com.gychen.dao; import com.gychen.po.ClassInfo;

10-2 圖書管理系統（SSM+LayUi）

返回響應資訊工具類在com.gychen.util裡新建Constants和RestRespond Constants package com.gychen.util;

10-1 圖書管理系統（SSM+LayUi）

圖書型別管理模組(型別查詢) 新建圖書型別管理頁面在WEB-INF/pages裡新建type/typeIndex.jsp，把table.html裡的程式碼拷貝進去

031 圖書管理系統（無中介軟體，用裝飾器的）-未基於FORM元件

目的：實現圖書的增刪改查 models.py from django.db import models # Create your models here. class Book(models.Model):

最適合Java初學者的練手專案！圖書管理系統（資料原始碼分享！）

專案簡介圖書館管理小專案的主要目的是讓學完JavaSE的同學對之前掌握的知識做一些運用，該專案應用的知識點包括下面內容：

JAVA圖書管理系統（JDBC，MySQL）

一.功能流程圖專案功能如下：登入模組：包括登入功能（根據兩種身份（管理員或者操作員）進行登入），如果沒有使用者資訊，則需要進入註冊功能進行註冊。（登入使用者資訊的讀取和儲存都應連通資料庫表操作）還需

C++圖書管理系統（管理員-讀者）

C++圖書管理系統（管理員-讀者）一、設計一款文字式互動的圖書管理系統，要求具備註冊登入、瀏覽圖書、借還圖書等基本功能；

QT圖書管理系統（2022年視覺化程式設計技術及應用）

QT圖書管理系統（2022年視覺化程式設計技術及應用） 2022年視覺化程式設計技術及應用

073基於SSM酒店管理系統（前後臺）

技術：java+ssm+mysql+Navicat+tomcat+eclipse 截圖：資料庫表： CREATE TABLE account ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(32) NOT NULL, password varchar(32) NOT NULL, realName var

基於Vue的會員管理系統（一）

專案是在一個Vue學習教程裡跟做的，不會全盤細節都作記錄，只記錄一些自己的收穫和一些特別需要注意的坑。專案效果（只展示會員管理這一介面）：專案需要的技術：1. 前後端分離

ATM管理系統（三）

一、作業資訊部落格班級軟體工程作業要求作業要求作業目標你理解的作業目標具體內容

（八）前後端整合之跨域問題

springboot專案+vue的整合，解決方案有兩種：一是直接採用springboot的註解@CrossOrigin；二是新增配置類

圖書管理系統（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

相關推薦