学习SpringBoot+Vue全栈开发实战

学习springboot+vue全栈开发.pdf资料记录

生活不易，唯有努力

7462人浏览 · 2020-05-12 16:48:59

生活不易，唯有努力 · 2020-05-12 16:48:59 发布

一.springboot框架目录结构

阅读《Spring Boot+Vue全栈开发实践》王松著，阅读摘要笔记。

src/main/java：主程序入口 Application，可以通过直接运行该类来启动 Spring Boot应用
src/main/resources：配置目录，该目录用来存放应用的一些配置信息，比如应用名、服务端口、数据库配置等。
- 由于我们应用了Web模块，因此产生了 static目录与templates目录，
  - 前者用于存放静态资源，如图片、CSS、JavaScript等；
  - 后者用于存放Web页面的模板文件。
src/test：单元测试目录，生成的 ApplicationTests 通过 JUnit4实现，可以直接用运行 Spring Boot应用的测试。
application.properties/application.yml 用于存放程序的各种依赖模块的配置信息，比如服务端口，数据库连接配置等

代码层的结构

根目录：com.springboot
- 工程启动类(ApplicationServer.java)置于com.springboot.build包下
- 实体类(domain)置于com.springboot.domain
- 数据访问层(Dao)置于com.springboot.repository
- 数据服务层(Service)置于com,springboot.service,数据服务的实现接口(serviceImpl)至于com.springboot.service.impl
- 前端控制器(Controller)置于com.springboot.controller.
- 工具类(utils)置于com.springboot.utils
- 常量接口类(constant)置于com.springboot.constant
- 配置信息类(config)置于com.springboot.config
- 数据传输类(vo)置于com.springboot.vo

资源文件的结构

根目录:src/main/resources
- 配置文件(.properties/.json等)置于config文件夹下
- 国际化(i18n))置于i18n文件夹下
- spring.xml置于META-INF/spring文件夹下
- 页面以及js/css/image等置于static文件夹下的各自文件下
根目录：src.main.java
- 工程启动类(Application.java)：置于com.cy.project包下或者com.cy.project.app包下
- 实体类(domain)：置于com.cy.project.domain
- 数据访问层(Dao)：置于com.cy.project.repository（dao）
- 数据服务层(Service)：置于com.cy.project.service
- 数据服务接口的实现(serviceImpl)：同样置于com.cy.project.service或者置于com.cy.project.service.impl
- 前端控制器(Controller)：置于com.cy.project.controller
- 工具类(utils)：置于com.cy.project.utils
- 常量接口类(constant)：置于com.cy.project.constant
- 配置信息类(config)：置于com.cy.project.config
资源文件：src.main.resources
- 页面以及js/css/image等置于static文件夹下的各自文件下
- 使用模版相关页面等置于templates文件夹下的各自文件下

命名包名目录的方式 :com.公司名的简写.项目的名字.业务模块名

springboot 提供了一个解决方案吧，可以先不关心如何配置，可以快速的启动开发，进行业务逻辑编写，各种需要的技术，加入 starter 就配置好了，直接使用，可以说追求开箱即用的效果吧

阅读《Spring Boot+Vue全栈开发实践》王松著，阅读摘要笔记。

第一章入门

1.1 Spring风云再起

Spring为企业级Java开发提供了一种相对简单的方法，通过 依赖注入 和 面向切面编程，用简单的Java对象实现EJB的功能。

1.2 Spring Boot精要

Spring Boot将很多魔法带入了Spring应用程序的开发之中，其中最重要的是下面四个：

自动配置：针对很多Spring应用程序常见的应用功能，Spring Boot能自动提供相关配置。

起步依赖：Spring Boot需要什么功能，它就能引入需要的库。

命令行界面：这是Spring Boot的可选特性，借此你只需要写代码就能完成完整的应用程序，无需传统项目构建。

ACctuator：让你能够深入运行中的Spring Boot应用程序，一探究竟。

1.3 Spring Boot入门

