Vue + Spring Boot 项目实战笔记

Posted 2021-10-19 a1oyss

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue + Spring Boot 项目实战笔记相关的知识，希望对你有一定的参考价值。

Vue + Spring Boot 项目实战（二）笔记

前端页面开发

设置反向代理

原教程代码：

import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require(\'axios\')
axios.defaults.baseURL = \'http://localhost:8443/api\'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  router,
  components: { App },
  template: \'<App/>\'
})

新版代码：

import Vue from "vue";
import router from \'./router\'
import App from "./App";
import axios from "axios"

axios.defaults.baseURL=\'http://localhost:8443/api\'
Vue.prototype.$axios=axios
Vue.config.productionTip=false

new Vue({
    el:\'#app\',
    router,
    render: h => h(App)
})

首先是要通过npm安装axios，然后就可以直接import

Vue.prototype.$axios=axios

Vue.prototype.$axios=axios这么写的原因是为了让所有组件都可以使用axios，但又不会污染全局作用域，以$开头则只是规范，为了与组件中定义的数据、方法、计算属性区分开。

例如：

Vue.prototype.appName = \'My App\'

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例 property 名！
《Spring Boot+Vue全栈开发实战》读书笔记


        
                
                    
                    写在前面 
嗯，回家处理一些事，所以离职了，之前的公司用开源技术封装了一套自己的低代码平台，所以之前学的spring Boot之类的东西都忘了很多，蹭回家的闲暇时间复习下。
笔记整体以 Spring Boot+Vue全栈开发实战一书为方向，中间穿插一些其他视频(原书作者的视频)的知识点。
嗯，生活加油，这段时间好好休养，笔记在更新中…整装待发 ^ _ ^，加油生活… 
我年青时以为金钱至上,而今年事已迈,发现果真如此 —王尔德 
 
使用XML配置搭建SSM项目 
代码详见：https://github.com/LIRUILONGS/SSM-XML.git 
新建一个maven工程，构造SSM目录结构
 
添加依赖，构建配置文件
 
 SpringMVC是Spring的子容器，所以SpringMVC子容器可以访问Spring父容器，反之则不行。所以Spring的配置文件扫描除了Controller的bean，SpringMVC扫描controller的东西。
  
 
使用 Java配置类搭建SSM项目 
代码详见：https://github.com/LIRUILONGS/SSM-java.git 
@Configuration 注解表示这是一个配置类，在我们这里，这个配置的作用类似于 applicationContext.xml
@ComponentScan 注解表示配置包扫描，里边的属性和 xml 配置中的属性都是一一对应的，useDefaultFilters 表示使用默认的过滤器，然后又除去 Controller 注解，即在 Spring 容器中扫描除了 Controller 之外的其他所有 Bean 。
使用 Java 代码去代替 web.xml 文件，这里会用到 WebApplicationInitializer ，WebInit 的作用类似于 web.xml，这个类需要实现 WebApplicationInitializer 接口，并实现接口中的方法，当项目启动时，onStartup 方法会被自动执行，我们可以在这个方法中做一些项目初始化操作，例如加载 SpringMVC 容器，添加过滤器，添加 Listener、添加 Servlet 等。具体定义如下：
  
 
 注意：
 由于我们在 WebInit 中只是添加了 SpringMVC 的配置，这样项目在启动时只会去加载 SpringMVC 容器，而不会去加载 Spring 容器，如果一定要加载 Spring 容器，需要我们修改 SpringMVC 的配置，在 SpringMVC 配置的包扫描中也去扫描 @Configuration 注解，进而加载 Spring 容器，还有一种方案可以解决这个问题，就是直接在项目中舍弃 Spring 配置，直接将所有配置放到 SpringMVC 的配置中来完成，这个在 SSM 整合时是没有问题的，在实际开发中，较多采用第二种方案，第二种方案，SpringMVC 的配置如下： 
 
 静态资源过滤:重写 addResourceHandlers 方法，在这个方法中配置静态资源过滤，这里我将静态资源放在 resources 目录下，所以资源位置是 classpath:/ ，当然，资源也可以放在 webapp 目录下，此时只需要修改配置中的资源位置即可。如果采用 Java 来配置 SSM 环境，一般来说，可以不必使用 webapp 目录，除非要使用 JSP 做页面模板，否则可以忽略 webapp 目录。
 
 视图解析器
  
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/"/>
    <property name="suffix" value=".jsp"/>
