2024年12月30日 星期一 甲辰(龙)年 十月廿六 设为首页 加入收藏
rss

“药知了-中药自学网”网站前端设计与实现案例

时间:04-18来源:作者:点击数:81

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}}&nbsp;</p>
  • <p style="text-align: center;">
  • <img :alt="medicalDetail.name" :src="medicalDetail.coverImg" style="width: 450px; height: 270px;" title="黄藤的图片" /><br />&nbsp;
  • </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="黄藤的图片" />&nbsp;&nbsp;</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("取消收藏")
  • }
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门