SpringBoot开发第一个Web入门级应用(超详细)

开发环境:SpringBoot+bootstrap+jquery+springMVC

一.Myecplise下创建一个新的Maven项目

命名为logintest,按照Maven项目的规范,在src/main/下新建一个名为resource的文件夹,并在此文件夹下再新建static和templete两个文件夹。

    修改前的项目目录结构:

SpringBoot开发第一个Web入门级应用(超详细)_第1张图片

    修改后的项目目录结构:

SpringBoot开发第一个Web入门级应用(超详细)_第2张图片

二.修改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/,下载后目录:

SpringBoot开发第一个Web入门级应用(超详细)_第3张图片

 

将Bootstrap的脚本样式放在src/main/resource/static下

SpringBoot开发第一个Web入门级应用(超详细)_第4张图片

在src/main/resources/templates下新建一个index.html





Spring Boot Web开发测试








再在此目录下新建main.html:此处是引用bootstrap官网实例后台模板:

要使用这个控制台模板,还要将其css样式文件引入到css文件夹中:

SpringBoot开发第一个Web入门级应用(超详细)_第5张图片

 

SpringBoot开发第一个Web入门级应用(超详细)_第6张图片

 

代码:










网站首页

  


    


    
     
               
         

Dashboard

         
           
              Generic placeholder thumbnail              

Label

              Something else            
           
              Generic placeholder thumbnail              

Label

              Something else            
           
              Generic placeholder thumbnail              

Label

              Something else            
           
              Generic placeholder thumbnail              

Label

              Something else            
         
         

Section title

         
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
#HeaderHeaderHeaderHeader
1,001Loremipsumdolorsit
1,002ametconsecteturadipiscingelit
1,003IntegernecodioPraesent
1,003liberoSedcursusante
1,004dapibusdiamSednisi
1,005Nullaquissemat
1,006nibhelementumimperdietDuis
1,007sagittisipsumPraesentmauris
1,008Fuscenectellussed
1,009auguesemperportaMauris
1,010massaVestibulumlaciniaarcu
1,011egetnullaClassaptent
1,012tacitisociosquadlitora
1,013torquentperconubianostra
1,014perinceptoshimenaeosCurabitur
1,015sodalesligulainlibero
         
       
     
   
                                 

四.编写处理请求的控制器类

新建controller包在com.ysh.logintest下,并在此包下编写IndexController、LoginController、MainController

SpringBoot开发第一个Web入门级应用(超详细)_第7张图片

代码:

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

当控制台成功出现如下则运行成功:

SpringBoot开发第一个Web入门级应用(超详细)_第8张图片

此时打开浏览器:输入  http://localhost:8080/

SpringBoot开发第一个Web入门级应用(超详细)_第9张图片

点击登录后会跳转到main.html:

SpringBoot开发第一个Web入门级应用(超详细)_第10张图片

 

 

附录:

项目源码:

https://download.csdn.net/download/badao_liumang_qizhi/10529922

 

bootstrap控制台模板+css样式:

https://download.csdn.net/download/badao_liumang_qizhi/10529931

 

 

 

 

你可能感兴趣的:(SpringBoot)