“药知了-中药自学网”网站前端设计与实现案例
1.系统需求分析
1.1 系统需求结构
在药学网中中药视频、中药百科、中药健康、中药咨询，个人信息这五个板块。中药百科可搜索并收藏中药材相关资讯，中药视频提供所需的知识信息。个人信息单元设置修改密码与学习进度，收藏及评论管理。
图1-1 药知了系统需求结构图
1.2功能需求分析
1.2.1用户用例图
中药学习网站用户端拥有中药视频，中药百科、中药健康、中药咨询、个人中心五大模块，其中中药视频学习可以进行历史记录，评论、收藏、查看等功能。中药百科中可以进行收藏，个人中心中可进行数据的删除与查看。
图1-2用户用例图
1.2.2功能需求分析
表1-1功能需求分析表
1.3 性能需求分析
1.3.1稳定性需求
在系统建设过程中，应该高度重视稳定性和对环境的适应性。在进行网站设计时应搭建成熟，保证其具有稳定的性能。并且，网站必须安全，可靠和稳定，使信息不会丢失以及避免出现错误的信息，保证信息的私密性以及完整性，对于系统的工作时间要求，有效工作时间要高于90%，系统出现故障或者错误信息的时间必须高于100天。
1.3.2安全性需求
1.保障网站安全运行。
时刻提防因为一些原因造成的内部破坏以及外部攻击。
2.安全机制的易用性
选择统一的身份认证，以便于在保障网站安全的前提下，使系统更方便执行。
3.建立数据备份机制
为了保障系统数据安全且不丢失，应当建立健全的数据备份机制，定期进行数据备份，使用户在使用过程中安心。
4. 提供容灾风险保障
要加强系统避免一些不可预知的操作而发生意外灾害或者人为破话，造成信息的丢失与损坏，要加强系统对数据存档等安全保护措施。
2.系统实现
2.1登录注册
整体框架是输入账号和密码进行登录。整个设计的主体颜色是蓝色，因为在中华五千年的文化中，中医学知识像大海无边无际，其医学文化被后人传承和发扬。而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"
}
}
})
2.2视频学习
对于普通用户端来说，首页可分为中药视频，中药百科、中药健康、中药咨询、个人中心五大部分。其中在中药视频中可以查询想学的中医药知识视频，并且可以在视频下方进行评论和收藏。
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)
}
}
})
},
2.3中药百科学习
中药百科可以查找相关中药材知识，通过查询找到相应的文章百科，点击进入详情页
通过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>
2.4个人中心
进入个人中心可以进行密码修改，浏览自己的学习进度，搜藏的文章或视频，以及自己发布的评论，在修改密码界面，用户需要输入原密码，再两次输入新密码进行密码的修改。面设计一如既往的简约，给人一种很清爽的感觉。如图所示:
通过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)
}
}
})
}
},
2.5学习进度
有些中药学习视频较长，用户在短时间内并不能观看完整，所以为了方便用户的学习，用户可以在学习进度查看自己浏览历史，点击相应的浏览记录继续学习即可跳转到最后一次退出的地方，保证便捷的学习。也可以删除自己的学习进度。
<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)
}
}
})
2.6我的评论
为了使用户在学习的过程中拥有愉快的心情，可以在自己观看的视频下方进行评论，并且在我的评论进行删除。
通过@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，留言内容等提交成功之后刷新，显示评论内容。
2.7我的收藏
在观看自己喜欢的视频或者文章的时候可以进行收藏，并且在我的收藏中进行观看或者删除。
通过@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("取消收藏")
}
湘公网安备 43102202000103号