SpringBoot部署一个管理系统（从0开始全步骤全注解）

1.前置准备

1.1 插件下载网站

Maven Central Repository（https://mvnrepository.com/）：这是 Maven 的官方中央存储库，你可以在这里搜索和下载 Maven 依赖。

Gradle Plugin Portal（https://plugins.gradle.org/）：这是 Gradle 的官方插件门户网站，它也提供了一些 Maven 依赖的搜索和下载功能。

JCenter（https://bintray.com/bintray/jcenter）：这是一个 Maven 依赖的中央存储库，它包含了许多常用的 Java 库和框架。

Spring Initializr（https://start.spring.io/）：这是一个用于快速生成 Spring Boot 项目的网站，它也提供了一些常用的 Maven 依赖项供你选择

MyBatis-Plus 的官方网站是 https://baomidou.com/，这个网站提供了 MyBatis-Plus 的文档、示例、下载等信息，也提供了社区支持和开发者交流的平台。

2. 项目创建

项目初始化

pom.xml:放一些依赖

• main
• • java：要运行的函数
• • rescources：静态资源和配置环境文件
• test

在src.java目录下创建一个测试类 org.example.Demo并运行

3.添加maven依赖

https://mvnrepository.com/

添加好依赖之后

3.1 Gson使用

使用时先创建一个Gson对象，然后将java对象直接传进去

json转java对象

假设我们有以下 JSON 数据：{"name": "John","age": 30,"email": "john@example.com"
}
我们可以定义一个 Java 类来表示这个 JSON 数据：public class Person {private String name;private int age;private String email;// 构造函数、getter 和 setter 方法
}
然后，我们可以使用 Gson 将 JSON 数据转换为这个 Java 对象：Gson gson = new Gson();
String json = "{\\"name\\":\\"John\\", \\"age\\":30, \\"email\\":\\"john@example.com\\"}";
Person person = gson.fromJson(json, Person.class);

3.2 lombok使用

编写一个学生类，创建一个学生类直接输出为对象地址

添加lombok插件之后，直接在学生类里加入注解@Data，就会自动构造有参和午餐构造方法和toString方法

4.MyBatics

持久层框架，将sql语句与java对象之间的映射关系定义在XML文件或注解之中，减少开发人员编写JDBC的工作量

组成部分

• Mapper：定义sql语句和java之间的映射关系，可以通过xml文件或者注解进行定义
• Configuration：Configuration 是 MyBatis 的配置类，它包含了 MyBatis 的所有配置信息，例如数据库连接信息、Mapper 映射信息等。
• Executor：Executor 是 MyBatis 的执行器，它负责执行 SQL 语句并返回结果，MyBatis 中有三种类型的执行器：SimpleExecutor、ReuseExecutor 和 BatchExecutor。
• SqlSessionFactory：SqlSessionFactory 是 MyBatis 的核心接口之一，它用于创建 SqlSession 对象，SqlSession 是 MyBatis 与数据库交互的核心类。
• SqlSession：SqlSession 是 MyBatis 与数据库交互的核心类，它封装了对数据库的操作，包括增删改查等操作。SqlSession 与数据库的每一次交互都需要打开一个新的 SqlSession 实例，操作完成之后需要关闭 SqlSession 实例。

使用MyBatics进行数据库操作的基本流程

1. 配置MyBatics：包括配置数据源、配置SQL映射文件或注解等；
2. 创建 SqlSessionFactory：使用 MyBatis 提供的 SqlSessionFactoryBuilder 类创建 SqlSessionFactory 实例。
3. 创建 SqlSession：使用 SqlSessionFactory 的 openSession() 方法创建 SqlSession 实例。
4. 执行数据库操作：使用 SqlSession 实例执行增删改查等数据库操作
5. 提交事务：如果需要进行事务控制，需要在操作完成后使用 SqlSession 的 commit() 方法提交事务。
6. 关闭 SqlSession：操作完成之后，需要使用 SqlSession 的 close() 方法关闭 SqlSession 实例。

4.1 初始化工程

mybatics要依赖springboot 父工程，底层还是jdbc
MyBatis 可以独立使用，也可以与 SpringBoot 集成使用。底层实现是通过 JDBC，但是 MyBatis 提供了很多高级特性，可以帮助开发人员更加方便地进行数据库操作。

JDBC（Java Database Connectivity）是 Java 中用来访问关系型数据库的标准 API，它为 Java
程序提供了一种统一的访问数据库的方式。

