【项目部署】解决跨域的前后端分离部署
1.启动nginx -->配置开机启动
vim /usr/local/nginx/conf
nginx.conf配置添加跨域
location / {
root /usr/local/nginx/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html?s=$uri&$args;
}
location ^~ /equipment {
proxy_pass http://localhost:8081;
}
2.启动redis
3.跨域控制层方法必须加 @CrossOrigin
4.部署时 vue axios前置请求换成 axios.defaults.baseURL="http://xxx:8081"
5.springboot打包jar包，无需修改启动类（部署tomcat需要）
jdbcURL路径
url: jdbc:mysql://localhost:3306/blog?useUnicode=true&serverTimezone=UTC
pom依赖
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging> /*打包成jar包*/
<build>
<finalName>vueblog</finalName> /*jar包名*/
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration> /*添加此依赖*/
<fork>true</fork>
</configuration>
</plugin>
</plugins>
</build>
6.使用npm run build打包前端dist即可，可不打包成静态资源
7.阿里云上传指令
前端vue
source /etc/profile
jps -ml. |grep dist |xargs. kill
nohup java -jar /usr/local/nginx/dist > nohup.log 2>&1 &
后端springboot
source /etc/profile
jps -ml. |grep shirodemo |xargs. kill
nohup java -jar /myprojectjar/shirodemo.jar > nohup.log 2>&1 &
8.配置一致的数据库名和表，mysql
username: user
password: ******
9.花生壳在centos自启动
10.解决部署保存数据乱码
帮助文档
npm run build
启动：
npm run serve
技术栈
技术栈
前端：vue
elementui
axios
后端：
Spring Boot
MyBatis plus
Shiro
redis
jwt
hibernate validatior
FastDFS
开发步骤：Spring Boot整合MyBatis plus
Spring Boot整合FastDFS，实现文件上传
注册接口开发
MyBatis plus代码生成
整合Shiro+redis，实现会话共享
Shiro整合jwt，进行身份校验
统一结果封装
实体校验
解决跨域问题
登录接口开发
博客接口开发
编辑博客接口开发
个人资料修改接口开发
shiro校验
校验密码--->抛出异常
正常则jwt身份凭证
生成Jwt-->
shiro分为正常和异常状态
异常：过期等，密码错误
正常：注解前置拦截过滤，注解，无权限--异常；有权限--调用接口
创建vue项目选择
router
vuex
安装elementui
cnpm install element-ui --save
src目录下的main.js，引入element-ui依赖。
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)
启动
npm run serve
或者配置启动
安装axios
cnpm install axios --save
基于Vue的markdown编辑器mavon-editor
cnpm install mavon-editor --save
然后在main.js中全局注册：
// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
解析md文件
# 用于解析md文档
cnpm install markdown-it --save
# md样式
cnpm install github-markdown-css
卸载
# 用于解析md文档
cnpm uninstall markdown-it --save
# md样式
cnpm uninstall github-markdown-css
*功能新增
未登录用户不能编辑（目前前端路由拦截不成功20.9.3），完成
增加我的博客并提供查看和修改 ，完成
通过FastDFS实现上传下载
添加个人资料的修改
按时间，按推荐显示博客
主页内容新增轮播展示，摄影作品分享
使用RabbitMQ做消息分发
nginx配置
nginx没有启动,则为 Network Error
再通过反向代理配置
location / {
root /usr/local/nginx/dist;
proxy_pass http://localhost:8081; //配置的后端
index index.html index.htm;
try_files $uri $uri/ /index.html?s=$uri&$args;
}
或者
location / {
root /usr/local/nginx/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html?s=$uri&$args;
}
location ^~ /equipment {
proxy_pass hhttp://localhost:8081;
}
https://zhuanlan.zhihu.com/p/60108135
我的目录
cd /usr/local/nginx/sbin
查看运行端口
ps aux|grep nginx
kill 端口号
1.先停止再启动（推荐）： 对 nginx 进行重启相当于先停止再启动，即先执行停止命令再执行启动命令。如下：
./nginx -s quit
./nginx
重新启动
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
生成snapshot.jar文件,上传到linux服务器，运行后台，java -jar xxx.jar
java -jar vueblog.jar
centos安装redis
一、安装gcc依赖
由于 redis 是用 C 语言开发，安装之前必先确认是否安装 gcc 环境（gcc -v），如果没有安装，执行以下命令进行安装
[root@localhost local]# yum install -y gcc
二、下载并解压安装包
[root@localhost local]# wget http://download.redis.io/releases/redis-5.0.3.tar.gz
[root@localhost local]# tar -zxvf redis-5.0.3.tar.gz
三、cd切换到redis解压目录下，执行编译
[root@localhost local]# cd redis-5.0.3
[root@localhost redis-5.0.3]# make
四、安装并指定安装目录
[root@localhost redis-5.0.3]# make install PREFIX=/usr/local/redis
五、启动服务
5.1前台启动
[root@localhost redis-5.0.3]# cd /usr/local/redis/bin/
[root@localhost bin]# ./redis-server
5.2后台启动
从 redis 的源码目录中复制 redis.conf 到 redis 的安装目录
[root@localhost bin]# cp /usr/local/redis-5.0.3/redis.conf /usr/local/redis/bin/
修改 redis.conf 文件，把 daemonize no 改为 daemonize yes
[root@localhost bin]# vi redis.conf
后台启动
查看启动端口
ps -ef |grep redis
[root@localhost bin]# ./redis-server redis.conf
六、设置开机启动
添加开机启动服务
[root@localhost bin]# vi /etc/systemd/system/redis.service
复制粘贴以下内容：
[Unit] Description=redis-server After=network.target
[Service] Type=forking ExecStart=/usr/local/redis/bin/redis-server /usr/local/redis/bin/redis.conf PrivateTmp=true
[Install] WantedBy=multi-user.target
注意：ExecStart配置成自己的路径
设置开机启动
[root@localhost bin]# systemctl daemon-reload
[root@localhost bin]# systemctl start redis.service
[root@localhost bin]# systemctl enable redis.service
创建 redis 命令软链接
[root@localhost ~]# ln -s /usr/local/redis/bin/redis-cli /usr/bin/redis
测试 redis
服务操作命令
systemctl start redis.service #启动redis服务
systemctl stop redis.service #停止redis服务
systemctl restart redis.service #重新启动服务
systemctl status redis.service #查看服务当前状态
systemctl enable redis.service #设置开机自启动
systemctl disable redis.service #停止开机自启动
跨域拦截
vue+已拦截跨源请求：同源策略禁止读取位于 http://192.168.43.168:8080/category/list 的远程资源。CORS 头缺少 'Access-Control-Allow
vue访问Java后台时候出现
@CrossOrigin 加一个这个注解就可以
@RequestMapping("/list")
@CrossOrigin
public PagedResult<Category> getlist(@RequestParam(value = "pageNum",defaultValue = "1") int pageNum,@RequestParam(value = "pageSize",defaultValue = "10") int pageSize){
PagedResult<Category> categoryPagedResulte=categoryService.getList(pageNum,pageSize);
return categoryPagedResulte;
}
vue配置axios 跨域
import axios from 'axios'
Vue.prototype.$ajax = axios
// Vue.prototype.$ajax = axios
Vue.config.productionTip = false
// axios 配置
axios.defaults.timeout = 5000;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// axios.defaults.headers.post['Content-Type'] = 'json';
// axios.defaults.baseURL = 'http://localhost:8080/项目名/';
axios.defaults.baseURL = 'http://192.168.43.168:8080/';
- 点赞
- 收藏
- 关注作者
评论（0）