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

    使用view Djang接口

    1. books/view

      1. 注册

      2. INSTALLED_APPS = [
    'books.apps.BooksConfig',

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

]

      3. 配置跨域

      4. #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',
)

    2. books/models

      1. 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 = "图书"

    3. books/serializers

      1. """
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__"

    4. 迁移数据库

      1. python  manage.py makemigrations
python manage.py  migrate

    5. books/views(使用View)

      1. """
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

    6. books/urls

      1. 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页面

    1. 下载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)

    2. 配置跨域

      1. 在http/index.js

      2. 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)
      })
    }
  )
}

      3. 在http/apis.js

      4. /* 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)

    3. views/book-manage/books.vue

      1. <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>

    4. views/book-manage/components/BookEdit

      1. <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>
  • 相关阅读:
    Microsoft 365 开发篇：建立医疗组织的Microsoft Teams 模板
    Microsoft 365 开发篇：将SharePoint Online的Site Collection保存为模板
    Microsoft 365 开发：updateRecordingStatus API 发布
    Microsoft 365开发篇：Microsoft Build 2020 关于Graph API 更新
    线上公开认知课：软件开发
    Microsoft Build 2020：Microsoft Teams 新功能概览
    Microsoft 365 开发篇：Teams Export API支持数据导出
    201306114357—实验2
    test
    正则表达式
  • 原文地址：https://www.cnblogs.com/wyx-zy/p/14032065.html
Copyright © 2020-2023  润新知