SpringBoot（4）之SpringBoot界面设计

女爷i 2022-04-08 12:49 496阅读 0赞

## SpringBoot界面设计 ##

![在这里插入图片描述][201812171112166.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDI5OTIz_size_16_color_FFFFFF_t_70]

### 步骤一：法一：没有配置文件时，默认访问 resources\\templates 包中的页面 ###

Thymeleaf：基于HTML5模板引擎，可以替代 jsp，要求全部标签是闭合的；  
**【1-建项目加依赖】创建Maven项目，pom.xml中添加 < parent> 启动器、spring-boot-starter、spring-boot-starter-web、spring-boot-starter-thymeleaf 启动器；  
【2-建Controller类加注解】 main/java 中创建 com.asd.springbootui.controller 包：controller包中MyController类：添加方法，方法上添加 @RequestMapping 注解，Controller类上添加 @Controller、@RequestMapping 注解，`return new ModelAndView("hello/index");`表示返回 hello包下index.html页面，这是默认的无需配置【在 resources\\templates\\hello\\index.html ，默认在 resources\\templates 包中】；  
【3-建测试类加注解】 main/java 中创建 WebUIApp.java 测试类：  
@SpringBootApplication注解：表示这是一个Springboot类；  
@ComponentScan(basePackages = “com.asd.springbootui”)注解：此中扫描带有@Controller注解的类，`SpringApplication.run(WebUIApp.class,args);`表示运行这个类本身；  
【4-编写html页面】默认是在 resources\\templates 包中，建立 hello包，建 index.html页面；`<meta charset="UTF-8"/>`加标签结束符，页面中< meta>标签需要闭合**

### 法二：编写配置文件，定义访问 webapp\\WEB-INF 下的页面 ###

**【1-建项目加依赖】同上  
【2-建Controller类加注解】同上  
【3-建测试类加注解】同上  
【4-编写html页面】webapp/WEB-INF/中，在main中新建 webapp/WEB-INF/views/hello 包，建立index.html 页面  
【如果要将model中数据在页面显示出来：`<p th:text="${hello}"></p>`即 html页面中使用 p名称空间，`<html lang="en" xmlns:th="http://www.thymeleaf.org">`即上面< html>标签中添加 xmlns属性】；  
【5-编写配置文件】resources/application.yml ，resources文件夹下新建 application.yml 文件，文件中：`prefix: /WEB-INF/views/`、`suffix: .html` 前、后缀指明 Controller类 MyController.java中`return new ModelAndView("hello/index");` 逻辑视图名前后缀；**

### 步骤二：连接数据库（接法一、法二） ###

