[Python] 基于Web框架Django 前端框架Vue.js + elementUi 实现前后端分离项目环境搭建指南

您所在的位置：网站首页 › web前端开发python能做吗 › [Python] 基于Web框架Django 前端框架Vue.js + elementUi 实现前后端分离项目环境搭建指南

[Python] 基于Web框架Django 前端框架Vue.js + elementUi 实现前后端分离项目环境搭建指南

2023-09-30 06:22| 来源: 网络整理| 查看: 265

本文整合Django和Vue.js 并引入elementUi 实现前后端分离项目环境

最终的成品是设计出一个ElementUi风格的页面可以添加和显示学生信息.

一.前言

Django作为Python 三大Web框架之一,因其集成了大量的组件(例如: Models Admin Form 等等)而大受欢迎,但是他本身自带的template模板实在是有点弱.于是考虑整合Vue.js同时引入ElementUI 组件,可以更加快速高效的开发出美观实用的Web页面.

二.环境及软件准备 Python

本文版本:Python 3.5

安装教程: https://www.runoob.com/python3/python3-install.html

Pycharm

本文版本:2019.1.3

PyCharm 2019.1.3 (Community Edition)

安装教程:https://www.runoob.com/w3cnote/pycharm-windows-install.html

Django

本文版本:2.2.3

安装教程:https://www.runoob.com/django/django-install.html

node.js

本文版本:10.16.3

安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html

MySQL

本文版本: 8.0.13 for Win64

安装教程:https://www.runoob.com/mysql/mysql-install.html

三.Django项目构建

本文的Pycharm为社区版,如果为专业版则字段Django项目的创建选项,创建项目将更加简单.

1.创建django项目:DjangoElementUI

创建文件夹E:\PycharmProjects:

在项目文件夹目录输入Windows 命令行如下

django-admin.py startproject DjangoElementUI

成功创建项目完成后文件夹结构如下图:

python manage.py runserver 0.0.0.0:8000

看到如下提示则为项目创建成功

在浏览器输入你服务器的 ip（这里我们输入本机 IP 地址： 127.0.0.1:8000）及端口号，如果正常启动，输出结果如下：

2.数据库配置

Django 对各种数据库提供了很好的支持，包括：PostgreSQL、MySQL、SQLite、Oracle。

Django 为这些数据库提供了统一的调用API。我们可以根据自己业务需求选择不同的数据库。

MySQL 是 Web 应用中最常用的数据库。

本文采用MySQL

第一次使用MySQL需要安装 MySQL驱动,在项目文件夹目录下执行以下命令安装：

pip install pymysql

Django无法直接创建数据库(只能操作到数据表层),我们需要手工创建MySQL数据库.

以下通过命令行创建 MySQL 数据库:Django_ElementUI

登录数据库:

数据库安装文件夹bin文件夹下输入命令

mysql -u root -p

创建数据库: create DATABASE Django_ElementUI DEFAULT CHARSET utf8;

Django配置数据库

在项目的 settings.py 文件中找到 DATABASES 配置项，将其信息修改为：

DATABASES = { 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), # 自定义数据库 'ENGINE': 'django.db.backends.mysql', # 数据库引擎 'NAME': 'Django_ElementUI', # 数据库名称 'HOST': '127.0.0.1', # 数据库地址，本机 ip 地址 127.0.0.1 'PORT': 3306, # 端口 'USER': 'root', # 数据库用户名 'PASSWORD': '123456', # 数据库密码 }

在与 settings.py 同级目录下的 __init__.py 中引入模块和进行配置 (告诉 Django 使用 pymysql 模块连接 mysql 数据库)

import pymysql pymysql.install_as_MySQLdb() 3.利用Django模型设计数据库表

Django 规定，如果要使用模型，必须要创建一个 app。

创建Django APP:myApp

我们使用以下命令创建一个Django app:myApp

django-admin.py startapp myApp

成功后的项目文件夹目录如下:

设计数据库表

