🍉认识SpringBoot

🍓什么是SpringBoot

Spring Boot是其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。

我们知道，从 2002 年开始，Spring 一直在飞速的发展，如今已经成为了在Java EE（Java EnterpriseEdition）开发中真正意义上的标准，但是随着技术的发展，Java EE使用 Spring 逐渐变得笨重起来，大量的 XML 文件存在于项目之中。繁琐的配置，整合第三方框架的配置问题，导致了开发和部署效率的降低。

2012 年 10 月，Mike Youngstrom 在 Spring jira 中创建了一个功能请求，要求在 Spring 框架中支持

无容器 Web 应用程序体系结构。他谈到了在主容器引导 spring 容器内配置 Web 容器服务。这是 jira请求的摘录：

我认为 Spring 的 Web 应用体系结构可以大大简化，如果它提供了从上到下利用 Spring 组件和配置模型的工具和参考体系结构。在简单的 main() 方法引导的 Spring 容器内嵌入和统一这些常用Web 容器服务的配置。

这一要求促使了 2013 年初开始的 Spring Boot 项目的研发，到今天，Spring Boot 的版本已经到了2.0.3 RELEASE。Spring Boot 并不是用来替代 Spring 的解决方案，而是和 Spring 框架紧密结合用于提升 Spring 开发者体验的工具。

它集成了大量常用的第三方库配置，Spring Boot应用中这些第三方库几乎可以是零配置的开箱即用（out-of-the-box），大部分的 Spring Boot 应用都只需要非常少量的配置代码（基于 Java 的配置）,开发者能够更加专注于业务逻辑。

🍓为什么要学习Springboot

从Spring官方来看

我们打开 Spring 的官方网站，可以看到下图：

我们可以看到图中官方对 Spring Boot 的定位：Build Anything， Build任何东西。Spring Boot旨在尽可能快地启动和运行，并且只需最少的 Spring 前期配置。同时我们也来看一下官方对后面两个的定位：

SpringCloud：Coordinate Anything，协调任何事情；

SpringCloud Data Flow：Connect everything，连接任何东西。

仔细品味一下，Spring 官网对 Spring Boot、SpringCloud 和 SpringCloud Data Flow三者定位的措辞非常有味道，同时也可以看出，Spring 官方对这三个技术非常重视，是现在以及今后学习的重点

从Spring Boot的优点来看

Spring Boot 有哪些优点？主要给我们解决了哪些问题呢？我们以下图来说明：

良好的基因

Spring Boot 是伴随着 Spring 4.0 诞生的，从字面理解，Boot是引导的意思，因此 Spring Boot 旨在帮助开发者快速搭建 Spring 框架。Spring Boot 继承了原有 Spring 框架的优秀基因，使 Spring 在使用中更加方便快捷。

简化编码

举个例子，比如我们要创建一个 web 项目，使用 Spring 的朋友都知道，在使用 Spring 的时候，需要在 pom 文件中添加多个依赖，而 Spring Boot 则会帮助开发着快速启动一个 web 容器，在 SpringBoot 中，我们只需要在 pom 文件中添加如下一个 starter-web 依赖即可。

<dependency>
  <groupId>org.springframework.boot</groupId> 
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

我们点击进入该依赖后可以看到，Spring Boot 这个 starter-web 已经包含了多个依赖，包括之前在Spring 工程中需要导入的依赖，我们看一下其中的一部分，如下：

<dependency>
  <groupId>org.springframework</groupId>  
  <artifactId>spring-web</artifactId>
  <version>5.0.7.RELEASE</version>
  <scope>compile</scope>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>  
  <artifactId>spring-webmvc</artifactId>  
  <version>5.0.7.RELEASE</version>
  <scope>compile</scope>
</dependency>

由此可以看出，Spring Boot 大大简化了我们的编码，我们不用一个个导入依赖，直接一个依赖即可

简化配置

Spring 虽然使Java EE轻量级框架，但由于其繁琐的配置，一度被人认为是“配置地狱”。各种XML、Annotation配置会让人眼花缭乱，而且配置多的话，如果出错了也很难找出原因。Spring Boot更多的是采用 Java Conﬁg 的方式，对 Spring 进行配置。