</bean>
 
@Configuration
@ComponentScan(basePackages = "org.javaboy")
public class SpringMVCConfig extends WebMvcConfigurationSupport {
    @Override
    protected void configureViewResolvers(ViewResolverRegistry registry) {
        registry.jsp("/jsp/", ".jsp");
    }
}
 
路径映射:控制器的作用仅仅只是一个跳转，就像上面小节中的控制器，里边没有任何业务逻辑，像这种情况，可以不用定义方法，可以直接通过路径映射来实现页面访问。如果在 XML 中配置路径映射 
<mvc:view-controller path="/hello" view-name="hello" status-code="200"/>
 
这行配置，表示如果用户访问 /hello 这个路径，则直接将名为 hello 的视图返回给用户，并且响应码为 200，这个配置就可以替代 Controller 中的方法。 
@Configuration
@ComponentScan(basePackages = "org.javaboy")
public class SpringMVCConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/hello3").setViewName("hello");
    }
}
 
JSON 配置SpringMVC 可以接收JSON 参数，也可以返回 JSON 参数，这一切依赖于 HttpMessageConverter。 
 
 HttpMessageConverter 可以将一个 JSON 字符串转为 对象，也可以将一个对象转为 JSON 字符串，实际上它的底层还是依赖于具体的 JSON 库。
 所有的 JSON 库要在 SpringMVC 中自动返回或者接收 JSON，都必须提供和自己相关的 HttpMessageConverter 。
 SpringMVC 中，默认提供了 Jackson 和 gson 的 HttpMessageConverter ，分别是：MappingJackson2HttpMessageConverter 和 GsonHttpMessageConverter 。
 正因为如此，我们在 SpringMVC 中，如果要使用 JSON ，对于 jackson 和 gson 我们只需要添加依赖，加完依赖就可以直接使用了。具体的配置是在 AllEncompassingFormHttpMessageConverter 类中完成的。
 如果开发者使用了 fastjson，那么默认情况下，SpringMVC 并没有提供 fastjson 的 HttpMessageConverter ，这个需要我们自己提供，如果是在 XML 配置中，fastjson 除了加依赖，还要显式配置 HttpMessageConverter，如下： 
 
<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>
 
 
第1章Spring Boot入门 
提供一个快速的Spring项目搭建渠道
开箱即用,很少的Spring 配置就能运行一个Java EE项目。
提供了生产级的服务监控方案。
内嵌服务器,可以快速部署。
提供了一系列非功能性的通用配置。
纯Java配置,没有代码生成,也不需要XML配置。 
 
第2章 Spring Boot基础配置 
工程创建的三种方式： 
在线创建
通过 IDE 来创建（IntelliJ IDEA、STS）
通过改造一个普通的 Maven 工程来实现 
2.1不使用spring-boot-starter-parent 
spring-boot-starter-parent主要提供了如下默认配置: 
Java版本默认使用1.8.编码格式
默认使用UTF-8.
提供Dependency Management进行项目依赖的版本管理。
默认的资源过滤与插件配置 
2.2 @Spring BootApplication. 
@Target(ElementType.TYPE)
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Inherited
@SpringBootConfiguration
@EnableAutoConfiguration
@ComponentScan(excludeFilters = { @Filter(type = FilterType.CUSTOM, classes = TypeExcludeFilter.class),
		@Filter(type = FilterType.CUSTOM, classes = AutoConfigurationExcludeFilter.class) })
public @interface SpringBootApplication {
....
 
@Spring BootApplication 是一个组合注解： 
@SpringBootConfiguration原来就是一个@Configuration,所以@Spring BootConfiguration的功能就是表明这是一个配置类。开发者可以在这个类中配置Bean。从这个角度来讲,这个类所扮演的角色有点类似于Spring中applicationContext.xml文件的角色。
第二个注解@EnableAutoConfiguration表示开启自动化配置。 Spring Boot中的自动化配置是非侵入式的,在任意时刻,开发者都可以使用自定义配置代替自动化配置中的某一个配置。
第三个注解@ComponentScan完成包扫描,也是Spring中的功能。由于@ComponentScan注解默认扫描的类都位于当前类所在包的下面,因此建议在实际项目开发中把项目启动类放在根包。 
2.3定制banner 
Spring Boot项目在启动时会打印一个banne
定制网站：http://patorjk.com/software/taag 
@SpringBootApplication
public class SpringBootDemoApplication {

