基于SpringBoot+Vue3的秦兵马俑博物馆预约系统微信小程序

QQ402205496

于 2024-09-07 21:59:58 发布

阅读量1.7k

点赞数 15

文章标签： spring boot 微信小程序后端

本文链接：https://blog.csdn.net/QQ402205496/article/details/142005241

版权

博主介绍

👇🏻 博主介绍：👇🏻 专注于Vue Java、python nodejs php小程序技术领域和毕业项目实战✌全网粉丝50W+,博客专家、CSDN特邀作者、CSDN新星计划导师、全栈领域优质创作者，csdn博客之星等平台优质作者,招代理,同行供货,量大从优

技术栈

前端：vue3
开发工具：IDEA 或者eclipse都支持
编程语言: java
框架：springboot
数据库: mysql 版本不限
数据库工具：Navicat/SQLyog都可以
详细技术：java+springboot+vue+MYSQL+MAVEN

开发核心技术

Springboot简介：
Springboot是一Spring级框架为基础的的全新轻量级框架。其前身Spring框架首发是轻量级框架，目的是减轻了开发人员多负担。后期大量升级导致变得笨重，违背了框架的初衷。
Spring Boot内置了Tomcat、Jetty和Undertow等服务器，这意味着你可以直接使用它们而不需要额外的安装和配置。Spring Boot的一个主要优点是它的自动配置功能。它可以根据你的项目中的依赖关系自动配置应用程序。这使得配置应用程序变得非常容易，因为你不需要手动配置每个依赖项。
Spring Boot也提供了大量的开箱即用的功能和插件，如Spring Data、Spring Security和Spring Cloud等。这些功能使得开发者可以更快速地构建应用程序，并且可以更容易地扩展和集成其他技术。它是一个非常流行的框架，它的自动配置、内置服务器和插件等功能使得开发者可以更快、更轻松地构建高质量的应用程序。
前端框架Vue
Vue.js的核心是虚拟DOM技术。虚拟DOM是一个内存中的数据结构，它可以帮助Vue.js实现高效的DOM操作，它采用了响应式数据绑定、虚拟DOM、组件化等现代化技术，为开发者提供了一种灵活、高效、易于维护的开发模式，当数据发生变化时，UI也会自动更新，这样就使得开发者可以更加专注于数据处理，而不是手动更新UI，这就是Vue体现出来的简洁，灵活，高效。
Mysql简介：
数据库是学习开发过程中必不可少的一部分，有很多的企业也正在使用Mysql,平时的开发学习也离不开它，能节约很多成本，并且性能要求不高，是中小型企业的首选。
IDEA介绍：
IntelliJ IDEA是java编程语言的集成环境，目前是业界公认的最好的开发工具，他拥有使用的自动导包、代码提示、一键重置等功能，并拥有全世界的程序员贡献的各种强大的插件，辅佐人们更好的开发，内部继承Maven管理、git工具等让开发变得更便捷。
Mybatis简介：
Mybatis是基于Mysql的一个优秀的持久层框架，其几乎将所有连接Java语言需要配置的地方包括JDBC都封装起来，不在向JDBC那样繁琐，让开发人员专注于编写SQL语句，其内部页添加了许多自己的规则，以便让Spring框架与其无缝结合。

具体实现截图

在这里插入图片描述

前端

小程序前端使用微信开发者工具设计wxml，对应小程序的基本组件和页面，通过微信官方的控件属性或者自设属性填充wxss，然后根据业务流程确定各页面逻辑js。数据库使用mysql
前端：使用微信web开发者工具微信，web 开发者工具是微信官方平台发布的用于开发微信小程序和小游戏的平台，由微信官方平台供应小程序的前端开发框架和后台服务器。微信开发者工具集中了开发、调试、预览和上传等功能。
该工具主要是根据系统层提供的框架来进行开发，由于小程序并非在浏览器中运行的，因此在 web 中禁用了 Document、Window 之类的方法。微信开发者工具与 HTML5 开发工具有相似之处，但在预览模式方面存在一定差异，该工具属于微信本身，故能够有效的实现同步本地文件、开发小程序以及调试等一系列流程。除此之外，该工具开发了一些标签语言和样式语言。在微信小程序用的开发过程中，进一步的提供了原生АРР的组件，使得开发者的工作更为便捷

后端

后端：使用微信小程序原生技术栈 JavaScript 简称 JS，是计算机编程语言，常用于控制整个页面的逻辑，是基于 web 页面开发并且具有安全性的脚本语言，该语言的类型是动态且灵活的，仅仅需要浏览器功能支持即可运转，故跨平台性和适用性都很高。JSON：全称 JavaScript Object Notation，可用于存储数据，配置系统全局或单页面。WXML：全称 WeiXin Markup Language，是微信小程序框架设计语言，用于展示 UI（User Interface 用户界面）模板；WXSS：全称基于JavaScript 的垃圾分类系统的设计与实现 4 WeiXin Style Sheets，用于规定 UI 样式，具有CSS（Cascading Style Sheets 层叠样式表）的大部分特性，在其基础上扩展了尺寸单位和样式导入功能。WXS：全称 WeiXin Script，封装后的 JS 一般内嵌于 WXML 页面，方便构建页面。