简化部署

在使用 Spring 时，项目部署时需要我们在服务器上部署 tomcat，然后把项目打成 war 包扔到 tomcat 里，在使用 Spring Boot 后，我们不需要在服务器上去部署 tomcat，因为 Spring Boot 内嵌了tomcat，我们只需要将项目打成 jar 包，使用java -jar xxx.jar一键式启动项目.另外，也降低对运行环境的基本要求，环境变量中有JDK即可。

简化监控

我们可以引入 spring-boot-start-actuator 依赖，直接使用 REST 方式来获取进程的运行期性能参数,从而达到监控的目的，比较方便。但是 Spring Boot 只是个微框架，没有提供相应的服务发现与注册的配套功能，没有外围监控集成方案，没有外围安全管理方案，所以在微服务架构中，还需要 SpringCloud 来配合一起使用。

未来发展

微服务是未来发展的趋势，项目会从传统架构慢慢转向微服务架构，因为微服务可以使不同的团队专注于更小范围的工作职责、使用独立的技术、更安全更频繁地部署。而继承了 Spring 的优良特性，与Spring 一脉相承，而且支持各种REST API 的实现方式。Spring Boot 也是官方大力推荐的技术，可以看出，Spring Boot 是未来发展的一个大趋势。

🍓SpringBoot的特点

SpringBoot的定位是一个微服务框架，是基于Spring进行封装，对Spring做了使用上的大量简化，可以非常快速的开发单体应用，SpringBoot具有如下特点：

简化Maven，管理了大量的基础依赖
基于注解配置(JavaConfig)/无需xml
快速搭建/快速开发
内嵌tomcat,部署简单
自动装配功能,简化大量配置
健康检查，支持外部化配置等
更加方便的和三方框架集成

🍉HelloWorld

🍓环境搭建

jdk配置

本课程是使用 IDEA 进行开发，在IDEA 中配置 jdk 的方式很简单，打开File->ProjectStructure，

如下图所：

选择 SDKs
在 JDK home path 中选择本地 jdk 的安装目录
在 Name 中为 jdk 自定义名字

我们来做一个简单的web程序，大家可以回顾一下使用SpirngMVC如何实现一个web应用，然后对比SpringBoot实现web应用，看一下有什么区别

maven配置

创建了 Spring Boot 项目之后，需要进行 maven 配置。打开下本地的 maven 信息。如下：

在 Maven home directory 中选择本地 Maven 的安装路径；在 User settings ﬁle 中选择本地 Maven 的配置文件所在路径。在配置文件中，我们配置一下国内阿里的镜像，这样在下载 maven 依赖时，速度很快。

<mirror>
   <id>nexus-aliyun</id>
   <mirrorOf>*</mirrorOf>
   <name>Nexusaliyun</name>
   <url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>

编码配置

同样地，新建项目后，我们一般都需要配置编码，这点非常重要，很多初学者都会忘记这一步，所以要养成良好的习惯。

IDEA 中，仍然是打开File->settings，搜索 encoding，配置一下本地的编码信息。如下：

🍓创建项目

src/main/java路径：主要编写业务程序
src/main/resources路径：存放静态文件和配置文件
src/test/java路径：主要编写测试程序

2.1.导入依赖

spring-boot-starter-parent是SpringBoot的父工程，通过继承的方式引入，spring-boot-starter-web是SpringBoot集成web的依赖，主要包括了SpingMVC,Tomcat,日志,自动配置等等相关依赖

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.5.RELEASE</version>
  </parent>
...
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.2.创建配置类

@SpringBootApplication注解是SpringBoot的主启动注解，贴在主启动类上， SpringApplication.run的作用是启动内置的Tomcat，运行SpringBoot的应用。

@SpringBootApplication
public class ApplicationConfig {

    public static void main(String[] args) {
        SpringApplication.run(ApplicationConfig.class);
    }
}

2.3.编写Controller

编写一个简单的controller进行测试，@RestController注解是@Controller和@ResponseBody的组合注解

@RestController
public class Example {

	@RequestMapping("/hello")
	String home() {
		return "Hello World!";
	}
}