**【1-加依赖】mysql和jpa、spring-boot-starter-test （用于数据库连接使用）；  
【2-建实体类加注解】① 数据库中新建数据库和数据表：Actor（id、name、sex、born（Util中Date类））、Movie（id、name、photo、createDate）、Role（id、name）；  
② main/java 中创建 com.asd.springbootui 包：entity包中新建 Actor、Role、Movie类；再让实体和表关联：实体类上即字段上添加以下注解：  
@Entity  
@Table(name = “department”)： 都是（javax.persistence包中）@Entity表示这个类是一个实体，实体类与数据库表有映射关系；@Table表示实体类与数据库中相应的表有映射关系，设置数据库的表名；  
@Id  
@GeneratedValue(strategy = GenerationType.IDENTITY)： @Id指明数据库的主键列， @GeneratedValue指明逐渐列值的生成方式；  
@Column(name = “create\_date”)  
@DateTimeFormat(pattern = “yyyy-MM-dd HH:mm:ss”)：@Column指明数据库中与实体类中对应不同名的字段； @DateTimeFormat设置日期类型的格式；  
一个用户属于一个部门、对应多个角色权限：（User类中添加Department department、List< Role> roles;）  
@OneToOne  
@JoinColumn(name = “actor\_id”,unique = true)：@OneToOne表示一对一关联关系； eg：Role类中`private Actor actor;`（即演员和角色一对一）  
@OneToOne(mappedBy = “actor”)：@OneToOne表示一对一关联关系； eg：Actor类中`private Role role;`（即演员和角色一对一）  
@OneToMany(cascade = CascadeType.ALL,targetEntity = Role.class, mappedBy = “movie”,fetch = FetchType.EAGER)：@OneToMany表示多对一关联关系； eg：Movie类中`private List<Role> roles=new ArrayList<Role>();`（即电影和角色一对多）  
@ManyToOne  
@JoinColumn(name = “did”)：@ManyToOne表示多对一关联关系；@JoinColumn设置关联对象的外键列，如当前 User类所关联到的对象是 department，要设的是关联对象 department在 user表中的外键列即 did； eg：Role类中`private Movie movie;`（即角色和影片多对一）  
@ManyToMany(cascade = \{\},fetch = FetchType.EAGER)  
@JoinTable(name = “user\_role”,joinColumns = \{@JoinColumn(name = “user\_id”)\},inverseJoinColumns = \{@JoinColumn(name = “roles\_id”)\})：@ManyToMany表示多对多：cascade用来设级联、fetch设置是否启用懒加载；@JoinTable保存多对多关联关系表的信息的设置：name表示第三张关联关系表的表名、joinColumns（加s是一个数组，所以用\{\}括起来）表示当前对象（User）在关联关系表（user\_role）中的外键名（即user\_id）、inverseJoinColumns （加s是一个数组，所以用\{\}括起来）表示关联的另一个多方（Role）在关联关系表（user\_role）中的外键名（即roles\_id）； eg：User类中`private List<Role> roles;`（即用户和角色多对多）；  
【3-建接口写方法（实体类对应的持久化接口）】实体持久化即对实体类对象的CRUD操作，springboot中使用 spring-boot-data-jpa来操作数据库，所以增删改查只需要继承一个接口，接口中自己编写符合规范的方法即可，无需自己实现接口，由系统自动实现：main/java 中创建 com.asd.springbootdb.repositories 包：包中建三个对应的接口继承 JpaRepository<User,Long>，即可做增删改查操作（父接口中指定泛型类型<是哪个类的，此类主键的数据类型>； 在 MovieRepository.java类中编写方法`public Movie findByName(String name);`；  
【4-写配置类加注解（test测试包下）】（配置数据库连接）配置类上加注解：  
@Configuration  
@EnableJpaRepositories(basePackages = “com.asd.springbootui.repositories”)： @Configuration表示当前类是一个配置类，作用类似于spring中的xml文件；@EnableJpaRepositories用来指定Repository类的包路径；  
【5-写测试类加注解（test测试包下，且 pom.xml中要添加测试类启动器）】：  
① pom.xml文件中添加有关测试的依赖，它是springboot自己提供了一个用于测试的starter启动器，它已经包含了像junit等测试模块，无需自己去添加具体的（入junit等）测试模块；  
② 创建测试类，类上添加注解：  
@RunWith(SpringJUnit4ClassRunner.class)  
@ContextConfiguration(classes = JpaConfiguration.class)： @RunWith表示采用什么形式run：表示当前程序的运行是在spring的容器的环境下运行，而 junit可直接拿到 spring容器的对象，不需要再进行为重新得到 spring容器而进行的配置，简化了因为测试而生成相应的关于 spring容器的配置；@ContextConfiguration指明 jpa的配置文件，这里不是用xml文件进行配置，而是用 java的配置类进行配置的；**

#### 步骤三：添加Movie控制器（建一个Movie控制器，完成从控制器到首页的跳转，然后再首页显示所有的电影信息；） ####

**【1-建Controller类加注解】 main/java中的com.asd.springbootui.controller 包下建MovieController.java类；  
@Controller  
@RequestMapping("/movie")： @RequestMapping表示请求父路径（如都是movie模块下的controller方法）MovieController.java类中添加 list（）方法；；  
【2-编写配置文件】 main下新建 webapp/WEB-INF文件夹，main/webapp/WEB-INF/views/movie文件夹下建 views/movie文件夹下新建 list.html文件；main/resources/application.yml文件夹下,即 resources文件夹下建配置文件 application.yml  
配置 leaf模板时：  
prefix: /WEB-INF/views/ —表示html页面路径的前缀  
suffix: .html —表示html页面路径的后缀  
mode: HTML5 —表示mode是 HTML5版本  
encoding: UTF-8 —表示编码格式采用UTF-8  
content-type: text/html —表示是html页面  
cache: false —为方便开发，cache设为false，表示当修改html页面时不需要重启服务器，也能识别修改后的结果，不使用缓存（但当开发好后，部署到服务器上时，cache要设为 true或删除 cache配置，否则会影响执行效率）；  
【3-编写html页面】 main下新建 webapp/WEB-INF文件夹，main/webapp/WEB-INF/views/movie文件夹下建 views/movie文件夹下新建 list.html文件：`<tr th:each="movie:${movieList}">`，`<td th:text="${movie.id}"></td>`表示每一行的内容是从 each中得到，movie:$ \{movieList\} 表示循环遍历 movieList集合，每取出一个值，都放在 movie这个变量中，再在< td>中通过 th:text 显示出来；由于`th:text="${movie.name}"` 显示的是带有时分秒的时间，所以对其进行格式化，`th:text="${#dates.format(movie.createDate,'yyyy年MM月dd日')}`调用 \#dates函数里面的 format（格式化的值，格式化的样式） ；**

#### 步骤四：增删改查功能 ####

