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

于 2024-07-31 18:02:05 发布
阅读量869 收藏 21
点赞数 28
分类专栏： vue学习踩坑分享避雷 全栈/后端/数据库 文章标签： django python 后端 交互 前端 mysql vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38686683/article/details/140519553
版权

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

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

糯米饭团饭米糯
关注
  • 28
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python后台vue3前端构建网站最简单示范
Mark的博客
05-04 3318
构建一个简单的网站样本程序，使用 Vue 3 作为前端框架，Python 的 FastAPI 作为后端 API。
python和vue结合开发前端_Python--前端之路-----Vue
weixin_32956805的博客
02-10 5597
Vue导入Vue 创建vue对象加载后执行： window.onload=function(){ new Vue... } 绑定：var vm= new Vue({ el:"#标签的id，此处类似于选择器", 属性，方法 })属性：data：{属性1："值1", 属性2：值2，属性：true}方法：methods：{ 方法名1: function (){执行内容}，方法名2: function()...
Python+Django+vue3全栈开发商城项目.zip
10-05
Python+Django+vue3全栈开发商城项目，包含用户、订单、购物车、商品等模块，后端代码均有注释，是学习python项目开发良好案例
python+Django+vue+mysql+pycharm开发环境的搭建
热门推荐
技在手，能在身，思在脑，从容过生活。
01-28 2万+
工作之余断断续续根据网上找到的教程进行环境搭建，搭建了多个。 但是一直没有一个整体概念，到底该先做什么，后做什么， 操作一步后，结果应该是怎样 另外，网上的教程都是直接用命令行操作，用pycharm又应该怎么弄呢 环境搭建好以后，应该怎么分目录结构，应该先从哪里的代码开始写，写了以后，又需要做哪些配置 这些问题一直困扰着我，所以我决定边学边记录整理。 也希望能帮助同为初学者的你少走一些...
python使用pywebview集成vue3和element-plus开发桌面系统框架
最新发布
专注技术交流、咨询
07-04 1572
随着web技术越来越成熟，就连QQ的windows客户端都用web技术来开发，所以在未来，web技术来开发windows桌面软件也会越来越多，所以在此发展驱动之下，将最近流程的python与web技术相结合，使用vue3和element-plus、vue-router、saas(CSS扩展语言)，来开发桌面管理系统，也是一个不错的选择。最主要的是两者技术门槛比较低，而且开发效率也很快，同时也可以做出漂亮的界面。 一、技术背景 python：版本号为3.7（你也可以换成高版本，同样支持） vue3：版本为
【无标题】从0到1 搭建一个vue3+Django项目
weixin_45286211的博客
12-05 1566
从0到1搭建一个vue3+Django项目
python前端开发工具_python 全栈开发，Day90(Vue组件,前端开发工具包)
weixin_39721009的博客
12-03 277
昨日内容回顾1. Vue使用1. 生成Vue实例和DOM中元素绑定2. app.$el -->取出该vue实例绑定的DOM标签3. app.$data -->取出该vue实例绑定的data属性2. 模板语法1. {{name}} -->在标签中间引用data属性中的变量2. v-html='msg' -->在页面上显示我定义的标签元素3. v-if='o...
前后端项目的搭建
空城的博客
12-11 1080
2.1 项目调用流程图 2.2 后端项目创建 2.2.1 创建项目 2.2.2 编辑pom.xml文件 <!--mybatis依赖包--> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId>
打通Vue3+Flask（python3）+Mysql-实现简单数据交互
m0_53536475的博客
04-08 3842
一般是右键新建数据库，然后选中数据库，选择创建新的表，然后设计需要的字段，注意的是每一个表需要设计主键（选中行，右键创建新的索引-PRIMARY）。（建议下载长期支持版本，版本不宜过低，比如18,20），Vue.js（npm install -g @vue/cli，下载速度慢可以设置淘宝镜像）。5、接下来，输入cd vueproject，进入当前项目目录，输入npm i，下载项目所需要的依赖。我这里是中文版，如果有需要，可以在设置里面的插件，下载中文包，然后重启pycharm即可，插件如下。
python+django+mysql+vue前后端分离开发的小型电子商务管理系统，含独立后端
05-17
综上所述，这个压缩包包含了一个完整的前后端分离的电商系统，涉及了Python Django后端开发、MySQL数据库管理、Vue.js前端构建等多个重要知识点。通过深入学习和实践，可以提升对全栈Web开发的理解和技能。
Python+Vue+Django前后端分离项目实战
06-18
本视频采用了前后端分离的开发模式，前端使用Vue.js+Element UI实现了Web页面的呈现，后端使用Python 的Django框架实现了数据访问的接口，前端通过Axios访问后端接口获得数据。在学习完本章节后，真正理解前后端的...
springBoot+vue初始化前后端分离项目搭建（含数据库）
09-01
springBoot+vue初始化前后端分离项目搭建（含数据库） 适合初学习 包含如何跨域 axios 比较简单清晰 https://www.cnblogs.com/mike-mei/p/13597036.html
Python前后端分离开发Vue+Django REST framework实战 课程项目.zip
03-05
适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 项目具有较高的学习借鉴价值，也可直接拿来修改复现。可以在这些基础上学习借鉴进行修改和扩展，实现其它功能。 可放心...
Python+Vue+Django前后端分离的学习学生管理系统源码.zip
05-08
Python+Vue+Django前后端分离的学习学生管理系统源码 Python+Vue+Django前后端分离的学习学生管理系统源码 Python+Vue+Django前后端分离的学习学生管理系统源码 Python+Vue+Django前后端分离的学习学生管理...
Vue3前后端交互错误处理一致性
chenhaiy的博客
03-21 665
Vue3前后端交互错误处理一致性 在Web开发中，前后端的交互中错误处理是不可避免的，比如：前端提交数据，后端需要校验，对于不符合要求的数据需要在前端进行提示。通常的做法是在后端返回固定格式的JSON数据来处理，但由于返回的JSON格式在业务、团队等方面很难维护其规范性，所以借助错误处理的方式，在数据请求中统一封装，这样有助于程序员将精力集中到业务处理中。 1.环境 开发环境 前端 Vue3 后端 Python FastAPI 2.后端处理规范 后端在
python和vue结合开发前端,请手动配置Vue开发环境
神器榜
09-12 2239
原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：文件：constserverSrc='';constuserSite="中国钓鱼岛";
vue3前后端互连
weixin_61980761的博客
06-25 653
使用 Vue 3 的 Composition API（如 setup、reactive、ref 等）或 Options API（如 data、methods、computed 等）来实现组件间的数据和事件通信。前后端互连通常指的是前端应用程序与后端服务之间的通信。确保 API 接口的 URL、请求方法（GET、POST、PUT、DELETE 等）和请求参数都正确配置。例如，使用 Axios，你可以创建一个服务文件来封装所有的 HTTP 请求逻辑。后端服务需要配置允许来自前端应用程序的跨域请求。
Vue3学习(三)前后端数据交互
m0_64393446的博客
06-26 2646
pom配置阿里云仓库启动成功创建数据库表t_user实现增删改查sql语句SQL语句打印：Mybatis开启下划线自动转驼峰统一包装类Result。
前端框架学习之Vue 3.前后端交互(promise,fetch,axios，async/await)
小马哥的博客
09-13 7508
1.前后端交互模式 接口调用方式 ·原生ajax ·基于jQuery的ajax ·fetch ·axios 2.Promise用法 异步编程效果分析 定时任务 ajax 事件函数 多次异步调用的依赖分析 ·多次异步结果不确定性，不能依赖执行顺序 ·对异步结果有依赖的，需要用嵌套形式 promise是异步编程的一种解决方案，promise是一个对象，它可以获取异步操作的消息。 使用promise的好处 ·可以避免多次异步调用嵌套问题 ·promise对象提供了简洁的API，使得控制异步更加容易 pro
python+django+vue搭建前后端分离项目
09-11
Python是一种流行的编程语言，有非常丰富的库和框架可供使用。而Django是一个基于Python的开发框架，用于快速搭建Web应用程序。Vue是一种流行的JavaScript框架，用于构建用户界面。 当我们要搭建一个前后端分离的项目时，可以使用Python的Django框架和Vue框架来实现。下面是大致的步骤： 1. 对于后端，我们可以使用Django框架来搭建RESTful API。首先，创建一个新的Django项目并设置好相关配置。然后，定义数据模型和数据库表，可以使用Django的ORM（对象关系映射）来简化数据库操作。接下来，创建视图函数来处理不同的API请求，可以通过序列化器将模型数据转换为JSON格式进行传输。最后，设置URL路由映射和权限控制，确保API的安全性和可访问性。 2. 对于前端，我们可以使用Vue框架来构建用户界面。首先，创建一个新的Vue项目并安装所需的依赖项。然后，创建组件来管理不同的页面和功能模块。在组件中，可以使用Vue的数据绑定和计算属性等功能来简化数据处理和状态管理。同时，可以使用Vue Router来管理页面之间的导航和路由，以及使用axios库来发送API请求和接收响应。 3. 在前后端之间进行通信时，前端通过axios发送HTTP请求到后端的API接口，后端处理请求并返回相应的数据。前端可以根据接口的返回结果来更新界面和展示数据。 总的来说，使用Python的Django框架和Vue框架可以很好地实现前后端分离的项目。Django提供了强大的后端支持，可以快速搭建API接口，而Vue框架则提供了便捷的前端开发环境，可以轻松构建用户界面。通过这种搭配，我们可以高效地开发出功能完善、交互流畅的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值