基于SpringBoot+Vue校园导航微信小程序的设计与实现

这篇具有很好参考价值的文章主要介绍了基于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所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

5.1小程序端功能的实现

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

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-1 学生注册界面

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

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-2学生登录界面

系统首页是学生注册登录后进入的第一个界面,学生可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、建筑速看、地图、校园公告、我的”,也可以点击“我的”进入我的页面,在我的页面可以对校园简介、我的收藏管理、留言咨询等进行详细操作,如图5-3所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-3小程序首页界面图

学生点击建筑速看,在建筑速看页面的搜索栏输入建筑名称,进行查询,还可以查看建筑名称、照片、楼层数、建筑面积、地点、建立时间、使用用途等详情,按照提示即可收藏等。如图5-4所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-4建筑速看界面图

学生点击地图,然后页面跳到地址搜索等详情,按照提示即可导航等操作。如图5-5所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-5地图界面图

在我的功能界面,学生点击“我的”进入我的页面,在我的页面可以对校园简介、我的收藏管理、留言咨询等进行详细操作,如图5-6所示。

                  

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-6我的功能界面图

5.2 服务端功能的实现

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

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

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

管理员登录到校园导航微信小程序可以查看系统首页、个人中心、学生管理、校园简介管理、建筑速看管理、系统管理等功能进行详细操作,如图5-8所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

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

管理员点击学生管理;在学生管理页面输入学号、学生姓名、性别、头像、学生手机、年级、密保问题、密保答案等信息,进行查询,新增或删除学生信息等操作;如图5-9所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-9学生管理界面图

管理员点击校园简介管理;在校园简介管理页面输入学校名称、封面、联系电话、联系人、学校类型、学校地址等信息,进行查询,新增或删除校园简介等操作;如图5-10所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-10校园简介管理界面图

管理员点击建筑速看管理;在建筑速看管理页面输入建筑名称、照片、楼层数、建筑面积、地点、建立时间、使用用途等信息,进行查询或删除建筑速看等操作;如图5-11所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-11建筑速看管理界面图

管理员点击系统管理;在系统管理页面输入留言咨询、智能助手、关于我们、轮播图管理、系统简介、校园公告等信息,进行查询或删除系统信息等操作;如图5-12所示。

校园导航小程序,毕业设计,课程设计,spring boot,vue.js,后端,spring,java,微信小程序,校园导航微信小程序

图5-12系统管理界面图文章来源地址https://www.toymoban.com/news/detail-838721.html

部分核心代码

/**
 * 登录相关
 */
@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();
    }
}

到了这里,关于基于SpringBoot+Vue校园导航微信小程序的设计与实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于SpringBoot+Vue+uniapp微信小程序的校园失物招领系统的详细设计和实现

    🌞 博主介绍 :✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战,以及程序定制化开发、全栈讲解、就业辅导✌🌞 👇🏻 精彩专栏

    2024年03月26日
    浏览(39)
  • java毕业设计基于微信小程序的校园导航系统

    本系统 (程序+源码) 带文档lw万字以上    文末可领取本课题的JAVA源码参考 选题背景: 随着移动互联网技术的飞速发展,智能手机已成为人们日常生活中不可或缺的一部分。微信小程序作为一种新型的应用形式,因其无需下载安装、使用方便的特点,越来越多地被应用于

    2024年03月24日
    浏览(40)
  • 基于微信小程序+Springboot校园二手商城系统设计和实现

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、目前 专注于大学生项目实战开发,讲解,毕业答疑辅导 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到

    2024年02月11日
    浏览(28)
  • 基于java+springboot+vue的校园保修系统微信小程序

    互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对成果信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费力等问题,采用基于web的校园

    2024年02月03日
    浏览(30)
  • 基于微信小程序的校园导航微信小程序

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

    2024年02月20日
    浏览(33)
  • (附源码)springboot基于微信小程序的校园外卖系统 毕业设计091024

    Springboot基于微信小程序的校园外卖系统 摘要 随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化。为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订餐和网上订餐业日益发展壮大。这也促使了以大学生为主的校园外

    2024年02月08日
    浏览(44)
  • 基于SpringBoot+uniapp微信小程序校园点餐平台详细设计和实现

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟 2022-2024年

    2024年02月05日
    浏览(38)
  • Springboot基于微信小程序的校园外卖系统设计与实现-附源码091024

    随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化。为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订餐和网上订餐业日益发展壮大。这也促使了以大学生为主的校园外卖业的发展。校园外卖主要是以大学生为主的

    2024年02月19日
    浏览(37)
  • springboot基于微信小程序的校园外卖系统 毕业设计-附源码091024

    Springboot基于微信小程序的校园外卖系统 摘要 随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化。为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订餐和网上订餐业日益发展壮大。这也促使了以大学生为主的校园外

    2024年02月09日
    浏览(32)
  • 基于SpringBoot和微信小程序的校园失物招领系统的设计与实现

    🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 基于SpringBoot和微信小程序的校园失物招领系统的设计与实现,java项目。 eclipse和idea都能打开运行。 推荐环境配置:eclip

    2024年01月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包