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

见贤思齐

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，语言是pythonPython及Pycharm专业版下载安装教程（Python3.11版）附JetBrains学生认证教程_python专业版下载教程-CSDN博客（3）数据库，使用了workbench作为可视化的工具MySQL8.0版安装教程+Workbench可视化配置教程（史上最细、一步一图解）_mysqlworkbench8.0安装教程-CSDN博客2工作拆解我们可以按照数据库建表->后端连接数据库->后端接口代码->测试接口->前端代码->前端调用接口这个顺序来进行，切忌不要一次性做太多内容而不进行测试，出错了都不知道问题出现在哪一步。本文以写一个登陆的接口为例。2.1数据库建表2.1.1使用可视化工具建表（简单直观）如果看见以下提示：则在计算机管理中打开数据库的进程，右键MySQL80->启动正常启动后，workbench内容如下：（1）首先创建一个数据库（2）随后可以在这里看到刚创建的数据库，之后可以新建表了（3）设计表内容，我们做的是用户表，实现登陆注册，一切从简，只用了两个属性，id和pwd分别是登陆名（不能重复、不能为空）与密码（4）往数据库中插入数据填入数据，选择apply，我们就得到了两条数据， 可使用上方sql代码验证是否成功插入。闪电标识为执行当前sql语句的意思，执行结果如下方红框所示，代表插入成功。2.1.2使用sql语句建表首先复习一下sql语句：/*新建操作*/createdatabasedbname; //创建数据库CREATETABLEtable_name(  column1datatype,  column2datatype,  column3datatype,  ...); //新建表其中每个column最后可添加一些关键字，如第1行改为idvarchar(50)PRIMARY //KEY，表示id为此表的主键/*删除操作*/dropdatabasedbname//删除数据库dorptabletable_name//删除表/*插入数据*/insertintotable_name(key1,key2)value(value1,value2); //将某条数据插入表中insetintotable_namevalue(value1,value2,value3,...)//此value必须按照key的顺序来usedbname//使用某个具体数据库/* 查询*/select*fromtable_name; //*为通配符，表示”全部“，如果前面没用usedatabase，             //则此处使用dbname.table_nameselectkey1,key2fromtable_name;//查询指定的列名/属性select*fromtable_namewherekey1=value//查询key1值为value的所有记录使用sql语句建表，细心的同学可以发现，这些sql语句在2.1.1步骤建表时就会自动生成，这里我直接套用上述自动生成的结果：CREATETABLE`new_schema`.`all_users`( `id`VARCHAR(50)NOTNULL, `pwd`VARCHAR(45)NOTNULL, RIMARYKEY(`id`), UNIQUEINDEX`id_UNIQUE`(`id`ASC)VISIBLE);INSERTINTO`new_schema`.`all_users`(`id`,`pwd`)VALUES('1','123456');INSERTINTO`new_schema`.`all_users`(`id`,`pwd`)VALUES('2','666666');再用2.1.1中的方法查询，检查一下是否成功，这步也可不做。 2.2编写后端接口打开pycharm2.2.1准备环境（1）安装mysql驱动，目的是连接后端与数据库pipinstallmysql-connector-python//如果第一条命令安装速度过慢或者网络响应超时，则可使用此条镜像命令pipinstallmysql-connector-python-ihttps://pypi.tuna.tsinghua.edu.cn/simple看到下图内容，就代表成功： （2）安装django框架//安装使用镜像pipinstallsome_package--indexhttps://pypi.mirrors.ustc.edu.cn/simple///安装django镜像pipinstalldjango配置环境变量，安装完django后，在python/Scripts目录下，会有django-admin.exe文件将django-admin.exe文件的路径加到环境变量中： 查看django是否安装成功：在终端命令如下命令，见到红框内容（为django的版本信息），则代表成功。pythonimportdjangodjango.VERSION （3）创建django项目在pycharm的终端中输入命令：django-adminstartprojectproject_name.随后就会出现以project_name为名字的文件夹，python中将整体不同的模块功能称为“app”，比如编写银行系统时，可分为“用户管理”、“账户管理”、“存储”、“理财”等多个app，可用如下命令创建app：//创建django内app（项目路径下）django-adminstartappapp_name文件结构如图：（4）配置pycharm的python解释器（5）启动服务器//启动django服务器pythonmanage.pyrunserverlocalhost:8000//验证：从网页进入localhost:portnum(8000)可查看进入网页可看到： 2.2.2后端接口代码准备 website\website\urls.py此处编写路由映射fromdjango.contribimportadminfromdjango.urlsimportpath,include,re_pathfromdj_apiimportviewsfromdjango.views.generic.baseimportTemplateViewimportapp_nameimportapp_name.viewsurlpatterns=[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接口的类型是GETfromdjango.shortcutsimportrender,HttpResponseimportmysql.connectorimportrequests#Createyourviewshere.db=mysql.connector.connect(host="localhost",#MySQLserveruser="root",password="123456",database="jebot_task1")#createcursorobjectcursor=db.cursor()#query#defprint():#results=cursor.fetchall()#print('xw')#forrowinresults:#print(row)#return0defverify_login(user_id,pwd):sql="SELECT*FROMall_usersWHEREusername=%(user_id)sANDpwd=%(pwd)s"cursor.execute(sql,{"user_id":user_id,"pwd":pwd})#cursor.execute("SELECT*FROMall_users")results=cursor.fetchall()iflen(results)==0:returnFalseelse:returnTruedeflogin(request):ifrequest.method=='GET':user_id=request.GET.get('user_id','')pwd=request.GET.get('pwd','')ifstr(user_id)=='':returnJsonResponse({'code':1001,'msg':'idcan\'tbeempty'})ifstr(pwd)=='':returnJsonResponse({'code':1001,'msg':'passwordcan\'tbeempty'})else:ifverify_login(user_id=user_id,pwd=pwd):returnJsonResponse({'code':1002,'msg':'OK'})else:returnJsonResponse({'code':1002,'msg':'NO'})else:returnJsonResponse({'code':1003,'msg':'invalidrequest'})website\dj_api\urls.pyapp内的路由信息fromdjango.urlsimportpath,include,re_pathfromdj_apiimportviewsurlpatterns=[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.vuesrc\components\HellowWorld.vue用户名密码登陆取消在终端使用命令运行前端网页：npmrundev 3最后效果完成啦！有问题的小伙伴可以留言