基于vue+node.js的健身微信小程序设计与实现

作者主页：编程指南针

作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容：Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路关注作者有好处

文末获取源码

项目编号：BS-QD-008

一，环境介绍

数据库：Mysql: mysql5.7

应用服务器：Tomcat: tomcat8.5.31

开发工具：IDEA或VSCODE

开发技术：Vue+nodejs+ElementUI+微信小程序

二，项目简介

2.1 背景介绍

人们日益丰富的物质生活，使得大家对于个人健康和生命的质量更加重视。国家主导的大健康产业也是2025战略规划中的一个重点产业，同时全国各级政府也在大力推广全民健身，为居民健康提供良好的健身条件，比如兴建各类绿色公园，健身跑道等，另外各式各样的健身房、健身器材、健身课程等，也在最近这些年得以快速的发展，所以健身的外部条件己十分成熟。对于个人来讲，健身主要是对自己的自律性要求，自律性差的朋友可能很难坚持下来，但如果有这么一个圈子，大家相互鼓励，有健身教练给你陪伴和指导，相必会对你较大促进作用。

本次课题主要基于所学的VUE+NODEJS，结合微信小程序开发，来实现一个健身小程序的平台系统，此系统主要满足喜欢健身的朋友，购买一些健身课程或健身产品，了解一些健身相关的资讯，健身方面的食谱，想有一个同类圈子的交流互动的平台。基于这样一个目的，设计开发了健身小程序平台。此平台依托于微信生态圈，用户不需要下载安装别的客户端，直接在微信上就可以打开运行，也便于大家分享和推广。所以将健身和移动互联网应用有效的结合起来，通过轻量级的应用平台，来实现健身平台的快速推广和健身知识的快速普及。

健身小程序系统的开发，使用微信开发者工具和VSCODE来进行开发，前端主要基于微信小程序平台开发使用，后台主要使用NODE和VUE来完成后台管理服务系统的开发与设计。数据库采用MYSQL5.7进行数据的存储，整个系统设计功能完整，界面优雅大方，符合用户的使用习惯。本课题设计的系统主要完成前端用户在线购买健身课程、查阅健身食谱、阅读健身资讯信息、在线留言反馈等功能；后台主要由平台管理员管理用户信息、课程资源、健身食谱、健身资讯等相关信息。

2.2 功能介绍

本课题关于健身小程序的设计与开发，在设计相关功能需求时，充分走访了健身俱乐部和喜欢健身的爱好者，通过沟通交流进行了相应的业务功能分析，从而设计了相关的功能模块。系统的用户主要由前端用户和平台管理用户来共同使用。前端主要作一些信息的展示并实现在线购买课程、信息查看和互动等操作，后台主要由平台指定的管理员进行基础的信息管理，比如用户管理，发布课程资源，管理相关信息等等，后台管理的数据会在前端及时进行更新展示。

本系统的设计主要有两类用户，分别是前端会员用户和后台管理用户，不同的用户角色在系统中使用的功能不同，下面通过用例图的方式来介绍一下各个用户相应的功能模块。

前端用户用例图如下图1所示：

图1 前端用户用例图

前端用户的功能模块介绍：

1、注册登陆：健身小程序平台为前端用户提供了在线注册和登陆的功能，以便于进行权限认证，系统设计的相关业务功能，必须登陆后才可以进行相关的使用。

2、购买课程：用户登陆后，可以在线浏览健身课程资源，并在线下单购买，课程资料可以以图文和视频的形式来进行展示。

3、新闻资讯：系统平台发布的关于健身方面的新闻资讯供前端用户进行浏览查看。

4、健身食谱：对于健身爱好者来讲，需要专门的健身食谱来配合，以达到健身营养的需要。

5、互动交流：用户在查看课程时，可以进行在线评论和收藏等相关互动操作。

6、留言反馈：用户在前端可以根据需要，对健身小程序平台提供一些建议和反馈信息。

7、个人中心：在用户的个人中心处，可以查看和管理个人信息，并在线管理个人订单信息和收藏信息等。

后台管理员用户，主要用例功能如下图2所示：

图2 后端用户用例图

后端用户的主要功能模块介绍：

1、用户管理：用户管理模块主要用来管理前端注册的用户信息。

2、轮播图管理：前端展示的轮播图图片，可以在后台管理中进行替换修改。