在myApp下的models.py设计表:

这里我们设计一个Student表,用来存储学生信息.

表字段

字段类型

含义

student_nameVarchar类型

学生姓名

student_sex

Varchar类型

学生性别

create_time

Datetime类型

创建日期时间

from django.db import models # Create your models here. class Student(models.Model): student_name = models.CharField(max_length=64) student_sex = models.CharField(max_length=3) create_time = models.DateTimeField(auto_now=True) def __unicode__(self): return self.Student_name

在 settings.py 中找到INSTALLED_APPS这一项，如下：

# Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'myApp', # 添加此项 ] 生成数据库迁移文件

在命令行中运行：

python manage.py migrate python manage.py makemigrations myApp

执行成功后结果:

执行迁移文件来完成数据库表的创建

在命令行中运行：

python manage.py migrate myApp

执行成功后结果:

查看数据库中数据库表已经生成成功

(django默认在makemigrations会为表对象创建主键id,id = models.AutoField(primary_key=True))

4.Django创建新增和查询学生信息接口

在myApp目录下的views.py中创建两个视图函数

# -*- coding: utf-8 -*- from __future__ import unicode_literals import json from django.http import JsonResponse from django.core import serializers from django.shortcuts import render from django.views.decorators.http import require_http_methods from myApp.models import Student # Create your views here. # add_student接受一个get请求，往数据库里添加一条Student数据 @require_http_methods(["GET"]) def add_student(request): response = {} try: student = Student(student_name=request.GET.get('student_name')) student.save() response['msg'] = 'success' response['error_num'] = 0 except Exception as e: response['msg'] = str(e) response['error_num'] = 1 return JsonResponse(response) # show_students返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据） @require_http_methods(["GET"]) def show_students(request): response = {} try: students = Student.objects.filter() response['list'] = json.loads(serializers.serialize("json", students)) response['msg'] = 'success' response['error_num'] = 0 except Exception as e: response['msg'] = str(e) response['error_num'] = 1 return JsonResponse(response)

5.配置路由

1.在myApp目录下，新增一个urls.py文件,用于创建此APP下的分支路由，把新增的两个视图函数添加到路由里面.

from django.conf.urls import url from myApp import views urlpatterns = [ url(r'^add_book/', views.add_book), url(r'^show_books/', views.show_books), ]

2.把上面创建的myApp下的分支路由加到DjangoElementUI下的主路由中urls.py.

from django.contrib import admin from django.urls import path from django.conf.urls import url from django.conf.urls import include from myApp import urls urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^api/', include(urls)), ]

至此Django部分已经完成,总结下我们利用Django完成了数据库的创建,并创建了两个视图函数作为接口给前端调用.

四.构建前端Vue+ElementUI项目

1.安装vue-cli脚手架

在DjangoElementUI根目录下输入命令:

npm install -g vue-cli

2.安装好后，新建一个前端工程目录：appfront

在DjangoElementUI项目根目录下输入命令:

vue-init webpack appfront

3.进入appfront目录安装vue所需要的依赖

npm install

4.安装ElementUI

npm i element-ui -S

5.创建新vue页面

在src/component文件夹下新建一个名为Studengt.vue的组件，通过调用之前在Django上写好的api，实现添加学生和展示学生信息的功能.

新增 {{ scope.row.pk }} {{ scope.row.fields.student_name }} {{ scope.row.fields.student_sex }} {{ scope.row.fields.create_time }} export default { name: 'Student', data () { return { input: '', studentList: [] } }, mounted: function () { this.showStudents() }, methods: { addStudent () { this.$http.get('http://127.0.0.1:8000/api/add_student?student_name=' + this.input) .then((response) => { var res = JSON.parse(response.bodyText) if (res.error_num === 0) { this.showStudents() } else { this.$message.error('新增学生失败，请重试') console.log(res['msg']) } }) }, showStudents () { this.$http.get('http://127.0.0.1:8000/api/show_students') .then((response) => { var res = JSON.parse(response.bodyText) console.log(res) if (res.error_num === 0) { this.studentList = res['list'] } else { this.$message.error('查询学生失败') console.log(res['msg']) } }) } } } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }

