基于SpringBoot+Vue高校社团管理小程序的设计与实现

博主主页:一季春秋
博主简介:专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发,远程调试部署、代码讲解、文档指导、ppt制作等技术指导。
主要内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、小程序、安卓app、大数据等设计与开发。

感兴趣的可以收藏+关注,所有项目均配有开发文档,一系列安装配置教程,可以定制功能包安装运行!!

🍅文末获取联系🍅

系统介绍

相比于以前的传统手工管理方式,智能化的管理方式可以大幅降低学校的运营人员成本,实现了高校社团管理的标准化、制度化、程序化的管理,有效地防止了高校社团管理的随意管理,提高了信息的处理速度和精确度,能够及时、准确地查询和修正申请入社、社团活动、参加活动、创建社团、社团公告等信息。

课题主要采用Uni-weixin、springboot架构技术,前端以小程序页面呈现给用户,结合后台java语言使页面更加完善,后台使用MySQL数据库进行数据存储。微信小程序主要包括用户、社团信息、申请入社、社团活动、参加活动、创建社团、社团公告等功能,从而实现智能化的管理方式,提高工作效率。

系统主要技术 

开发语言:Java

使用框架:spring boot

前端技术:JavaScript、Vue 、css3

开发工具:IDEA/MyEclipse/Eclipse、Visual Studio Code

数据库:MySQL 5.7/8.0

数据库管理工具:phpstudy/Navicat

JDK版本:jdk1.8

Maven: apache-maven 3.8.1-bin

系统展示

系统的功能结构图如图4-1所示。

5.1 管理员服务端功能的实现

管理员的登陆界面包括管理员的账号、密码,其中就是已有的账号,还有需要注册的账号。只要管理员在账号上注册,注册信息就会被录入 MySQL数据库,有一个资料库,只要输入成功,就可以登陆,然后进入主页的管理。管理员登录界面如图5-1所示。

   图5-1 管理员登录界面图

管理员登录到高校社团管理小程序可以查看首页、个人中心、用户管理、社团类型管理、社团信息管理、申请入社管理、活动类型管理、社团活动管理、参加活动管理、创建社团管理、社团公告管理、系统管理等功能进行详细操作,如图5-2所示。

图5-2管理员功能界面图

管理员点击用户管理;在用户管理页面输入用户账号、用户姓名、性别、年龄、照片、手机号码等信息,进行查询或删除用户信息等操作;如图5-3所示。

图5-3用户管理界面图

管理员点击社团信息管理;在社团信息管理页面对社团账号、社团名称、社团图片、社团类型、社长、社团人数、成立时间等信息,进行查询或删除社团信息等操作;如图5-4所示。

图5-4社团信息管理界面图

管理员点击申请入社管理;在申请入社管理页面输入社团账号、社团名称、社团图片、用户账号、用户姓名、申请时间、审核回复、审核状态等信息,进行查询申请入社等操作;如图5-5所示。

图5-5申请入社管理界面图

管理员点击社团活动管理;在社团活动管理页面对社团账号、社团名称、活动名称、活动类型、活动图片、活动时间、活动地点等信息,进行查询或删除社团活动等操作;如图5-6所示。

图5-6社团活动管理界面图

管理员点击参加活动管理;在参加活动管理页面对社团账号、社团名称、活动名称、活动图片、用户账号、用户姓名、报名时间、审核回复、审核状态等信息,进行查询参加活动等操作;如图5-7所示。

图5-7参加活动管理界面图

管理员点击创建社团管理;在创建社团管理页面对社团名称、社团类型、社团图片、用户账号、用户姓名、申请日期、审核回复、审核状态、审核等信息,进行查询创建社团等操作;如图5-8所示。

图5-8创建社团管理界面图

5.2 社团信息微信端功能的实现

注册界面,第一次使用本小程序的使用者,首先是要进行注册,点击“注册”,然后就会进入到注册的页面里面,将社团信息录入注册表,确认信息正确后,页面才会跳转到登录界面,社团信息登录成功后可使用本小程序所提供的所有功能,如图5-9所示。

图5-9社团信息注册界面

登录界面,首先双击打开微信小程序端系统,连上网络之后会显示出本系统的登录界面,这是进入小程序的第初始页面“登录”,能成功进入到该登录界面则代表小程序的开启是成功的,接下来就可以操作本系统所带有的其他所有的功能,如图5-10所示。

图5-10社团信息登录界面

微信小程序首页是社团信息注册登录后进入的第一个界面,社团信息可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、社团信息、社团活动、我的”,也可以点击“我的”进入我的页面,在我的页面可以对申请入社、社团活动、参加活动、社团公告等进行详细操作,如图5-11所示。

图5-11微信小程序首页界面图

在我的功能界面,社团信息点击“我的”进入我的页面,在我的页面可以对申请入社、社团活动、参加活动、社团公告等进行详细操作,如图5-12所示。

图5-12我的功能界面图

5.3用户微信端功能的实现

注册界面,第一次使用本小程序的使用者,首先是要进行注册,点击“注册”,然后就会进入到注册的页面里面,将用户信息录入注册表,确认信息正确后,页面才会跳转到登录界面,用户登录成功后可使用本小程序所提供的所有功能,如图5-13所示。