从根本上来说，Spring Boot的项目只是普通的Spring项目。

构建Spring Boot项目 ：

使用 Spring Initializr 构建，用浏览器打开 https://start.spring.io/，可以看到：

在IDEA里生成springboot项目

1.4 Spring Boot项目配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.7.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>org.amengzhu</groupId>
    <artifactId>chapter2</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>chapter2</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

在 Spring Boot 中有很多的Starter，主要为第三方库提供自动配置。

1.5 Spring Boot 启动类

package org.amengzhu.chapter2;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Chapter2Application {
    public static void main(String[] args) {
        SpringApplication.run(Chapter2Application.class, args);
    }
}

一般我们使用 @Spring BootApplication，代替@EnableAutoConfiguration 和 @ComponentScan。

1.6 Spring Boot 自定义类

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello(){
        return "hello spring boot";
    }
}

提供了一个（“/hello”）接口，进行访问。

1.7 Spring Boot 项目启动

1.7.1 使用Maven命令启动

mvn spring-boot:run

1.7.2 直接运行main方法

1.7.3 打包启动

Spring Boot应用也可以直接打成 jar 包运行，需要添加一个plugin 到 pom.xml文件中，

1  <build>
2         <plugins>
3             <plugin>
4                 <groupId>org.springframework.boot</groupId>
5                 <artifactId>spring-boot-maven-plugin</artifactId>
6             </plugin>
7         </plugins>
8     </build>

然后运行mvn命令进行打包，代码如下：

mvn package

运行

二.Springboot基础配置

2.1定制 banner (骚操作)

在 resources 中创建一个 banner.txt 文件，在里面输入你想要出现的 banner内容，在启动项目，就可以看到你输入的内容在Console中出现
我们还可以用几个在线网站提供艺术字显示的：
将在线提供的文字复制到banner.txt 中就行了，重新启动项目

2.3 类型安全配置属性

类型安全配置属性（Type-safe Configuration Properties）
- 功能：可以更加方便地将配置文件中的数据注入Bean中。
- 我们在application.properties中添加配置
- 将配置数据注入到这个Bean中：
代码中的@ConfigurationProperties(prefix="xxx")，这个"xxx"可以是上面配置的org，org1，org2，
- 格式：小写字母-数字字符，可以用"-"相连也可以不用，并且必须以字母开头
最后我们在创建一个 BookController 进行简单的测试
启动项目。访问自己定的路径。
- 可能访问到会对中文进行转码，变成乱码。
- 方法一、我们可以在application.properties中添加下面的一段配置：

#设置spring-boot 编码格式
server.tomcat.uri-encoding=UTF-8
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
spring.http.encoding.force=true
spring.messages.encoding=UTF-8

方法二、我们直接在Settings中进行一定的配置
再启动项目，进行访问

2.4 Profile

开发者在项目发布之前，一般需要频繁地在开发环境、测试环境以及生产环境之间进行切换，这个时候大量的配置需要频繁更改，例如数据库配置、redis配置、mongodb配置、jms配置等。频繁修改带来了巨大的工作量，Spring对此提供了解决方案（＠Profile注解）, Spring Boot则更进一步提供了更加简洁的解决方案，SpringBoot中约定的不同环境下配置文件名称规则为application-{profile} .properties, profile占位符表示当前环境的名称，具体配置步骤如下：

application-dev.properties：开发环境中的配置；
application-prod.properties：生产环境中的配置；

在 resources中创建 application-dev.properties 和 application-prod.properties两个文件。

在application-dev.properties中写入：

 server.port=8090

在application-prod.properties中写入：

 server.port=8085

然后回到我们的application.properties中进行配置：

 spring.profiles.active=dev

备注：这个表示使用application-dev.properties配置文件启动项目，若将dev 改成 prod，则表示用application-prod.properties启动项目。启动成功就可以通过相应的端口进行访问。

注：如果我们在application.properties中原先配置过了 server.port=8081 的话，会将这个直接覆盖