JDBC API 提供了一组类和接口，可以让开发人员通过 Java 代码来连接、查询、更新数据库。通过 JDBC，开发人员可以使用 SQL
语句来对数据库进行操作，包括查询数据、更新数据、插入数据、删除数据等。

JDBC API 的核心是 java.sql 包中的一组接口，包括
Connection、Statement、PreparedStatement、ResultSet
等，这些接口提供了与数据库交互的基本方法。此外，JDBC 还提供了一些辅助类和接口，如
DriverManager、DataSource、ResultSetMetaData 等。

添加相关的依赖–父工程

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.7</version><relativePath/></parent>

spring-boot-starter-parent提供的注解：

• @SpringBootApplication注解组合和多个其他注解

• 包括@Configuration、@EnableAutoConfiguration和@ComponentScan
  @Configuration注解表明该类是一个配置类，可以被Spring容器所管理。

• @EnableAutoConfiguration注解启用自动配置机制，该机制可以根据Spring Boot的依赖关系自动配置应用程序。

• @ComponentScan注解扫描指定的包和类，并将它们注册为Spring Bean。

springboot系列依赖
引入 spring-boot-starter、spring-boot-starter-test、spring-boot-starter-web 依赖

spring-boot-starter 实际上是一组 Maven 依赖的集合，这些依赖被组织成一个名为
spring-boot-starter-* 的模块，例如：

spring-boot-starter-web：用于构建 Web 应用程序，包含了 Spring MVC、Tomcat、Jackson
等组件； spring-boot-starter-data-jpa：用于构建基于 JPA 的数据访问层，包含了
Hibernate、Spring Data JPA 等组件；
spring-boot-starter-test：用于构建各种类型的测试，包含了 JUnit、Mockito、Hamcrest 等测试工具；
spring-boot-starter-actuator：用于构建监控和管理应用程序的组件，包含了健康检查、性能指标、配置信息等组件

mybatics系列依赖

MyBatis 是一个流行的开源持久化框架，可以帮助开发人员将 SQL 语句和 Java 对象进行映射，简化数据访问层的开发。

4.2 创建一个springboot的启动类

在java.org.example.Application

package org.example;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//spring boot的启动类@SpringBootApplication    //吧当前类标志成一个启动类
//@MapperScan("org.example.mapper")     //扫描org.example.mapper包下的所有Mapper接口
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class,args);    //运行编译好的.class文件}
}

配置数据库资源


访问8080端口查看

4.3 配置路由

创建Controller类，用于存放路由规则
@RestController 表示他是用来存放路由规则的

package org.example;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController  //表示这事一个存放路由规则的类
public class Controller {@GetMapping("/test")   ///test表示路由名称public String test(){return "Test";}
}

配置完路由之后，重启springboot
访问8080端口的test路由显示

也可以使用Gson返回json数据

4.4 查看本地数据库

本地没有就用的 phpstudy里的

启动之后找到对应版本下bin目录
cmd直接进入

输入用户名和密码

//进入数据库
mysql -u root -p//查看当前数据库的数据表
show databases;//进入某个数据库
use demo;//查看demo数据库中的学生表；
select * from student;//查看当前表的结构
desc student;

修改application.yam使之对应

4.5 在java中创建Student实体类

创建在example.pojo.Student

当前表的结构

创建的Stdent类要和它对应

4.6 创建映射类（Mapper.StudentMapper）

是一个接口

package org.example.Mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.example.pojo.Student;
//Student类的映射接口//集成BaseMapper类并将它的泛型用Student类作为传入
public interface StudentMapper extends BaseMapper<Student> {
}

4.7 数据库路由映射

从数据库查找数据让他返回浏览器

package org.example;import com.google.gson.Gson;import org.example.Mapper.StudentMapper;import org.example.pojo.Student;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController  //表示这事一个存放路由规则的类
public class Controller {@Autowired //自动接线类 Mybatisc会自动根据这个去找到MapperStudentMapper studentMapper;private Gson gson = new Gson();@GetMapping("/test")   ///test表示路由名称public String test(){List<Student> students = studentMapper.selectList(null);return gson.toJson(students);}
}

4.8 在application启动类上添加注解并运行

@MapperScan（接口） 扫描接口

package org.example;import org.example.Mapper.StudentMapper;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//spring boot的启动类@SpringBootApplication    //吧当前类标志成一个启动类
@MapperScan("org.example.Mapper")  //启动类从这个接口去扫描public class Application {public static void main(String[] args) {SpringApplication.run(Application.class,args);    //运行编译好的.class文件}
}

4.9 补充：数据库的增删查看如何在mybatics上实现