java类核心代码部分展示

@RestController
@RequestMapping("/yuangong")
public class YuangongController {
    @Autowired
    private YuangongService yuangongService;
	@Autowired
	private TokenService tokenService;
	
	/**
	 * 登录
	 */
	@IgnoreAuth
	@RequestMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", username));
		if(user==null || !user.getMima().equals(password)) {
			return R.error("账号或密码不正确");
		}
		
		String token = tokenService.generateToken(user.getId(), username,"yuangong",  "员工" );
		return R.ok().put("token", token);
	}
	
	/**
     * 注册
     */
	@IgnoreAuth
    @RequestMapping("/register")
    public R register(@RequestBody YuangongEntity yuangong){
    	//ValidatorUtils.validateEntity(yuangong);
    	YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", yuangong.getYuangonggonghao()));
		if(user!=null) {
			return R.error("注册用户已存在");
		}
		Long uId = new Date().getTime();
		yuangong.setId(uId);
        yuangongService.insert(yuangong);
        return R.ok();
    }

	/**
	 * 退出
	 */
	@RequestMapping("/logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
	
	/**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Long id = (Long)request.getSession().getAttribute("userId");
        YuangongEntity user = yuangongService.selectById(id);
        return R.ok().put("data", user);
    }
        /**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
        user.setMima("123456");
        yuangongService.updateById(user);
        return R.ok("密码已重置为：123456");
    }

可行性论证

微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号。
程序调试主要有三大功能区：模拟器、调试工具和小程序操作区

技术可行性

本系统客户端采用WXML、WXSS、JS以及微信提供的丰富的客户端API组件，来实现客户端界面和功能。服务端依靠微信小程序云开发技术，根据微信提供的丰富的服务端API接口完成前后端数据的交互。实现客户端和服务端数据的请求和数据处理等关键部分。前端使用微信开发者工具设计wxml，对应小程序的基本组件和页面，通过微信官方的控件属性或者自设属性填充wxss，然后根据业务流程确定各页面逻辑js。数据库使用mysql，开发者数据库管理工具使用Navicat for MySQL同时也给我提供了一次实际模拟锻炼的机会，使我在设计一套完整的软件系统的步骤、方法、及思路上有了一个全新的认识和体会，能够使我更深入的了解软件设计和开发，整合自己以前所学的知识。。
。

详细视频演示

请联系我获取更详细的演示视频

系统测试

系统测试主要是为了避免用户在使用时发生问题，增强用户体验感，为了不影响用户的使用，我们需要从多角度、多思路去考虑系统可能遇到的问题，通过不同的模拟场景来发现缺陷并解决问题。在测试的过程中也可以了解到该系统的质量情况，系统功能是否健全，系统逻辑是否顺畅。一个合格的系统测试过程完成后将大大提升系统质量和使用感。测试的目标是验证系统是否符合需求规格说明书的定义，并找出与需求规格说明书不符合或与之冲突的内容。测试过程中一定站在用户的角度考虑问题，避免一些不切实际的场景，浪费测试时间，从而可能会引起问题导致预期结果与实际结果不符。

实现思路

图书馆，导师的咨询以及论文网站文献的查阅，网络的查找等。通过相关技术论坛咨询。其中用到的技术为业界比较认可的互联网技术，可以提供更多的技术支持。
pages 主要页面，其中pages文件夹中 index文件中可布局底部的tab页面，通过v-if判断显示不同的tab页
colorui 使用了color-ui样式，个人认为样式非常好看，非常感谢！
static目录：存放静态文件
App.vue：页面入口文件
main.js: 项目入口文件
manifest.json: 存放App信息
pages.json: 页面信息
uni.scss: 全局样式
（1）通过查阅相关的书籍搜集材料，进行需求调查。
（2）写需求分析文档，确定系统的主要模块。
（3）画出ER图，流程图等图示以用来明确模块之间的关系
（4）根据需求分析，建立数据库文档，设计表和字段。
（5）进行系统的界面设计。
（6）通过java语言和MySQL数据库实现本系统。
系统实现阶段包括前台界面的UI设计和后台功能模块代码设计。要求系统界面简洁直观、系统操作流畅，后台代码采用三层架构（界面表示层、业务逻辑层、数据访问层）编写。
系统测试阶段包括界面测试和功能测试。使用系统，验证系统界面是否简洁，页面不同功能的衔接是否灵活，正确。根据实际流程，在设计的系统上进行模拟测试，查看功能是都基本满足工作的需要。从而进一步修改完善系统，提高系统的实用性和稳定性