【萌新向】全栈初体验，从头开始搭建前后端交互项目vue3+python+django+mysql_python vue django

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 最后效果

完成啦！有问题的小伙伴可以留言