    public static void main(String[] args) {
        SpringApplicationBuilder builder = new SpringApplicationBuilder(SpringBootDemoApplication.class);
        builder.bannerMode(Banner.Mode.OFF).run(args);
    }
}
 
2.4 Web容器配置 
2.4.1 Tomcat配置 
##配置了Web容器的端口号。
server.port=8081  
##配置了当项目出错时跳转去的页面。
server.error.path=/error  
##配置了session失效时间, 30m表示30分钟,如果不写单位,默认单位是秒。由于Tomcat中配置session过期时间以分钟为单位,因此这里单位如果是秒的话,该时间会被转换为一个不超过所配置秒数的最大分钟数,例如这里配置了119,默认单位为秒,则实际session过期时间为1分钟。
server.servlet.session.timeout=30m
##表示项目名称,不配置时默认为/,如果配置了,就要在访问路径中加上配置的路径。
server.servlet.context-path=/  
##表示配置Tomcat请求编码。
server.tomcat.uri-encoding=utf-8
##表示Tomcat最大线程数。
server.tomcat.threads.max=500  
##是一个存放Tomcat运行日志和临时文件的目录,若不配置,则默认使用系统的临时目录。
server.tomcat.basedir=/home/sang/tmp  
##
 
HTTPS的配置： 
 
## 密匙文件
server.ssl.key-store=sang.p12
## 密匙别名
server.ssl.key-alias=tomcathttps
## 就是在cmd命令执行过程中输入的密码
server.ssl.key-store-password=123456
 
Spring Boot不支持同时在配置中启动HTTP和HTTPS,这个时候可以配置请求重定向,将HTTP请求重定向为HTTPS请求。配置方式如下: 
@Configuration
public class TomcatConfig {
    /*
     * @return
     * @Description : TODO 配置一个 TomcatServletWebServerFactory 的Bean，
     * @author Liruilong
     * @date  2021/6/3  11:47
     **/
    @Bean
    TomcatServletWebServerFactory tomcatServletWebServerFactory() {
        TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory(){
            @Override
            protected void postProcessContext(Context context) {
                SecurityConstraint constraint = new SecurityConstraint();
                constraint.setUserConstraint("CONFIDENTIAL");
                SecurityCollection collection = new SecurityCollection();
                collection.addPattern("/*");
                constraint.addCollection(collection);
                context.addConstraint(constraint);
            }
        };
        factory.addAdditionalTomcatConnectors(createTomcatConnector());
        return factory;
    }
    /*
     * @return
     * @Description
     * @author Liruilong
     * @date  2021/6/3  11:45
     **/
    private Connector createTomcatConnector() {
        Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
        connector.setScheme("http");
        connector.setPort(8080);
        connector.setSecure(false);
        connector.setRedirectPort(8081);
        return connector;
    }
}
 
这里首先配置一个TomcatServletWebServerFactory,然后添加一个Tomcat中的Connector (监听8080端口) ,并将请求转发到8081上去。 
2.4.2 Jetty配置 
除了Tomcat外,也可以在Spring Boot中嵌入Jetty,从spring-boot-starter-web中除去默认的Tomcat,然后加入Jetty的依赖即可配置方式如下: 
   <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jetty</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
 
2.4.3 Undertow配置 
Undertow是一个红帽公司开源的Java服务器,具有非常好的性能,在Spring Boot中也得到了很好的支持,配置方式与Jetty类似。 
2.5 Properties配置 
Spring Boot项目中的·application.properties配置文件一共可以出现在如下4个位置:加载的优先级从1到4依次降低 
 
  
 项目根目录下的config文件夹中。
项目根目录下。
classpath 下的config文件夹中。
classpath 下 
 
application.yml配置文件的优先级与上面一致默认情况下, 如果开发者不想使用application.properties作为配置文件名,也可以自己定义。例如,在resources目录下创建一个配置文件app.properties,然后将项目打成jar包,打包成功后,使用如下命令运行:
  
2.6类型安全配置属性. 
Spring提供了@Value注解以及EnvironmentAware接口来将Spring Environment中的数据注入到属性上, Spring Boot对此进一步提出了类型安全配置属性(Type-safe ConfigurationProperties) ,这样即使在数据量非常庞大的情况下,也可以更加方便地将配置文件中的数据注入Bean中.
 