**【1-建Controller类加注解】 main/java中的com.asd.springbootui.controller 包下建MovieController.java类；  
@Controller  
@RequestMapping("/movie")： @RequestMapping表示请求父路径（如都是movie模块下的controller方法）；MovieController.java类中添加 create（）方法；  
【2-根据 Controller类中 ModelAndView值创建 html页面】 main/webapp/WEB-INF/views/movie文件夹下建 new.html文件：先在 list.html页面中添加新增超链接，url指向`<a href="/movie/new">`；再在 new.html页面添加内容：main/webapp/images/movie/1.jpg、main/webapp/css、main/webapp/js即 webapp下创建images、css、js文件夹；页面中“照片”文本框中`value="/images/movie/1.jpg"`即：`<input type="text" name="photo" value="/images/movie/1.jpg"/>`；页面上方利用 th:src引入 js样式时，使用 @\{.js文件路径\} ，即：`<script th:src="@{/js/jquery.js}"></script>`；利用  th:href引入css样式时，使用 @\{.css文件路径\} ，即：`<link rel="stylesheet" th:href="@{/css/demo.css}"/>`；再在< script>标签中添加日历控件的方法；**  
**【增】  
创建 new.html 页面； Controller 中添加 save（）方法，先保存，在查找，保存到 model中，  
返回到 list.html页面，返回到 list.html页面：`movieRepository.save(movie); List<Movie> movieList=movieRepository.findAll(); model.addAttribute("movieList",movieList); return new ModelAndView("movie/list");`**  
**【查】  
list.html 页面中添加“查询”按钮`<form action="/movie/list"`，提交到 Controller中 /movie下的 list（）方法中； MovieRepository.java中添加自定义模糊查询的方法 `public List<Movie> findByNameLike(String name);`；Controller 中的 list（）方法中添加 String name参数，再调用方法**`movieRepository.findByNameLike("%"+name+"%");`；  
![在这里插入图片描述][20181220202147246.png]  
**list.html 页面中添加“查看”超链接，使用 th:href，用 @符号，使用（）传递参数：`<a th:href="@{/movie/show(id={movie.id})}">`，而非 href`<a href="/movie/show?id=${movie.id}">`； 提交到 Controller中 /movie下的 show（）方法中，先查找，在返回到 show.html页面中：`Movie movie=movieRepository.findOne(id); model.addAttribute("movie",movie); return new ModelAndView("movie/show");`；再创建 show.html页面，用来显示查看的电影信息，因为 Movie类中包含了 roles集合，Role类中包含 actor，可以将 角色信息同时显示出来：**

；  
![在这里插入图片描述][20181220203917453.png]![在这里插入图片描述][20181220203942830.png]![在这里插入图片描述][20181220204554469.png]  
**【改】  
list.html 页面中添加“编辑”按钮`<a th:href="@{/movie/edit(id={movie.id})}">编辑</a>`，提交到 Controller中 /movie下的 edit（）方法中  
`Movie movie=movieRepository.getOne(id); model.addAttribute("movie",movie); return new ModelAndView("movie/edit");`，再返回到 edit.html页面； 创建 edit.html 页面，提交到 Controller中 editSubmit（）：`<form action="/movie/editSubmit"`； Controller中创建 editSubmit（）方法：先保存传过来的修改过的 movie对象，再查找全部，返回到 list.html页面  
`movieRepository.save(movie); List<Movie> movieList=movieRepository.findAll(); model.addAttribute("movieList",movieList); return new ModelAndView("/movie/list");`；**

【删】  
**list.html 页面中添加“删除”按钮`<a th:href="@{/movie/del(id={movie.id})}">刪除</a>`，提交到 Controller中 /movie下的 del（）方法中  
`Movie movie=movieRepository.getOne(id); model.addAttribute("movie",movie); return new ModelAndView("movie/del");`，再返回到 del.html页面；  
创建 del.html 页面，提交到 Controller中 delSubmit（）：`<form action="/movie/delSubmit" method="post">`； Controller中创建 delSubmit（）方法：先删除，再查找全部，返回到 list.html页面  
`movieRepository.delete(id); List<Movie> movieList=movieRepository.findAll(); model.addAttribute("movieList",movieList); return new ModelAndView("/movie/list");`；**

[201812171112166.png]: https://img-blog.csdnimg.cn/201812171112166.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDI5OTIz_size_16_color_FFFFFF_t_70]: /images/20220405/5fe96388fd0b4c59a483445832605e1b.png
[20181220202147246.png]: /images/20220405/dad115eae4b44e5f97f1e984251f357f.png
[20181220203917453.png]: https://img-blog.csdnimg.cn/20181220203917453.png
[20181220203942830.png]: https://img-blog.csdnimg.cn/20181220203942830.png
[20181220204554469.png]: /images/20220405/d4c48bc678f64c6fb7fdf270c330a513.png