ICode9

精准搜索请尝试: 精确搜索
首页 > 数据库> 文章详细

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

2020-07-15 12:00:13  阅读:2091  来源: 互联网

标签:vue 数据库 py django session https mysql


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

后端

创建项目

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

生成目录大致如下

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

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

解决跨域问题

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

在settings的INSTALLED_APPS中添加,如下图所示,因为我以后的应用没有传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="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

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

标签:vue,数据库,py,django,session,https,mysql
来源: https://www.cnblogs.com/Qi-Lin/p/13214384.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有