任务二 用户管理页面
任务三 后端开发环境搭建
前面两个任务我们主要集中在前端环境搭建，完成了VUE脚手架的搭建并运行项目成功。同时引入Element。任务二 我们着重练习了使用Element组件。完成了一个用户管理页面设计与开发。
通过任务二的练习，大家应该对Element组件的使用有所掌握。通过引用表格，对data数据也有所了解。初步能熟练引用Element各类组件。
本次任务完成 基于IntelliJ IDEA 2021.1.1的管理系统后端环境搭建。
（1）实现系统正常运行；
（2）基于template创建两个html页面，实现前后端传值。
B站讲解视频
https://www.bilibili.***/video/BV1sC4y1J7KS/?spm_id_from=333.999.0.0&vd_source=***cb198db3b03d71b117484ed9dab175
初始化项目
1.新建项目
File->New->Project…
2.使用Spring initializr创建目
点击“Next”进入下一步。
3. 添加依赖
创建完成后的项目资源框架为：
4. 添加数据配置文件：application.yml
项目默认的配置文件为application.properties ,properties配置文件属于早期，也是目前创建 Spring Boot（2.x）项目时默认的配置文件格式。目前普遍流行使用.yml进行配置文件设置。
yml 可以看做是对 properties 配置文件的升级，属于 Spring Boot 的“新版”配置文件。它具有语法更简洁、可读性更高、更好配置多种数据类型、跨语言、通用性强等优点。
本项目我们采用.yml。
删除原来的application.properties，新增application.yml。
server:
port: 8084
spring:
datasource:
username: root
password: root
#url中database为对应的数据库名称，这里为classroom
url: jdbc:mysql://localhost:3306/classroom?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
driver-class-name: ***.mysql.cj.jdbc.Driver
thymeleaf:
prefix: classpath:/templates/
suffix: .html
cache: false
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
注意：#url中database为对应的数据库名称，这里为classroom，大家可以根据自己实际的数据库名称进行修改即可。
5. 添加thymeleaf依赖
基于VUE和Springboot做开发前后端分离管理系统的时候就不要hymeleaf做html页面，目前因为我们还在内测后端环境，所以在项目中创建html页面。故添加thymeleaf依赖。
在Pom文件中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
6.测试运行
（1）添加控制器包：在当前项目下创建controller包。
（2）在controller包中创建路由类UserController。
添加路由：
@Controller
public class UserContrller {
@RequestMapping("/test")
public String login(){
return "main.html";
}
}
**注意：**根据提示可以使用Alt+Shift+Enter自动导包。
(3)在templates文件中添加一个main.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h1>测试</h1>
</body>
</html>
（4）运行DemoApplication
第一次运行过程中可能会出现下图的错误
也可能会出现下图的错误
不要着急，普遍原因是springboot版本过高，高于3.0 需要在pom文件中降低版本 也有说是idea的maven配置java版本没有统一的问题，这个项目的boot版本是2.7.5，idea的配置也没有问题，统一的jdk1.8。然后再去改一下mybatis的版本为2.2.2，基本就没有问题了。也可以参考网上的一些修改方法，但核心是降低版本。
pom.xml文件代码供参考：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>***.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>***.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-***piler-plugin</artifactId>
<configuration>
<source>8</source>
<target>8</target>
</configuration>
</plugin>
</plugins>
</build>
</project>
（5）运行成功
（6）地址栏查看
这里的端口号为8084，这与application.yml中设置的server一致。
7.热部署设置
为了后续改代码的时候能自动运行，可以做一个热部署。热部署有利有弊，如果系统框架熟悉了，保存修改的地方不需要重新运行，直接启动，也比较方便。但是有些时候，重新运行的报错功能对初学者比较好用，所以，这个热部署并不是必须的。
（1）添加依赖
<!--热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
（2）编译配置修改：File-Settings-***piler-Build Project automatically。
**特别注意：**热部署完成后，需要关闭项目，并且重新启动，以后才能正常自动启动。
8.测试前端向后端传值
（1）添加路由如下：
@GetMapping("/")
/*Map方式
public String index(Map<String, Object> map){
map.put("msg", "Hello, Spring Boot!");
return "login.html";
}*/
/*Model 方式*/
public String index(Model model){
model.addAttribute("msg", "Hello 同学");
return "login.html";
}
（2）新建login.html文件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<span th:text="${msg}"></span>
</body>
</html>
（3）运行项目
地址栏输入：http://localhost:8084/，回车。
9.测试从前端向后端传值
（1）修改前端login.html页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
<link rel="shortcut icon" href="#">
</head>
<body>
<form action="login" method="post">
<table>
<span th:text="${msg}"></span>
<tr>
<td>用户名： </td>
<td>
<input type="text" name="username"/>
</td>
</tr>
<tr>
<td>密码： </td>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录"/>
</td>
</tr>
</table>
</form>
</body>
</html>
（2）添加路由
@PostMapping("/login")
public String login(String username, String password) {
System.out.println("用户名是:"+username+"密码是:"+password);
return "main.html";
}
（3）运行项目
地址栏输入：http://localhost:8084/，回车。
输入用户名和密码。点击“登录”。打开main.html文件。
系统输出结果可以看到：已经从前端取出数据传输至后台。
任务总结
本次任务，主要完成并掌握以下内容：
（1）Maven项目创建，springboot运行环境正常。
（2）通过新建两个页面并能实现页面的正常访问，实现控制器正常工作。
（3）通过前后端传值，大家对系统运行有一个大致的了解。便于后期整个系统开发。
