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中实现如下的逻辑实现分页功能

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中编写相应规则

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

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

        <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=" 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

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

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

删除sessionID

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

前端路由配置

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

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

代码

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