基于Django+Vue的线上学城系统的设计和实现

摘要Python的创始人为荷兰人吉多·范罗苏姆

（GuidovanRossum）。翻译过来是蟒蛇的意思。Python是一门完全面向对象的语言，它广义上是一些皆为对象。并且完全支持继承、重载、派生、多继承，有益于增强源代码的复用性。它的强大的一方面是体现在语法非常简单，易上手，代码易读写。它的导入引用非常简单快捷，并且它有超过3万的官方模块，大大的方便了我们的开发速度，当然直接打包引用的话对于学习者的本身是不利的，但由于他的代码的易读性，源码学习者们还是可以看的，这利于我们对功能原理的直接理解。随着互联网的发展及科技的进步，Python也开发出了几个Web框架，其中的Django框架作为Python最重量级的框架，越来越受到人们的喜爱。通过这次疫情，让我们深刻的了解到线上教育的重要性，鉴于上面的种种原因，我打算开发一个线上教育网站，利用前后端分离的技术，基于Django框架及Vue框架开发出一个线上买教学视频的网站，客户可以根据自己的需求来购买相关的课程。关键词：教育网站前后端分离的技术Python语言Web框架Vue框架Abstract□PythonwasfoundedbyGuidovanRossum,aDutch.Ittranslatestopython.Pythonisacompletelyobject-orientedlanguage.Inabroadsense,itisanobject-orientedlanguage.Andfullysupportinheritance,overload,derivation,multiinheritance,whichisbeneficialtoenhancethereusabilityofsourcecode.Ontheonehand,itisverysimple,easytouseandeasytoreadandwrite.Itsimportandreferenceisverysimpleandfast,andithasmorethan30000officialmodules,whichgreatlyfacilitatesourdevelopmentspeed.Ofcourse,itisnotgoodforlearnerstopackageandreferencedirectly,butbecauseofthereadabilityofhiscode,thesourcecodelearnerscanstillseeit,whichisconducivetoourdirectunderstandingofthefunctionalprinciple.WiththedevelopmentofInternetandtheprogressofscienceandtechnology,Throughthisepidemic,letusdeeplyunderstandtheimportanceofonlineeducation.Inviewoftheabovereasons,Iplantodevelopanonlineeducationwebsite,usingthetechnologyoffront-endandback-endseparationpythonhasdevelopedseveralwebframeworks,amongwhichDjangoframework,astheheaviestframeworkofpython,ismoreandmorepopular.Throughthisepidemic,letusdeeplyunderstandtheimportanceofonlineeducation.Inviewoftheabovereasons,Iplantodevelopanonlineeducationwebsite,usingthetechnologyoffront-endandback-endseparation,basedontheDjangoframeworkandVueframework,todevelopanonlineteachingvideowebsite.Customerscanbuyrelevantcoursesaccordingtotheirownneeds.Keywords:thetechnologyofseparatingthefrontandbackofeducationwebsite;Pythonlanguagewebframework;Vueframework目录1绪论 绪论1.1研究背景随着现代科技的发展，以及IT行业的发展，各种培养人才机构如同雨后春笋般出现，但是由于线下教学的局限性，一个老师可能在一个班里只能教几十个学生，而且必须在相同的地址去完成教学。同时线下教育的教学质量有的时候会比较低。并且大部分情况下，老师教过的知识点他就不在重复的再去讲了，学员们只能靠记忆或笔记去重复的学习。随着国内视频，直播行业的不断发展，大部分的人们都懂的并喜欢去通过网络视频去学习，在这种情况下，线上教育学城网站的需求已经非常具有必要了。因此，根据国内线下教育存在的不足，线上教育学城网站具有实际的研究意义。1.2目的和意义线上教育学城网站需要为学习者们提供优质的教学视频，这些视频是经过资深的老师经过不断的章节排版后，视频录制好上传到线上网站，这样就可以大大的提高教学的质量，同时实现多人在线学习的教学模式。学员们可以在自己的手机或者电脑前就可以进行学习，当然根据视频学习完一便后，学员可以在购买的视频的有效期内进行重复的学习，这样就可以构成资源的有效利用。能够大大的让学员在节约时间的同时，受到更优质，跟有效的教育。1.3课题研究现状随着信息技术迅速发展，现在的网络速度越来越快，在4G的前提下，我们已经可以实现了随时随地的观看直播，在线观看视频，5G也在慢慢的普及覆盖，更是在这次的疫情的影响下，让人们对线上教育慢慢的接受及适应了。在这些前提条件下，我个人觉得线上教育已经走进了人们的视线里，它的方便，快捷，随时随地就能进行学习的模式早已深入人心。当然现在的线上教育的缺口还是挺大的，所以我觉得，这个课题的研究很有价值。2开发工具和技术简介2.1JetBrainsPyCharmPyCharm是由JetBrains开发的一套开发工具，它的发展史也是非常传奇的，在进10年来深受大家的喜爱，它在界面的管理方面提供了两种模式，白天及深夜模式。它不仅支持python的编写，更是可以支持前端的各种语言的识别，及提示等等功能。是一个非常棒的编辑器。当然它也是有很多特点的首先，PyCharm不仅拥有一般IDE所具有的功能，比如：界面的快捷对齐功能，高亮显示代码段，代码提示，错误语法的提示等等。它还具有自己一些独特的功能，比如：多个运行环境的自由切换，自带数据库视图工具等等。2.2PythonPython的创始人为荷兰人吉多·范罗苏姆