三.Springboot整合视图层技术

1.简介

在目前的企级应用开发中前后端分离是趋势，但是视图层技术还占有一席之 Spring Boot 对视图层技术提供了很好的支持，官方推荐使用的模板引擎是 Thymeleaf 不过像 FreeMarker 也支持， JSP 技术在这里并不推荐使用。

下面分别向读者介绍 Spring Boot 整合 Thymeleaf， FreeMarker 两种视图层技术

2.整合 Thymeleaf

概念
- java新一代的模板引擎，支持html原型，可以让前端工程师直接浏览器查看样式，也可以支持后端工程师结合真实数据查看效果

配置

SpringBoot整合Thymeleaf主要可通过如下步骤：

1.创建工程，添加侬赖

新建一个SpringBoot工程，然后添加spring-boot-starter-web和spring-boot-starter-thymeleaf依赖
- 配置thymeleaf

配置thymeleaf

ctrl+shift+r全局搜索ThymeleafAutoConfiguration类，这是springboot为thymeleaf提供的配置类。
而相关配置属性在ThymeleafProperties这个类中

修改thymeleaf的默认配置(在application.properties)
部分常见配置

# 是否开启缓存，开发时可设置成false,默认是true
spring.thymeleaf.cache=true
# 检查模板是否存在，默认为true
spring.thymeleaf.check-template=true
# 检查模板位置是否存在，默认为true
spring.thymeleaf.check-template-location=true
# 模板文件编码
spring.thymeleaf.encoding=UTF-8
# 模板文件位置
spring.thymeleaf.prefix=classpath:/templates
# Content-Type配置
spring.thymeleaf.servlet.content-type=text/html
# 模板文件后缀
spring.thymeleaf.suffix=.html

springboot启动类，使用组合注解

配置控制器

实体类

Controller类

package syan.www.chapter3.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
import syan.www.chapter3.bean.Book;

import java.util.ArrayList;
import java.util.List;
// 创建Book实体类，承载返回数据

@Controller
public class BookController {
    @GetMapping("/books")
    public ModelAndView books(){
        List<Book> books = new ArrayList<>();
        Book bl = new Book();
        bl.setId(1);
        bl.setAuthor("罗贯中");
        bl.setName("三国演义");

        Book b2 = new Book() ;
        b2.setId(2);
        b2.setAuthor("曹雪芹");
        b2. setName("红楼梦");
        books.add (bl);
        books.add(b2);
// 以上构建返回数据

// 创建返回ModelAndView，设直视图名为books，返回数据为所创建的List集合
        ModelAndView mv =new ModelAndView();
        mv.addObject("books",books);
        mv. setViewName("books");
        return mv;
    }
}

创建模板

在resource/templates文件夹，创建books.html
注意:第二行导入thymeleaf的名称空间

<!DOCTYPE html>
<!--导入η1严neleaf的名称空间。-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>图书编号</td>
            <td>图书名称</td>
            <td>图书作者</td>
        </tr>
        <!--Thymeleaf中通过th:each进行集合追历，通过th:text展示数据。-->
        <tr th:each="book:${books}">
            <td th:text="${book.id}"></td>
            <td th:text="${book.name}"></td>
            <td th:text="${book.author}"></td>
        </tr>
    </table>
</body>
</html>

第四章 Spring Boot整合Web开发

4.1 返回JSON数据

4.1.1 默认实现

Json是目前主流的前后端数据传输方式，SpringMVC中使用消息转化器HttpMessageConverter对JSON的转换提供了很好的支持，在SpringBoot中对相关配置做了进一步简化

新建springboot项目添加 spring web 依赖
- 这个依赖中默认加入了jacjson-databind作为JSON处理器，此时不需要添加额外的Json处理器就可以返回json了

新建包bean,在包下创建实体类book，写入代码如下：提供共有的get/set方法

package org.syan.chapter041.bean;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Book {
    private String name;
    private String author;
    @JsonIgnore
    // 字段被过滤掉
    private Float price;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date publicationDate;
}

