​基于php laravel框架+微信小程序原生开发框架+mysql数据库的运动健康管理系统 计算机毕业设计 微信小程序开发

目录

1、技术介绍

2、需求架构图分析

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

4、数据库表设计

5、小程序用户功能介绍

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

5.2、小程序个人中心页面展示

 6、管理员端功能介绍

6.1、登录界面

 6.2、主界面

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

---

1、技术介绍

1、管理员后台技术：

Web前端使用html css javascript进行开发

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

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

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

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

}

4、数据库表设计

健康管理表设计如下：

食谱表设计如下：

 

用户表如下：

运动资讯表设计如下：

健康计划表设计如下：

热量管理表设计如下：

5、小程序用户功能介绍

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

微信授权登录完善信息：点击登录，弹出授权弹框，获得授权，登录之后进行操作。

食菜谱推荐，健康计划新增入口，身材变化管理入口，热量发布入口

 

新增身材变化管理小程序端wxml代码如下：

<view  class="pd-10">

<form bindsubmit="formSubmit" >

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

        <view class="title">身高</view>

        <input name="idcard" value="{{info.idcard}}" placeholder="身高"></input>

    </view>

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

        <view class="title">体重</view>

        <input name="time" value="{{info.time}}"  placeholder="体重"></input>

    </view>

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

        <view class="title">胸围</view>

        <input name="address"  value="{{info.address}}" placeholder="胸围"></input>

    </view>

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

        <view class="title">腰围</view>

        <input value="{{ userInfo.status }}" name="status" placeholder="腰围"></input>

    </view>

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

        <view class="title">肩宽</view>

        <input value="{{ userInfo.path }}" name="path" placeholder="肩宽"></input>

</view>

    <view class="padding flex flex-direction">

        <button  form-type="submit"  class="cu-btn bg-red margin-tb-sm lg">确认添加</button>

    </view>

</form>

</view>

Js代码如下：

formSubmit(e){

        console.log("e",e)

        wx.request({

            url: api.acids+"/"+wx.getStorageSync('userInfo')['id'],

            dataType: 'json',

            data:e.detail.value,

            method: "POST",

            success: (res) => {

                if(res.data.code == 0){

                    wx.showToast({

                      title: '操作成功',

                      icon:"success"

                    })

                 wx.navigateTo({

                   url: '/pages/member/member',

                 })

                }else{

                    wx.showToast({

                      title: res.data.msg,

                      icon:"none"

                    })

                }

            }

        })

    },

5.2、小程序个人中心页面展示

完善用户的个人信息，查看热量管理记录，身材变化记录，健康计划记录。

 6、管理员端功能介绍

登录：输入用户名和密码，进入后台管理系统。

用户信息管理：系统管理员可以查看用户的个人信息、搜索信息、删除信息

资讯管理：系统管理员要对运动资讯和食菜谱信息进行发布。

6.1、登录界面

 6.2、主界面

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

以上是对项目的简单的功能介绍，感兴趣的童鞋可以看以下详细的功能演示地址：

项目功能演示地址https://www.bilibili.com/video/BV1ej411D7hX/?vd_source=1b00b299dfb4cd201f2c5966bf0978ac

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