（GuidovanRossum）。翻译过来是蟒蛇的意思。Python是一门完全面向对象的语言，它广义上是一些皆为对象。并且完全支持继承、重载、派生、多继承，有益于增强源代码的复用性。它的强大的一方面是体现在语法非常简单，易上手，代码易读写。它的导入引用非常简单快捷，并且它有超过3万的官方模块，大大的方便了我们的开发速度，当然直接打包引用的话对于学习者的本身是不利的，但由于他的代码的易读性，源码学习者们还是可以看的，这利于我们对功能原理的直接理解。2.3前后端框架2.3.1Django框架Django，是开发者们使用Python语言开发开出来的一套高效，语法简洁的重量级网络框架，它是MVC模式的基础下开发出来的一套一个类对应一个数据库表的类型。它在本身是支持一个模板语言的，也就是在全栈开发时，可以通过一个变量来代替部分的代码，并且可以多处复用，更加的方便了我们的前后端结合的开发。它还自带一个admin管理后台，我们在配置里注册后就可以使用。在这个框架里还支持DRF框架，这个框架是遵守resfulAPI标准的有利于我们前后端分离并快速的开发项目。2.3.2Vue框架Vue.js是一套用于前端开发的语言，它在原生的js上把一些常用的功能封装起来，语法也更加的简洁干练。Vue它是有着两种使用环境的，在一般的情况下，它可以直接在前端的引用中直接调用Vue.js，在这个模式下我们可以简单的使用它的一些特性，它也封装了很多的使用的方法，还有一种模式就是部署在node.js上面，这样我们就可以直接新建Vue的前端项目。可以使用它的全部特性。它采用组件式的开发模式，这样它就可以在页面的重复使用中非常方便，直接导入组件就可以实现页面的重复使用在语法方面也比传统的js更加简洁。3系统分析3.1系统可行性分析3.1.1经济可行性毕业设计体现出所学习的知识与技能才是重点，因此本系统开发后所造成的经济收益并不是很大的考虑范围，而在开发过程中所体现出来的系统开发知识能力才是本系统的重点。同时本系统开发时只需要有一台普通的个人电脑就可以完成所有的开发工作，所有经济收益问题在这里来说是可行得到。因此本系统在作为毕业设计来说是一个非常适合的一个项目。3.1.2技术可行性本系统在Python环境上进行搭建开发。Python在出现到现在经过多少代程序员的完善与发展。无论是在控制语句上，还是数据类型的种类上，或者是类与对象的控制上，都有着其他很多其他开发语言所不具有的先天性优势。特别是因为的Python语言的面向对象开发的特性，非常有利于以后对新系统二次开发与维护。该系统我采用的前后端分离的技术，后端采用Python中的Django框架，该框架下又支持restfulframework框架，可以简单快捷的开发出数据接口，在现实中越来越流行起来了，前端我采用Vue框架，该框架可以一个一个页面分离出来，在相似的地方又可以重复引用，大大加快开放速度。3.1.3运行可行性此系统是基于Python语言的而开发的一个系统，非常小的资源耗费。并且Python语言的跨平台特性优势大。目前无论是个人电脑、还是大型服务器，在对Python的支持上都有着很好的兼容性，同时还有各种专门为Python开发设计的软件。所以本系统在运行可行性的分析结果是可行的。综上所述，无论是在经济上还是在技术上或者是外部的运行环境上，本系统的设计与开发都是在可以承受的范围内。3.2系统功能需求分析使用前后端分离的技术自上往下的方法对本系统进行需求分析。了解本系统的需求后，基本定位下面的功能：本课题要求实现一个在线卖教学视频的网站，同时系统要明确开发前台与后台两个不同部分面向不同的用户类群。前台主要包括课程列表、支付计算、购物车、个人主页等功能模块。后台主要面向管理员用户。所以这个系统主要的功能有用户管理、老师信息管理、课程信息管理、课程详情管理、订单管理、视频播放等功能模块。3.2.1用户管理用户管理是系统管理的重要功能，这里的用户可以分为普通用户，管理人员，给管理员分配权限，管理人员可以进入后台站点，这里我用的是Django中的xadmin后台站点，在管理员输入账号密码正确之后，即可在后台站点对用户信息，老师信息，视频信息等数据进行增删改查操作。然而在用户管理中，是我们要非常重视的，因为我们的消费者，服务者就是用户，具体的操作明细：管理员在网页上输入后台的网址，进入后台并登录成功后，进入系统首页，点击用户表，点击添加按钮，接下来就会出现在数据库用户表中相关字段，我们把对应的数据录入即可。删除数据的花相对而来就比较简单了，直接选中要删除的条目，点击删除按钮即可。修改数据的话在选中数据后点及修改按钮，把新的数据重新填写完后，再点及确认按钮就完成了。查看数据的话，管理员可以根据用户表中的不同字段去查找用户的相关信息。在管理员完成这些操作后，在点击确认后，系统会根据事先定义好的用户表的字段的类型及输入的要求跟管理员填写的数据进行校验，如果符合则更新数据库，不符合就给出提示。3.2.2课程列表如图3-1所示，在我设计课程列表时要考虑到的字段有课程分类:课程信息:课程章节:课时信息:老师信息:价格策略:(限时免费\限时折扣\限时满减\原价\优惠券)，这里主要是在网站上面直接展示给用户的课程相关信息。3.2.3课程详细在我设计课程详情时要考虑到的字段有课程章节:、总章数、总课时、时间、老师信息。这里主要是在网站上面直接展示给用户的课程相关详细信息。富文本编辑器它具有非常丰富的文本编辑插件，可以很方便的为我们在商品的详情页面进行商品的介绍信息进行填写，它不仅支持语法的格式，它还可以在上面直接c插入图片，代码段等等格式的文件内容。3.2.4购物车购物车是用于用户把自己喜欢的商品添加到一个位置保存起来，并 且可以同时选择一个，多个商品去结算，去消费的功能。在用户在当前商品下面点击添加到购物车后，在导航条上面的购物车右上角就会显示该用户的当前的购物车的商品总数，当用户点击导航条上面的购物车时就可以跳转到购物车页面，里面有商品的相关信息，并且我们可以在商品的右边选择打勾或不打勾，打勾后，我们把这些数据，商品信息，总价格等记录下来，跳转到支付页面。3.2.5视频播放功能用户登录成功后，可以在线观看免费视频或者已付费视频项目中有两种视频：收费视频[需要加密]和免费视频，网站上的免费课是可以直接观看的，对于这类视频我就没有加上密，然而一些收费的视频相对来说是知识产品，要保护好，我们要加密保护。3.3系统非功能需求3.3.1性能需求响应时间：页面的转跳时间<=3s。3.3.2安全性保密性：对用户数据进行bs64加密，对视频资源进行加密保护权限控制：对用户每一分钟的登录次数进行限制，每分钟能登录3次防攻击：对ip，高频访问进行限制。3.3.3可靠性易恢复性：每次的版本更新都在代码仓库中保存，利于回滚，版本记录容错性：在系统出错是不影响用户的行为操作与数据。3.3.4易用性易学习性，易操作性，用户错误防御机制，用户界面美观。4项目实现4.1搭建环境1mkvirtualenvluffy如我们可以在这里指定使用那一个环境去运行。2mkvirtualenvluffy-ppython3

