前言
在此记录一下本人关于使用Spring boot框架开发web系统时,跳转页面的相关的问题。欢迎各位大佬针对相关问题赐教!
在完成下面操作时需使用开发工具自动创建一个spring boot项目,并完成如下配置。
1.引入相关依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.在.properties中添加Thymeleaf配置
# thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true
spring.thymeleaf.mode=LEGACYHTML5
3.项目文件目录
以下是本篇文章正文内容,下面案例可供参考
一、在Controller层中跳转
代码如下(示例):
@Controller
public class LoginController<Commodity> {
@Autowired
LoginService loginService;
@PostMapping("/login")
public String login(String username, String password ) {
Boolean res = loginService.Login(username, password);
System.out.println(res);
if (res) {
return "redirect:index";//重定向
}else {
return "login";//转发
}
}
@RequestMapping("/")
public String loginl(){
return "login";
}
@GetMapping("/index")
public String index(){
return "index";
}
总结:这里记得必须使用@Controller注解,而不是@RestController,不然返回的是字符串而非我们要的页面。使用转发进行页面跳转时,可以正常跳转。而使用重定向时,如没有index()这个方法,会报404错误。(小菜(niao)目前是加一个get请求处理的方法解决,如有大佬知道为何这样不妥,还望赐教。)
二、实现WebMvcConfigurer接口
重写addViewControllers方法
代码如下(示例):
@Configuration
public class MyWebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/addMember").setViewName("addMember");
}
总结:这里的 addViewController("/addMember"),是URL路径,如http://localhost:8080/addMember
setViewName("addMembert")是你HTML或JSP页面名称。
三、在js中实现跳转
代码如下(示例):
<script>
$("#login").click(function () {
var username = $('input[name=username]').val();
var password = $('input[name=password]').val();
$.ajax({
type: 'POST',
data: {
username: username,
password: password
},
dataType: "JSON",
url: '/login',
success: function (data) {
if (data.res) {
window.location.href = "index";
} else {
alert(data.msg);
$('input[name=username]').val("");
$('input[name=password]').val("");
}
}
});
})
</script>
总结:可以通过ajax提交请求,在请求成功返回的函数中做处理,进行页面跳转。
总结
页面跳转的方法可以采用这些,但不仅限于这样。其他方法后期在学习或工作中将补充进来。本文有不妥之处也希望各位大佬为小菜指点一二。