代碼介紹

前端代碼：https://github.com/Snowstorm0/token-login-vue

后端代碼：https://github.com/Snowstorm0/token-login-spring

使用 Spring+Vue 實(shí)現(xiàn) token 登錄、退出、訪問攔截等功能。

1 部署后端

1.1 生成 jar 包

使用 Idea 的 maven 進(jìn)行打包。

先雙擊 clean，清除其他的包，然后雙擊 package，如下圖所示：

此時(shí)在工程下生成了 target 文件夾，里面有我們的 jar 包：

1.2 部署到服務(wù)器

將 jar 包 token-login-spring-1.0-SNAPSHOT.jar上傳到服務(wù)器，運(yùn)行啟動命令：

java -jar token-login-spring-1.0-SNAPSHOT.jar

即可啟動后端工程。

2 部署前端

2.1 打包

運(yùn)行打包命令：

npm run build

此時(shí)會在項(xiàng)目下生成 dist 文件夾。我們將該文件夾壓縮，上傳服務(wù)器，并解壓。

2.2 安裝 Nginx

Ubuntu 下的安裝命令：

sudo apt-get install nginx

查看安裝路徑：

whereis nginx

顯示：

nginx:
 /usr/sbin/nginx    #主程序
 /usr/lib/nginx #軟件的函數(shù)庫
 /etc/nginx  #存放配置文件
 /usr/share/nginx  #存放靜態(tài)文件
 /usr/share/man/man8/nginx.8.gz  #聯(lián)機(jī)幫助文件

安裝成功。

2.3 配置 Nginx

找到文件/etc/nginx/sites-available/default，修改為可編輯權(quán)限：

sudo  chmod 777 /etc/nginx/sites-available/default

找到root /var/www/html; 這一行，修改為解壓的 dist 文件夾的路徑，如：

root /home/myroot/Desktop/token-login/dist;

重啟nginx：

sudo nginx -s reload

在瀏覽器輸入：http://localhost/#/login，即可看到前端頁面。

審核編輯：湯梓紅