2021-08-25_vue环境搭建后端学习笔记

20210825_vue环境搭建后端学习笔记

1概述

1.1目录结构

[图片上传失败...(image-a63e4-1648973882635)]

2代码示例

3总结

3.1完整Jar包打包部署

访问地址

http://localhost:8080

3.1.1前后台项目打包

1. 前端项目打包,生成dist文件夹

2. 拷贝文件的内容到后台spring-boot项目static目录下(myvue_back\src\main\resources\static)

3. 后台项目maven package打成一个完整的jar

4. 在服务器上运行后台jar包

java -jar myvue_back.jar
nohup java -jar myvue_back.jar >myxxx.log &

3.1.2前后台调整修改

实现细节:

1. 将vue-router中的路径加上统一的前缀“/api”(自定义)，
2. 然后在springboot项目中自定义过滤器，拦截带“/api”的路径
3. 将所有404请求转发到“/index.html”（即资源路由交给前端Vue框架处理）。

3.1.2.1前端约定增加拦截前缀

不用做任何处理

3.1.2.2后台配置拦截器(实现WebMvcConfigurer)

@Slf4j
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.example.sens.controller")
@PropertySource(value = "classpath:application.yaml", ignoreResourceNotFound = true, encoding = "UTF-8")
public class MvcConfig implements WebMvcConfigurer {
@Bean
    SecurityInterceptor securityInterceptor() {
        return new SecurityInterceptor();
    }


    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 拦截器按照顺序执行
        registry.addInterceptor(securityInterceptor())
                .addPathPatterns("/api/message/**")
                .addPathPatterns("/api/server/**")
                .excludePathPatterns("/api/user/**"); // 用户服务不需拦截
    }

3.1.2.3允许跨域

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("*");
    }

3.1.2.4配置静态资源放行

/**
     * 静态资源(不需要,用默认的即可)
     * 配置请求的解析映射路径
     *
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        // 1.默认不配置也行
        // spring mvc默认的
        // http://localhost:8080/myveuback.jpeg
        registry.addResourceHandler("/**").addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);

        // 2.自定义
        registry.addResourceHandler("mystaticpicture/**")
                .addResourceLocations("file:D:/mystaticpicture");

        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/templates/home/")
                .addResourceLocations("classpath:/robots.txt");
        registry.addResourceHandler("/upload/**")
                .addResourceLocations("file:///" + System.getProperties().getProperty("user.home") + "/sens/upload/");
        registry.addResourceHandler("/favicon.ico")
                .addResourceLocations("classpath:/static/images/favicon.ico");
        registry.addResourceHandler("/backup/**")
                .addResourceLocations("file:///" + System.getProperties().getProperty("user.home") + "/sens/backup/");
    }

3.1.2.5资源路由交给前端Vue框架处理

    /**
     * WebServerFactoryCustomizer
     * 将vue的路由资源交给路由处理
     *
     * @return
     */
    @Bean
    public WebServerFactoryCustomizer webServerFactoryCustomizer() {
        // https://www.cnblogs.com/klyjb/p/14211345.html
        // 将vue-router中的路径加上统一的前缀“/vueXX”(自定义)，然后在springboot项目中自定义过滤器，
        // 拦截带“/vueXX”的路径，将请求转发到“/index.html”（将vue的路由资源交给路由处理）。
        return factory -> {
            // index.html 是全世界公认的吗
            ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
            factory.addErrorPages(error404Page);
        };
    }
}

3.2Nginx前后端分离部署

访问地址

http://localhost:9090/

http://localhost:9090/server

http://localhost:9090/login.html

3.2.1前后台项目打包

1. 前端项目打包,生成dist文件夹

2. 纯后台项目maven package打成一个独立的jar项目

3. 安装Nginx服务器

4. 新建一个文件夹,作为Nginx 的静态资源目录(如:D:\workdirectory\mqexperiment\myvue_front_resource)

5. 配置nginx的静态资源目录,设置前端vue接口访问地址(如:xxx-url)。

6. 拷贝dist文件的内容到Nginx 的静态资源目录

7. 在服务器上运行纯后台jar包(如服务地址为:http://localhost:8080、http://localhost:8080/myback、http://localhost:8080/index)

   java -jar myvue_back.jar
   nohup java -jar myvue_back.jar >myxxx.log &
   

8. 启动Nginx代理服务

   // 1.刷新配置
   nginx -s reload
   // 2.退出
   nginx -s quit
   // 2.退出
   taskkill /f /t /im nginx.exe
   // 3.查看
   tasklist /fi "imagename eq nginx.exe"
   

3.2.2Nginx前端资源部署nginx.conf配置文件修改(7步骤)

D:\workdirectory\mqexperiment\nginx\nginx-1.18.0\conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    # 1.配置后台项目负载均衡服务名:backserver(即upstream的后台请求端口映射)
    upstream backserver {
        # 2.设置对应的后台服务地址server,不要加http://
    server localhost:8080;
    }

    server {
        # 3.配置nginx监听端口
        listen       8090;
        # 4.配置nginx服务名,可以是主机域名
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            # 5.添加本地静态资源,设置location匹配路由规则1及本地静态资源root
            root   D:/workdirectory/mqexperiment/myvue_front_resource;
            index  index.html index.htm;
            #proxy_pass   http://tomcat_server;
        }

        # 5.添加前后台约定的web访问接口前缀标识api,设置location匹配路由规则2及转发路径proxy_pass
        # 设定api的前缀映射转发规则,前缀后面的保持不变
        location /api {
            # 6.api后台接口请求地址,http://localhost:8080/api/
            # http://localhost:8090/api/user/current-user 替换为-->
            # http://localhost:8080/api/user/current-user
              proxy_pass   http://backserver/api/;
        }
        
        #error_page  404              /404.html;
        # 7.资源路由交给前端Vue框架处理
        # 前端请求访问交给vue主路由入口页面index.html(内置$route.path处理)
    error_page  404              /index.html;
        
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

参考

1一个实际的案例介绍Spring Boot + Vue 前后端分离

https://www.cnblogs.com/nele/p/7858581.html

2SpringBoot + Vue Element UI 实现前后端分离

https://liuyanzhao.com/9511.html

https://github.com/saysky/springboot-vue-example/

3Spring boot 和 Vue 前后端分离项目的启动部署（详细版）

https://blog.csdn.net/ltd010/article/details/103499197

4关于Vue实例的生命周期created和mounted的区别

https://segmentfault.com/a/1190000008570622

5.关于Vue实例的生命周期created和mounted的区别

https://segmentfault.com/a/1190000008570622