20210825_vue环境搭建后端学习笔记
1概述
1.1目录结构
[图片上传失败...(image-a63e4-1648973882635)]
2代码示例
3总结
3.1完整Jar包打包部署
访问地址
http://localhost:8080
3.1.1前后台项目打包
前端项目打包,生成dist文件夹
拷贝文件的内容到后台spring-boot项目static目录下(myvue_back\src\main\resources\static)
后台项目maven package打成一个完整的jar
在服务器上运行后台jar包
java -jar myvue_back.jar
nohup java -jar myvue_back.jar >myxxx.log &
3.1.2前后台调整修改
实现细节:
- 将vue-router中的路径加上统一的前缀“/api”(自定义)，
- 然后在springboot项目中自定义过滤器，拦截带“/api”的路径
- 将所有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前后台项目打包
前端项目打包,生成dist文件夹
纯后台项目maven package打成一个独立的jar项目
安装Nginx服务器
新建一个文件夹,作为Nginx 的静态资源目录(如:D:\workdirectory\mqexperiment\myvue_front_resource)
配置nginx的静态资源目录,设置前端vue接口访问地址(如:xxx-url)。
拷贝dist文件的内容到Nginx 的静态资源目录
-
在服务器上运行纯后台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 & -
启动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