Vue和Dj的完美配合(一)

最新推荐文章于 2024-07-25 22:09:02 发布

feiyu361

最新推荐文章于 2024-07-25 22:09:02 发布

阅读量1.1k

点赞数

分类专栏： python vue 文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/feiyu361/article/details/121732552

版权

python 同时被 2 个专栏收录

38 篇文章 8 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

需要的环境有node,npm,Element-UI,axios,django,跨域

下载node: 进入官网

验证是否成功

node -v

npm -v

设置npm下载镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org

全局安装vue脚手架vue CLI

npm install -g @vue/cli

# 安装成功后查看脚手架版本号
vue -V

安装Element-UI

npm i element-ui -S

vue创建前端项目

vue create booksweb

运行项目
npm run serve

在这里插入图片描述

开始配置ElementUI组件库

在这里插入图片描述
然后将官网对应组件代码复制到自己项目的vue的template中（以button为例）：

在这里插入图片描述

大致的页面构图,制作两个待切换显示的组件：ShowBooks.vue和 ShowStudents.vue

在这里插入图片描述

import VueRouter from "vue-router";
//引入ShowBooks组件对象并命名为SBook（下面routes中用到）
import SBook from '../components/ShowBooks';
import SStudent from '../components/ShowStudents';
export default new VueRouter({
    mode: 'history',  //去掉url中的#
    routes:[
        {
            //设置路由项：即/shbook 访问路径对应SBook组件即ShowBooks组件
            path: '/shbook',
            component: SBook
        },
        {
            path: '/shstudent',
            component: SStudent
        }
    ]
})

在这里插入图片描述

安装 axios（cmd）：

npm i axios -S

写在导入路由器的import语句下面

import axios from 'axios';
axios.defaults.withCredentials = false; //禁止ajax携带cookie
Vue.prototype.$axios = axios; //挂载到vue中，以后使用不用导包

修改App.vue

<template>
  <div id="app">
    <el-container style="border: 1px solid #eee">
      <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>信息查询</template>
            <el-menu-item index="1-1"><router-link to="/shbook">图书查询</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/shstudent">学生查询</router-link></el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-setting"></i>导航三</template
            >
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  a {
    text-decoration:none;
    color: #646464;
  }
  .router-link-active {
    text-decoration: none;
  }
</style>

src目录中新建components文件夹并加入以下两个文件：

ShowBooks.vue

<template>
  <div class="shbooks">
    <el-table :data="tableData" >
      <el-table-column prop="Title" label="书名" width="160"> </el-table-column>
      <el-table-column prop="Author" label="作者" width="100"> </el-table-column>
      <!-- <el-table-column prop="BookID" label="书号" width="100"> </el-table-column> -->
      <!-- <el-table-column prop="Language" label="语言" width="100"> </el-table-column> -->
      <el-table-column prop="Publisher" label="出版社" width="160"> </el-table-column>
      <el-table-column prop="Pyear" label="出版日期" > </el-table-column>
      <!-- <el-table-column prop="State" label="馆藏" width="100"> </el-table-column> -->     
    </el-table>    
  </div>
</template>
<script>
export default {  
  data(){
    return {         
        tableData:[]        
    }    
  },   
  methods:{
    get_all_books(){
      this.$axios.get('http://127.0.0.1:8000/books').then(response=>{
        this.tableData = response.data;        
      })
    }
  },
  mounted(){
    this.get_all_books();
  }
}
</script>

ShowStudents.vue

<template>
  <div class="shstudents">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ID" label="学号" width="160"> </el-table-column>
      <el-table-column prop="Name" label="姓名" width="160"> </el-table-column>
      <el-table-column prop="Dept" label="系别" width="160"> </el-table-column>           
    </el-table>
  </div>
</template>
<script>
export default {  
  data(){
    return {         
        tableData:[]        
    }    
  },  
  methods:{
    get_all_books(){
      this.$axios.get('http://127.0.0.1:8000/students').then(response=>{
        this.tableData = response.data;
        console.log(this.tableData);
      })
    }
  },
  mounted(){
    this.get_all_books();
  }
}
</script>

二. 后端部分,安装Dj

# 1. 安装dj
pip install django -i https://pypi.douban.com/simple

# 2.安装 mysqlclient
pip install mysqlclient

# 3.查看版本
django-admin --version
# 4.cors插件
pip install django-cors-headers

创建工程：

django-admin startproject booksapp

启动django服务器

python manage.py runserver

在这里插入图片描述

准备数据库

CREATE DATABASE `BooksDB` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