图5-13用户注册界面

登录界面,首先双击打开微信小程序端系统,连上网络之后会显示出本系统的登录界面,这是进入小程序的第初始页面“登录”,能成功进入到该登录界面则代表小程序的开启是成功的,接下来就可以操作本系统所带有的其他所有的功能,如图5-14所示。

图5-14用户登录界面

微信小程序首页是用户注册登录后进入的第一个界面,用户可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、社团信息、社团活动、我的”,也可以点击“我的”进入我的页面,在我的页面可以对申请入社、参加活动、创建社团等进行详细操作,如图5-15所示。

图5-15微信小程序首页界面图

用户点击社团信息,在社团信息页面的输入栏填写社团名称,进行搜索,还可以查看社团账号、社团名称、社团图片、社团类型、社长、社团人数、成立时间、点击次数等详情,并且可以进行申请入社等操作。如图5-16所示。

图5-16社团信息界面图

在我的功能界面,用户点击“我的”进入我的页面,在我的页面可以对申请入社、参加活动、创建社团等进行详细操作,如图5-17所示。

图5-17我的功能界面图

 

部分核心代码

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UsersController {
	
	@Autowired
	private UsersService usersService;
	
	@Autowired
	private TokenService tokenService;
 
	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
		if(user==null || !user.getPassword().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		R r = R.ok();
		r.put("token", token);
		r.put("role",user.getRole());
		r.put("userId",user.getId());
		return r;
	}
	
	/**
	 * 注册
	 */
	@IgnoreAuth
	@PostMapping(value = "/register")
	public R register(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        usersService.insert(user);
        return R.ok();
    }
 
	/**
	 * 退出
	 */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
 
	/**
	 * 修改密码
	 */
	@GetMapping(value = "/updatePassword")
	public R updatePassword(String  oldPassword, String  newPassword, HttpServletRequest request) {
		UsersEntity users = usersService.selectById((Integer)request.getSession().getAttribute("userId"));
		if(newPassword == null){
			return R.error("新密码不能为空") ;
		}
		if(!oldPassword.equals(users.getPassword())){
			return R.error("原密码输入错误");
		}
		if(newPassword.equals(users.getPassword())){
			return R.error("新密码不能和原密码一致") ;
		}
		users.setPassword(newPassword);
		usersService.updateById(users);
		return R.ok();
	}
	
	/**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
    	user.setPassword("123456");
        usersService.update(user,null);
        return R.ok("密码已重置为:123456");
    }
	
	/**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,UsersEntity user){
        EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
    	PageUtils page = usersService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
        return R.ok().put("data", page);
    }
 
	/**
     * 列表
     */
    @RequestMapping("/list")
    public R list( UsersEntity user){
       	EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
      	ew.allEq(MPUtil.allEQMapPre( user, "user")); 
        return R.ok().put("data", usersService.selectListView(ew));
    }
 
    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UsersEntity user = usersService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Integer id = (Integer)request.getSession().getAttribute("userId");
        UsersEntity user = usersService.selectById(id);
        return R.ok().put("data", user);
    }
 
    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        usersService.insert(user);
        return R.ok();
    }
 
    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UsersEntity user){
//        ValidatorUtils.validateEntity(user);
        usersService.updateById(user);//全部更新
        return R.ok();
    }
 
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
		List<UsersEntity> user = usersService.selectList(null);
		if(user.size() > 1){
			usersService.deleteBatchIds(Arrays.asList(ids));
		}else{
			return R.error("管理员最少保留一个");
		}
        return R.ok();
    }
}

  • 22
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
校园社团管理系统是一个非常实用的应用,而基于Spring BootVue.js实现该系统是一个不错的选择。Spring Boot是一个流行的Java开发框架,可以快速构建Web应用程序。Vue.js是一个流行的JavaScript框架,用于开发交互式Web界面。 下面是一个简单的校园社团管理系统的实现步骤: 1. 设计数据库模型 根据需求分析,设计合适的数据库模型。可以使用MySQL、Oracle等关系型数据库,或者使用MongoDB等非关系型数据库。 2. 建立Spring Boot项目 使用Spring Initializr创建一个新的Spring Boot项目,添加必要的依赖项,如Spring Data JPA、Spring MVC和MySQL连接器等。在application.properties文件中配置数据库连接信息。 3. 创建Vue.js前端 使用Vue.js创建前端界面。可以使用Vue CLI来创建基本项目结构,使用Vue Router来实现页面路由,使用Axios来发送HTTP请求。 4. 实现后端API 根据需求设计后端API接口,并在Spring Boot实现。可以使用Spring Data JPA来访问数据库,使用Spring MVC来实现RESTful API。 5. 集成前后端 将Vue.js前端和Spring Boot后端集成在一起。可以使用Webpack来打包前端代码,并将其嵌入到Spring Boot项目中。在Spring Boot中配置CORS(跨域资源共享)以允许前端访问后端API。 6. 测试和部署 对系统进行测试,修复错误和缺陷。将系统部署到云服务器或本地服务器上,以便用户可以访问。 以上是一个简单的校园社团管理系统的实现步骤。当然,具体的实现还需要根据实际需求进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一季春秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值