【MySQL + Django + vue3】记忆复苏术之web开发

1. Django相关

1.1 安装、环境配置与基础

1.1.1 安装

见Django 安装| 菜鸟教程

1.1.2 配置与基础

创建并启动一个django项目

$ django-admin startproject xxx
$ python manage.py runserver 0.0.0.0:8080

1.2 应用（APP）

1.2.1 创建应用

创建应用：

$ python manage.py startapp myapp

在setting.py的INSTALLD_APPS中设置该应用

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp' #<-HERE
]

1.2.2 APP结构

文件结构如下所示

dataset
|-- admin.py
|-- apps.py
|-- models.py
|-- tests.py
|-- views.py
|-- __init__.py
└─ migrations
        └─ __init__.py

1.2.2.1 view（视图）：处理响应

一个视图函数，简称视图，是一个简单的 Python 函数，它接受 Web 请求并且返回 Web 响应。

响应可以是一个 HTML 页面、一个 404 错误页面、重定向页面、XML 文档、或者一张图片…

无论视图本身包含什么逻辑，都要返回响应。代码写在哪里都可以，只要在 Python 目录下面，一般放在项目的 views.py 文件中。

每个视图函数都负责返回一个 HttpResponse 对象，对象中包含生成的响应。

视图层中有两个重要的对象：请求对象(request)与响应对象(HttpResponse)。

def runoob(request):
    name = request.POST.get("name")
    return HttpResponse('姓名：{}'.format(name))

1.2.2.2 model（数据表）

class Dataset(models.Model):
    '''
    dataset: save the basic information of datsets

    - ds_name
    - ds_size: the size of dataset
    '''
    ds_name = models.CharField(max_length=100)
    ds_size = models.IntegerField()
    ds_url = models.URLField()

    # 1 to 1
    task =  models.ForeignKey(Task, on_delete=models.CASCADE)
    
    # ManyToMany
    subtask = models.ManyToManyField(SubTask, blank=True)

1.3. django使用mysql

我的mysql和django在linux系统是上开发因此以下都是linux命令。

1. 启动mysql服务并查看状态

sudo systemctl start mysql
systemctl status mysql.service

2. 在mysql里创建表

mysql> create database GP2023;

3. 修改setting.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 默认
        'NAME': 'GP2023',  # 连接的数据库
        'HOST': '127.0.0.1',  # mysql的ip地址
        'PORT': 3306,  # mysql的端口
        'USER': 'root',，  # mysql的用户名
        'PASSWORD': '--'  # mysql的密码
    }
}

4. 修改__init__.py

import pymysql
pymysql.install_as_MySQLdb()

5 数据库迁移

python manage.py makemigrations
python manage.py migrate

1.4 django使用pillow库处理图片

1. 安装

pip install pillow

2. MySQL相关

在migrate后表会变得很乱不过没关系，只用我们想要的就可以了。

mysql> use GP2023;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> show tables;
+----------------------------+
| Tables_in_GP2023           |
+----------------------------+
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| dataset_dataset            |
| dataset_dataset_subtask    |
| dataset_subtask            |
| dataset_task               |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
| model_frame                |
| model_model                |
+----------------------------+
16 rows in set (0.00 sec)

2.1 增删改查

2.1.1 增加数据

INSERT INTO table_name ( field1, field2,...fieldN )
                       VALUES
                       ( value1, value2,...valueN );

使用例：

mysql> insert into dataset_task (task_name) values ('Computer Vision');
mysql> insert into dataset_task (task_name) values ('Natural Language Processing');
mysql> insert into dataset_task (task_name) values ('Audio');

mysql> select * from  dataset_task;
+----+-----------------------------+
| id | task_name                   |
+----+-----------------------------+
|  1 | Computer Vision             |
|  2 | Natural Language Processing |
|  3 | Audio                       |
+----+-----------------------------+
3 rows in set (0.00 sec)

2.1.2 修改数据

UPDATE table_name SET field1=new-value1, field2=new-value2
[WHERE Clause]

使用例：

mysql> insert into dataset_dataset (ds_name, ds_size, ds_url, task_id) values ('CIFAR-10',181850, 'https://www.cs.toronto.edu/~kriz/cifar.html', 1);
Query OK, 1 row affected (0.01 sec)

mysql> select * from dataset_dataset;
+----+----------+---------+---------------------------------------------+---------+
| id | ds_name  | ds_size | ds_url                                      | task_id |
+----+----------+---------+---------------------------------------------+---------+
|  1 | CIFAR-10 |  181850 | https://www.cs.toronto.edu/~kriz/cifar.html |       1 |
+----+----------+---------+---------------------------------------------+---------+

附：查看表中所有列

SHOW FULL COLUMNS FROM dataset_dataset;

3. 前后端跨域

3.1 后端django-cors-headers

参考：前端vue和django后端数据交互，跨域问题的解决

1. 安装

pip install django-cors-headers

2. 注册

# settings.py
INSTALLED_APPS = (
	...
    'corsheaders',		# 跨域设置
    ...
)

3. 添加中间件

# settings.py
MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',# <- 跨域，放第一
    ...
    'django.middleware.common.CommonMiddleware', # <-已有
    ...
)

4. 增加跨域忽略

# settings.py
CORS_ORIGIN_ALLOW_ALL = True # 直接允许所有主机跨域
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie

3.2 vue3前端axios全局配置

配置axios，使用http进行通讯。

//  src/main.js
/* --------------------- axios ---------------------*/
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000';

const app = createApp(App)

app.config.globalProperties.$http=axios;

组件内

async getDatasetList(){
     await new Promise(resolve => {
         this.$http.post('/dataset/getDatasetList/').then(res =>{
             if (res.data.success === false) {
                 return this.$message.error('查询失败')
             }
             this.$message.success('查询成功')
             this.datasetList = res.data.datasetList
         })
         resolve();
     })
 },