@GetMapping("/delete")  //删除数据库中的数据public void deleteStudent(){//将jason学生数据删除 先将Json数据转为Student对象String delStu = "{\\"id\\":13,\\"number\\":\\"113\\",\\"name\\":\\"小黄\\",\\"age\\":14,\\"chi\\":78,\\"math\\":99,\\"eng\\":93}";Student student1 = gson.fromJson(delStu, Student.class);//通过基础的BaseMapper有直接删除的方法studentMapper.deleteById(student1);}

这样小黄就没了

 @GetMapping("/insert")  //增加新数据public void insertStudent(){String inStu = "{\\"id\\":13,\\"number\\":\\"113\\",\\"name\\":\\"土豆子\\",\\"age\\":1,\\"chi\\":78,\\"math\\":99,\\"eng\\":93}";Student student1 = gson.fromJson(delStu, Student.class);//通过基础的BaseMapper有直接删除的方法studentMapper.insert(student1);}

5. node.js

Node.js是一种基于Chrome
V8引擎构建的JavaScript运行时环境，可以使JavaScript在服务器端运行。它使用事件驱动、非阻塞I/O模型和单线程的架构，适用于高并发、低延迟的应用程序。

Node.js提供了一组内置的模块，包括文件系统、网络、HTTP、加密、流等模块，同时也支持使用第三方模块。它还提供了一个包管理工具npm，可以方便地安装、管理、发布JavaScript模块。

使用npm可以方便地安装和管理JavaScript模块，以及发布自己的JavaScript模块。npm提供了一个公共的注册表，其中包含了大量的开源JavaScript模块，可以快速地使用它们构建应用程序。

npm的常用命令包括：

其他命令

6.Vue.js

Vue.js是一款轻量级、渐进式JavaScript框架，用于构建用户界面。它由Evan
You在2014年首次发布，并在业界得到了广泛的应用和认可。Vue.js的官方网站是 https://vuejs.org/。

Vue.js具有以下特点：

渐进式框架：Vue.js是一款渐进式框架，可以逐步应用到项目中，可以方便地集成到已有的项目中。

响应式数据绑定：Vue.js采用双向数据绑定机制，可以实现数据的自动更新。

组件化开发：Vue.js支持组件化开发，可以将页面拆分成多个组件进行开发和管理。

轻量级：Vue.js的体积非常小，可以快速加载和渲染页面。

易学易用：Vue.js的语法简单、易懂，上手难度较低。

Vue.js可以用于构建各种类型的应用程序，包括单页面应用程序、多页面应用程序、移动应用程序等。常见的Vue.js项目包括Vue
CLI、Nuxt.js、Element UI等。

Vue.js用于构建前端应用程序，而Node.js用于构建服务器端应用程序。

vue.cli 的下载

下载完成

创建一个vue项目



使用vscode打开

在vscode里新建一个终端


项目构建完成

6.1 vue的项目结构说明

Vue.js 的开发模式就是通过定义多个单功能组件，将它们组合起来构建复杂的用户界面。

在 Vue.js 中，组件是可复用的代码块，它们封装了一些特定的功能并提供了与其他组件交互的接口。组件可以包含 HTML 模板、CSS
样式和 JavaScript 代码，它们相互独立，可以在不同的应用程序中复用。通过组合不同的组件，我们可以构建出复杂的用户界面。

在 Vue.js 中，一个应用程序通常由一个或多个根组件组成，每个根组件又由多个子组件组成。这些组件可以通过 props
和事件来进行通信，使得它们能够协同工作，共同完成应用程序的功能。

在具体开发中，我们可以先定义好每个组件的功能和样式，然后在根组件中将它们组合起来，形成一个完整的应用程序。组件之间的嵌套和通信可以通过
Vue.js 提供的指令、事件和数据绑定等特性来实现，这使得开发者可以更加方便地构建复杂的用户界面。

6.2 创建一个学生管理系统的vue组件

快捷键 <v enter

在App.vue里配置好这个新组件

配置好运行

6.3 vue组件名称数据方法定义

export default{name:'StudentSystem',data(){return{name:"学生管理系统",number:"123"}},methods:{test(){alert("123")}}
}

定义好了直接在vue标签里使用

<template><div><h1>name</h1><button @click = "test">弹窗</button><input v-model="number"/><div v-show="true">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis aperiam dicta cupiditate tempora ipsa saepe, corporis non explicabo commodi in at perferendis a inventore quidem asperiores porro fuga voluptates praesentium?</div></div>
</template>

