目录
2）增删改（写这里的时候不小心ctrl+z全删了，所以又写了一遍，下面的不做详细解释了，心情不美丽，可以私聊问我，或者等我改）
1.创建django项目
本文章项目目录如下：frontend是vue项目，Web_Server是django项目也就是后端
vue已经讲过了，相信学习vue应该是搜索到第一篇文章，本文仅在最后一部分前后端交互会涉及到vue，前面是关于vue与数据库的交互还有接口。关于django项目的创建，在这里说明一下，是怎么创建出我这样的django文件结构的
首先打开cmd
#进入Web_server文件夹（补充一下个人理解，创建APP需要manage.py文件，只有这个文件夹里有）
$ cd StuGrade/Web_server
$ python manage.py startapp APP1 APP1在Web_server.setting的installed里配置一下就好了
这一趟完成，目录跟我一样就可以了！
好了，那么，我们的配角，templates和mysql要登场了。
2.数据库的增添删改
(1).创建models
我们先在models文件中创建一张数据库表，很好理解，是一个成绩管理的数据库
from django.db import models
# Create your models here.
# Create your models here.
class Grade(models.Model):
id = models.AutoField(primary_key=True)
sid = models.IntegerField(null=True)#学生序号必须有
name = models.CharField(max_length=100, blank=True, null=True)#学生名字必须有
test_type = models.CharField(max_length=100, blank=True, null=True)#考试科目
day = models.CharField(max_length=100, blank=True, null=True)#考试日期
grade = models.IntegerField(null=0)#考试成绩，没有的话自动填充为0
No = models.IntegerField(null=0)#考试排名，没有的话自动填充为0
class Meta:
db_table = 'grade'在django的setting.py中，配置好你的mysql数据库（懂我意思吧，代表了什么已经写在注释里了，最后一行设置utf8解码，不配置好这个，只要有中文上传服务器就会变得很麻烦）
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql', # 默认
'NAME': 'school', # 连接的数据库
'HOST': '127.0.0.1', # mysql的ip地址
'PORT': 3306, # mysql的端口
'USER': 'root', # mysql的用户名
'PASSWORD': '123456', # mysql的密码
'OPTIONS' : { 'charset' : 'utf8mb4' },
}
}(2).数据库迁移
数据库迁移的两大命令：
python manage.py makemigrations & python manage.py migrate
前者是将model层转为迁移文件migration，后者将新版本的迁移文件执行，更新数据库。
这两中命令调用默认为全局，即对所有最新更改的model或迁移文件进行操作。如果想对部分app进行操作，就要在其后追加app name：
$ python manage.py makemigrations app_name
$ python manage.py migrate app_name
如果想要精确到某个迁移文件(0004_xxx.py)：
$ python manage.py migrate app_name 0004
如果想看迁移文件的执行状态，可以用showmigrations命令查看：
$ python manage.py showmigrations
admin
[X] 0001_initial
auth
[X] 0001_initial
[X] 0002_alter_permission_name_max_length
显示django已知的migrations和状态。
关于数据库迁移，有几个要点我要提一下
1.数据库迁移出错，找不到数据库模板，那就删除0002_alter_permission_name_max_length这样的文件，在migrations文件夹里，然后重新迁移（前提是代码一定不要出错）
2.字段没有赋初始值或者default不对，如1067 – Invalid default value for ‘id’这种的，在mysql数据库已经和你的一样的情况下，就把model.py里的default删掉，手动在mysql里面赋初始值再迁移
通过这两个方式可以解决几乎所有mysql数据库迁移的问题。
结果如图：
(3).Django处理数据库
django处理数据库主要是前端，因为后端有admin，如果有需要的话，我会单独写一期私人定制django后台，这个也确实很有趣，好那首先开始mysql查询，很简单，记住以下命令即可
1）查询
def show(request):
# 获取所有用户
all_stu = Grade.objects.all()
# 获取有条件的获取用户
stu = Grade.objects.filter(sid='1')
return HttpResponse(stu[0].name)url配置：
WebServer.urls：path('show/', include("APP1.urls")),
APP1.urls:
urlpatterns = [
path('', views.show, name='show'),
]
输入网址
得到：
2）增删改（写这里的时候不小心ctrl+z全删了，所以又写了一遍，下面的不做详细解释了，心情不美丽，可以私聊问我，或者等我改）
import MySQLdb
from django.shortcuts import render, redirect
# Create your views here.
# 学生信息列表处理函数
def index(request):
conn = MySQLdb.connect(host="localhost", user="root", passwd="123456", db="sms", charset='utf8')
with conn.cursor(cursorclass=MySQLdb.cursors.DictCursor) as cursor:
cursor.execute("SELECT id,student_no,student_name FROM sims_student")
students = cursor.fetchall()
return render(request, 'student/index.html', {'students': students})
# 学生信息新增处理函数
def add(request):
if request.method == 'GET':
return render(request, 'student/add.html')
else:
student_no = request.POST.get('student_no', '')
student_name = request.POST.get('student_name', '')
conn = MySQLdb.connect(host="localhost", user="root", passwd="123456", db="sms", charset='utf8')
with conn.cursor(cursorclass=MySQLdb.cursors.DictCursor) as cursor:
cursor.execute("INSERT INTO sims_student (student_no,student_name) "
"values (%s,%s)", [student_no, student_name])
conn.commit()
return redirect('../')
# 学生信息修改处理函数
def edit(request):
if request.method == 'GET':
id = request.GET.get("id")
conn = MySQLdb.connect(host="localhost", user="root", passwd="123456", db="sms", charset='utf8')
with conn.cursor(cursorclass=MySQLdb.cursors.DictCursor) as cursor:
cursor.execute("SELECT id,student_no,student_name FROM sims_student where id =%s", [id])
student = cursor.fetchone()
return render(request, 'student/edit.html', {'student': student})
else:
id = request.POST.get("id")
student_no = request.POST.get('student_no', '')
student_name = request.POST.get('student_name', '')
conn = MySQLdb.connect(host="localhost", user="root", passwd="123456", db="sms", charset='utf8')
with conn.cursor(cursorclass=MySQLdb.cursors.DictCursor) as cursor:
cursor.execute("UPDATE sims_student set student_no=%s,student_name=%s where id =%s",
[student_no, student_name, id])
conn.commit()
return redirect('../')
# 学生信息删除处理函数
def delete(request):
id = request.GET.get("id")
conn = MySQLdb.connect(host="localhost", user="root", passwd="123456", db="sms", charset='utf8')
with conn.cursor(cursorclass=MySQLdb.cursors.DictCursor) as cursor:
cursor.execute("DELETE FROM sims_student WHERE id =%s", [id])
conn.commit()
return redirect('../')3.以数据显示在templates中的html文件作为引例
通过上面的我们已经学会了怎么处理数据库，生成数据显示出来，接下来通过一个html试验，进一步说明原理，帮助大家写端口
这是我的测试html
代码如下
{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show Level-3 metrics</title>
</head>
<body style="background-image: url({% static 'images/1.jpg' %});background-size:100% 133.5%;">
<div class="content">
<h1>《您好，欢迎使用班级测试成绩查询系统》</h1>
</div>
<!--show Source Cycle Time-->
<form action="/show/" method="POST">
<h1>学号:<input name="sid"></h1>
<h1>日期:<input name="day"></h1>
<h1>科目:<input name="type"></h1>
<input type="submit" value="提交">
</form>
<table border="10" cellpadding="10">
<tr>
<tr>
<td>学号</td>
<td>
{{rees}}
{{res.sid}}
</td>
</tr>
<tr>
<td>姓名</td>
<td>
{{rees}}
{{res.name}}
</td>
</tr>
<tr>
<td>考试科目</td>
<td>
{{rees}}
{{res.test_type}}
</td>
</tr>
<tr>
<td>分数</td>
<td>
{{rees}}
{{res.grade}}
</td>
</tr>
<tr>
<td>名次</td>
<td>
{{rees}}
{{res.No}}
</td>
</tr>
<tr>
<td>考试日期</td>
<td>
{{rees}}
{{res.day}}
</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>效果如下：
重点：
1.{{res.name}} (html)
2. return render() (django的view文件)
1.html接收后端传送来的数据，类型不定，内部语法与python如出一辙，读取数据库
2.渲染函数 & JSX — Vue.js (vuejs.org)
这部分原本写了2000多字，不小心撤销，全没了，那这个渲染大家就去官网学习吧，这里不赘述了，再写一遍心态受不了了
4.跨域显示数据——django数据显示在vue
跨域
django实现跨域
只需几步即可实现跨域
1.下载django-cors-headers
$ pip install django-cors-headers
2.在INSTALLED_APPS里添加“corsheaders”
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
'rest_framework.authtoken',
'channels',
'corsheaders', # 配置跨域
]
3.在MIDDLEWARE_CLASSES添加 ‘corsheaders.middleware.CorsMiddleware’
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',
]
4…在setting.py里添加
# 设置跨域
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
django实现跨域完成
vue实现跨域
修改config文件（没有就创建一个，和src同级）下的index.js
添加一下配置
proxyTable: {
'/api':{
target: 'http://localhost:8000',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
前后端配置跨域后axios请求的格式
前端配置跨域后
this.axios({
url: "/api/user/",
}).then(res => {
});
后端配置跨域后
this.axios({
url: "http://127.0.0.1:8000/user/",
}).then(res => {
});
以上配置完毕
然后！！！后端的接口就可以用在前端！！！数据也可以传给VUE使用{{}}形式渲染！！！
有时间我把我的展示给大家，今天我把我写的都给撤销了，心好累。
下一篇文章：django后台admin接收excel等文件对数据库增添删改（Django+Vue+Mysql，数据库管理数据分析网站）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