3、公告管理：后台管理员可以发布平台的相关公告信息供前端用户查看。

4、课程管理：后台管理员可以发布一些课程资源信息供前端用户浏览下单。

5、订单管理：前端用户的下单信息，后台管理员可以进行相应的管理操作。

6、食谱管理：后台管理员可以发布一些健身相关的食谱信息供用户查看。

7、资讯管理：主要发布一些健身相关的新闻信息和健身知识信息。

8、分类管理：主要管理一些课程的分类信息，以便于更好的供前端人员搜索。

9、留言反馈：前端用户的反馈信息，后台管理者可以进行查看和回复等操作。

三，系统展示

小程序前端首页

前端注册登录

健身课程购买

健身食谱

健身资讯

我的订单

个人中心

后台管理员登录

轮播图管理

用户管理

平台公告管理

课程资源管理

健康食谱管理

资讯管理

客服管理

四，核心代码展示

var Controller = require("../core/controller.js");/*** 管理后台*/
class Admin extends Controller {/*** 构造函数* @param {Object} config 配置参数*/constructor(config) {// 传参给父类构造函数super(Object.assign({// 选择的模板那路径模板tpl: "./admin/",// 选择的服务service: "admin",},config));}
}// 用户数，访问次数，营业额，消费人数统计，销售量，订单数
Admin.prototype.index = async function(ctx) {// 总用户数var user_count = await $.services["user"].count();// 总文章数var article_count = await $.services["article"].count();// 分类文章数var article_type_num = await $.services["article"].count_group({}, {groupby: "type"});// 最近7日注册用户var register_7day = await $.services["user"].date_comput({}, {date_key: "create_time",size: 7});// console.log(register_7day);// 最近7日订单量var order_7day = await $.services["order"].date_comput({}, {date_key: "create_time",size: 7});// console.log(order_7day);// 最近7日营业额var revenue_7day = await $.services["order"].date_comput({}, {date_key: "create_time",method: "sum",field: "price_count",size: 7});// console.log(revenue_7day);// 最近7日总销量var sales_7day = await $.services["order"].date_comput({}, {date_key: "create_time",method: "sum",field: "price_count",size: 7});// 商品分类销量var goods_type_sales = await $.services["goods"].sum_group({}, {groupby: "type",field: "sales"});// 模型传入var model = await this.model(ctx, {user_count,article_count,register_7day,order_7day,revenue_7day,sales_7day,goods_type_sales,article_type_num});return await ctx.render(this.config.tpl + "index", model);
};module.exports = Admin;

var Controller = require("../core/controller.js");/*** 首页*/
class Index extends Controller {/*** 构造函数* @param {Object} config 配置参数*/constructor(config) {// 传参给父类构造函数super(Object.assign({// 选择的模板那路径模板tpl: "./",// 选择的服务service: "article",},config));}
}/*** 首页* @param {Object} ctx http请求上下文* @return {Object} 返回html页面*/
Index.prototype.index = async function (ctx) {var query = ctx.request.query;var { field, page, size } = query;delete query.field;delete query.page;delete query.size;var list = await this.service.get_list(query,Object.assign({}, this.config, {field,page,size,}));var list_article_hot = await this.service.get_list({},Object.assign({}, this.config, {field: "article_id,description,hits,create_time,author,title,img,url",page: 1,size: 10,orderby: "hits desc",}));var list_article_new = await this.service.get_list({},Object.assign({}, this.config, {field: "article_id,description,hits,create_time,author,title,img,url",page: 1,size: 10,orderby: "create_time desc",}));var list_goods_sales = await $.services["goods"].get_list({},{orderby:"`sales` desc"});var list_goods_new = await $.services["goods"].get_list({},{orderby:"`create_time` desc"});var list_ad = await $.services["ad"].get_list({},{orderby:"`display` desc"});var list_link = await $.services["link"].get_list({},{orderby:"`display` desc"});var model = await this.model(ctx, {list,list_goods_sales,list_goods_new,list_article_hot,list_article_new,list_ad,list_link});return await ctx.render(this.config.tpl + "index", model);
};module.exports = Index;

<template><el-main class="bg table_wrap"><el-form label-position="right" :model="query" class="form p_4" label-width="120"><el-row><el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap"><el-form-item label="标题"><el-input v-model="query.title"></el-input></el-form-item></el-col><el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap"><el-form-item label="关键词"><el-input v-model="query.keywords"></el-input></el-form-item></el-col><el-col :xs="24" :sm="24" :lg="24" class="search_btn_wrap"><el-col :xs="24" :sm="12" :lg="12" class="search_btn_1"><el-form-item><el-button type="primary" @click="search()" class="search_btn_find">查询</el-button><el-button @click="reset()" class="search_btn_reset">重置</el-button></el-form-item></el-col><el-col :xs="24" :sm="12" :lg="12" class="search_btn_2"><el-form-item><el-button v-if="user_group == '管理员' || $check_action('/cart/table','del')" class="float-right search_btn_del" type="danger" @click="delInfo()">删除</el-button>loat-right" type="danger" @click="delInfo()">删除</el-button><router-link v-if="user_group == '管理员' || $check_action('/cart/view')" class="el-button float-right el-button--default el-button--primary search_btn_add"to="./view?">添加</router-link></el-form-item></el-col></el-col></el-row></el-form><el-table border :data="list" @selection-change="selectionChange" style="width: 100%"><!-- 多选按钮 --><el-table-column fixed type="selection" tooltip-effect="dark" width="55"></el-table-column><!-- /多选按钮 --><el-table-column fixed label="标题" prop="title" width="120"></el-table-column><el-table-column label="封面图" prop="img" min-width="100"><template slot-scope="scope"><el-image style="width: 100px; height: 100px" :src="scope.row.img" :preview-src-list="[scope.row.img]"><div slot="error" class="image-slot"><img src="/img/error.png" style="width: 90px; height: 90px" /></div></el-image></template></el-table-column><el-table-column label="单价" prop="price" min-width="80"></el-table-column><el-table-column label="原价" prop="price_old" min-width="80"></el-table-column><el-table-column label="数量" prop="num" min-width="80"></el-table-column><el-table-column label="总价" prop="price_count" min-width="150"></el-table-column><el-table-column label="状态" prop="state" min-width="100"><template slot-scope="scope">{{getObj(list_state,scope.row.state).name}}</template></el-table-column><el-table-column prop="create_time" label="创建时间" min-width="200"><template slot-scope="scope">{{ $toTime(scope.row["create_time"],"yyyy-MM-dd hh:mm:ss") }}</template></el-table-column><el-table-column prop="update_time" label="更新时间" min-width="200"><template slot-scope="scope">{{ $toTime(scope.row["update_time"],"yyyy-MM-dd hh:mm:ss") }}</template></el-table-column><!-- 操作 --><el-table-column fixed="right" label="操作" width="60"><template slot-scope="scope"><router-link class="el-button el-button--small is-circle is-plain el-button--primary" :to="'./view?' + field + '=' + scope.row[field]"size="small"><i class="el-icon-edit"></i></router-link></template></el-table-column><!-- /操作 --></el-table><!-- 分页器 --><div class="mt text_center"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page":page-sizes="[7, 10, 30, 100]" :page-size="query.size" layout="total, sizes, prev, pager, next, jumper" :total="count"></el-pagination></div><!-- /分页器 --></el-main>
</template><script>import mixin from "../../mixins/page.js";export default {mixins: [mixin],data() {return {// 表table:"cart",// 获取数据地址url_get_list: "~/api/cart/get_list?like=0",url_del: "~/api/cart/del?",// 字段IDfield:"cart_id",// 查询query: {size: 10,page: 1,title: "",keywords: ""},// 数据list: [],// 状态list_state: [{"name":"使用中","value":1},{"name":"已失效","value":0}]}},methods: {async get_user_group(){var list = await this.$get("~/api/collect/get_list?");this.user_group = list.result.list;},table_class({row, column, rowIndex, columnIndex}){return "table_class";}// http://localhost:3000/api/collect/count_group?},created(){}}
</script><style type="text/css"></style>

五，相关作品展示

基于Java开发、Python开发、PHP开发、C#开发等相关语言开发的实战项目

基于Nodejs、Vue等前端技术开发的前端实战项目

基于微信小程序和安卓APP应用开发的相关作品

基于51单片机等嵌入式物联网开发应用

基于各类算法实现的AI智能应用

基于大数据实现的各类数据管理和推荐系统