目录
1、技术介绍
1、管理员后台技术:
Web前端使用vue框架进行开发
后端使用java springboot框架进行开发
数据库使用的是myql
2、小程序用户端的技术:
微信开发者语言:js+json+wxss+wxml
3、项目整体采用的是mvc的思想模式进行开发。代码可读性高,便于理解。
2、需求架构图分析
心理健康服务小程序系统分为三个角色:小程序用户、小程序用户咨询师、管理员,系统的总体功能架构图如下所示:
3、前后端数据通讯方式介绍
小程序端和请求后端接口的方式介绍:
小程序HTTP 请求:小程序可以通过 HTTP 请求向后端服务器发送请求,请求数据或者请求更新界面。后端服务器可以通过响应来回复小程序的请求,从而让小程序更新界面,
代码实例如下:
wx.request({ //微信小程序发送请求的函数
url: url, //请求的后端api地址
method:"post", //请求方式
data:{ //后端接口传递的数据
},
dataType:"json", //数据传输的格式
success:(response) =>{ //请求成功的回调函数
console.log(response); //response 为请求返回的数据情况
}
})
后端接口RESTful API:REST(Representational State Transfer) 是一种基于 HTTP 协议的 Web API 设计原则,它允许客户端通过 HTTP 请求来获取、更新和删除数据。小程序可以使用 RESTful API 向后端服务器发送请求,从而获取、更新和删除数据,代码示例如下:
@PostMapping("/article/{id}") //接口地址的RESTful API定义
@ApiOperation("文章详情") //接口解释作用
public R article(@PathVariable("id") Integer id,@RequestBody CollectEntity collectEntity){//对数据的处理逻辑
return R.ok().put("data",articleEntities);
}
4、数据库表设计
文章表设计如下:
用户表设计如下:
分类表设计如下:
咨询表设计如下:
5、小程序用户功能介绍
5.1、小程序导航页面展示(用户角色)
首页:有滚动的banner图片展示、可以进行课程学习、心理测评、查看心理文章、查看测评报告等操作。
咨询室:用户点击咨询室可以查看所有发布的咨询师信息,也可在上方搜索栏输入名称进行模糊查找。点击咨询进行问题的提问操作。
个人中心:微信授权登录,完善信息,查看我的测评报告,查看我的咨询记录,我购买的课程记录,对平台服务进行评价
在线测评小程序端wxml代码如下:
<!--pages/detail/index.wxml-->
<swiper class="screen-swiper" indicator-dots="false" circular="true">
<swiper-item>
<image src="{{host+info.img}}" mode='aspectFill'></image>
</swiper-item>
</swiper>
<view class="content">
<view class="content_item">
<view class="content_item_one">
<view class="title">{{info.name}}</view>
</view>
<block><rich-text class="detail" nodes="{{info.content}}"></rich-text></block>
</view>
<scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" bindscroll="onToTop" scroll-y="true" style="margin-top:10px;height:calc(100% - 1px)">
<view class="message-item" wx:for="{{answer_list}}">
<view>
<text style="font-size: 15px;" class="title-md text-bold text-black margin-bottom">第{{index+1}}题: {{item.orderNum}}</text>
<radio-group class="block" data-index="{{index}}" bindchange="changeHome">
<view class="cu-form-group margin-top" wx:if="{{item.aname}}">
<radio value="a" ></radio>
<view class="title" style="margin-left:5px"> A:{{item.aname}}</view>
</view>
<view class="cu-form-group margin-top" wx:if="{{item.bname}}">
<radio value="b" data-index="{{index}}"></radio>
<view class="title" style="margin-left:5px"> B:{{item.bname}}</view>
</view>
<view class="cu-form-group margin-top" wx:if="{{item.cname}}">
<radio value="c" data-index="{{index}}"></radio>
<view class="title" style="margin-left:5px"> C:{{item.cname}}</view>
</view>
<view class="cu-form-group margin-top" wx:if="{{item.dname}}">
<radio value="d" data-index="{{index}}"></radio>
<view class="title" style="margin-left:5px"> D:{{item.dname}}</view>
</view>
<view class="cu-form-group margin-top" wx:if="{{item.ename}}">
<radio value="e" data-index="{{index}}"></radio>
<view class="title" style="margin-left:5px"> E:{{item.ename}}</view>
</view>
</radio-group>
</view>
</view>
<form report-submit='true' >
<button class=" bg-blue lg button-hover" role="button" form-type="submit" bindtap="submit">提交</button>
</form>
</scroll-view>
</view>
Js代码如下:
submit: function(e){
var userId = wx.getStorageSync('userInfo')['id'];
//计算同学的总分
var score = 0;
var datas = this.data.answer_list;
score = 0;
for(var i in datas){
score += parseInt( datas[i][datas[i]['selectValue'] + 'mark']);
}
console.log("this.data.info",this.data.id)
app.data.utils.request({
url: app.data.api.post_answers,
data: {
other: JSON.stringify(datas),
linkType:1,
linkId:this.data.info.id,
total: score,
memberId:userId
},
method: 'post',
success: (data) => {
wx.showToast({
title: '答题完成',
})
wx.redirectTo({
url: '/pages/problem_log/index',
})
}
});
},
后台控制器接口代码如下:
public R article(@PathVariable("id") Integer id,@RequestBody CollectEntity collectEntity){
tjj.com.modules.sys.entity.ArticleEntity articleEntities = articleService.getById(id);
if(articleEntities.getType() == 2){
articleEntities.setOrder(orderService.list(new QueryWrapper<OrderEntity>().eq("link_type",1).eq("link_id",articleEntities.getId())));
}
if(articleEntities.getType() == 1){
articleEntities.setIszan(0);
CollectEntity collectEntity1 = collectService.getOne(new QueryWrapper<CollectEntity>().eq("link_type",2).eq("link_id",id).eq("member_id",collectEntity.getMemberId()));
if(collectEntity1!=null){
articleEntities.setIszan(1);
}
articleEntities.setIssou(0);
CollectEntity collectEntity2 = collectService.getOne(new QueryWrapper<CollectEntity>().eq("link_type",3).eq("link_id",id).eq("member_id",collectEntity.getMemberId()));
if(collectEntity2!=null){
articleEntities.setIssou(1);
}
List<CollectEntity> collectEntityList = collectService.list(new QueryWrapper<CollectEntity>().eq("link_id",id).eq("link_type",4));
for (CollectEntity co1:collectEntityList
) {
co1.setMember(memberService.getById(memberService.getById(co1.getMemberId())));
}
articleEntities.setCollectList(collectEntityList);
}
if(articleEntities.getType() == 4){
OrderEntity orderEntity = orderService.getOne(new QueryWrapper<OrderEntity>().eq("link_type",3).eq("link_id",id).eq("member_id",collectEntity.getMemberId()));
articleEntities.setIsjia(0);
if(orderEntity != null){
articleEntities.setIsjia(1);
}
}
return R.ok().put("data",articleEntities);
}
5.2、小程序导航页面展示(咨询师角色)
功能描述:咨询师用户通过微信授权登陆后进入小程序首页,可在此平台文章浏览、回复用户咨询等操作。
6、管理员端功能介绍
管理员登陆后台后可对数据进行管理,其中有管理员信息管理,用户信息管理,课程管理,分类管理,服务评价管理,订单管理,文章管理,测试题管理。
6.1、登录界面
6.2、主界面
7、项目的完整功能操作录屏
以上是对项目的简单的功能介绍,感兴趣的童鞋可以看以下详细的功能演示地址:
具体功能演示地址https://jenny427.rewardoo.com/backend/assets/images/preview/1-black.png
以上就是对项目的整体介绍,感兴趣的伙伴可以私信我。谢谢