vue+django+mysql前后端分离的课程管理系统

本文是自学vue和django,边学边做和立马上手做的项目的一些记录,只是为了备忘+回顾,行文有些混乱,写的代码肯定有不少bug,并且肯定有很多不对的地方

后端#

创建项目#

填写应用名后会自动生成应用文件

生成目录大致如下

在新建的应用的settings.py中添加

设置允许访问地址,因为前后端都在我本机上,设置地址为本机地址

解决跨域问题#

安装pip install django-cors-headers
在新建的应用的settings.py中加入注册

在settings的INSTALLED_APPS中添加'corsheaders.middleware.CorsMiddleware',如下图所示,因为我以后的应用没有传cookie,也直接粗暴把这个防止跨站攻击的选项注销了

添加允许访问的白名单,如下

配置数据库#

在models.py中创建数据库表的结构,其中db_name为表的名字,其中字段的详细含义介绍参考https://blog.csdn.net/bbwangj/article/details/79939269

关于数据库视图的操作,可以先在数据库中新建视图,然后,在models中配置,managed设置为false,必须有主键

最后通过通过以下命令生成表结构
python manage.py makemigrations
Python manage.py migrate

编写处理接口#

在views.py中编写处理函数

读取数据#

get方式的请求可以通过request.GET.get得到相应的数据
post方式的请求可以通过json.loads(request.body.decode('utf-8'))得到数据
当然也有其它的方法

处理#

其中大部分涉及到数据库的操作可以参考
https://www.cnblogs.com/zgf-666/p/9119126.html
https://www.cnblogs.com/yangxinpython/p/11553188.html

  • 增:构造好一个对象后,使用save()方法保存
  • 删:对查询到的对象使用delete()方法删除
  • 改:对查询到的对象的各个字段修改后,使用save()方法保存
  • 查:有all、first、get、filter等方法,对于复杂查询也可以使用Q查询

返回数据#

通过JsonResponse的形式以json格式返回数据
并在urls.py中配置,首先要引入views,接着如下图配置,其中第一项为访问的链接,第二项为处理的函数

开启服务#

通过命令 python manage.py runserver (也可以后面跟 ip:端口 这样指定侦听的ip和端口)开启服务

前端#

项目生成#

官网说的很详细https://cli.vuejs.org/zh/
下载vue cli
可以通过vue ui命令,使用图形化界面生成项目

选择创建项目的路径,然后在此创建新项目

然后选择相应的选项

选择手动配置需要的功能

按照提示一步步来就可
最后会生成这样的文件结构,在src文件中,assets存放图标,components存放组件,router配置路由,views保存视图

最后创建各个vue文件

配置element-ui#

官网说的很详细https://element.faas.ele.me/#/zh-CN
下载好element-ui后,在生成的项目的main.js文件中引入element-ui

配置axios#

下载axios,然后在main.js中引入

axios的使用方法https://blog.csdn.net/qq_31837621/article/details/80688854

运行#

点击运行,再点击启动,就可开启前端服务,在输出中可以查看报错信息

前端分页操作#

在element-ui组件中选择分页的组件,复制粘贴,然后主要在js中实现如下的逻辑实现分页功能

Copy
getPageStudent: function () { this.pageTableData = []; for (let i = (this.currentPage - 1) * this.pagesize; i < this.total; i++) { this.pageTableData.push(this.tableData[i]); if (this.pageTableData.length === this.pagesize) break; } }, handleSizeChange(val) {//页面大小改变,获得一页显示多少数据 this.pagesize = val; this.getPageStudent(); }, handleCurrentChange(val) {//页面改变,获得现在显示第几页 this.currentPage = val; this.getPageStudent(); },

前端登录界面#

登录之后跳转可以使用路由that.$router.push('/home')压入对应的页面

规则验证#

可以在data中编写相应规则

Copy
rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] }

然后在表单上:model :rules ref进行绑定

Copy
<el-form style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)" :model="loginForm" :rules="rules" ref="loginForm"> <el-form-item prop="username"> <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名" ></el-input> </el-form-item> <el-form-item prop="password"> <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button style="width: 300px" type="primary" @click="login">登录</el-button> </el-form-item> </el-form>

在函数中通过this.$refs.loginForm.validate(valid => {})进行验证

前端信息保存#

返回信息cooKie,session等保存 可以通过localStorage.名字 = 信息保存到前端,但localStorage是全局的
也可以通过window.sessionStorage.setItem(键值对形式)保存
退出登录时通过localStorage.clear()或sessionStorage.clear()删除即可

使用django自带的session数据库#

还可以使用django自带的session数据库,用于登录。
需要引入from django.contrib.sessions.models import Session
创建session

Copy
request.session['username'] = data['username'] request.session.save()

通过request.session.session_key得到对应的sessionID

删除sessionID

Copy
sess = Session.objects.get(pk=sessionID) sess.delete()

前端路由配置#

通过如图所示可以导入相应Vue视图

path表示用户请求什么路径,component表示要加载的页面,通过children可以设置子路由,红框中表示如果用户请求的路径没有匹配的,一律显示默认起始页面

代码#

所有前后端代码和数据库文件链接
提取码:1c4r

posted @   启林O_o  阅读(960)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示
CONTENTS