use BooksDB;
CREATE  TABLE  Book(
  BookID  varchar(20)  PRIMARY  KEY,
  Title   varchar(50)  NOT  NULL,
  Author  varchar(50),
  Publisher varchar(50),
  Pyear   char(4),
  Language  char(1)  DEFAULT 'c',
  State   char(1)    DEFAULT '0'
);
CREATE  TABLE  Student(
 ID    char(6)  PRIMARY  KEY,
 Name  varchar(20)  NOT NULL,
 Dept  varchar(20)  NOT NULL
);
CREATE  TABLE  Assistant(
 ID    char(6)  PRIMARY  KEY,
 Name  varchar(20)  NOT NULL
);
CREATE  TABLE  BBook(
 BID  varchar(20)  NOT  NULL,
 StdID  char(6)   NOT  NULL,
 BDate  date     NOT NULL,
 CONSTRAINT  FK_BBOOK_BID
  FOREIGN  KEY(BID) REFERENCES  Book(BookID),
CONSTRAINT  FK_BBOOK_StdID
  FOREIGN  KEY(StdID) REFERENCES Student(ID)
);
CREATE  TABLE  RBook(
 BookID  varchar(20)  NOT  NULL,
 StdID   char(6)    NOT  NULL,
 RDate   date   NOT  NULL,
 CONSTRAINT  FK_RBook_BookID 
   FOREIGN  KEY(BookID) REFERENCES  Book(BookID),
 CONSTRAINT  FK_RBook_StdID 
   FOREIGN  KEY(StdID)  REFERENCES  Student(ID)
);
CREATE  TABLE  Lend(
 StdID  char(6)  NOT NULL,
 AstID  char(6)  NOT NULL,
 BookID varchar(20)  NOT NULL,
 LDate  date   NOT  NULL,
 CONSTRAINT FK_LEND_StdID
  FOREIGN  KEY(StdID) REFERENCES  Student(ID),
CONSTRAINT FK_LEND_AstID
  FOREIGN  KEY(AstID) REFERENCES  Assistant(ID),
CONSTRAINT FK_LEND_BookID
  FOREIGN  KEY(BookID) REFERENCES  Book(BookID)
);
CREATE  TABLE  Returnn(
 StdID  char(6)  NOT  NULL,
 AstID  char(6)  NOT  NULL,
 BookID varchar(20)  NOT NULL,
 RDate  date  NOT  NULL,
 CONSTRAINT  FK_RETURN_StdID
   FOREIGN  KEY(StdID) REFERENCES Student(ID) ,
 CONSTRAINT FK_RETURN_AstID
   FOREIGN  KEY(AstID) REFERENCES  Assistant(ID),
 CONSTRAINT  FK_RETURN_BookID
   FOREIGN  KEY(BookID) REFERENCES  Book(BookID)
 );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21001' , '张小航' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21002' , '王文广' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21003' , '李理' ,  '统计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21004' , '李彦宏' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21005' , '张丽霞' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21006' , '王强' , '统计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21007' , '张宝田' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21008' , '宋文霞' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21009' , '刘芳菲' , '统计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21010' , '常江宁' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21011' , '张三' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21012' , '李四' , '统计系' );
  
 INSERT  INTO  Book  VALUES('b001','数据库管理','王珊','高等教育出版社','2018','c','0'); 
 INSERT  INTO  Book  VALUES('b002','软件测试','贺平' , '机械工业出版社','2018','c','0'); 
 INSERT  INTO  Book  VALUES('b003','C++程序设计','谭浩强','清华大学出版社','2018','c','0'); 
 INSERT  INTO  Book  VALUES('b004','红楼梦','曹雪芹','人民文学出版社','2019','c','0'); 
 INSERT  INTO  Book  VALUES('b005','西游记','罗贯中','人民文学出版社','2019','c','0'); 
 INSERT  INTO  Book  VALUES('b006','红与黑','司汤达','人民文学出版社','2019','c','0'); 
 INSERT  INTO  Book  VALUES('b007','高等数学','李翼','清华大学出版社','2020','c','0'); 
 INSERT  INTO  Book  VALUES('b008','有机化学','张翔','高等教育出版社','2020','c','0'); 
 INSERT  INTO  Book  VALUES('b009','大学英语','王琳','高等教育出版社','2021','c','0'); 
 INSERT  INTO  Book  VALUES('b010','英语教程','王琳','高等教育出版社','2021','c','0'); 
 
 INSERT  INTO  Assistant  VALUES('a001','黄渤'); 
 INSERT  INTO  Assistant  VALUES('a002','徐峥'); 
 INSERT  INTO  Assistant  VALUES('a003','马东'); 
 INSERT  INTO  Assistant  VALUES('a004','李诞');

配置数据库：,settints.py中修改数据库部分选项

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'HOST': '127.0.0.1',
        'PORT': 3306,
        'USER': 'root',
        'PASSWORD': '123456',
        'NAME': 'booksdb',
    }
}

跨域配置

在settings.py中配置：增加一项：‘corsheaders’

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'corsheaders',
]

在settings.py中设置中间件：必须放第一个

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',    
]

在settings.py中添加白名单

# 添加白名单，允许前端8080端口ajax跨域请求后端
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080'
)
CORS_ALLOW_CREDENTIALS = False  #是否允许前端ajax请求携带cookie

后端业务接口：给前端提供数据

urls.py 中导入views，并添加两条路由:

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('books/', views.get_all_books),
    path('students/', views.get_all_students),
]

在urls.py的所属目录中新建views.py文件，并加入以下代码：

from django.http import JsonResponse
from django.db import connection

# sql查询的结果集转为字典格式
def dictfetchall(cursor):
    "Return all rows from a cursor as a dict"
    columns = [col[0] for col in cursor.description]
    return [
        dict(zip(columns, row))
        for row in cursor.fetchall()
    ]

# 'books/'路由对应的处理函数（此处采用原生sql，没有使用django的model模型层）
def get_all_books(request):
    cursor = connection.cursor()
    cursor.execute("select * from book")
    rows = dictfetchall(cursor) #结果集转字典
    return JsonResponse(rows, safe=False, json_dumps_params={'ensure_ascii': False})

# 'students/'路由对应的处理函数
def get_all_students(request):
    cursor = connection.cursor()
    cursor.execute("select * from student")
    rows = dictfetchall(cursor)  # 结果集转字典
    return JsonResponse(rows, safe=False, json_dumps_params={'ensure_ascii': False})

最终实现

在这里插入图片描述
未完待续…

feiyu361

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue和Dj的完美配合(一)

需要的环境有node,npm,Element-UI,axios,django,跨域下载node: 进入官网验证是否成功node -vnpm -v设置npm下载镜像为淘宝镜像npm config set registry https://registry.npm.taobao.org全局安装vue脚手架vue CLInpm install -g @vue/cli# 安装成功后查看脚手架版本号vue -V安装Element-UInpm i element-ui -Svue创
复制链接

扫一扫