SpringBoot（4）之SpringBoot界面设计

SpringBoot界面设计

步骤一：法一：没有配置文件时，默认访问 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>标签需要闭合

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

【1-建项目加依赖】同上
【2-建Controller类加注解】同上
【3-建测试类加注解】同上
【4-编写html页面】webapp/WEB-INF/中，在main中新建 webapp/WEB-INF/views/hello 包，建立index.html 页面
【如果要将model中数据在页面显示出来：

即 html页面中使用 p名称空间，即上面< 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 roles=new ArrayList();（即电影和角色一对多）
@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 roles;（即用户和角色多对多）；
【3-建接口写方法（实体类对应的持久化接口）】实体持久化即对实体类对象的CRUD操作，springboot中使用 spring-boot-data-jpa来操作数据库，所以增删改查只需要继承一个接口，接口中自己编写符合规范的方法即可，无需自己实现接口，由系统自动实现：main/java 中创建 com.asd.springbootdb.repositories 包：包中建三个对应的接口继承 JpaRepository，即可做增删改查操作（父接口中指定泛型类型<是哪个类的，此类主键的数据类型>； 在 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文件：，表示每一行的内容是从 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指向；再在 new.html页面添加内容：main/webapp/images/movie/1.jpg、main/webapp/css、main/webapp/js即 webapp下创建images、css、js文件夹；页面中“照片”文本框中value="/images/movie/1.jpg"即：；页面上方利用 th:src引入 js样式时，使用 @{.js文件路径} ，即：；利用 th:href引入css样式时，使用 @{.css文件路径} ，即：；再在< script>标签中添加日历控件的方法；
【增】
创建 new.html 页面； Controller 中添加 save（）方法，先保存，在查找，保存到 model中，
返回到 list.html页面，返回到 list.html页面：movieRepository.save(movie); List movieList=movieRepository.findAll(); model.addAttribute("movieList",movieList); return new ModelAndView("movie/list");
【查】
list.html 页面中添加“查询”按钮

，提交到 Controller中 /movie下的 list（）方法中； MovieRepository.java中添加自定义模糊查询的方法 public List findByNameLike(String name);；Controller 中的 list（）方法中添加 String name参数，再调用方法movieRepository.findByNameLike("%"+name+"%");；

list.html 页面中添加“查看”超链接，使用 th:href，用 @符号，使用（）传递参数：，而非 href； 提交到 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，可以将 角色信息同时显示出来：

    饰演
   

；

【改】
list.html 页面中添加“编辑”按钮编辑，提交到 Controller中 /movie下的 edit（）方法中
Movie movie=movieRepository.getOne(id); model.addAttribute("movie",movie); return new ModelAndView("movie/edit");，再返回到 edit.html页面； 创建 edit.html 页面，提交到 Controller中 editSubmit（）：； Controller中创建 editSubmit（）方法：先保存传过来的修改过的 movie对象，再查找全部，返回到 list.html页面
movieRepository.save(movie); List movieList=movieRepository.findAll(); model.addAttribute("movieList",movieList); return new ModelAndView("/movie/list");；

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