新建包controller,在包下创建实体类BookController，写入代码如下：

package org.syan.chapter041.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.syan.chapter041.bean.Book;

import java.util.Date;

@Controller
public class BookController {

    @GetMapping("/book")
    @ResponseBody
    public Book book(){
        Book book = new Book();
        book.setAuthor("李超");
        book.setName("springboot");
        book.setPrice(30f);
        book.setPublicationDate(new Date());
        return book;
    }
}

运行项目，在浏览器中输入http://localhost:8080/book
- 这是Springboot自带的处理方式，如果采用这种方式，对于字段忽略，日期格式化等都可以使用注解实现。
  Spring中默认提供的MappingJackson2HttpMessageConverter去实现json转换的

4.1.2 自定义转换器

常见的JSON处理器除了jackson-databind之外，还有Gson和fastjson，这里针对常见用法分别举例
1.使用Gson

Gson是Google的一个开源JSON解析框架。

使用Gson，需要先除去默认的jackson-databind时，然后加入Gson依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>com.fasterxml.jackson.core</groupId>
                    <artifactId>jackson-databind</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>

　　SpringBoot中默认提供了Gson的自动转换类GsonHttpMessageConverterConfiguration，因此可以像使用jackson-databind那样直接使用Gson，但是在Gson进行转换时，如果想对日期数据进行格式化，还需要自定义HttpMessageConverter。

创建 GsonConfig 类

package org.syan.chapter041.bean;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.json.GsonHttpMessageConverter;

import java.lang.reflect.Modifier;

@Configuration
public class GsonConfig {
   @Bean
    GsonHttpMessageConverter gsonHttpMessageConverter(){
       GsonHttpMessageConverter converter = new GsonHttpMessageConverter();
       GsonBuilder builder = new GsonBuilder();
       // 设置GSon解析式日期的格式
       builder.setDateFormat("yyyy-MM-dd");
       // 设置GSon解析时修饰符为protected的字段时过滤掉它
       builder.excludeFieldsWithModifiers(Modifier.PROTECTED);
       // 创建GSon 对象放入GSonHttpMessageConverter的实例并且返回converter
       Gson gson = new Gson();
       converter.setGson(gson);
       return converter;
   }
}

此时，将Book类中的price字段的修饰符改为protected，代码如下：

package org.syan.chapter041.bean;

import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.Date;

public class Book {
    private String name;
    private String author;
    @JsonIgnore
    // 字段被过滤掉
    protected Float price;
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date publicationDate;
}

启动项目类,在浏览器中输入http://localhost:8080/book

2.使用fastjson

fastjson是阿里巴巴的一个开源JSON解析框架，是目前JSON解析速度最快的开源框架，可以集成到SpringBoot中，不同于Gson，fastjson继承后并不能立即使用，还需要开发者提供HttpMessageConverter后才可以使用。

集成fastjson的步骤如下：

首先除去jackson-databind依赖，引入fastjson依赖：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>com.fasterxml.jackson.core</groupId>
                    <artifactId>jackson-databind</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

然后配置fastjson的HttpMessageConverter

package org.syan.chapter041.bean;

import com.alibaba.fastjson.serializer.SerializerFeature;
import com.alibaba.fastjson.support.config.FastJsonConfig;
import com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.nio.charset.Charset;

@Configuration
public class MyFastJsonConfig {
    @Bean
    FastJsonHttpMessageConverter fastJsonHttpMessageConverter(){
        FastJsonHttpMessageConverter converter = new FastJsonHttpMessageConverter();
        FastJsonConfig config = new FastJsonConfig();
        // 设置json解析中一些细节，日期格式，数据编码
        config.setDateFormat("yyyy-MM-dd");
        config.setCharset(Charset.forName("UTF-8"));
        //是否在生成的Json中输出类名
        //是否输出value为null的数据
        //生成的json格式化
        //空集合输出[]而非null
        //空字符串输出“”而非null等配置
        config.setSerializerFeatures(
                SerializerFeature.WriteClassName,
                SerializerFeature.WriteMapNullValue,
                SerializerFeature.PrettyFormat,
                SerializerFeature.WriteNullListAsEmpty,
                SerializerFeature.WriteNullStringAsEmpty
        );
        converter.setFastJsonConfig(config);
        return converter;
    }
}