 yml类型配置文件： 
my:
  users:
    - name: 江南一点雨
      address: China
      favorites:
        - 足球
        - 徒步
        - Coding
    - name: sang
      address: GZ
      favorites:
        - 阅读
        - 吉他
 
/**
 * Created by sang on 2018/7/5.
 */
@Component
@ConfigurationProperties(prefix = "my")
public class Users {
    private List<User> users;
}

 
2.7 YAML配置 
YAML是JSON的超集,简洁而强大,是一种专门用来书写配置文件的语言,可以替代application.properties。在创建一个Spring Boot项目时,引入的spring-boot-starter-web依赖间接地引入了snakeyaml依赖, snakeyaml会实现对YAML配置的解析。YAML的使用非常简单,利用缩进来表示层级关系,并且大小写敏感。在Spring Boot项目中使用YAML只需要在resources目录下创建一个application.yml文件即可,然后向application.yml中添加配置: 
server:
  port: 80
  servlet:
    context-path: /chapter02
  tomcat:
    uri-encoding: utf-8

my:
  users:
    - name: 江南一点雨
      address: China
      favorites:
        - 足球
        - 徒步
        - Coding
    - name: sang
      address: GZ
      favorites:
        - 阅读
        - 吉他
 
2.8 Profile 
开发者在项目发布之前,配置需要频繁更改,例如数据库配置、redis配置、mongodb配置、jms配置等。频·繁修改带来了巨大的工作量, Spring对此提供了解决方案(@Profile注解) , Spring Boot则更进一步提供了更加简洁的解决方案, Spring Boot中约定的不同环境下配置文件名称规则为application-{profile}.properties, profile占位符表示当前环境的名称,具体配置步骤如下: 
不同的环境指定不同的配置文件 
spring.profiles.active=dev
 
 
 
第3章Spring Boot整合视图层技术 
Spring Boot官方推荐使用的模板引擎是Thymeleaf,不过像FreeMarker也支持, JSP技术在这里并不推荐使用。下面分别向读者介绍Spring Boot整合Thymeleaf和FreeMarker两种视图层技术。 
3.1整合Thymeleaf 
Thymeleaf是新一代Java模板引擎,类似于Velocity, FreeMarker等传统Java模板引擎。与传统Java模板引擎不同的是, Thymeleaf支持HTML原型,既可以让前端工程师在浏览器中直接打开查看样式,也可以让后端工程师结合真实数据查看显示效果。同时, Spring Boot提供了Thymeleaf自动化配置解决方案,因此在Spring Boot中使用Thymeleaf非常方便。Spring Boot整合Thymeleaf主要可通过如下步骤: 
       <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
 
2．配置Thymeleaf 
Spring Boot为Thymeleaf提供了自动化配置类ThymeleafAutoConfiguration,相关的配置属性在ThymeleatProperties类中, 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
 

 
 官网： https://www.thymeleaf.org 
3.2整合FreeMarke 
FreeMarker是一个非常古老的模板引擎,可以用在Web环境或者非Web环境中。与Thymeleaf不同, FreeMarker需要经过解析才能够在浏览器中展示出来。FreeMarker不仅可以用来配置HTML页面模板,也可以作为电子邮件模板、配置文件模板以及源码模板等。Spring Boot中对FreeMarker整合也提供了很好的支持. 
配置FreeMarker 
Spring Boot对FreeMarker也提供了自动化配置类FreeMarkerAutoConfiguration,相关的配置属性在FreeMarkerProperties 中, 
#HttpServletRequest的属性是否可以覆盖controller中model的同名项
spring.freemarker.allow-request-override=false
#HttpSession的属性是否可以覆盖controller中model的同名项
spring.freemarker.allow-session-override=true
#是否开启缓存
spring.freemarker.cache=fal se
#模板文件编码
spring.freemarker.charset=UTF-8
#是否检查模板位置
spring.freemarker.check-template-location=true
#Content-Type的值
spring.freemarker.content-type=text/html
#是否将HttpServletRequest中的属性添加到Model中
spring.freemarker.expose-request-attributes=false
#是否将HttpSession中的属性添加到Model中
spring.freemarker.expose-session-attributes=true
#模板文件后缀
spring.freemarker.suffix=.ftl
#模板文件位置
spring.freemarker.template-loader-path=classpath:/templates/
 

 
 官网：https://freemarker.apache.org/ 
3.3 整合 JSP 
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
 
package com.liruilong.spring_boot_demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Classname WebMvcConfig
 * @Description TODO
 * @Date 2021/6/4 10:02
 * @Created Li Ruilong
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        registry.jsp("/WEB-INF/jsp/", ".jsp");
    }
}
 
 
第4章 Spring Boot整合Web开发. 
4.1返回JSON数据 
4.1.1 默认实现 
JSON是目前主流的前后端数据传输方式, Spring MVC中使用消息转换器HttpMessageConverter对JSON的转换提供了很好的支持,在Spring Boot中更进一步,对相关配置做了更进一步的简化。默认情况下,当开发者新创建一个Spring Boot项目后,添加Web依赖,
 
 这个依赖中默认加入了jackson-databind作为JSON处理器,此时不需要添加额外的JSON处理器就能返回一段JSON了. 