其他相关命令：

通过以下的命令可以看这个环境下面已经下载好的包：

piplist

如果我们要把这个环境下面的已经安装好的包的相关信息：requirements.txt

在虚拟环境下安装项目运行需要的包是可以通过：pipinstall-rrequirements.txt提示:虚拟环境下它只对它本身的包及自身环境，跟python解析器的管理及配置，它对内部包的源码是没有任何关系的我们在创建虚拟环境是是需要连接上外部的网络的，下载的包也是要通过互联网的连接进行下载，我们在创建好虚拟环境后是直接在这个虚拟环境下工作的，这时我们的控制台就会把虚拟环境的名称自动的加载进来，我们就已经进入了这个环境中，要下载什么包就可以直接通过命令下载就可以了。4.1.1技术选型外部依赖：1需要在阿里云的平台注册一个开发者账号2注册支付宝的阿里云账号,如果可以购买一个服务器,或者第一次使用的可以申请一个免费外网服务器3注册一个第三方短信接口平台的账号这里我选择了一个提供免费测试的容联云平台的接口4注册一个可以对视频进行加密管理的第三方账号，可以是保利威平台的5注册一个代码管理仓库的账号可以是github，gitee都可以。6最好是可以申请一个域名进行备案[ICP备案和公安部备案],如果没有的话,可以注册natapp依赖包安装pipinstalldjangopipinstalldjangorestframework

pipinstallPymySQL

pipinstallPillow

pipinstalldjango-redis4.2搭建项目4.2.1创建项目cd~/Desktop/llufy

django-adminstartprojectluffyapi效果:4.2.2打开项目在pycharm中打开项目设置虚拟环境12启动django项目效果：提示：虚拟环境下它只对它本身的包及自身环境，跟python解析器的管理及配置，它对内部包的源码是没有任何关系的。我们在创建虚拟环境是是需要连接上外部的网络的，下载的包也是要通过互联网的连接进行下载，我们在创建好虚拟环境后是直接在这个虚拟环境下工作的，这时我们的控制台就会把虚拟环境的名称自动的加载进来，我们就已经进入了这个环境中，要下载什么包就可以直接通过命令下载就可以了。4.2.3调整目录luffy/

├──docs/

#项目相关资料保存目录

├──luffycity/

#前端项目目录

├──luffyapi

├──logs/

#项目运行时/开发时日志目录

├──manage.py

├──luffyapi/

#项目主应用，开发时的代码保存

│

├──apps/

#开发者的代码保存目录，以模块[子应用]为目录保存

│

├──libs/

#第三方类库的保存目录[第三方组件、模块]

│

├──settings/

│

├──dev.py

#项目开发时的本地配置

│

├──prop.py#项目上线时的运行配置

│

├──urls.py

#总路由

│

├──utils/

#多个模块[子应用]的公共函数类库[自己开发的组件]

└──scripts/

#保存项目运营时的脚本文件分不同环境进行项目配置在开发过程中，是分成两大部分来看的：1开发者本地环境，2项目上线后的服务器的环境。我们开发的本地环境的环境，系统兼容版本，数据库的版本，数据库的账号密码等等都是不一样的，所以我们在进行开发的时候就应该建立一个配置文件，在项目上线是直接通过修改配置文件把两个不同的版本进行切换就可以了。一般的情况在这个配置文件的名称就是settings，现在我们把这个配置文件复制出来分成两份，在该项目下我们新建一个settings文件夹，在这个文件夹里新建两个py文件dev.py，prod.py。接下来,就可以根据在manage.py中根据不同的情况导入对应的配置文件了4.3系统架构设计流程图是将一个操作的各个顺序步骤按照一定的逻辑展示出来的一个图形。只要这个操作有过程，那么肯定有一个流程。流程图就是对于描述这个操作的解释。流程图对于我们进行现行的过程或者根据需要进行新的改进的时候有着非常重要的作用。流程设计如下图3.1所示。图3.1系统流程设计图4.4数据库设计用户表：字段名字段描述username必选。150个字符以内。用户名可能包含字母数字，_，@，+.和-个字符。first_name可选（blank=True）。少于等于30个字符。last_name可选（blank=True）。少于等于30个字符。email可选（blank=True）。邮箱地址。password必选。密码的哈希加密串。（Django不保存原始密码）。原始密码可以无限长而且可以包含任意字符。groups与Group之间的多对多关系。user_permissions与Permission之间的多对多关系。is_staff布尔值。设置用户是否可以访问Admin站点。is_active布尔值。指示用户的账号是否激活。它不是用来控制用户是否能够登录，而是描述一种帐号的使用状态。is_superuser是否是超级用户。超级用户具有所有权限。last_login用户最后一次登录的时间。date_joined账户创建的时间。当账号创建时，默认设置为当前的date/time。课程表：字段名字段描述course_type可选类型((0,'付费'),(1,'VIP专享'),(2,'学位课程'))level_choices可选类型((0,'初级'),(1,'中级'),(2,'高级'),)status_choices可选类型((0,'上线'),(1,'下线'),(2,'预上线'),)name课程名称字符类型course_img封面图片brief详情介绍为2048的字节level难度等级对应上面的level_choices可选状态，默认为中级pub_date发布日期时间类型period建议学习周期(day)默认为7天attachment_path课件路径可以为空表示文件在服务器的绝对路径status课程状态表示该课程是否可直接观看，默认为假course_category课程分类是课程分类表的外键是否为假数据默认为真students学习人数默认为0lessons总课时数量默认为0pub_lessons课时更新数量默认为0price课程原价默认为0teacher授课老师4.5登录注册4.5.1后端实现登陆认证Django默认已经提供了认证系统。认证系统包含：用户管理权限用户组密码哈希系统用户登录或内容显示的表单和视图一个可插拔的后台系统Django默认用户的认证机制依赖Session机制，我们在项目中将引入JWT认证机制，将用户的身份凭据存放在Token中，然后对接Django的认证系统，4.5.2Django用户模型类Django认证系统中提供了用户模型类User保存用户的数据，默认的User。4.5.3创建用户模块的子应用python../../manage.pystartappusers在settings.py文件中注册子应用。INSTALLED_APPS=[

