利用Spring boot如何创建简单的web交互应用

程序员文章站 2024-02-27 20:44:51

关于页面渲染其实在工作中，一直都是前后端分离，也就是说，我的工作从来都是提供接口，而不写 html css js 之类的，所以在这方面也没有经验。这里为了给大家介绍...

关于页面渲染

其实在工作中，一直都是前后端分离，也就是说，我的工作从来都是提供接口，而不写 html css js 之类的，所以在这方面也没有经验。

这里为了给大家介绍下模板引擎，我将会写个非常非常简单的页面，如果不好看，请见谅~

spring boot 官方推荐的模板引擎是 thymeleaf ，点击可以进入其官网了解详情。

本章目标

让 spring boot 应用可以访问到静态资源文件
创建用户登录表单，并对用户名、密码进行校验
校验失败，将返回登录页，并展示错误信息
校验成功，重定向到苹果列表页面

快速开始

添加依赖文件

创建一个 quick-thymeleaf 项目，创建方式参见上一篇文章 springboot 入门。

创建好之后，修改我们的 pom 文件，添加 thymeleaf 依赖，这里我们同时用到了注解。

<!-- 模板 -->
<dependency>
 <groupid>org.springframework.boot</groupid>
 <artifactid>spring-boot-starter-thymeleaf</artifactid>
</dependency>
<!-- 引入 lombok ,用于注解 model -->
<dependency>
 <groupid>org.projectlombok</groupid>
 <artifactid>lombok</artifactid>
 <version>1.12.6</version>
</dependency>

创建 model 类

依赖添加完毕后，创建需要用到的类，这里需要用到两个，一个 user 用于用户登录，一个 apple 用于展示作用。

user.java

@data
@noargsconstructor
@allargsconstructor
public class user {
 @notempty(message = "用户名不能为空")
 @length(min = 5, message = "用户名长度不能小于5位")
 private string username;
 @notempty(message = "密码不能为空")
 @length(min = 6, message = "密码长度不能小于6位")
 private string password;
 /**
 * 校验是否合法用户
 *
 * @param user
 * @return
 */
 public static boolean isuservalid(user user) {
 return "admin".equals(user.getusername()) && "123456".equals(user.getpassword());
 }
}

apple.java

@data
@noargsconstructor
@allargsconstructor
public class apple {
 private float price;
 private string color;
 /**
 * 制造苹果,这里生成 9 只
 *
 * @return
 */
 public static list<apple> generateapples() {
 list<float> prices = arrays.aslist(2.5f, 1.3f, 3.2f);
 list<string> colors = arrays.aslist("red", "green", "black");
 return prices.stream().flatmap(
 p -> colors.stream().map(c -> new apple(p, c))).collect(tolist());
 }
 
}

java8 新特性

apple类为我们提供一些苹果，在用户登录成功后展示。

其中 generateapples 方法用到了 java8 的新特性函数式编程，这样代码会少很多，看起来很舒服。

关于 java8 函数式编程，有时间的话，我会专门开一个系列来和大家聊聊，敬请期待。

lombok 注解

简单说明一下 lombok 注解

@data:为所有属性增加 getter setter 方法，并且自动重写 tostring hashcode 方法，并且以所有非空的字段创建了构造方法。

@noargsconstructor:生成无参构造方法。

allargsconstructor:包含所有参数的构造方法。

该类中其他的注解大家应该常用就不说明了。

创建控制器

model 创建完毕，接着创建一个usercontroller 控制器。

该控制器包含三个方法

在浏览器访问主页的时候，我们希望进入到登录页面，所以含有一个 tologinform 方法
用户在登录页面输入用户名、密码之后，需要进行登录操作，所以包含一个 login 方法
登录成功后，将跳转到苹果列表页面，需要一个 apples方法

usercontroller.java

@controller
@requestmapping("/user") // 在类中定义,表示该类中的所有方法都将以这个路径作为前缀
public class usercontroller {
 @getmapping // 4.3 版本后的新特性
 public modelandview tologinform(@modelattribute("errormsg") string errormsg, @modelattribute("user") user user) {
 // 返回 templates/login.html 页面, html 可以省略
 return new modelandview("/login");
 }
 @postmapping("/login") // 4.3 版本后的新特性
 public modelandview login(httpservletrequest request, @valid user user, bindingresult result,
  redirectattributes redirect) {
 // 如果 user 的字段不符合要求,则返回到登录页面,并将 valid error 信息传入登录页面
 if (result.haserrors())
 return new modelandview("/login", "formerrors", result.getallerrors());
 // 用户名或密码不正确
 if (!user.isuservalid(user)) {
 // 添加错误消息,该消息将一起带到重定向后的页面,
 // 浏览器刷新后,该数据将消失
 redirect.addflashattribute("errormsg", "登录失败,用户名或密码错误");
 // 重定向到 login.html 页面
 return new modelandview("redirect:/user");
 }
 // 将用户登录信息添加到 session 中
 request.getsession().setattribute("userlogin", true);
 return new modelandview("redirect:/user/apples");
 }
 @getmapping("/apples")
 public modelandview apples(httpservletrequest request) {
 boolean userlogin = (boolean) request.getsession().getattribute("userlogin");
 if (userlogin != null && userlogin) {
 list<apple> apples = apple.generateapples();
 // 登录成功,进入 apple 页面,并展示 apples
 modelandview modelandview = new modelandview("/apple");
 modelandview.addobject("apples", apples);
 return modelandview;
 }
 return new modelandview("redirect:/user");
 }
}

类中已作了简单的解释，所以不再赘述，如果有疑问的，可以自己搜索相关资料，或者留言。

创建并访问资源文件

在控制器中，我们的两个方法都响应了不同的页面，那么现在就需要创建对应的页面。

在 spring boot 中，应用的资源文件默认处于 resources 资源文件夹下，其中静态文件默认在 resources/static 目录下，模板文件在 resources/templates 目录下，我们创建对应的目录结构

利用Spring boot如何创建简单的web交互应用

按照图示创建好之后，再在对应的目录中添加 css、js 文件。

然后创建 html 文件，这里由于代码量太多，就不展示了，有兴趣的可以点击链接下载

接下来在 resources 根目录下创建 spring boot 的配置文件 application.yml

推荐使用 yml 格式作为配置文件格式，看上去很直观

application.yml

server:
 # 指定服务器端口号
 port: 8088
spring:
 thymeleaf:
 # 禁止浏览器缓存
 cache: false
 mode: html5

启动项目

一切准备就绪，接下来我们启动项目，和上一章不同的是，这次我们把启动类单独移出，以免和业务类混在一起。

在控制器所在包的上一层，我们创建

application.java

@springbootapplication
public class application extends webmvcconfigureradapter {
 public static void main(string[] args) {
 springapplication.run(application.class, args);
 }
}

效果预览

运行 main 方法，在浏览器中访问

http://localhost:8088/user

利用Spring boot如何创建简单的web交互应用