1 准备工具

（1）前端：vue3+vite+ts/js

（2）后端：python+django+pycharm

（3）数据库：MySQL+MySQLWorkbench

（4）测试工具：Apipost

安装教程可参考以下链接:

（1）前端，这里我们创建vue3项目，加入路由，导入axios、elementui(plus)、less（sass）即可

vite+vue3+ts 手把手教你创建一个vue3项目_vite创建vue3项目-CSDN博客

（2）后端，使用的框架是django，用的编辑器是pycharm，语言是python

Python及Pycharm专业版下载安装教程（Python 3.11版）附JetBrains学生认证教程_python专业版下载教程-CSDN博客

（3）数据库，使用了workbench作为可视化的工具

MySQL8.0版安装教程 + Workbench可视化配置教程（史上最细、一步一图解）_mysql workbench8.0安装教程-CSDN博客

2 工作拆解

我们可以按照

数据库建表 -> 后端连接数据库 -> 后端接口代码 -> 测试接口 -> 前端代码 -> 前端调用接口

这个顺序来进行，切忌不要一次性做太多内容而不进行测试，出错了都不知道问题出现在哪一步。

本文以写一个登陆的接口为例。

2.1 数据库建表

2.1.1 使用可视化工具建表（简单 直观）

如果看见以下提示：

则在计算机管理中打开数据库的进程，右键MySQL80 -> 启动

正常启动后，workbench内容如下：

（1）首先创建一个数据库

（2）随后可以在这里看到刚创建的数据库，之后可以新建表了

（3）设计表内容，我们做的是用户表，实现登陆注册，一切从简，只用了两个属性，id和pwd

分别是登陆名（不能重复、不能为空）与密码

（4）往数据库中插入数据

填入数据，选择apply，我们就得到了两条数据， 可使用上方sql代码验证是否成功插入。

闪电标识为执行当前sql语句的意思，执行结果如下方红框所示，代表插入成功。

2.1.2 使用sql语句建表

首先复习一下sql语句：

<code>/* 新建操作 */

create database dbname;  // 创建数据库

CREATE TABLE table_name (

    column1 datatype,

    column2 datatype,

    column3 datatype,

    ...

);  // 新建表 其中每个column最后可添加一些关键字，如 第1行改为 id varchar(50) PRIMARY 

// KEY，表示id为此表的主键

/* 删除操作 */

drop database dbname // 删除数据库

dorp table table_name // 删除表

/* 插入数据 */

insert into table_name(key1, key2) value(value1, value2);  // 将某条数据插入表中

inset into table_name value (value1, value2, value3, ...) // 此value必须按照key的顺序来

use dbname // 使用某个具体数据库

/* 查询 */

select * from table_name;  // * 为通配符，表示”全部“，如果前面没用use database，

                          // 则此处使用dbname.table_name

select key1, key2 from table_name; // 查询指定的列名/属性

select * from table_name where key1 = value // 查询key1值为value的所有记录

使用sql语句建表，细心的同学可以发现，这些sql语句在2.1.1步骤建表时就会自动生成，这里我直接套用上述自动生成的结果：

CREATE TABLE `new_schema`.`all_users` (

  `id` VARCHAR(50) NOT NULL,

  `pwd` VARCHAR(45) NOT NULL,

  PRIMARY KEY (`id`),

  UNIQUE INDEX `id_UNIQUE` (`id` ASC) VISIBLE);

INSERT INTO `new_schema`.`all_users` (`id`, `pwd`) VALUES ('1', '123456');

INSERT INTO `new_schema`.`all_users` (`id`, `pwd`) VALUES ('2', '666666');

再用2.1.1中的方法查询，检查一下是否成功，这步也可不做。

 2.2 编写后端接口

打开pycharm

2.2.1 准备环境

（1）安装mysql驱动，目的是连接后端与数据库

pip install mysql-connector-python

// 如果第一条命令安装速度过慢或者网络响应超时，则可使用此条镜像命令

pip install mysql-connector-python -i https://pypi.tuna.tsinghua.edu.cn/simple

看到下图内容，就代表成功：

（2）安装django框架

<code>// 安装使用镜像

pip install some_package --index https://pypi.mirrors.ustc.edu.cn/simple/

// 安装django镜像

pip install django

配置环境变量，安装完django后，在python/Scripts目录下，会有django-admin.exe文件

将django-admin.exe文件的路径加到环境变量中：

 查看django是否安装成功：

在终端命令如下命令，见到红框内容（为django的版本信息），则代表成功。

<code>python

import django

django.VERSION

（3）创建django项目

在pycharm的终端中输入命令：

<code>django-admin startproject project_name .

随后就会出现以project_name为名字的文件夹，python中将整体不同的模块功能称为“app”，比如编写银行系统时，可分为“用户管理”、“账户管理”、“存储”、“理财”等多个app，可用如下命令创建app：

<code>// 创建django内app（项目路径下）

django-admin startapp app_name

文件结构如图：

（4）配置pycharm的python解释器

（5）启动服务器

<code>// 启动django服务器

python manage.py runserver localhost:8000

// 验证：从网页进入localhost:portnum(8000)可查看

进入网页可看到：

2.2.2 后端接口代码准备

 website\website\urls.py

此处编写路由映射

<code>from django.contrib import admin

from django.urls import path,include, re_path

from dj_api import views

from django.views.generic.base import TemplateView

import app_name

import app_name.views

urlpatterns = [

path('admin/', admin.site.urls),

path('dj_api/', include('dj_api.urls'))

]

website\website\settgins.py

此处是编写一些配置信息

由于我是添加了两个app，一个叫app_name，另一个叫dj_api，大家加的时候，按照自己添加的app名字添加即可

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'app_name',

'dj_api'

]

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

]

ROOT_URLCONF = 'website.urls'

CORS_ORIGIN_ALLOW_ALL = True

 另附不加跨域代码出现问题的情况图，大家可自行参考：

website\dj_api\views.py

 此处编写的是该app的业务代码，在此处直接提供接口

db中填写需要联接的数据库的信息

login接口的类型是GET

<code>from django.shortcuts import render, HttpResponse

import mysql.connector

import requests

# Create your views here.

db = mysql.connector.connect(

host="localhost", # MySQL servercode>

user="root",code>

password="123456",code>

database="jebot_task1"code>

)

# create cursor object

cursor = db.cursor()

# query

# def print():

# results = cursor.fetchall()

# print('xw')

# for row in results:

# print(row)

# return 0

def verify_login(user_id, pwd):

sql = "SELECT * FROM all_users WHERE username = %(user_id)s AND pwd = %(pwd)s"

cursor.execute(sql, {"user_id": user_id, "pwd": pwd})

# cursor.execute("SELECT * FROM all_users")

results = cursor.fetchall()

if len(results) == 0:

return False

else:

return True

def login(request):

if request.method == 'GET':

user_id = request.GET.get('user_id', '')

pwd = request.GET.get('pwd', '')

if str(user_id) == '':

return JsonResponse({'code': 1001, 'msg': 'id can\'t be empty'})

if str(pwd) == '':

return JsonResponse({'code': 1001, 'msg': 'password can\'t be empty'})

else:

if verify_login(user_id=user_id, pwd=pwd):

return JsonResponse({'code': 1002, 'msg': 'OK'})

else:

return JsonResponse({'code': 1002, 'msg': 'NO'})

else:

return JsonResponse({'code': 1003, 'msg': 'invalid request'})

website\dj_api\urls.py