1,vue+element+django+mysql前后端分离实现管理系统

第一步打开命令行安装django3.0
pip install Django==3.0

在这里插入图片描述
创建项目
切换到项目的目录中去
启动项目
1,vue+element+django+mysql前后端分离实现管理系统_第1张图片
项目运行成功
1,vue+element+django+mysql前后端分离实现管理系统_第2张图片
点击http://127.0.0.1:8000
此页面为安装成功
1,vue+element+django+mysql前后端分离实现管理系统_第3张图片
2,配置msql
先安装支持mysql的包
pip install pymysql

1,vue+element+django+mysql前后端分离实现管理系统_第4张图片
引入pymysql 并将pymysql 设置为 mysql的使用方式

import pymysql
pymysql.install_as_MySQLdb()

1,vue+element+django+mysql前后端分离实现管理系统_第5张图片
然后修改settings.py文件,修改成如下1,vue+element+django+mysql前后端分离实现管理系统_第6张图片
创建应用,python manage.py startapp APP,会生成一个新的文件夹目录
1,vue+element+django+mysql前后端分离实现管理系统_第7张图片

创建数据模型类
1,vue+element+django+mysql前后端分离实现管理系统_第8张图片

执行数据迁移
在这里插入图片描述
成功
1,vue+element+django+mysql前后端分离实现管理系统_第9张图片
刷新数据库,看到django的表结构已经成功
1,vue+element+django+mysql前后端分离实现管理系统_第10张图片
在pycharm创建你的vue项目,我的项目名字是myProject,然后写好前端,使用
node build/build.js打包vue项目

3,对python项目中settings.py配置文件进行修改

(1)修改静态资源路径。这个路径是我的vue项目文件夹下的打包好的dist文件夹

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "myProject/dist/static")
]

1,vue+element+django+mysql前后端分离实现管理系统_第11张图片

(2)Django3.0将LANGUAGE_CODE和TIME_ZONE设置为中国时区

LANGUAGES = [
    ('zh-Hans', _('Chinese')),# _是from django.utils.translation import gettext_lazy as _
]
LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/ShangHai'

(3)在settings.py文件内添加你python的app应用
1,vue+element+django+mysql前后端分离实现管理系统_第12张图片

(4)修改templates公共模板目录,修改成自己的模板路径
DIRS作用是指定公用模板文件夹的路径。

1,vue+element+django+mysql前后端分离实现管理系统_第13张图片

测试连接数据库
1,vue+element+django+mysql前后端分离实现管理系统_第14张图片
在appname文件夹中的views.py编写实现增删改查的函数
这是我实现查看数据表部分字段所有数据的函数

from django.http import HttpResponse, JsonResponse
import MySQLdb
from django.views.decorators.http import require_http_methods
...
@require_http_methods(["GET"])
def getAll(request):
    conn = MySQLdb.connect(host="localhost", user="root", passwd="123456", db="college", charset='utf8')
    cursor = conn.cursor(MySQLdb.cursors.DictCursor)
    cursor.execute('SELECT Sid,name,age,sex,cardNumber FROM stubasicin')
    students = cursor.fetchall()
    print(students)
    response = JsonResponse(students, safe=False)
    return response

1,vue+element+django+mysql前后端分离实现管理系统_第15张图片
按需引入包
在这里插入图片描述

一些插曲

实现这里的时候出现了很多问题,最开始是前端获取不到我返回的值。然后用了一个HttpResponse(students)来返回值,结果返回到前端的数据类型又不对,我这个变量值本来输出是一个数组,返回到前端就变成了一个字符串。百度才知道HttpResponse()若没有设置content_type参数,默认为 text/html,浏览器会根据这个属性,当作字符串来处理他

然后看到了JsonResponse这种方法,我第一次用的JsonResponse(students)返回,运行项目报错了,然后发现这个JsonResponse适用于处理json格式的数据,需要加一些参数,默认情况下,JsonResponse的传入参数是个字典类型,而我用JsonResponse(students)传的是一个数组类型,要对非字典的数据进行传递,那么需要给 JsonResponse 传递一个 safe=False 参数。如JsonResponse(students, safe=False)

Django处理请求:

1.一旦生成url页面请求,请求传递到urls.py;
2.Django去urlpatterns中匹配链接(Django会在匹配到的第一个就停下来);
3.一旦匹配成功,就会去执行,path后面的方法,Django便会给出相应的view页面(该页面可以为一个Python的函数,或者基于view(Django内置的)的类),也就是用户看到的页面;
4.若匹配失败,则出现错误的页面。

在appname文件夹中urls.py的urlpatterns 参数中,添加你要对数据进行操作函数的路径。1,vue+element+django+mysql前后端分离实现管理系统_第16张图片
然后在原目录下的urls.py文件添加

url(r'^app/', include('APP.urls')),

1,vue+element+django+mysql前后端分离实现管理系统_第17张图片
这样后台就差不多搭好了

运行python项目,在pyhon项目根目录命令行执行python manage.py runserver

然后前端使用axios获取后台传的值的代码

methods: {
            getData(){
                 this.$axios.get('http://127.0.0.1:8000/app/getAll')
                   .then((response) => {
                     console.log(response);
                     this.tableData= response.data;
                     console.log(this.tableData);
               })
            },
            }

methods 是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行,只执行逻辑,返回值可有可无。

在created周期函数里面调用这个方法
this.getData();

created(): 处于loading结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载)

前端页面效果
1,vue+element+django+mysql前后端分离实现管理系统_第18张图片
数据成功获取和显示

你可能感兴趣的:(前后端分离,python,vue,django)