6.配置路由

appfront/router文件夹下的index.js中增加页面路由.

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Student from '@/components/Student' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/student', name: 'Student', component: Student } ] })

appfront文件夹下的main.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' // 注册ElementUI组件 import '../node_modules/element-ui/lib/theme-chalk/index.css' import ElementUI from 'element-ui' Vue.config.productionTip = false // 注册ElementUI组件 Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })

7.打包并启动前端项目

打包vue项目

npm run build

启动前端项目

npm run dev

出现下面信息则说明我们前端项目已经构建成功.

去浏览器访问页面地址:http://localhost:8080/#/student

出现如下页面说明我们的页面已经成功.

五.整合Django和Vue

截止到目前,我们已经成功通过Django创建了一个后端服务,通过Vue.js + ElementUI 实现了前端页面的构建,但是他们运行在各自的服务器,而且前端页面还无法调用后端的接口.

接下来我们需要将两个项目真正的整合到一个成一个项目.

1.引入用于HTTP解析的vue-resource

前端vue项目调用后端需要引入vue-resource

在appfront文件下运行命令:

npm install --save vue-resource

安装完成后在main.js中引入vue-resource

// 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' // 引入ElementUI import '../node_modules/element-ui/lib/theme-chalk/index.css' import ElementUI from 'element-ui' // 引入vue-resource import VueResource from 'vue-resource' Vue.config.productionTip = false // 注册ElementUI Vue.use(ElementUI) // 注册VueResource Vue.use(VueResource) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })

2.在Django层注入header

为了让后端可以识别前端需求,我们须要在Django层注入header，用Django的第三方包django-cors-headers来解决跨域问题：

在DjangoElementUI根目录下输入命令:

pip install django-cors-headers

在settings.py中增加相关中间件代码

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', ] CORS_ORIGIN_ALLOW_ALL = True #添加此项

3.修改Django路由

这一步我们通过Django路由配置连接前后端资源.

首先我们把Django的TemplateView指向我们刚才生成的前端dist文件

在DjangoElementUI目录下的urls.py中增加代码:

from django.conf.urls import url from django.contrib import admin from django.conf.urls import include from myApp import urls #新增 from django.views.generic import TemplateView urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^api/', include(urls)), # 新增 url( r'^vue/', TemplateView.as_view( template_name="index.html" ) ) ]

接着修改静态资源文件路径也指向前端appfront 相关文件

在DjangoElementUI目录下的setting.py中增加代码:

TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'appfront/dist')], #增加此项 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] #增加此项 for vue.js STATICFILES_DIRS = [ os.path.join(BASE_DIR, "appfront/dist/static") ]

3.重新构建前端项目

appfront目录下输入命令:

npm run build

重新启动Django项目

python manage.py runserver

输入地址:http://localhost:8000/vue/#/student

添加一条记录

至此,大功告成!

六.后记

此份指南在配置的过程踩过不少坑,以下是踩的印象较深的坑.

1.数据库创建的过程中务必注意大小写的问题,数据库字段和Django的Models页面,View页面和Vue中的组件页面都有关联.很容易一个大小写不注意,导致整个接口无法使用.

2.连接MySQL需要按照对应的包,同时需要在根目录的_ini_.py中引入pymysql

3.在整个环境的搭建过程中VUE环境的搭建需要耗费较长的npm安装时间,需要耐心等待.

4.前后台连接需要在前端引入vue-resource,Django需要引入django-cors-headers

【本文地址】

[Python] 基于Web框架Django 前端框架Vue.js + elementUi 实现前后端分离项目环境搭建指南

[Python] 基于Web框架Django 前端框架Vue.js + elementUi 实现前后端分离项目环境搭建指南

今日新闻

推荐新闻