后端基于php laravel框架+微信原生开发框架+mysql数据库的基于微信小程序的大学生心理测试平台的设计与实现计算机毕业设计微信小程序开发

最新推荐文章于 2024-04-24 09:44:28 发布

平姐设计

最新推荐文章于 2024-04-24 09:44:28 发布

阅读量468

点赞数 1

分类专栏：微信小程序项目实战 php项目开发实战计算机毕业设计100套文章标签： php laravel 微信小程序数据库mysql

本文链接：https://blog.csdn.net/hepingyundanfengqing/article/details/132870852

版权

计算机毕业设计100套同时被 3 个专栏收录

150 篇文章 57 订阅

订阅专栏

微信小程序项目实战

44 篇文章 15 订阅

订阅专栏

php项目开发实战

19 篇文章 0 订阅

订阅专栏

👇其他专栏推荐👇：

🥰需要源码可以滴滴我🥰

1、技术介绍

1、管理员后台技术：

Web前端使用laiyu组件进行开发

后端使用php laravel框架进行开发

数据库使用的是myql

2、小程序用户端的技术：

微信开发者语言：js+json+wxss+wxml

3、项目整体采用的是mvc的思想模式进行开发。代码可读性高，便于理解。

2、需求架构图分析

基于微信小程序的大学生心理测试平台分为三个角色：小程序用户、管理员，系统的总体功能架构图如下所示：

3、数据库表设计

心理测试题表设计如下：

测试题分类表设计如下：

用户收藏表设计如下：

小程序用户表设计如下：

心理资讯新闻表设计如下：

4、总er图设计

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

小程序端和请求后端接口的方式介绍：

小程序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 向后端服务器发送请求，从而获取、更新和删除数据，代码示例如下：

Route::post('/login', 'Api\MembersController@login'); //http路由规则定义

public function login(Request $request){ //控制器中的方法体

}

5、小程序用户功能介绍

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

首页：打开小程序后，来到小程序首页界面。用户可以对能力、智力、情商、抗压、桃花运选择性的进行测试

个人中心：用户点击“个人中心”，进入个人中心页面可以看到我发布的、我的测试报告、我的收藏，还可以填写意见反馈。

心理论坛页面：在心理论坛页面，用户可以搜索和发布相关的信息，还可以对别人发布的信息进行评论和点赞

小程序端首页代码布局wxml代码如下：

<view class="container">

  <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" bindscroll="onToTop" scroll-y="true" style="height:calc(100% - 1px)">

    <view>

      <view class="cu-bar bg-white solid-bottom margin-top">

        <view class='action'>

          <text class='cuIcon-titles text-orange '></text> 测试分类

        </view>

      </view>

      <view class="cu-list grid col-4">

        <view class="cu-item" wx:for="{{iconList}}" wx:key>

          <navigator url="/pages/home/index?id={{item.id}}" class="cuIcon-{{item.icon}} text-{{item.color}}">

          </navigator>

          <text>{{item.name}}</text>

        </view>

      </view>

    </view>

    <view>

      <view class="cu-bar bg-white solid-bottom margin-top">

        <view class='action'>

          <text class='cuIcon-titles text-orange '></text> 最新测试

        </view>

      </view>

      <view class="cu-card article margin-top" style="background-color: #fff;">

        <navigator class="cu-item shadow" wx:for="{{list}}" url="/pages/information-item/index?id={{item.id}}" style="border-bottom: 1px solid #ccc;">

          <view class="title">

            <view class="text-cut">{{item.title}}</view>

          </view>

          <view class="content">

            <image src="{{host}}{{item.pic}}" mode="aspectFill"></image>

            <view class="desc">

              <rich-text nodes="{{item.content}}" class="text-content"> </rich-text>

              <view>

                <view>

                  <view class="cu-tag bg-red light sm round">{{item.categories_data.name}}</view>

                </view>

              </view>

            </view>

          </view>

          <view class="margin-top-sm flex justify-between margin-left">

            <view class="text-gray text-df">{{item['created_at']}}</view>

            <view class="margin-right" style="margin-right:41rpx;">

              <text class="cuIcon-appreciate text-gray">{{item.zan_count}}</text>

              <text class="cuIcon-attentionfill text-gray margin-left-sm">{{item.view_count}}</text>

            </view>

          </view>

        </navigator>

      </view>

    </view>

  </scroll-view>

  <view class="tabbar-border"></view>

</view>

Js代码如下：

cate(){

wx.request({

url: app.data.api.categories,

dataType: 'json',

method: 'get',

data: {},

success: (res) => {

this.setData({

iconList: res.data.data

})

}

})

},

},

后台控制器接口代码如下：

public function categry($id){
return $this->ok(Categories::query()->find($id)->toArray());
}
public function categories(){
return $this->ok(Categories::query()->get()->toArray());
}

5.2、用户进行心理测试板块

功能描述：点击分类入口进入测试题库，然后选择相应的题目进行心理测试题测试。

心理测试板块wxml代码如下：

