​基于Java spring boot框架+微信开发者工具+MySQL数据库的高校课外管理系统 计算机毕业设计 微信小程序开发

目录

1、技术介绍

1.1、Java语言

1.2、微信小程序开发工具

1.3、Spring boot框架

1.4、MySQL

2、需求架构图分析

3、小程序最新活动流程设计

4、管理员端的活动流程设计

5、数据库表设计

6、系统E-R图设计

7、系统功能介绍

7.1、小程序用户(学生)

7.2、小程序用户(活动负责人)

8、管理员端功能实现

8.1、用户管理模块

8.2、活动管理模块

---

1、技术介绍

1.1、Java语言

Java是一种跨平台的编程语言，它可以在不同的系统上运行，它是一个纯粹的面向对象的编程语言，java 的语言风格与 C++非常相近，它在 C++的基础上进行了创新，同时它遗弃了 C++里面比较难理解的指针和多继承等问题。

1.2、微信小程序开发工具

开发工具提供了代码编辑器、试试器、模拟器、性能分析工具等多个功能模块，可以让开发者更快地创建并调试微信小程序，提高开发效率和代码质量。开发者可以在微信开发者工具中进行代码编写、实时预览和调试，同时还能够模拟不同的设备和网络环境，进行真实的测试和调试。

1.3、Spring boot框架

Spring Boot能帮助您简化 Spring的构建，并能迅速地创建 spring应用。常规Spring框架在开启某些特性或引入第三方依赖时，需要配置大量的XML文件，这使得它变得更加复杂，并且更容易出错。Spring Boot的理念则是“约定大于配置”，它整合了许多第三方依赖的配置，并与其自身的组装机制相结合，只需将相关依赖关系添加在Maven的POM文件中就可以达到开箱即用的效果。

1.4、MySQL

由于 MySQL数据库的特性，所以在数据库中使用更多的是 MySQL数据库。与 Oracle相比，MySQL更轻、更简洁、更易于使用、相对较少的服务部署更适合于开发毕设系统。它还是一个免费的开放源代码，并且非常适合于个人开发，占用的内存更少，在发布版本之后不到100兆。

2、需求架构图分析

高校课外活动管理系统分为三个角色：分别为管理员、学生以及活动负责人。系统的总体功能架构图如下所示：

3、小程序最新活动流程设计

4、管理员端的活动流程设计

5、数据库表设计

表1 admin 表

序号	列名	数据类型	长度	主键	允许空	列说明
1	admin_id	varchar	(64)	√		管理员id
2	login_name	varchar	(64)		√	登录名
3	nickname	varchar	(64)		√	昵称
4	phone	varchar	(11)		√	电话号码
5	email	varchar	(64)		√	邮箱
6	password	varchar	(64)		√	密码

表2 comment 表

序号	列名	数据类型	长度	主键	允许空	列说明
1	comment_id	varchar	(64)	√		评论id
2	user_id	varchar	(64)		√	用户id
3	login_name	varchar	(64)		√	登录名
4	activity_id	varchar	(64)		√	活动id
5	activity_name	varchar	(64)		√	活动名称
6	create_time	datetime			√	发布时间
7	content	varchar	(500)		√	内容
8	avatar	varchar	(255)		√	头像
9	activity_picture	varchar	(255)		√	活动图片

表3 user表

序号	列名	数据类型	长度	主键	允许空	列说明
1	user_id	varchar	(64)	√		用户id
2	login_name	varchar	(64)		√	登录名
3	nickname	varchar	(64)		√	昵称
4	avatar	varchar	(500)		√	头像
5	phone	varchar	(11)		√	电话号码
6	email	varchar	(64)		√	邮箱
7	create_time	datetime			√	注册时间
8	password	varchar	(64)		√	密码
9	role	tinyint			√	角色
10	status	tinyint			√	状态

表4 works表

序号	列名	数据类型	长度	主键	允许空	列说明
1	works_id	varchar	(64)	√		作品id
2	user_id	varchar	(64)		√	用户id
3	login_name	varchar	(64)		√	登录名
4	activity_id	varchar	(64)		√	活动id
5	activity_name	varchar	(64)		√	活动名称
6	file	varchar	(500)		√	文件
7	create_time	datetime			√	发布时间

6、系统E-R图设计

7、系统功能介绍

7.1、小程序用户(学生)

（1）首页模块：学生成功登录后进入小程序的首页，在该页面可以通过搜索活动名称或类型查看部分活动，也可以通过查看最多评论、收藏或点赞进入活动详细页面。

（2）最新活动：学生点击最新活动可以看到学校发布的最新活动，点击自己感兴趣的进行查看，如果没有特别感兴趣的也可以根据点赞数和收藏数最高的活动进行查看。

(3)点击进入活动详情，学生可以对活动进行点赞，收藏操作。对活动进行评价，报名参加和签到，这里的签到基于用户所在定位进行签到，并且在平台设置的活动区域范围内进行签到。

获取活动列表的后端控制器代码如下：
@GetMapping("/list/{page}/{size}")