2.4.启动测试

执行main方法启动，浏览器访问：http://localhost:8080/hello

🍉Mybatis

将数据从数据库中取出来并显示到浏览器页面上

1.导入依赖

    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.0</version>
    </dependency>
    <!-- 数据库连接的依赖       -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.26</version>
        <scope>runtime</scope>
    </dependency>

2.数据库配置

#数据源配置
spring:
  datasource:
    url: jdbc:mysql:///mybatis?useSSL=false&useUnicode=true&characterEncoding=utf-8   #数据库地址
    driver-class-name: com.mysql.cj.jdbc.Driver                                       #驱动
    username: root                                                                    #账号
    password: admin                                                                   #密码

3.创建实体

public class User {
    private Integer id;
    private String name;
    private String password ;
    private Integer age ;
    private Integer sex ;
    private String address ;
    private String tel ;
}

4.创建mapper

@Mapper
public interface UserMapper {
    List<User> getAll();
}

XML文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wolfcode.mybatis.mapper.UserMapper">
   <!--
        id:接口的名字
        resultType:接口返回值类型
        namespace:mapper接口的全限定名
    -->
    <select id="getAll" resultType="com.wolfcode.mybatis.entity.User">
        select  * from user;
    </select>

</mapper>

5.创建service层

public interface UserService {
    List<User> getAll();
}
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public List<User> getAll() {
        return userMapper.getAll();
    }
}

6.创建controller层

@RestController
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("getUsers")
    public List<User> getAll(){

      return userService.getAll();
    }
}

注意:需要告诉springboot 我们的xml文件放在哪里了