6.4 Element UI

是一个基于 Vue.js 的 UI 组件库，提供了丰富的 UI 组件和交互效果，可以帮助开发者快速构建美观、易用的用户界面。

https://element.eleme.cn/#/zh-CN/component/button
element ui npm安装

//element-ui 安装
npm i element -ui -s//element-ui查看版本npm list element-ui

在main.js 引入element ui 和它的css样式

引入elementui按钮

<template><div><h1>name</h1><el-button type ="primary" @click = "test">默认按钮</el-button><button @click = "test">弹窗</button><input v-model="number"/><div v-show="true">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis aperiam dicta cupiditate tempora ipsa saepe, corporis non explicabo commodi in at perferendis a inventore quidem asperiores porro fuga voluptates praesentium?</div></div>
</template>

https://element.eleme.cn/#/zh-CN/component/installation

6.5 bootstrap

Bootstrap 是一个流行的前端开发框架，它提供了一系列的 HTML、CSS 和 JavaScript
组件，可以帮助开发人员快速构建响应式、现代化的 Web 应用程序和网站。使用 Bootstrap
可以大大简化前端开发的工作，同时也可以提高开发效率和代码的可维护性。

Bootstrap 使用的是基于网格系统的响应式设计，可以支持在不同屏幕尺寸下的自适应布局。它还提供了一些常用的 UI
组件，如按钮、表单、导航栏、标签页、弹出框等，可以方便地集成到 Web 应用程序中。

Bootstrap 除了提供现成的 UI 组件外，还提供了一些 JavaScript
插件，如轮播、模态框、滚动监听等，可以方便地在网站中使用。

网站：https://www.bootcss.com/

https://getbootstrap.com/

//下载
npm install bootstrap@5.3.0-alpha3//查看版本
PS C:\\Users\\Administrator\\vuedemo> npm list bootstrap
vuedemo@0.1.0 C:\\Users\\Administrator\\vuedemo
└── bootstrap@5.3.0-alpha3

在main.js中引入bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-intro.html

6.6 axios

Axios 是一个流行的基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用，用于发送 HTTP
请求并处理响应。Axios 支持各种请求类型，如 GET、POST、PUT、DELETE
等，并支持请求和响应的拦截器、并发请求等功能，非常方便和灵活。

https://blog.csdn.net/qq_39765048/article/details/117688019?spm=1001.2014.3001.5506

下载

PS C:\\Users\\Administrator\\vuedemo> npm i axiosadded 6 packages in 3s
PS C:\\Users\\Administrator\\vuedemo> npm list axios
vuedemo@0.1.0 C:\\Users\\Administrator\\vuedemo
└── axios@1.3.5

6.7 cors解决跨域问题

CORS（跨域资源共享）是一种解决跨域问题的方案，其原理是在服务器端设置一些响应头信息，以控制浏览器是否允许跨域访问资源。

具体来说，当浏览器发起跨域请求时，请求头中会包含一个 Origin 字段，用于指示请求的源地址。服务器在接收到该跨域请求后，可以根据
Origin 字段值来判断是否允许该请求，如果允许，则在响应头中添加一些额外的字段信息，例如
Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers
等，用于告知浏览器允许跨域访问的资源、方法和头信息等。

浏览器接收到响应后，会根据响应头中的信息来判断是否允许跨域访问资源。如果响应头中包含了
Access-Control-Allow-Origin 字段，并且其值为请求的源地址或
*，则浏览器会认为该请求是合法的，可以得到响应内容；否则，浏览器会拒绝该请求，并抛出跨域错误。

cors跨域资源共享配置
（因为要访问的端口是8080，而当前是8081）

方法：
在java端连接web的 controller类里加一个注解
@CrossOrigin(origin = {“*”,“null”})

显示信息

<template><div id = "app"><button @click="send">axios测试按钮</button></div>
</template><script>import axios from 'axios'
export default{name:'App',data(){return{students:[]}},methods:{send(){axios({url:'http://localhost:8080/test',method:'GET',}).then(res=>{console.log(res.data);this.students=res.data;})}}
}
</script><style>
</style>

6.8 springboot接受请求体

@PostMapping("/update")public void updateStudent(@RequestBody Student student){studentMapper.updateById(student);}

@PostMapping 注解来声明该方法处理 POST 请求，请求路径为 /update。该方法接收一个 Student 对象作为请求体（使用
@RequestBody 注解），并将该对象传递给 studentMapper 来更新数据库中的数据。

使用postman发送一个post请求 修改13的数据

查看数据库