开发环境:SpringBoot+bootstrap+jquery+springMVC
一.Myecplise下创建一个新的Maven项目
命名为logintest,按照Maven项目的规范,在src/main/下新建一个名为resource的文件夹,并在此文件夹下再新建static和templete两个文件夹。
修改前的项目目录结构:
修改后的项目目录结构:
二.修改pom.xml文件
①添加的第一部分代码(位置在url标签后)
org.springframework.boot
spring-boot-starter-parent
2.0.0.RELEASE
②添加的第二部分代码(位置在dependencies下)
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-thymeleaf
③完整的pom.xml代码
4.0.0
org.fkit
logintest
0.0.1-SNAPSHOT
jar
logintest
http://maven.apache.org
org.springframework.boot
spring-boot-starter-parent
2.0.0.RELEASE
UTF-8
UTF-8
1.8
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-thymeleaf
junit
junit
test
三.引入静态文件
bootstrap官网:https://v3.bootcss.com/,下载后目录:
将Bootstrap的脚本样式放在src/main/resource/static下
在src/main/resources/templates下新建一个index.html
Spring Boot Web开发测试
用户登录
再在此目录下新建main.html:此处是引用bootstrap官网实例后台模板:
要使用这个控制台模板,还要将其css样式文件引入到css文件夹中:
代码:
网站首页
Dashboard
Label
Something else
Label
Something else
Label
Something else
Label
Something else
Section title
#
Header
Header
Header
Header
1,001
Lorem
ipsum
dolor
sit
1,002
amet
consectetur
adipiscing
elit
1,003
Integer
nec
odio
Praesent
1,003
libero
Sed
cursus
ante
1,004
dapibus
diam
Sed
nisi
1,005
Nulla
quis
sem
at
1,006
nibh
elementum
imperdiet
Duis
1,007
sagittis
ipsum
Praesent
mauris
1,008
Fusce
nec
tellus
sed
1,009
augue
semper
porta
Mauris
1,010
massa
Vestibulum
lacinia
arcu
1,011
eget
nulla
Class
aptent
1,012
taciti
sociosqu
ad
litora
1,013
torquent
per
conubia
nostra
1,014
per
inceptos
himenaeos
Curabitur
1,015
sodales
ligula
in
libero
四.编写处理请求的控制器类
新建controller包在com.ysh.logintest下,并在此包下编写IndexController、LoginController、MainController
代码:
IndexController.java:
package com.ysh.logintest.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
// Controller注解用于指示该类是一个控制器
@Controller
public class IndexController {
// 映射"/"请求
@RequestMapping("/")
public String index(Model model){
System.out.println("IndexController index方法被调用......");
// 根据Thymeleaf默认模板,将返回resources/templates/index.html
return "index";
}
}
LoginController.java:
package com.ysh.logintest.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class LoginController {
@PostMapping("login")
public ModelAndView login(
@RequestParam("loginName") String loginName,
@RequestParam("password") String password,
ModelAndView mv){
System.out.println("LoginController login方法被调用......");
System.out.println("LoginController 登录名:"+loginName + " 密码:" + password);
// 重定向到到main请求
mv.setViewName("redirect:/main");
return mv;
}
}
MainController.java:
package com.ysh.logintest.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MainController {
@RequestMapping(value="/main")
public String main(){
System.out.println("MainController main方法被调用......");
// 根据Thymeleaf默认模板,将返回resources/templates/main.html
return "main";
}
}
五.测试应用
右击项目,run as Spring Boot App
当控制台成功出现如下则运行成功:
此时打开浏览器:输入 http://localhost:8080/
点击登录后会跳转到main.html:
附录:
项目源码:
https://download.csdn.net/download/badao_liumang_qizhi/10529922
bootstrap控制台模板+css样式:
https://download.csdn.net/download/badao_liumang_qizhi/10529931