使用springboot+vue2和mysql搭建数据库交互平台

### 使用Spring Boot + Vue2与MySQL构建数据库交互平台 #### 实验目的 1. **掌握Vue2+Element UI的基本使用及组件开发**：通过实践掌握Vue2的基础语法、特性以及Element UI这一流行的UI框架，提高前端开发效率。 2. **理解前后端分离架构的基本概念及其优势**：学习前后端分离的设计模式，了解它如何提高系统的可维护性、可扩展性和安全性。 3. **学习Spring Boot的基础配置和RESTful API的开发**：深入理解Spring Boot的核心配置，掌握基于HTTP协议的RESTful API设计原则与实践。 4. **熟悉MyBatis在Spring Boot中的集成和使用**：学会如何在Spring Boot项目中集成MyBatis框架来简化数据库操作。 #### 实验环境 - **前端**： - **Vue2**: 使用Vue CLI初始化和管理Vue项目。 - **Axios**: 用于前端与后端之间的HTTP请求通信。 - **后端**： - **Spring Boot**: 快速构建和配置后端服务。 - **MyBatis**: 简化数据库操作的持久层框架。 - **Lombok**: 减少Java类中的样板代码。 - **数据库**： - **MySQL**: 关系型数据库管理系统，用于存储应用数据。 #### 实验内容详解 ##### MySQL数据库设置 - **建表语句**：定义表结构，包括字段名、数据类型等。 - **表中数据**：填充初始数据以便于后续测试。 ##### 前端环境配置 1. **安装NodeJS**：确保安装NodeJS到不含中文的路径中，验证安装成功的方法是通过命令`node -v`查看版本号。 2. **配置npm全局安装路径**：使用管理员权限打开命令提示符，执行`npm config set prefix "安装目录"`，例如`npm config set prefix "E:\develop\NodeJS"`。 3. **切换npm的淘宝镜像**：在命令提示符中执行`npm config set registry https://registry.npm.taobao.org`。 4. **安装Vue-cli**：使用管理员权限运行命令提示符，执行`npm install -g @vue/cli`。 ##### 创建Vue项目 1. **创建Vue文件夹**：通过命令行进入该文件夹，执行`vue ui`打开Vue图形化界面。 2. **预设模板选择手动**：在图形界面中选择手动配置选项。 3. **启用路由功能**：在功能页面勾选路由功能。 4. **配置语言版本和语法检查规范**：选择所需的语言版本（如ES6）和语法检查工具（如ESLint）。 5. **创建项目**：完成上述配置后，点击创建项目。 ##### Vue开发 1. **整体布局编写**：在`views`目录下创建`UserView.vue`组件，参考Element UI文档进行布局设计。 2. **实现左侧导航栏**：利用Element UI提供的组件完成导航栏设计。 3. **实现表格与表单**：根据业务需求设计表格和表单，使用Element UI的Table组件和Form组件。 ##### 功能开发 1. **查询功能**： - 在`vue.config.js`中配置代理，解决跨域问题。 - 使用Vue的生命周期钩子`mounted`发起请求，获取数据并展示。 - 表单中添加查询按钮，绑定事件处理器`onSubmit`，通过axios发送POST请求。 2. **新增功能**： - 在表单中添加“新增”按钮，触发弹出框显示表单。 - 保存按钮绑定事件处理器`saveAdd`，将表单数据提交至后端。 3. **修改功能**： - 在表格中添加“编辑”按钮，点击时显示编辑弹出框。 - 弹出框内填写要修改的数据，保存时发起PUT请求更新后端数据。 4. **删除功能**（未在原文中提及，但作为完整功能应包含）： - 在表格中添加“删除”按钮，确认后通过DELETE请求删除对应数据。 通过上述步骤，可以构建一个完整的使用Spring Boot + Vue2与MySQL相结合的数据库交互平台。这不仅加深了对前后端分离架构的理解，还提升了使用现代Web开发技术栈的能力。