...

'users',

]4.5.4创建自定义的用户模型类Django认证系统本身它就提供了一个User模型，它本身就为我们定义好了一些常用的字段，但这个系统毕竟是外国人开发出来的，跟我们中国人的一些用户信息不太匹配，我们可以在这个User模型类里进行修改，这里一定要切记，没有必要的话不要对它的字段进行修改或删除，我们可以直接增加上我们需要的字段就可以，这样直接进行数据迁移就不会保错，当然如果考虑到数据的冗余的话，我们可以把所有与User模型相关的都删除掉，在进行数据的迁移。这样就可以很完美实现了。classUser(AbstractUser):

"""用户模型类"""

mobile=models.CharField(max_length=11,unique=True,verbose_name='手机号')

​

classMeta:

db_table='ly_users'

verbose_name='用户'

verbose_name_plural=verbose_name我们自定义User模型是不会被该框架直接识别的，我们需要进行一下配置的更改。在配置文件中进行设置AUTH_USER_MODEL='users.User'AUTH_USER_MODEL参数的设置以点.来分隔，表示应用名.模型类名。注意：Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好，否则后续使用可能出现未知错误。执行数据库迁移的控制台命令如下首先是第一条命令是进行数据库的迁移，第二条命令是数据库的同步在我们每次的新建表，或者修改了表里的任何字段，我们都要执行下面的两条命令：pythonmanage.pymakemigrations

pythonmanage.pymigrate4.5.5DjangoRESTframeworkJWT在用户注册或登录后，我们想记录用户的登录状态，或者为用户创建身份认证的凭证。我们不再使用Session认证机制，而使用JsonWebToken认证机制。4.5.6JWT的构成JWT就一段字符串，它由三部分组成:Sdsdgdgfdg1NiIssdgdgfdhhfVCJ9.eyJzdWasfsdfdsfIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.jkhTJVA95OasfsdfsdfGSDFhgfhs它分为三大部分：第一部分叫做为头部（header),这部分是携带这特殊信息的。第二部分简称它为载荷（payload,类似于飞机上承载的物品)，这部分携带的信息是非常重要的，也是唯一的。第三部分是签证（signature).这一部分的功能是用来重组验证的，把前两部分通过它重组，在进行比较。4.5.7安装配置JWT安装pipinstalldjangorestframework-jwt配置REST_FRAMEWORK={

'DEFAULT_AUTHENTICATION_CLASSES':(

'rest_framework_jwt.authentication.JSONWebTokenAuthentication',

'rest_framework.authentication.SessionAuthentication',

'rest_framework.authentication.BasicAuthentication',

),

}

importdatetime

JWT_AUTH={

'JWT_EXPIRATION_DELTA':datetime.timedelta(days=1),

}JWT_EXPIRATION_DELTA指明token的有效期生成jwtDjangoRESTframeworkJWT扩展的说明文档中提供了手动签发JWT的方法fromrest_framework_jwt.settingsimportapi_settings

​

jwt_payload_handler=api_settings.JWT_PAYLOAD_HANDLER

jwt_encode_handler=api_settings.JWT_ENCODE_HANDLER

​

payload=jwt_payload_handler(user)

token=jwt_encode_handler(payload)在用户注册或登录成功后，在序列化器中返回用户信息以后同时返回token即可。4.5.8后端实现登陆认证接口DjangoRESTframeworkJWT提供了登录获取token的视图，可以直接使用在子应用路由urls.py中fromrest_framework_jwt.viewsimportobtain_jwt_token

​

urlpatterns=[

path(r'authorizations/',obtain_jwt_token,name='authorizations'),

]在主路由中，引入当前子应用的路由文件urlpatterns=[

...

path('users/',include("users.urls")),

#include的值必须是模块名.urls格式,字符串中间只能出现一个圆点

]接下来，我们可以通过postman来测试下功能4.5.9前端实现登陆功能在登陆组件中找到登陆按钮，绑定点击事件<buttonclass="login_btn"@click="loginhander">登录</button>在methods中请求后端exportdefault{

name:'Login',

data(){

return{

login_type:0,

remember:false,//记住密码

username:"",

password:"",

}

},

​

methods:{

//登录

loginhander(){

this.$axios.post(":8000/users/authorizations/",{"username":this.username,"password":this.password}).then(response=>{

console.log(response.data)

}).catch(error=>{

console.log(error)

})

}

},

​

};4.5.10前端保存jwt我们在前端怎么把Token进行保存呢！其实由很多种方法可以实现这个功能：1可以设置一个cookies，我们可以把它保存在cookies中，这样就可以很方便的解决了问题，当然为了信息的安全起见，我们的浏览器本身是可以存储信息的，浏览器为我们提供了两个本地存储的地方：1sessionStorage，2localStorage使用方法那这两个的区别就字面意思，前者只在当前会话有效，后者则是可以长期的存储。我们也可以通过浏览器的清除数据进行管理。sessionStorage.变量名=变量值

//保存数据

sessionStorage.变量名

//读取数据

sessionStorage.clear()

//清除所有sessionStorage保存的数据

​

localStorage.变量名=变量值

//保存数据

localStorage.变量名

//读取数据

localStorage.clear()

//清除所有localStorage保存的数据登陆组件代码Login.vue//使用浏览器本地存储保存token

if(this.remember){

//记住登录

sessionStorage.clear();

localStorage.token=response.data.token;

}else{

//未记住登录

localStorage.clear();

sessionStorage.token=response.data.token;

}

//页面跳转回到上一个页面也可以使用this.$router.push("/")回到首页

this.$router.go(-1)默认的返回值仅有token，我们还需在返回值中增加username和id，方便在客户端页面中显示当前登陆用户通过修改该视图的返回值可以完成我们的需求。在users/utils.py中，创建defjwt_response_payload_handler(token,user=None,request=None):

"""

自定义jwt认证成功返回数据

"""

return{

'token':token,

'id':user.id,

'username':user.username

}修改settings.py配置文件#JWT

