在药学网中中药视频、中药百科、中药健康、中药咨询,个人信息这五个板块。中药百科可搜索并收藏中药材相关资讯,中药视频提供所需的知识信息。个人信息单元设置修改密码与学习进度,收藏及评论管理。
图1-1 药知了系统需求结构图
中药学习网站用户端拥有中药视频,中药百科、中药健康、中药咨询、个人中心五大模块,其中中药视频学习可以进行历史记录,评论、收藏、查看等功能。中药百科中可以进行收藏,个人中心中可进行数据的删除与查看。
图1-2用户用例图
表1-1功能需求分析表
在系统建设过程中,应该高度重视稳定性和对环境的适应性。在进行网站设计时应搭建成熟,保证其具有稳定的性能。并且,网站必须安全,可靠和稳定,使信息不会丢失以及避免出现错误的信息,保证信息的私密性以及完整性,对于系统的工作时间要求,有效工作时间要高于90%,系统出现故障或者错误信息的时间必须高于100天。
时刻提防因为一些原因造成的内部破坏以及外部攻击。
选择统一的身份认证,以便于在保障网站安全的前提下,使系统更方便执行。
为了保障系统数据安全且不丢失,应当建立健全的数据备份机制,定期进行数据备份,使用户在使用过程中安心。
要加强系统避免一些不可预知的操作而发生意外灾害或者人为破话,造成信息的丢失与损坏,要加强系统对数据存档等安全保护措施。
整体框架是输入账号和密码进行登录。整个设计的主体颜色是蓝色,因为在中华五千年的文化中,中医学知识像大海无边无际,其医学文化被后人传承和发扬。而Logo的主色调选择的也是蓝色,为了整个画面的和谐,让用户能在知识的海洋里遨游,所以蓝色再适合不过。用户通过输入账号,密码进行登录。为了方便用户直观了解如何登录,账号密码等提示均在输入框中,对于新用户来说,直接点击右边的“注册”,即可注册新的账号进行登录,界面如下:
通过 @click="login()去获取用户输入的信息是否完整,如果为空则返回“请将信息输入完整”,如果不为空则向后端提交用户名以及密码,从后端响应过来的数据是真的,就登录成功跳转到中药视频界面。主要代码如下:
- <form style="margin-left:40px; margin-top:40px;">
- <input name='username' v-model="username" type='text' style='width:280px;height:40px; padding-left:20px;'placeholder="请输入用户名/手机/邮箱"><br>
- <input name='password' v-model="password" type="password" style='width:280px;height:40px; padding-left:20px;' placeholder="请输入登录密码"><br>
- <input name="" style="width:300px;height:40px; border:0;background:#1E5E79;color:#fff;" value='登录' type="button" @click="login()" /><br>
- </form>
- //js代码
- /*js逻辑代码*/
- $.ajax({
- url:"http://127.0.0.1:8080/login", //请求的接口地址并传入用户名和密码
- data:{
- username:v.username,
- password:v.password
- },
- type:"POST",
- success(res){
- console.log(res)
- if(res.code ==0){
- v.toast(res.msg)
- //本地存储个人信息和跳转主页面
- window.localStorage.setItem('userInfo',JSON.stringify(res.data))
- window.location.href="video.html"
- }
- }
- })
-
对于普通用户端来说,首页可分为中药视频,中药百科、中药健康、中药咨询、个人中心五大部分。其中在中药视频中可以查询想学的中医药知识视频,并且可以在视频下方进行评论和收藏。
videoDetail.name对静态数据进行绑定并渲染,主要代码如下:
- created() {
- console.log("created...........")
- var id = this.getUrlKey("id")
- this.id = id
- this.initVideoDetail(id)
- //取出
- this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
- this.initCommetList(id)
- /* 历史记录加载上次记录 */
- var type = this.getUrlKey("type")
- if(type == 'history'){
- this.initMyHistoryRecord(id)
- }
- },
- methods: {
- /* 查询上次历史记录并加载 */
- initMyHistoryRecord(id) {
- var v = this
- $.ajax({
- url: "http://42.193.178.57:8085/getHisRecord?uid=" + v.userInfo.uid + '&sid=' + id,
- type: "get",
- success(res) {
- console.log("initMyHistoryRecord", res)
- if(res.code == 0&& res.data!=null){
- v.toast("正在恢复上次播放历史。。。")
- v.playBySeconds(res.data.lastTime)
- }
- }
- })
- },
-
中药百科可以查找相关中药材知识,通过查询找到相应的文章百科,点击进入详情页
通过medicalDetail.title进行渲染,显示中药材的详细信息。通过medicalDetail.title进行渲染,显示中药材的详细信息。
通过medicalDetail.title进行渲染,
- <div class="art_body">
- <h1 id="art_txt0">{{medicalDetail.title}}
- <span @click="storeEvent">
- <img :src="store?'img/store_cur.png':'img/store.png'" style="float: right; margin-right:200px; width: 40px;"></span>
- </h1>
- <p>{{medicalDetail.intro}} </p>
- <p style="text-align: center;">
- <img :alt="medicalDetail.name" :src="medicalDetail.coverImg" style="width: 450px; height: 270px;" title="黄藤的图片" /><br />
- </p>
- //...省略部分
- <p style="text-align: center;">
- <span style="color:#800000">
- <strong v-for="(item,index) in medicalDetail.imgs">
- <img :alt="'+medicalDetail.name+'的图片" :src="item" style="width: 300px; height: 188px;" title="黄藤的图片" /> </strong>
- </span><br />
- </p>
-
进入个人中心可以进行密码修改,浏览自己的学习进度,搜藏的文章或视频,以及自己发布的评论,在修改密码界面,用户需要输入原密码,再两次输入新密码进行密码的修改。面设计一如既往的简约,给人一种很清爽的感觉。如图所示:
通过submit()输入两次密码,向后端传输数据,后台响应成功刷新则密码修改成功。
- methods: {
- submit() {
- let v = this
- if ( v.password == "" || v.newpassword == ""|| v.newpassword1 == "") {
- v.toast("请将信息输入完整")
- return
- } else if (v.newpassword.length < 6) {
- v.toast("密码至少为6位")
- return
- } else if (v.newpassword != v.newpassword1) {
- v.toast("两次密码不一致")
- return
- } else {
- $.ajax({
- url: "http://xxx:8085/repassword",
- data: {
- uid:v.userInfo.uid,
- password: v.password,
- newPassword: v.newpassword
- },
- type: "POST",
- success(res) {
- console.log(res)
- if (res.code == 0) {
- v.toast(res.msg)
- /* 清除缓存 重新登录*/
- window.localStorage.removeItem("userInfo");;
- window.location.href = "login.html"
- } else {
- v.toast(res.msg)
- }
- }
- })
- }
- },
-
有些中药学习视频较长,用户在短时间内并不能观看完整,所以为了方便用户的学习,用户可以在学习进度查看自己浏览历史,点击相应的浏览记录继续学习即可跳转到最后一次退出的地方,保证便捷的学习。也可以删除自己的学习进度。
- <tr v-for="(item,index) in myRecordList">
- <td><img :src="item.coverImg" style="width: 100px;"></td>
- <td>{{item.title}}</td>
- <td>{{item.createTime}}</td>
- <td>上次浏览到:{{item.lastTime}},总时长:{{item.allTime}}</td>
- <td><a :href="'video_detail.html?id='+item.id+'&type=history'">继续观看</a></td>
- <td><img src="img/del.png" @click="del(item.id)" style="width: 30px;"></td>
- </tr>
- /*js逻辑代码*/
- $.ajax({
- url: "http://127.0.0.1:8080/recordList?uid=" + v.userInfo.uid,
- type: "get",
- success(res) {
- console.log(res.data)
- if (res.code == 0) {
- v.myRecordList = res.data
- } else {
- v.toast(res.msg)
- }
- }
- })
-
为了使用户在学习的过程中拥有愉快的心情,可以在自己观看的视频下方进行评论,并且在我的评论进行删除。
通过@click="submit首先判断评论是否为空,若为空则显示“评论不能为空”,若不为空则传输用户id,留言内容等提交成功之后刷新,显示评论内容。
- submit() {
- var v = this
- if (v.msg == "") {
- v.toast("评论不能为空")
- return
- }
- $.ajax({
- url: "http://42.193.178.57:8085/addVideoComment",
- data: {
- uid: v.userInfo.uid,
- rid: v.id,
- username: v.userInfo.username,
- msg: v.msg,
- coverImg: v.videoDetail.coverImg
- },
- type: "POST",
- success(res) {
- if (res.code == 0) {
- v.msg = ""
- v.toast(res.msg)
- v.initCommetList(v.id)
- } else {
- v.toast(res.msg)
- }
- }
- })
- },}
-
通过@click="submit首先判断评论是否为空,若为空则显示“评论不能为空”,若不为空则传输用户id,留言内容等提交成功之后刷新,显示评论内容。
在观看自己喜欢的视频或者文章的时候可以进行收藏,并且在我的收藏中进行观看或者删除。
通过@click="storeEvent"向后端传输用户id,收藏类型等数据,后端响应成功显示收藏成功。
- storeEvent() {
- this.store = !this.store
- if (this.store) {
- this.toast("收藏成功")
- var v = this
- $.ajax({
- url: "http://42.193.178.57:8085/addStore",
- data: {
- uid: v.userInfo.uid,
- sid: v.id,
- type: 2, //1为中药 2为视频
- coverImg: v.videoDetail.coverImg,
- title: v.videoDetail.name
- },
- type: "POST",
- success(res) {
- v.toast(res.msg)
- }
- })
- } else {
- this.toast("取消收藏")
- }
-