public Result findByUserId(@PathVariable Integer page,

@PathVariable Integer size) {

Page<Activity> activityPage = activityService.list(2, page, size);

return new Result(true, 20000,

"查询成功",

new PageResult<Activity>(activityPage.getTotalElements(),

activityPage.getContent())

);

}

（4）学生个人中心：学生点击个人中心，可进行修改资料和密码、活动签到、查看已报名的活动以及点赞和收藏的活动。

7.2、小程序用户(活动负责人)

(1) 活动负责人拥有和学生一样的操作权限，不同的是，活动负责人可以发布活动。

 发布活动的代码如下：

String userId = this.getUserIdFromRequest();

String fileUrl = null;

if (image.isEmpty()) {

return new Result(false, StatusCode.ERROR, ResultMessage.ADD_ERROR);

}

fileUrl = fileService.fileUpload(image);

activity.setActivityPicture(fileUrl);

activity.setUserId(userId);

activityService.add(activity);

return new Result(true, StatusCode.OK, "发布成功");

查看用户签到情况代码如下：

public Result findByUserId(@PathVariable String userId,

@PathVariable Integer page,

@PathVariable Integer size) {

Page<SignIn> signInPage = signInService.list(userId, page, size);

return new Result(true, 20000,

"查询成功",

new PageResult<SignIn>(signInPage.getTotalElements(),

signInPage.getContent())

);

}

（2）活动负责人个人中心：负责人登录后，点击个人中心可以修改资料和密码、发布活动、进行活动统计、查看用户签到情况，对未签到的同学进行提醒。

（3）活动统计：统计部分采用了echarts插件进行数据的可视化展示，这里对各个活动的报名人数，点赞量，收藏量，签到量进行纵向条形图展示。

小程序端wxml代码如下：

<view class="container">

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

</view>

Js代码如下：

import * as echarts from '../../../ec-canvas/echarts';

let chart = null;

// 获取应用实例

const app = getApp()

function initChart(canvas, width, height, dpr) {

  var yAxis_data = []

  var data1 = []

  var data2 = []

  var data3 = []

  var data4 = []

  app.globalData.activity_list.forEach(function (item, index) {

console.log(item + "下标为" + index);

 var activityName = item.activityName.slice(0, 6) + "..."

    yAxis_data.push(activityName)

    data1.push(item.applicationCount)

    data2.push(item.likes)

    data3.push(item.collection)

    data4.push(item.signIn)

  });

  chart = echarts.init(canvas, null, {

    width: width,

    height: height,

    devicePixelRatio: dpr // new

  });

  canvas.setChart(chart);

  var option = {

    tooltip: {

      trigger: 'axis',

      axisPointer: { // 坐标轴指示器，坐标轴触发有效

        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

      },

      confine: true

    },

    legend: {

      data: ['报名人数', '点赞量', '收藏量', '签到量']

    },

    grid: {left: 20,right: 20,bottom: 15,top: 40,containLabel: true},

    xAxis: [{type: 'value',axisLine: {lineStyle: {color: '#999' }},axisLabel: {color: '#666' }}],

  yAxis: [{type: 'category',axisTick: {show: false}, data: yAxis_data,axisLine: {lineStyle: {color: '#999'}},axisLabel: {color: '#666'} }],

    series: [{name: '报名人数',type: 'bar',label: {normal: {show: true,position: 'inside' }},

        data: data1,}},

      {name: '点赞量', type: 'bar',stack: '总量', label: {normal: {show: true,position: 'inside'} },

        data: data2,}},

      {name: '收藏量',type: 'bar',label: {normal: {show: true,position: 'inside' } },

        data: data3, } },

      {name: '签到量', type: 'bar',label: { normal: {show: true,position: 'inside'}},

        data: data4,} }]};

  chart.setOption(option);

  return chart;

}

Page({

  data: {

    ec: {

      onInit: initChart

    },

  },

  onReady() {

    setTimeout(function () {

      // 获取 chart 实例的方式

      // console.log(chart)

    }, 2000);

  },

});

活动活动数据的后端java代码如下：

控制层：

@GetMapping("/mine/{userId}")

    public Result my(@PathVariable String userId) {

        return activityService.my(userId);

}

服务层：

public Result my(String userId) {

User user = userDao.findById(userId).get();

if (user.getRole() != 2) {

return new Result(false, 20001, "没有权限");

}

returnnewResult(true,20000,"",activityDao.findAllByUserIdEqualsOrderByCreateTimeDesc(userId));

}

8、管理员端功能实现

8.1、用户管理模块

对活动负责人以及学生信息进行管理。

 

8.2、活动管理模块

可以通过搜索活动名称进行查看活动的详情，能够看到活动的类型是线上还是线下、活动的地点以及时间等信息，并可以对这些信息进行审核或者删除操作。

活动负责人管理代码如下：

Page<User> userPage = userService.list(page, limit, user);

return new Result(20000,

"查询成功",

userPage.getTotalElements(),

userPage.getContent());

];

学生管理信息代码如下：

Page<User> userPage = userService.list(page, limit, user);

return new Result(20000,

"查询成功",

userPage.getTotalElements(),

userPage.getContent());

活动审核代码如下：

activityService.updateStatusById(2, activityId);

return new Result(20000, "审核成功");

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

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

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

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