JWT_AUTH={

'JWT_EXPIRATION_DELTA':datetime.timedelta(days=1),

'JWT_RESPONSE_PAYLOAD_HANDLER':'users.utils.jwt_response_payload_handler',

}登录组件代码Login.vue//使用浏览器本地存储保存token

if(this.remember){

//记住登录

sessionStorage.clear();

localStorage.token=response.data.token;

localStorage.id=response.data.id;

localStorage.username=response.data.username;

}else{

//未记住登录

localStorage.clear();

sessionStorage.token=response.data.token;

sessionStorage.id=response.data.id;

sessionStorage.username=response.data.username;

}4.5.11多条件登录JWT扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确。我们可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。django.contrib.auth.backends.ModelBackend，并重写authenticate方法。authenticate(self,request,username=None,password=None,**kwargs)方法的参数说明：request本次认证的请求对象username本次认证提供的用户账号password本次认证提供的密码根据username参数查找用户User对象，username参数可能是用户名，也可能是手机号若查找到User对象，调用User对象的check_password方法检查密码是否正确在users/utils.py中编写：defget_user_by_account(account):

"""

根据帐号获取user对象

:paramaccount:账号，可以是用户名，也可以是手机号

:return:User对象或者None

"""

try:

ifre.match('^1[3-9]\d{9}$',account):

#帐号为手机号

user=User.objects.get(mobile=account)

else:

#帐号为用户名

user=User.objects.get(username=account)

exceptUser.DoesNotExist:

returnNone

else:

returnuser

​

importre

from.modelsimportUser

fromdjango.contrib.auth.backendsimportModelBackend

classUsernameMobileAuthBackend(ModelBackend):

"""

自定义用户名或手机号认证

"""

​

defauthenticate(self,request,username=None,password=None,**kwargs):

user=get_user_by_account(username)

ifuserisnotNoneanduser.check_password(password):

returnuser在配置文件settings.py中告知Django使用我们自定义的认证后端AUTHENTICATION_BACKENDS=[

'users.utils.UsernameMobileAuthBackend',

]4.6课程列表及课程详情在实现课程列表功能时，前端Vue首先注册路由，接下来分析课程列表页面中可能出现的数据之间的关系，在后端的开发步骤为，先注册课程子应用，接下来创建数据表，数据迁移到数据库同步起来，当然我们在开发的同时也需要我们先在数据库里录入一些数据供我们开发及能够看出实际效果，在面对要对很大的表格录入数据时，我们可以采用使用终端脚本来执行SQL语句文件来完成对数据的添加，在后台站点管理员要对不同格式的数据进行比如图片，视频文件的上传及图片的制作等等功能，我们可以才用富文本编辑器的方法来实现。后端实现课程列表接口可分为4个步骤：1创建序列化器2创建视图3注册路由4客户端发送请求获取课程分类信息。在Postman对接口进行测试，返回对的数据的话，表明实现该功能。4.7视频播放该网站上的视频可以分成两大类别：1免费课的教学视频，这个是不需要加密处理的，2收费视频，需要用户购买了才可以观看的，这部分视频我们就要进行加密处理了。4.7.1使用保利威云视频服务来对视频进行加密官方网址:/vod/注意：开发时通过免费试用注册体验版账号【账号有效期是一周】公司使用酷播尊享版开发文档地址:/2017/videoproduct/v-playerapi/html5player/html5-docs/要开发播放保利威的加密视频功能,需要在用户中心->设置->API接口和加密设置./secure/setting/api配置视频上传加密.上传视频并记录视频的VID4.7.2后端获取保利威的视频播放授权token,提供接口api给前端参考文档：/2019/videoproduct/v-api/v-api-play/create-playsafe-token/根据官方文档的案例,已经有其他人开源了,针对polvy的token生成的python版本了,我们可以直接拿来使用.在libs下创建polyv.py,编写token生成工具函数配置文件settings/dev.py，代码：#保利威视频加密服务

POLYV_CONFIG={

"userId":"62dc475e3f",

"secretkey":"h6FiaEBRMU",

"tokenUrl":"/service/v1/token",

}courses/views.py，视图代码:fromluffyapi.libs.polyvimportPolyvPlayer

fromdjango.confimportsettings

fromrest_framework.viewsimportAPIView

fromrest_framework.responseimportResponse

fromrest_framework.permissionsimportIsAuthenticated

classPolyvAPIView(APIView):

permission_classes=[IsAuthenticated]

defget(self,request):

"""获取保利威云视频加密播放的token"""

"""接受客户端的请求参数"""

vid=request.query_params.get("vid")

#视频播放ID

remote_addr=request.META.get("REMOTE_ADDR")

#用户的IP

user_id=request.user.id

#用户ID

user_name=request.user.username

#用户名

polyv=PolyvPlayer(

settings.POLYV_CONFIG["userId"],

settings.POLYV_CONFIG["secretkey"],

settings.POLYV_CONFIG["tokenUrl"],

)

​

data=polyv.get_video_token(vid,remote_addr,user_id,user_name)

​

returnResponse(data.get("token"))courses/urls.py，路由代码：path(r"polyv/token/",views.PolyvAPIView.as_view()),4.7.3客户端请求token并播放视频在vue项目的入口文件index.html中加载保利威视频播放器的js核心类库<scriptsrc='/script/polyvplayer.min.js'></script>创建视频播放页面的组件Player.vue，代码：<template>

<divclass="player">

<divid="player"></div>

</div>

</template>

​

<script>

exportdefault{

name:"Player",

data(){

return{

​

}

},

methods:{

​

},

computed:{

}

}

</script>

​

<stylescoped>

</style>前端路由，代码：

{

name:"Player",

path:"/player",

component:Player,

},引入保利威前端HTML5视频播放器代码，Player.vue：<template>

<divclass="player">

<divid="player"></div>

</div>

</template>

​

<script>