如果需要频繁地用到@ResponseBody注解,那么可以采用@RestController组合注解代替@Controller和@ResponseBody 
 
 这是Spring Boot自带的处理方式。如果采用这种方式,那么对于字段忽略、日期格式化等常见需求都可以通过注解来解决。这是通过Spring中默认提供的MappingJackson2HttpMessageConverter来实现的.
 HttpMessageConverter ，看名字就知道，这是一个消息转换工具，有两方面的功能： 
 将服务端返回的对象序列化成 JSON 字符串
将前端传来的 JSON 字符串反序列化成 Java 对象
 所有的 JSON 生成都离不开相关的 HttpMessageConverter,SpringMVC 自动配置了Jackson 和 Gson 的 HttpMessageConverter，Spring Boot 中又对此做了自动化配置：
org.springframework.boot.autoconfigure.http.JacksonHttpMessageConvertersConfiguration
org.springframework.boot.autoconfigure.http.GsonHttpMessageConvertersConfiguration 
 所以，如果用户使用 jackson 和 gson 的话，没有其他额外配置，则只需要添加依赖即可。 
 
修改转化器 
添加一个MappingJackson2HttpMessageConverter，由@ConditionalOnMissingBean确定。
 嗯，我们温习一下条件化注解吧 
 
 
 
 
 当然这里我们也可以只定义一个 ObjectMapper 
 
package com.liruilong.spring_boot_demo.config;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;


import java.text.SimpleDateFormat;

/**
 * @Classname WebMvcConfig
 * @Description TODO
 * @Date 2021/6/4 10:02
 * @Created Li Ruilong
 */
@Configuration
public class WebMvcConfig  {
    
    @Bean
    MappingJackson2HttpMessageConverter mappingJackson2CborHttpMessageConverter(){
        return new MappingJackson2HttpMessageConverter(objectMapper());
    }
    
    @Bean
    ObjectMapper objectMapper() {
        ObjectMapper om = new ObjectMapper();
        om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        return om;
    }
    
}
 
4.1.2 自定义转换器 
当然开发者在这里也可以根据实际需求自定义JSON转换器。常见的JSON处理器除了jackson-databind之外,还有Gson和fastison,这里针对常见用法分别举例. 
Gson 
Gson是Google的一个开源JSON解析框架。使用Gson,需要先除去默认的jackson-databind,然后加入Gson依赖 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-json</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <dependency>
            <groupId>以上是关于Vue + Spring Boot 项目实战笔记的主要内容，如果未能解决你的问题，请参考以下文章 
 《Spring Boot+Vue全栈开发实战》读书笔记
 Spring Boot实战笔记-- Spring高级话题（Spring Aware）
 2020最新大厂高频微服务面试总结：Spring-Cloud+Spring-Boot+Dubbo（面试题+笔记+项目实战）
 15 个优秀开源的 Spring Boot 学习项目
 《Spring Boot实战》笔记(目录)
 [读书笔记] Spring boot项目搭建与配置文件