【項(xiàng)目部署】解決跨域的前后端分離部署

部署步驟

1.啟動(dòng)nginx ? -->配置開機(jī)啟動(dòng)

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.啟動(dòng)redis

3.跨域控制層方法必須加 ?@CrossOrigin

4.部署時(shí) ?vue ?axios前置請(qǐng)求換成 ?axios.defaults.baseURL="http://xxx:8081"

5.springboot打包jar包，無(wú)需修改啟動(dòng)類（部署tomcat需要）

jdbcURL路徑

url:?jdbc:mysql://localhost:3306/blog?useUnicode=true&serverTimezone=UTC

pom依賴

0.0.1-SNAPSHOT

jar ? ? /*打包成jar包*/

vueblog ? /*jar包名*/

org.springframework.boot

spring-boot-maven-plugin

? ? ? ?/*添加此依賴*/

true

6.使用npm run build打包前端dist即可，可不打包成靜態(tài)資源

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.配置一致的數(shù)據(jù)庫(kù)名和表，mysql

username: user

password: ******

9.花生殼在centos自啟動(dòng)

10.解決部署保存數(shù)據(jù)亂碼

幫助文檔

vue啟動(dòng)前：

npm run build

啟動(dòng)：

npm run serve

技術(shù)棧

技術(shù)棧

前端：vue

elementui

axios

后端：

Spring Boot

MyBatis plus

Shiro

redis

jwt

hibernate validatior

FastDFS

開發(fā)步驟：Spring Boot整合MyBatis plus

Spring Boot整合FastDFS，實(shí)現(xiàn)文件上傳

注冊(cè)接口開發(fā)

MyBatis plus代碼生成

整合Shiro+redis，實(shí)現(xiàn)會(huì)話共享

Shiro整合jwt，進(jìn)行身份校驗(yàn)

統(tǒng)一結(jié)果封裝

實(shí)體校驗(yàn)

解決跨域問題

登錄接口開發(fā)

博客接口開發(fā)

編輯博客接口開發(fā)

個(gè)人資料修改接口開發(fā)

shiro校驗(yàn)

校驗(yàn)密碼--->拋出異常

正常則jwt身份憑證

生成Jwt-->

shiro分為正常和異常狀態(tài)

異常：過(guò)期等，密碼錯(cuò)誤

正常：注解前置攔截過(guò)濾，注解，無(wú)權(quán)限--異常；有權(quán)限--調(diào)用接口

創(chuàng)建vue項(xiàng)目選擇

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)

啟動(dòng)

npm run serve

或者配置啟動(dòng)

安裝axios

cnpm?install?axios?--save

基于Vue的markdown編輯器mavon-editor

cnpm?install?mavon-editor?--save

然后在main.js中全局注冊(cè)：

// 全局注冊(cè)

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），完成

增加我的博客并提供查看和修改 ? ?，完成

通過(guò)FastDFS實(shí)現(xiàn)上傳下載

添加個(gè)人資料的修改

按時(shí)間，按推薦顯示博客

主頁(yè)內(nèi)容新增輪播展示，攝影作品分享

使用RabbitMQ做消息分發(fā)

nginx配置

nginx沒有啟動(dòng),則為 ? Network Error

再通過(guò)反向代理配置

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

查看運(yùn)行端口

ps?aux|grep?nginx

kill ?端口號(hào)

1.先停止再啟動(dòng)（推薦）： 對(duì) nginx 進(jìn)行重啟相當(dāng)于先停止再啟動(dòng)，即先執(zhí)行停止命令再執(zhí)行啟動(dòng)命令。如下：

./nginx -s quit

./nginx

重新啟動(dòng)

/usr/local/nginx/sbin/nginx?-c?/usr/local/nginx/conf/nginx.conf

生成snapshot.jar文件,上傳到linux服務(wù)器，運(yùn)行后臺(tái)，java -jar xxx.jar

java -jar vueblog.jar

centos安裝redis

一、安裝gcc依賴

由于 redis 是用 C 語(yǔ)言開發(fā)，安裝之前必先確認(rèn)是否安裝 gcc 環(huán)境（gcc -v），如果沒有安裝，執(zhí)行以下命令進(jìn)行安裝

[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解壓目錄下，執(zhí)行編譯

[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

五、啟動(dòng)服務(wù)

5.1前臺(tái)啟動(dòng)

[root@localhost redis-5.0.3]# cd /usr/local/redis/bin/

[root@localhost bin]# ./redis-server

5.2后臺(tái)啟動(dòng)

從 redis 的源碼目錄中復(fù)制 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

后臺(tái)啟動(dòng)

查看啟動(dòng)端口

ps?-ef?|grep?redis

[root@localhost bin]# ./redis-server redis.conf

六、設(shè)置開機(jī)啟動(dòng)

添加開機(jī)啟動(dòng)服務(wù)

[root@localhost bin]# vi /etc/systemd/system/redis.service

復(fù)制粘貼以下內(nèi)容：

[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配置成自己的路徑

設(shè)置開機(jī)啟動(dòng)

[root@localhost bin]# systemctl daemon-reload

[root@localhost bin]# systemctl start redis.service

[root@localhost bin]# systemctl enable redis.service

創(chuàng)建 redis 命令軟鏈接

[root@localhost ~]# ln -s /usr/local/redis/bin/redis-cli /usr/bin/redis

測(cè)試 redis

服務(wù)操作命令

systemctl start redis.service ?#啟動(dòng)redis服務(wù)

systemctl stop redis.service ?#停止redis服務(wù)

systemctl restart redis.service ?#重新啟動(dòng)服務(wù)

systemctl status redis.service ?#查看服務(wù)當(dāng)前狀態(tài)

systemctl enable redis.service ?#設(shè)置開機(jī)自啟動(dòng)

systemctl disable redis.service ?#停止開機(jī)自啟動(dòng)

跨域攔截

vue+已攔截跨源請(qǐng)求：同源策略禁止讀取位于 http://192.168.43.168:8080/category/list 的遠(yuǎn)程資源。CORS 頭缺少 'Access-Control-Allow

vue訪問Java后臺(tái)時(shí)候出現(xiàn)

@CrossOrigin 加一個(gè)這個(gè)注解就可以

@RequestMapping("/list")

@CrossOrigin

public PagedResult getlist(@RequestParam(value = "pageNum",defaultValue = "1") int pageNum,@RequestParam(value = "pageSize",defaultValue = "10") int pageSize){

PagedResult 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/項(xiàng)目名/';

axios.defaults.baseURL = 'http://192.168.43.168:8080/';

Spring Boot web前端 Spring Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。