exportdefault{

name:"Player",

data(){

return{

​

}

},

methods:{

check_login(){

//检查当前访问者是否登录了！

lettoken=localStorage.token||sessionStorage.token;

if(!token){

this.$alert("对不起，您尚未登录，请登录以后再进行购物车").then(()=>{

this.$router.push("/login/");

});

returnfalse;//阻止代码往下执行

}

returntoken;

},

},

mounted(){

​

//验证用户是否登录

lettoken=this.check_login();

letuser_name=localStorage.user_name||sessionStorage.user_name;

let_this=this;

letvid="d6f2d2d505673e0a75cef00f8d5284f6_d";

varplayer=polyvObject('#player').videoPlayer({

wrap:'#player',

width:document.documentElement.clientWidth-260,//页面宽度

height:document.documentElement.clientHeight,//页面高度

forceH5:true,

vid:vid,

code:user_name,//一般是用户昵称

//视频加密播放的配置

playsafe:function(vid,next){//向后端发送请求获取加密的token

_this.$axios.get(`${_this.$settings.Host}/courses/polyv/token/`,{

params:{

vid:vid,

},

headers:{

"Authorization":"jwt"+token,

}

}).then(function(response){

console.log(response);

next(response.data.token);

})

​

}

});

},

computed:{

}

​

}

</script>

​

<stylescoped>

</style>

​4.7.4完善课程详情页的视频内容显示1.课程详情中有封面视频播放，所以我们需要在后端的课程模型中新增一个字段course_video

2.在序列化器中返回的内容增加course_video

3.在课程详情页组件中显示封面视频或者封面图片课程详情中有封面视频播放，所以我们需要在后端的课程模型中新增一个字段course_video.5系统测试5.1测试目的当开发者在开发程序之时，就会对相应开发的模块进行测试，确保单独模块运行不会出问题，测试是一个开发项目必不可少的过程，是开发程序过程中同时进行的必不可少的一部分，检查模块和模块之间衔接是否有问题。在开发完成时，进行最终测试，测试整体系统是否有BUG和功能是否符合项目计划，减少出错率和后期维修成本。5.2测试方法静态测试的方法有很多种，包括代码重新查看、基本逻辑的调试、代码的实用性、接口数据测试等等。建立测试用例、执行代码和分析程序的输出结果。对于该系统我主要对前端页面的反应时间及画面效果进行调试型的测试，在后端的接口测试中因为每个不同的页面返回的数据都不相同并且每个数据都是直接或间接来自于数据库，主要的测试方向就是对每个不同页面，每个不同数据接口的测试，在这里我在每完成一个页面后都会用Postman来对接口进行测试。5.3测试结果分析经过对本系统多个方面进行系统性的分析测试，本系统针对在线教育而开发的功能已经全部实现并且测试未发现异常，全部符合预期需求，并且操作简单、产品性能高效，可推广使用。6系统特色和创新该系统在Python本身就开发快捷，大多数的功能依赖外部的包及第三方的工具，使得我们的开发非常快捷。当然在系统的本身实现的时候也加入了很多有特色的功能，现有的网络技术在实际web开发中使用越来越多。由于现在的网络爬虫越来越多，我们的这个线上商品大部分是视频，在登录界面我通过实现了一个极验验证（滑动验证）来提高我们的网站的一定的安全，用户注册采用了容联云的短信认证，我们的在线视频属于知识产权，不能让用户直接下载和保存到本地，这里我采用了保利威的视频加密技术实现视频的加密，对于短信的验证码和后面的订单的勾选状态我这里采用了radis，加快对数据的存取。在发短息功能上，由于它是有时间间隔的我这里采用了celery队列技术，防止服务器出现停顿现象，在对订单的过期处理这里我哦通过定制定时任务，每天的0：00通过celery队列把过期的订单状态改为已过期。并支持多种浏览器模式。比如在xadmin系统的后台站点，在面对要录入比较多字段跟，既要上传文件，视频，图片，甚至要绘制简单的图型效果时，我引入了第三方模块：富文本编辑器。大大提高了系统的使用性。7结论此次的毕业设计让我把在学校这四年学习到的知识全部的应用上了一遍，即温故了之前学习过的理论知识、数据库的知识、学习过的Python的知识。有在完成这次的设计学习了很多前端，web端的知识。对Python的兴趣这样的语言更加的熟练的同时，更加喜欢上它，在这期间我读了好几本Python相关的书籍，丰富了自己。当然在这个从无到有的过程总是有点辛苦的，经历了这个即漫长又短暂的过程，本人的心里及生活的态度更加积极了。记不下来，很多方法都要从网上视频进行一步一步学习。经过这次挑战，我成功克服了各种困难，实现了我独立开发的网站，感受到了独立开发者的各种艰辛，也明白自己的不足之处，软件领域的知识需要用一辈子慢慢去学习和积累，与时俱进方不会被未来淘汰。一定要保持一颗热爱学习，超越时代发展的心和雄心。参考文献[1]埃里克·马瑟斯（EricMatthes）.Python编程从入门到实践[D].北京:人民邮电出版社,2016-07-01.[2]明日科技.Python从入门到项目实践[D].吉林:吉林jinling大学出版社,2018-08-01.[3]明日科技.Python项目开发案例集锦[D].吉林:吉林大学出版社,2019-03-01.[4]王巍巍.笨办法学Python3[D].北京:人民邮电出版社,2018-06-01.[5]袁国忠.Python基础教程第3版Python简明教程书籍Python编程从入门到实践灵程序设计丛书[D].北京:人民邮电出版社,2018-02-01.[6]李军.数据结构Python语言描述[D].北京:人民邮电出版社,2017-12-01.[7]Vamei.从Python开始学编程[D].上海:电子工业出版社,2017-01-01.[8]陶俊杰,陈小莉.Python数据科学手册[D].北京:人民邮电出版社,2018-02-01.[9]爱飞翔.EffectivePython：编写高质量Python代码的59个有效方法[D].广州:机械工业出版社,2016-01-01.[10]张心韬,兰亮.Python面向对象编程指南[D].北京:人民邮电出版社,2016-03-01.[11]美]施瓦茨,[美]扎伊采夫,[美]特卡琴科.高性能MYSQL(第3版)[D].北京:电子工业出版社,2013-05-01.[12]刘晓霞,钟鸣.MySQL必知必会[MySQLCrashCourse][D].北京:人民邮电出版社,2009-01-01.[13]明日科技.MySQL从入门到精通（配光盘）（软件开发视频大讲堂）[D].北京:清华大学出版社,2017-08-01.[14]姜承尧.MySQL技术内幕：InnoDB存储引擎（第2版）[D].北京:机械工业出版社,2013-06-01.[15]李丙洋.涂抹MySQL：跟着三思一步一步学MySQL[D].北京:中国水利水电出版社,2014-05-01.[16]钱文品.Redis深度历险：核心原理与应用实践[D].深圳:电子工业出版社,2019-01-01.[17][美]约西亚L.卡尔森（Josiah,L.,Carlson）著.Redis实战[D].北京:人民邮电出版社,2015-11-01.[18]黄健宏.Redis使用手册[D].深圳:机械工业出版社,2019-10-01.[19]陈雷.Redis5设计与源码分析[D].深圳:机械工业出版社,2019-08-01.[20]尼恩.Netty、Redis、Zookeeper高并发实战[D].深圳:机械工业出版社,2019-08-01.致谢在东软的四年学习中，各个任课老师和教授孜孜不倦的教诲对我的学习生涯有这重大的影响。同时能对我在以后的工作生活中让我获益匪浅。感谢杨利院长和各位教职工四年了为我创造的良好学习环境。前人的披荆斩棘所留下的知识财富宝藏造福了我们这些后生。万分感谢他们的奉献。此外十分指导老师的论文批改工作，不仅在毕业设计上对我的指导非常重要，更对我的论文进行了增删减改，在即将毕业时刻，老师的付出是非常多的。感谢我的学校为我们提供了一个学习场所和浓郁的计算机学习氛围，这次过程中，我知道知识的海洋真的很大，我能够做的就是不断往前！最后感谢在大学四年里，身边所有人付出的一切。