<view class="container">

    <text class="word-content">{{data.title}}</text>

    <text wx:if="{{showNot}}" class="word-definition">{{definition}}</text>

    <view class="button-miss" catchtap="show" data-id="A" data-index="{{data.id}}">

      <text class="word-miss" data-index="{{data.answer_a}}" catchtap="show" data-id="{{data.id}}">A:  {{data.answer_a}}</text>

    </view>

    <view class="button-miss" catchtap="show" data-id="B" data-index="{{data.id}}">

      <text class="word-miss" data-index="{{data.answer_b}}" catchtap="show" data-id="{{data.id}}">B:  {{data.answer_b}}</text>

    </view>

    <view class="button-miss" catchtap="show" data-id="C" data-index="{{data.id}}">

      <text class="word-miss" data-index="{{data.answer_c}}" catchtap="show" data-id="{{data.id}}">C:  {{data.answer_c}}</text>

    </view>

    <view class="button-miss" catchtap="show" data-id="D" data-index="{{data.id}}">

      <text class="word-miss" data-index="{{data.answer_d}}" catchtap="show"  data-id="{{data.id}}">D:  {{data.answer_d}}</text>

    </view>

    <view class="button-next" catchtap="next">

      <text class="word-next" catchtap="next">下一个</text>

    </view>

</view>

提交测试题的js代码如下：

next: function () {

    this.setData({

      showNot: false

    })

    var idx = this.data.current_idx + 1;

    console.log(idx + '//' + this.data.list.length);

    var word = this.data.list[idx]

    console.log(word);

    if (idx >= this.data.list.length) {

      this.setData({

        definition: '这已经是最后一题了',

        showNot: true

      })

    } else {

      this.setData({

        data: word,

        current_idx: idx

      })

    }

  },

后端控制器接口代码如下：

public function postUserNews(Request $request, $id){
    $select = $request->input('select');
    $news_id = $request->input('news_id');
    $blank_id = $request->input('blanks_id');
    //先判断是否有答题数据
    $news_user = UserNews::query()->where(['users_id' => $id, 'news_id' => $news_id])->get()->toArray();
    if (empty($news_user)){
        UserNews::query()->create([
            'users_id' => $id,
            'news_id' => $news_id,
            'nickname' => Members::query()->find($id)->nickname
        ]);
        $news = News::query()->find($news_id);
        News::query()->find($news_id)->update(['num' => $news->num +1]);
    }
    $blnks_user = UserBlanks::query()->where(['users_id' => $id, 'news_id' => $news_id,'blanks_id' => $blank_id])->get()->toArray();
    if (empty($blnks_user)){
        UserBlanks::query()->create([
            'users_id' => $id,
            'news_id' => $news_id,
            'nickname' => Members::query()->find($id)->nickname,
            'blanks_id' => $blank_id,
            'select' => $select
        ]);
    }
    return $this->ok([]);
}

5.3、用户心理测试论坛板块

功能描述：用户在心理论坛板块中，可以根据关键字搜索其他用户发布的帖子，可以对帖子进行评价，点赞。也可以自己发布帖子信息。

发布帖子的wxml代码如下：

<view class="cu-form-group align-start">

  <view class="title">动态内容</view>

  <textarea maxlength="-1" bindinput="textareaBInput" value="{{content}}" placeholder="多行文本输入框"></textarea>

</view>

<view class="cu-bar bg-white margin-top">

  <view class="action">

    图片上传

  </view>

  <view class="action">

    {{imgList.length}}/4

  </view>

</view>

<view class="cu-form-group">

  <view class="grid col-4 grid-square flex-sub">

    <view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">

      <image src='{{host+imgList[index]}}' mode='aspectFill'></image>

      <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">

        <text class="cuIcon-close"></text>

      </view>

    </view>

    <view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">

      <text class="cuIcon-cameraadd"></text>

    </view>

  </view>

</view>

<button class=" bg-lilac lg button-hover" role="button" bindtap="submit">提交</button>

Js代码如下：

submit: function(){

    if(!this.data.content){

      wx.showToast({

        title: '请填写发布内容',

        icon: 'none'

      })

      return;

    }

    app.data.utils.isLogin();

    var userInfo = wx.getStorageSync('userInfo');

    console.log(userInfo);

    app.data.utils.request({

      url: app.data.api.posts_action,

      data: {

        members_id: userInfo.id,

        images: this.data.imgList,

        content: this.data.content,

        nickname: userInfo.nickname,

        parent_id: 0,

      },

      method: 'post',

      success: (res)=> {

        wx.showToast({

          title: '发帖成功',

        })

        wx.switchTab({

          url: '/pages/news-list/index',

        })

      }

    })

  },

后端接口代码如下：

$parentId = $request->input('parent_id', 0);
        $memberId = $request->input('members_id');
             // 创建帖子
        $member = Members::query()->find($memberId);
        Posts::query()->create([
            'members_id' => $memberId,
            'members_name' => $member->nickname,
            'avatarUrl' => $member->pic,
            'content' => $request->input('content'),
            'images' => $request->input('images'),
            'parent_id' => $parentId
        ]);
        // 评论数+1
        if ($parentId != 0) {
            Posts::query()->where('id', $parentId)->increment('comment_count');
        }
        return $this->ok([]);

6、管理员端功能介绍

6.1、管理员来到系统登录界面

在登录页面选择需要登录的角色，在正确输入用户名和密码后，进入操作系统进行操作。

6.2、主界面

以上是对项目的简单的功能介绍，感兴趣的童鞋可以看我往期的作品，

链接地址：平姐设计的个人空间-平姐设计个人主页-哔哩哔哩视频

以上就是对项目的整体介绍，也可以接受项目系统定制。谢谢！

平姐设计

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
后端基于php laravel框架+微信原生开发框架+mysql数据库的基于微信小程序的大学生心理测试平台的设计与实现计算机毕业设计微信小程序开发

1、管理员后台技术：Web前端使用laiyu组件进行开发后端使用php laravel框架进行开发数据库使用的是myql2、小程序用户端的技术：微信开发者语言：js+json+wxss+wxml3、项目整体采用的是mvc的思想模式进行开发。代码可读性高，便于理解。
复制链接

扫一扫