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语句：
/* 新建操作 */
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框架
// 安装使用镜像
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的版本信息），则代表成功。
python
import django
django.VERSION
（3）创建django项目
在pycharm的终端中输入命令：
django-admin startproject project_name .
随后就会出现以project_name为名字的文件夹，python中将整体不同的模块功能称为“app”，比如编写银行系统时，可分为“用户管理”、“账户管理”、“存储”、“理财”等多个app，可用如下命令创建app：
// 创建django内app（项目路径下）
django-admin startapp app_name
文件结构如图：
（4）配置pycharm的python解释器
（5）启动服务器
// 启动django服务器
python manage.py runserver localhost:8000
// 验证：从网页进入localhost:portnum(8000)可查看
进入网页可看到：
2.2.2 后端接口代码准备
website\website\urls.py
此处编写路由映射
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
from django.shortcuts import render, HttpResponse
import mysql.connector
import requests
# Create your views here.
db = mysql.connector.connect(
host="localhost", # MySQL server
user="root",
password="123456",
database="jebot_task1"
)
# 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
app内的路由信息
from django.urls import path,include, re_path
from dj_api import views
urlpatterns = [
path('hello/', views.hello),
path('login/',views.login)
]
运行效果：
localhost:8000是本地地址
dj_api是在website\website\urls.py中设置的第一层，
此代码就代表有 localhost:8000/admin 以及 localhost:8000/dj_api 两个可跳转的路由。
而在website\dj_api\urls.py中，可以看到跳转到属于dj_api这个app的路由下，则有hello与login两个可跳转的下级路由， 直接使用 localhost:8000/dj_api 这个地址是无效的。
2.3 测试接口
此处需要用到测试工具apipost
可以按照下述用例逐个测试，查看与预期结果是否相符，接着再进行下一步。
（1）id为空，pwd不为空
（2）id不为空，pwd为空
（3）错误的id与pwd（皆不为空）
（4） 正确的id与pwd（皆不为空）
测试无误，则接口没有问题，后端连接数据库也没有问题。
2.4 前端代码
此处是基于已经创建好vue3项目的前提下，如果还未准备好环境，请回到 “1 准备工具” 中的前端准备，放的链接都是亲测可行的。
创建一个组件，把登陆的页面塞到这里，当然我这里直接用vue的模板改改用了，名字也没换，大家创建的时候，需要命名严谨。
App.vue
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div id="app-div">
<router-view>
<HelloWorld/>
</router-view>
</div>
</template>
<style scoped lang="less">
#app-div {
height: 100%;
width: 100%;
}
</style>
src\components\HellowWorld.vue
<template>
<div class="login_box">
<div class="user_id_box">
<span class="login_title">用户名</span>
<el-input
v-model="id"
style="width: 240px"
placeholder="please input the id"
/>
</div>
<div class="pwd_box">
<span class="login_title">密码</span>
<el-input
v-model="pwd"
style="width: 240px"
placeholder="please input the password"
/>
</div>
<el-button @click="goLogin">登陆</el-button>
<el-button @click="cleanInput">取消</el-button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios';
const id = ref();
const pwd = ref();
enum RequestEnums {
TIMEOUT = 30000,
FAIL = 999,
SUCCESS = 200,
}
const goLogin = async () =>{
const res = await axios.get('http://127.0.0.1:8000/dj_api/login/?user_id='+id.value+'&pwd='+pwd.value);
let flag = res.data.msg
if (flag == 'OK') {
ElMessage({
message: 'login success',
type: 'success',
})
}
else {
ElMessage({
message: 'login fail, please try again',
type: 'warning',
})
}
console.log('res message is ', res.data);
}
const cleanInput = () =>{
id.value = '';
pwd.value = '';
}
</script>
<style scoped lang="less">
.login_box {
width: 400px;
height: 400px;
margin-left: 400px;
margin-top: 300px;
div {
margin-bottom: 20px;
}
}
.login_title {
display: inline-block;
width: 75px;
}
</style>
在终端使用命令运行前端网页：
npm run dev
3 最后效果
完成啦！有问题的小伙伴可以留言
版权归原作者 糯米饭团饭米糯 所有， 如有侵权，请联系我们删除。