电脑不启动故障诊治了解电脑启动的过程在诸多电脑故障中，无法正常启动是最令用户头痛的事了。笔者长期从事维护电脑的工作，在这个方面积累了一些经验，现在就将这些经验整理归纳出来与朋友们分享。本文将以家用电脑和windows98操作系统为基础，介绍电脑无法正常启动故障的诊治。要想准确地诊断电脑不启动故障，首先要了解的起动过程，当我们按下电源开关时，电源就开始向主板和其它设备供电，此时电压还没有完全稳定，主板控制芯片组会根据CMOS中的CPU主频设置向CPU发出一个Reset(重置)信号，让CPU初始化，电压完全稳定后，芯片组会撤去Reset信号，CPU马上从地址FFFF0H处执行一条跳转指令，跳到系统BIOS中真正的启动代码处。系统BIOS首先要做的事情就是进行POST(PowerOnSelfTest，加电自检)。POST的主要任务是检测系统中的一些关键设备(电源、CPU芯片、BIOS芯片、定时器芯片、数据收发逻辑电路、DMA控制器、中断控制器以及基本的64K内存和内存刷新电路等)是否存在和能否正常工作，如内存和显卡等。自检通过后，系统BIOS将查找显示卡的BIOS，由显卡BIOS来完成显示卡的初始化，显示器开始有显示，自此，系统就具备了最基本的运行条件，可以对主板上的其它部分进行诊断和测试，再发现故障时，屏幕上会有提示，但一般不死机，接着系统BIOS将检测CPU的类型和工作频率，然后开始测试主机所有的内存容量，内存测试通过之后，系统BIOS将开始检测系统中安装的一些标准硬件设备，这些设备包括：硬盘、CD－ROM、软驱、串行接口和并行接口等连接的设备，大多数新版本的系统BIOS在这一过程中还要自动检测和设置内存的相关参数、硬盘参数和访问模式等。标准设备检测完毕后，系统BIOS内部的支持即插即用的代码将开始检测和配置系统中已安装的即插即用设备。每找到一个设备之后，系统BIOS都会在屏幕上显示出设备的名称和型号等信息，同时为该设备分配中断、DMA通道和I/O端口等资源。最后系统BIOS将更新ESCD(ExtendedSystemConfigurationData，扩展系统配置数据)。ESCD数据更新完毕后，系统BIOS的启动代码将进行它的最后一项工作，即根据用户指定的启动顺序从软盘、硬盘或光驱启动。以从C盘启动为例，系统BIOS将读取并执行硬盘上的主引导记录，主引导记录接着从分区表中找到第一个活动分区，然后读取并执行这个活动分区的分区引导记录，而分区引导记录将负责读取并执行IO.SYS，这是Windows最基本的系统文件。IO.SYS首先要初始化一些重要的系统数据，然后就显示出我们熟悉的蓝天白云，在这幅画面之下，Windows将继续进行DOS部分和GUI(图形用户界面)部分的引导和初始化工作，一切顺利结束，电脑正常启动。根据故障现象诊治了解电脑启动的过程，故障就好判断了，下面我们就根据故障现象开始诊治了：现象一：系统完全不能启动，见不到电源指示灯亮，也听不到冷却风扇的声音。这时，基本可以认定是电源部分故障，检查：电源线和插座是否有电、主板电源插头是否连好，UPS是否正常供电，再确认电源是否有故障，最简单的就是替换法，但一般用户家中不可能备有电源等备件，这时可以尝试使用下面的方法（注意：要慎重）：先把硬盘，CPU风扇，或者CDROM连好，然后把ATX主板电源插头用一根导线连接两个插脚（把插头的一侧突起对着自己，上层插脚从左数第4个和下层插脚从右数第3个，方向一定要正确），然后把ATX电源的开关打开，如果电源风扇转动，说明电源正常，否则电源损坏。如果电源没问题直接短接主板上电源开关的跳线，如果正常，说明机箱面板的电源开关损坏。现象二：电源批示灯亮，风扇转，但没有明显的系统动作。这种情况如果出现在新组装电脑上应该首先检查CPU是否插牢或更换CPU，而正在使用的电脑的CPU损坏的情况比较少见（人为损坏除外），损坏时一般多带有焦糊味，如果刚刚升级了BIOS或者遭遇了CIH病毒攻击，这要考虑BIOS损坏问题（BIOS莫名其妙的损坏也是有的），修复BIOS的方法很多杂志都介绍过就不重复了；确认CPU和BIOS没问题后，就要考虑CMOS设置问题，如果CPU主频设置不正确也会出现这种故障，解决方法就是将CMOS信息清除，既要将CMOS放电，一般主板上都有一个CMOS放电的跳线，如果找不到这个跳线可以将CMOS电池取下来，放电时间不要低于5分钟，然后将跳线恢复原状或重新安装好电池即可；如果CPU、BIOS和CMOS都没问题还要考虑电源问题：PC机电源有一个特殊的输出信号，称为POWERGOOD（PG）信号，如果PG信号的低电平持续时间不够或没有低电平时间，PC机将无法启动。如果PG信号一直为低电平，则PC机系统始终处于复位状态。这时PC机也出现黑屏、无声响等死机现象。但这需要专业的维修工具外加一些维修经验，因此，建议采用替换法；电源没有问题就要检查是否有短路，确保主板表面不和金属（特别是机箱的安装固定点）接触。把主板和电源拿出机箱，放在绝缘体表面，如果能启动，说明主板有短路现象；如果还是不能启动则要考虑主板问题，主板故障较为复杂，可以使用替换法确认，然后更换主板。现象三：电源指示灯亮，系统能启动，但系统在初始化时停住了，而且可以听到嗽叭的鸣叫声（没有视频）：根据峰鸣代码可以判断出故障的部位。ccid_page/AwardBIOS1短声：说明系统正常启动。表明机器没有问题。2短声：说明CMOS设置错误，重新设置不正确选项。1长1短：说明内存或主板出错，换一个内存条试试。1长2短：说明显示器或显示卡存在错误。检查显卡和显示器插头等部位是否接触良好或用替换法确定显卡和显示器是否损坏。1长3短：说明键盘控制器错误，应检查主板。1长9短：说明主板FlashRAM、EPROM错误或BIOS损坏，更换FlashRAM。重复短响：说明主板电源有问题。不间断的长声：说明系统检测到内存条有问题，重新安装内存条或更换新内存条重试。AMIBIOS1短：说明内存刷新失败。更换内存条。2短：说明内存ECC较验错误。在CMOS中将内存ECC校验的选项设为Disabled或更换内存。3短：说明系统基本内存检查失败。换内存。4短：说明系统时钟出错。更换芯片或CMOS电池。5短：说明CPU出现错误。检查CPU是否插好。6短：说明键盘控制器错误。应检查主板。7短：说明系统实模式错误，不能切换到保护模式。8短：说明显示内存错误。显示内存有问题，更换显卡试试。9短：说明BIOS芯片检验和错误。1长3短：说明内存错误。内存损坏，更换。1长8短：说明显示测试错误。显示器数据线没插好或显示卡没插牢。现象四：系统能启动，有视频，出现故障提示，这时可以根据提示来判断故障部位。下面就是一些常见的故障提示的判断：一、提示“CMOSBatteryStateLow”原因：CMOS参数丢失，有时可以启动，使用一段时间后死机，这种现象大多是CMOS供电不足引起的。对于不同的CMOS供电方式，采取不同的措施：1.焊接式电池：用电烙铁重新焊上一颗新电池即可；2.钮扣式电池：直接更换；3.芯片式：更换此芯片，最好采用相同型号芯片替换。如果更换电池后时间不长又出现同样现象的话，很可能是主板漏电，可检查主板上的二极管或电容是否损坏，也可以跳线使用外接电池，不过这些都需要有一定的硬件维修基础才能完成。二、提示“CMOSChecksumFailure”CMOS中的BIOS检验和读出错；提示“CMOSSystemOptionNotSet”，CMOS系统未设置；提示“CMOSDisplayTypeMismatch”，CMOS中显示类型的设置与实测不一致；提示“CMOSMemorySizeMismatch”，主板上的主存储器与CMOS中设置的不一样；提示“CMOSTime&DateNotSet”，CMOS中的时间和日期没有设置。这些都需要对CMOS重新设置。三、提示“KeyboardInterfaceError”后死机原因：主板上键盘接口不能使用，拔下键盘，重新插入后又能正常启动系统，使用一段时间后键盘无反应，这种现象主要是多次拔插键盘引起主板键盘接口松动，拆下主板用电烙铁重新焊接好即可；也可能是带电拔插键盘，引起主板上一个保险电阻断了（在主板上标记为Fn的东西），换上一个1欧姆／0.5瓦的电阻即可。四、自检过程中断在xxxKCache处这表示主板上Cache损坏，可以在CMOS设置中将“ExternalCache”项设为“Disable”故障即可排除。同理，在自检主板部件时出现中断，则可以认为该部件损坏，解决方法一般可以在CMOS中将其屏蔽，如果不能屏蔽该部件最好更换主板。五、提示“FDDControllerFailure”BIOS不能与软盘驱动器交换信息；提示“HDDControllerFailure”，BIOS不能与硬盘驱动器交换信息。应检查FDD（HDD）控制卡及电缆。六、提示“8042GateA20Error”8042芯片坏；提示“DMAError”，DMA控制器坏。这种故障需要更换。七、提示“DisplaySwitchNotProper”主板上的显示模式跳线设置错误，重新跳线。八、提示“KeyboardisLock...Unlockit”键盘被锁住，打开锁后重新引导系统。九、IDE接口设备检测信息为：“DetectingPrimary（或Secondary）Master（或Slave）...None”表示该IDE接口都没有找到硬盘，如果该IDE口确实接有硬盘的话，则说明硬盘没接上或硬盘有故障，可以从以下几方面检查：1、硬盘电源线和数据线是否接触不良，或换一根线试试；2、CMOS设置有无错误，进入CMOS将“PrimaryMaster”、“PrimarySlave”、“SecondaryMaster”三项的的“TYPE”都设置成“Auto”；3、替换法确认硬盘本身有故障。十、IDE接口设备检测信息下面显示“Floppydisk(s)fail(40)”出错信息表示CMOS所指定的软盘驱动器有问题。判断和解决的方法与硬盘相似。现象五：系统不能引导。这种故障一般都不是严重问题，只是系统在找到的用于引导的驱动器中找不到引导文件，比如：BIOS的引导驱动器设置中将软驱排在了硬盘驱动的前面，而软驱中又放有没有引导系统的软盘或者BIOS的引导驱动器设置中将光驱排在了硬盘驱动的前面，而光驱中又放有没有引导系统的光盘，这个都很简单，将光盘或软盘取出就可以了，实际应用中遇到“DiskBootFailure，InsertSystemDiskAndPressEnter”的提示，多数都是这个原因。如果是硬盘不能引