#mybatis相关配置
mybatis:
  mapper-locations: classpath:mapper/*.xml   #xml位置

📚项目实战

需求1:登录页面显示并可以输入信息发送请求到后端

1.创建项目

2.导入静态资源

3.创建vue实例

<script>
    var vue=new Vue({
        el:"#app",
        data:{
            isShowRoles1:"",
            isShowRoles2:"",
            user:{
                username:"111",
                password:"111"
            }
        },
        created(){

        },
        methods:{}
    })
</script>

4.将用户名密码绑定到vue的属性当中(user) 在input标签中添加 v-model属性

  <input data-v-7f5e281c="" v-model="user.username" @blur="validateForm" placeholder="手机号码" type="text"
                                    class="input_init mas-form-input-large" id="phone" />
  <input data-v-7f5e281c="" v-model="user.password" @blur="validateForm2" placeholder="密码" type="password"   class="input_init  mas-form-input-large" id="pwd" />

5.给登录按钮添加点击事件 @click

    <button @click="login" class="m-button m-button--lg m-button--highlight"
                                style="width: 100%; padding: 0px;">
                                <!----> <span class="m-button__content">登录</span>
    </button>

6.编写点击事件的方法

 //登录
            login(){
                axios.post("/logined",this.user).then(res=>{
                    console.log("1111111111111111111111111")
                })
            },

7.编写后端controller

 @RequestMapping(value = "logined",method = RequestMethod.POST)
    @ResponseBody
    public String toLogined(@RequestBody User user){
        System.out.println("====================="+user.getUsername());
        System.out.println("============================"+user.getPassword());
        return "success";
    }

📗项目阶段

1.导入静态资源

2.编写controller

@RequestMapping({"/","login"})
public String loginPage(){
        return "login";
}

3.配置freemarker

spring:
  freemarker:
    cache: false
    suffix: .html
    template-loader-path: classpath:/templates/

4.引入vue axios相关依赖

<link href="css/chunk.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet"/>
 <script src="/js/vue.min.js"></script>
 <script src="/js/axios.min.js"></script>

5.创建vue实例

 <script>
   var vue=new Vue({
            el:"#app",
            data:{
               user:{
                  username:"",
                  password:""
               }
            },
            created(){

            },
            methods:{

            }
   })

 </script>

6.设置挂载点给输入框设置双向绑定

7.设置bulr 触发校验方法

 <input  data-v-7f5e281c="" @blur="validateForm1" v-model="user.password"/>

//处理表单校验
    validateForm1(){

        if (!this.user.account){
            this.isShowRoles1=true;
            document.getElementById('phone').classList.add('container_error')
        }else{
            this.isShowRoles1=false;
            document.getElementById('phone').classList.remove('container_error')
        }

    },
        validateForm2(){
            if (!this.user.password){

                this.isShowRoles2=true;
                document.getElementById('pwd').classList.add('container_error')
            }else{
                this.isShowRoles2=false;
                document.getElementById('pwd').classList.remove('container_error')
            }
}

通过点解input框找到校验没过的样式

8.设置校验通过因为没有引入UI框架所以需要自己手动实现

<div v-if="isShowRoles2" data-v-7f5e281c="" class="error_label" style="color: rgb(224, 95, 66);">
          <div data-v-7f5e281c="" class="icon">
           <svg data-v-7f5e281c="" width="1em" height="1em" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="font-size: 12px; transform: rotate(0deg);">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7ZM13.5 7C13.5 10.5899 10.5899 13.5 7 13.5C3.41015 13.5 0.5 10.5899 0.5 7C0.5 3.41015 3.41015 0.5 7 0.5C10.5899 0.5 13.5 3.41015 13.5 7ZM6.0995 3.99504C6.04623 3.46229 6.46459 3 7 3C7.53541 3 7.95377 3.46229 7.9005 3.99504L7.54975 7.50248C7.52151 7.78492 7.28384 8 7 8C6.71616 8 6.47849 7.78492 6.45025 7.50249L6.0995 3.99504ZM7 10.9985C6.44706 10.9985 6 10.5554 6 9.99854C6 9.45308 6.44706 8.99854 7 8.99854C7.55294 8.99854 8 9.44172 8 9.99854C8 10.5554 7.55294 10.9985 7 10.9985Z" fill="currentcolor"></path>
           </svg>

9.设置点击事件

 <button  @click="login" class="m-button m-button--lg m-button--highlight" style="width: 100%; padding: 0px;">
         <!----> <span  class="m-button__content">登录</span></button>

 methods:{
             login(){
                 if (!(this.isShowRoles1&&this.isShowRoles2)) {
                axios.post("/logined",this.user).then(res=>{
                    console.log("111111111111111111111")
                })}
             },

后端接收

@RequestMapping(value = "logined",method = RequestMethod.POST)
@ResponseBody
public String login(@RequestBody UserVo userVo){
        System.out.println(userVo.getUsername());
        System.out.println(userVo.getPassword());
        return "success";
    }

讲述表单提交和axios提交的区别

登录功能

1.后端接收到前端传递的值,后端判断数据库是否存在该用户

2.编写查询接口

User getOne(String name);

 <select id="getOne" resultType="com.wolfcode.mybatis.entity.User" parameterType="string">
        select * from user where name=#{name}
 </select>

3.Service层

User getUser(String name);
@Override
public User getUser(String name) {
        return userMapper.getOne(name);
}

4.controller

 //查询当前用户是否存在于数据库中
        User user = userService.getUser(userVo.getUsername());
        if (user==null){
            System.out.println("======================");
            return "fail";
        }

5.引入MD5util 对比密码是否一致

 @RequestMapping(value = "logined",method = RequestMethod.POST)
    @ResponseBody
    public String login(@RequestBody UserVo userVo, HttpSession session){

        //查询当前用户是否存在于数据库中
        User user = userService.getUser(userVo.getUsername());
        if (user==null){
            System.out.println("======================");
            return "fail";
        }
        //若存在则加密password跟数据库对比
        String md5 = MD5Util.md5(userVo.getPassword());
        if(user.getPassword().equals(md5)){
            session.setAttribute("SESSION_USER",user);
            return  "success";
        }
        System.out.println(userVo.getUsername());
        System.out.println(userVo.getPassword());
        return "fail";
    }

账号密码验证成功之后跳转到页面

login(){
       axios.post("/logined",this.user).then(res=>{
       if (res.data == "success") {
          window.location.href = "/index";
       } else {
          alert("账户或密码不正确");
         }
}

创建index页面,并且跳转

@RequestMapping("index")
public String index(){
        return "index";
}

SpringBoot快速入门