响应编码格式设置
- MyFastJsonConfig配置完成后，还需要配置一下响应编码，否则返回的JSON中文会乱码
- 在application. properties中添加如下配置：
```
spring.http.encoding.force-response = true
```
接下来提供BookController进行测试。
BookController和上一小节一致，运行成功后，在浏览器中输入“http://localhost:8080/book”，即可看到运行结果
补充----自定义配置

对于FastJsonHtψMessageConverter的配置，除了上面这种方式之外，还有另一种方式。

在SpringBoot项目中，当开发者引入spring-boot-starter-web依赖之后，该依赖又依赖了spring-boot-autoconfigure，在这个自动化配置中，有一个WebMvcAutoConfiguration类提供了对Spring MVC最基本的配置，如果某一项自动化配置不满足开发需求，开发者可以针对该项自定义配置，只需要实现WebMvcConfigurer接口即可（在Spring5.0之前是通过继承WebMvcConfigurerAdapter类来实现的），代码如下：

package org.syan.chapter041.bean;

import com.alibaba.fastjson.serializer.SerializerFeature;
import com.alibaba.fastjson.support.config.FastJsonConfig;
import com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.nio.charset.Charset;
import java.util.List;


@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {

    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        FastJsonHttpMessageConverter converter = new FastJsonHttpMessageConverter();
        FastJsonConfig config = new FastJsonConfig();
        config.setDateFormat("yyyy-DD-mm");
        config.setCharset(Charset.forName("UTF-8"));
        config.setSerializerFeatures(
                SerializerFeature.WriteClassName,
                SerializerFeature.WriteMapNullValue,
                SerializerFeature.PrettyFormat,
                SerializerFeature.WriteNullListAsEmpty,
                SerializerFeature.WriteNullStringAsEmpty
        );
        converter.setFastJsonConfig(config);
        // 将自定义的FastJ sonHttpMessageConverter加入converters中
        converters.add(converter);
    }
}

注意：

如果使用了Gson，也可以采用这种方式配置，但是不推荐。
因为当项目中没有GsonH即Messag巳Converter时，SpringBoot自己会提供一个GsonHtφMessageConverter，此时重写configureMessageConverters方法，参数converters中已经有GsonHttpMessageConverter的实例了，需要替换已有的Gson-httpMessageConverter实例，操作比较麻烦，所以对于Gson,推荐直接提供GsonHttpMessageConverter

4.2静态资源访问

在SpringMVC中，对于静态资源都需要开发者手动配置静态资源过滤,SpringBoot中对此也提供了自动化配置，

可以简化静态资源过滤配置.

补充----静态资源

1.什么是静态资源
- js、css、image、html
2.静态资源映射
- 默认情况下，我们只需要将静态资源放在以下几个目录中就可以直接通过url在浏览器中访问
- /META-INF/resources/
- /resources/
- /static/
- /public/
- 如果这四个目录中有相同的静态资源文件，那么优先访问哪个目录下面的资源？？？？
  - 静态资源的默认访问优先级：/META-INF/resources/>/resources/>/static/>/public/

4.2.1 默认策略

Spring Boot中对于SpringMVC的自动化配置都在WebMvcAutoConfiguration类中，在WebMvcAutoConfiguration类中有一个静态内部类WebMvcAutoConfigurationAdapter，实现了4.1节提到的WebMvcConfigurer接口。WebMvcConfigurer接口中有一个方法addResourceHandlers,是用来配置静态资源过滤的。方法在WebMvcAutoConfigurationAdapter类中得到了实现.

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...