​基于java springboot框架+微信小程序原生开发框架+mysql数据库的心理健康服务系统 计算机毕业设计 微信小程序开发

目录

1、技术介绍

2、需求架构图分析

3、前后端数据通讯方式介绍

4、数据库表设计

5、小程序用户功能介绍

5.1、小程序导航页面展示（用户角色）

5.2、小程序导航页面展示（咨询师角色）

 6、管理员端功能介绍

6.1、登录界面

 6.2、主界面

7、项目的完整功能操作录屏 

---

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

 以上就是对项目的整体介绍，感兴趣的伙伴可以私信我。谢谢