当前位置：首页 > news >正文

前后端分离Vue美容店会员信息管理系统o7grs

news 来源：原创 2024/9/20 4:28:00

技术栈介绍

本课题的研究方法和研究步骤基本合理，难度适中，本选题是学生所学专业知识的延续，符合学生专业发展方向，对于提高学生的基本知识和技能以及钻研能力有益。该学生能够在预定时间内完成该课题的设计。研究的选题立意明确，结构合理，研究内容充实，研究方法准确有效。
前端开发框架:vue.js
数据库 mysql 版本不限
后端语言框架支持：
1 java(SSM/springboot)-idea/eclipse
2.Nodejs+Vue.js -vscode
3.python(flask/django)–pycharm/vscode
4.php(thinkphp/laravel)-hbuilderx
数据库工具：Navicat/SQLyog等都可以
而且VScode包含很多插件并且免费，下载更加快捷方便，可以给我们提供很多便捷条件。运行的便捷给我提供很大帮助。
PHP是英文超文本预处理语言Hypertext Preprocessor的缩写。PHP 是一种 HTML 内嵌式的语言，是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，被广泛地运用
Flask 是一个轻量级的 Web 框架，使用 Python 语言编写，较其他同类型框架更为灵活、轻便且容易上手，小型团队在短时间内就可以完成功能丰富的中小型网站或 Web 服务的实现。
Django用Python编写，属于开源Web应用程序框架。采用（模型M、视图V和模板t）的框架模式。该框架以比利时吉普赛爵士吉他手詹戈·莱因哈特命名。该架构的主要组件如下：
SpringBoot整合了业界上的开源框架

具体实现截图

在这里插入图片描述

系统设计

采用MVC框架，MVC英文全称是Model View Controller,翻译过来是是模型——视图——控制器模型的缩写，MVC是一种软件设计方法，其中心思想是把存储数据、业务逻辑、存储数据和用户显示三者分离开来，单独控制每一个模块。MVC的作用是把一系列相关的商业逻辑都部署和封装到同一个部件中，这样在显示层需要发生修改的时候，不需要重新编写业务逻辑。
结合完成了以上的基本目标之后，能够帮助管理人员对系统的方便管理，从而能够为管理员节省时间，给了用户极大的方便。系统中的数据要存储于数据库当中，能够通过SQL代码把数据库中的数据取出，映射到实体类中，通过控制器类从而展示在页面当中，能够使得系统的效率变得很快。

本系统的研究主要运用了node.js、数据库（MySQL）技术和node.js的第三方生态中的express以及vue框架构建了本项目的DAO层。用于给服务层提供数据库接口。服务层采用node第三方插件来向DAO层发送获取数据库数据请求并处理业务逻辑关系。路由层则负责挂载静态资源，搭建静态伺服以及简单处理客户端发送的请求。这三层构建了本次项目的服务端。前端则基于模块化开发思想运用（HTML、CSS、JS语言），依赖Less、jQuery的框架构筑静态页面，通过ajax数据交互方式并经过权限分离处理给用户提供用户所需的数据并局部渲染。
MySQL是一种开放源代码的关系型数据库管理系统，MySQL数据库系统使用最常用的数据库管理语言——结构化查询语言(SQL)进行数据库管理。MySQL因为其可靠性和适应性而备受关注。

系统实现阶段包括前台界面的UI设计和后台功能模块代码设计。要求系统界面简洁直观、系统操作流畅，后台代码采用三层架构（界面表示层、业务逻辑层、数据访问层）编写。
系统测试阶段包括界面测试和功能测试。使用系统，验证系统界面是否简洁，页面不同功能的衔接是否灵活，正确。根据实际流程，在设计的系统上进行模拟测试，查看功能是都基本满足工作的需要。从而进一步修改完善系统，提高系统的实用性和稳定性。

研究方法：

（1）调查法：通过互联网有目的、有计划搜集有关该系统的相关信息。
（2）文献研究法：查阅文献和书籍资料，能了解有关问题的历史和现状，帮助确定研究课题，获得比较全面的资料，并学习开发此系统所需要的技术。
（3）比较法：通过对现有不同系统管理进行分析，对比其优劣型，适配性，扩展性，用于之后软件层次的模型设计，作为业务逻辑基础。

设计步骤

设计步骤如下：
1、明确系统的业务流程和数据流程，并用UML画出相应的活动图、顺序图。
2、设计数据字典，明确编码规则。
3、数据库进行设计，建立约束和联系。
4、创建程序框架，代码分成三层结构：接口层、业务层、表示层，设计窗口和主窗口，主窗口菜单项依照系统模块图设计。
5、设计数据访问的接口，供各模块调用。完成登录功能和权限管理功能。
6、在已完成的框架下，先后进行不同模块中不同角色功能模块的设计。
7、最后进行各部分之间的协调、连接、实现，对于部分功能细节上进行完善与优化。

为保证所开发的系统的合理性，需要严格按照系统设计过程涉及到的各个环节进实施。具体而言，软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程，是一项包括需求获取、需求分析、设计、实现和测试的系统工程。因此本课题将结合软件工程的设计思路和方法，分别从设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序等各项内容分别去展开。

设计流程

前端开发：使用HTML、CSS、JavaScript等前端开发语言和微信小程序框架，实现界面设计和用户交互功能。
后端开发：选择合适的后端开发语言和框架，如Node.js、Django、Spring Boot等，处理业务逻辑和数据交互。
数据库设计：设计数据库表结构，选择合适的数据库管理系统，如MySQL、MongoDB等，实现数据库操作。
系统部署与测试：将前端代码部署到微信小程序平台，部署后端服务到云服务器或其他托管平台，进行系统整体测试和优化。

核心代码部分展示

/*** 登录相关*/
@RequestMapping("users")
@RestController
public class UsersController{@Autowiredprivate UsersService userService;@Autowiredprivate TokenService tokenService;/*** 登录*/@IgnoreAuth@PostMapping(value = "/login")public R login(String username, String password, String captcha, HttpServletRequest request) {UsersEntity user = userService.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());return R.ok().put("token", token);}/*** 注册*/@IgnoreAuth@PostMapping(value = "/register")public R register(@RequestBody UsersEntity user){
//    	ValidatorUtils.validateEntity(user);if(userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {return R.error("用户已存在");}userService.insert(user);return R.ok();}/*** 退出*/@GetMapping(value = "logout")public R logout(HttpServletRequest request) {request.getSession().invalidate();return R.ok("退出成功");}/*** 密码重置*/@IgnoreAuth@RequestMapping(value = "/resetPass")public R resetPass(String username, HttpServletRequest request){UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));if(user==null) {return R.error("账号不存在");}user.setPassword("123456");userService.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 = userService.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", userService.selectListView(ew));}/*** 信息*/@RequestMapping("/info/{id}")public R info(@PathVariable("id") String id){UsersEntity user = userService.selectById(id);return R.ok().put("data", user);}/*** 获取用户的session用户信息*/@RequestMapping("/session")public R getCurrUser(HttpServletRequest request){Long id = (Long)request.getSession().getAttribute("userId");UsersEntity user = userService.selectById(id);return R.ok().put("data", user);}