(二)最新版Django项目数据库迁移;读取数据库增添删改;以及显示在html或vue前端(Django+Vue+Mysql,数据库管理数据分析网站)

     阅读:60

目录

1.创建django项目

2.数据库的增添删改

(1).创建models

(2).数据库迁移

数据库迁移的两大命令:

(3).Django处理数据库

1)查询

url配置:

输入网址

2)增删改(写这里的时候不小心ctrl+z全删了,所以又写了一遍,下面的不做详细解释了,心情不美丽,可以私聊问我,或者等我改)

3.以数据显示在templates中的html文件作为引例

4.跨域显示数据——django数据显示在vue

跨域


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'),
]

输入网址

http://127.0.0.1:8000/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,数据库管理数据分析网站)