本文章轉(zhuǎn)載于【SpringBoot+Vue】全網(wǎng)最簡單但實用的前后端分離項目實戰(zhàn)筆記 - 前端_大菜007的博客-CSDN博客

僅用于學(xué)習(xí)和討論，如有侵權(quán)請聯(lián)系，將源碼補充寫的更快哦！！！等一會把源碼補一下哦！

拿一個項目看看：登錄進去之后看到了一個初始頁面

?

?右上角點注銷：可以退出頁面

?1、看一下我們功能菜單項

?1.1第一個用戶管理，這里面可以做增刪改查，默認會查出第一頁數(shù)據(jù)，也可以帶條件查詢：

?1.2 帶條件查詢效果

1.3 點一下可以做用戶數(shù)據(jù)的新增：

1.4 數(shù)據(jù)新增的樣子

?1.5 刪除數(shù)據(jù)

?1.6 本次案例使用的技術(shù)：

?2、數(shù)據(jù)庫建表語句，以及初始語句都要整理到一個文件夾里：

?3、自己常要保存文件：筆記，軟件，素材，源碼

?4、實現(xiàn)前后端分離第一件事情，創(chuàng)建好數(shù)據(jù)庫，以及創(chuàng)建好數(shù)據(jù)庫的項目表，設(shè)計項目前提前想好要設(shè)計的表有哪些：

?5、接下來搭建前端項目：（搭建前端項目前，先創(chuàng)建環(huán)境，必須要做）有這些：

先搭建一個node環(huán)境，那個Vue腳手架版本太高不行，有兼容問題，只能比版本低

?5.1 下載：下載vue-admin-template，這個東西是啥：后臺前端解決方案?

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

5.2 版本很多，第一種集成方案：第一種功能特別多，建議用基礎(chǔ)模板，可以后期擴展，如果點不開，可以到該鏈接下查筆記：

源碼：https://gitee.com/green_vegetables/x-admin-project.git
素材：https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取碼：up4c
項目概述筆記：https://blog.csdn.net/m0_37613503/article/details/128961102
數(shù)據(jù)庫筆記：https://blog.csdn.net/m0_37613503/article/details/128961401
前端筆記：https://blog.csdn.net/m0_37613503/article/details/128961447
后端筆記：https://blog.csdn.net/m0_37613503/article/details/128961569

?

?5.3 我下這個版本：

?5.4 接下來項目初始化：

?5.5 找個不帶中文的文件，把那個框架解壓一下：

?5.5 框架一覽

?5.6 幫你做個請求攔截器和響應(yīng)攔截器

?

?5.7? 響應(yīng)攔截器就是我們后端發(fā)請求給前端

?

?前后端有個對接標(biāo)準，如果你返回的不是兩萬，認定你是失敗的

5.7視圖組件

?

?

?5.8 main.js是我們?nèi)肟诘呐渲梦募?/h2>

?5.9生產(chǎn)配置，測試配置，

?5.10 需要那些依賴

?6、安裝依賴：

?6.1 npm install 一下

?6.2 把項目運行一下,npm run dev

?6.3 項目部署成功了，默認部署在9528這個端口上

?

?6.4 簡單的淘寶布局

?6.5 修改一下端口和語法校驗參數(shù)

?

?6.6 我們來修改一下配置：

?6.6.1 修改一下端口

?不處理，多寫個空格都報語法錯誤

?改成false

?

?把模擬服務(wù)給修改掉

?

?

?6.6.2 給他改一下標(biāo)題：

?

?

?

?其他的，這個刪掉

?6.6.3 標(biāo)題改的是哪里：

?就是這個，你想改他，可以用搜索框去搜他

?搜他，我們改他改的是路由里的

?把他改成首頁

?6.6.4 修改之后我們要重新部署一下才行

6.6.5 輸入新的端口，重新改一下

?7、登錄頁面修改，在view下的login中

?

?7.1修改內(nèi)容

?7.2 改成中文

?7.3 找到登錄窗給他改成中文

?7.4 密碼的輸入框給它改成中文的密碼

?7.5 登錄按鈕給他改一下

?7.6 末尾的內(nèi)容

?7.7 校驗提示刪掉

?7.8 密碼校驗我們可以修改?，暫時我們不動

7.9 密碼和初始值要跟數(shù)據(jù)庫里對應(yīng)

?7.10 修改后的樣子

?8、給登錄頁面加一個背景圖

?8.1 點一下頁面看一下提示，在組件中找到這個提示器，對他進行修改

?8.2 找到我們登錄組件index.vue,就是這個?

8.3 剛才的大組件就是他

?8.4 背景顏色是在這里定義的

?8.5 將圖片放到as..文件夾下，給他弄一張背景圖

?

?用background-image:url('xxx')導(dǎo)入背景圖片

?用background-size:100%,可以平鋪

?效果

8.6 這里我想讓他下來一點：

?

?8.7 效果調(diào)試，有點偏：?上下邊距不一樣會出現(xiàn)偏差

8.8 改小之后就發(fā)現(xiàn)出現(xiàn)的問題變小了

?

?8.9 給他加一個背景顏色

?

?8.10 圓角設(shè)置

?8.11 給他加一個透明度

?

?8.12為什么會出現(xiàn)請輸入正確用戶名

?

?

?

?9、導(dǎo)航條組件修改

?

?

?9.1 這里我可能寫一個公司主頁，我可能要鏈接到公司主頁里

?

?

?9.2 實例

?9.3?

?

?10、前端菜單初始化

?

?10.1 新建文件夾，系統(tǒng)管理主要是用戶管理?

10.2 新建user.vue和role.vue軟件

?10.3 新建textVue組件

?10.4 路由配置文件

?這個標(biāo)題就是這個位置

?圖標(biāo)就是文件夾的圖標(biāo)

?10.5 如果你想要用自己圖標(biāo)，打擊svg,點擊右鍵在資源管理器

?10.6 用自己的圖標(biāo)

?變成了我自己的圖標(biāo)了

?

?

?10.7 修改一下用戶標(biāo)題

?10.8 全部修改內(nèi)容

?10.9 修改效果

?10.10 刪掉部分不需要的內(nèi)容，到404前面

?

?10.11 把系統(tǒng)管理部分再寫一遍，復(fù)制

?

11、修改標(biāo)簽欄導(dǎo)航

?用搜索去搜索一下，這里

?

?

?11.1效果

?12、點一下快捷導(dǎo)航

?12.1 這里要到繼承導(dǎo)航里去找

?12.2 第一步找到APPMain.VUE的文件

?

?12.3 找到這個文件

?12.4 把這一行標(biāo)簽給改了

?12.5 復(fù)制剛才的代碼

?

?12.6定義一下計算屬性

?

?12.7 到admin的繼承文件中，把他的配置文件給找到：

?12.8 在我們的素材文件夾中有這些相應(yīng)的文件

?12.9 在我們component問價下將TagsView文件復(fù)制粘貼

?

?12.10 將我們js文件放到store/module文件下：

?

12.11 修改文件@store/getters.js文件

?12.12 放到我們的store的gitee下面文件夾當(dāng)中

?12.13 把他放到我們的全局管理器當(dāng)中

?12.14 引用一下這個tagView這個文件

?

?

?12.15 先導(dǎo)入這個組件，再注冊這個組件，最使用這個組件，復(fù)制getter.js文件

?

?把他放到該位置：

?

?12.16 使用一下該組件

?13.在我們components/index.js文件下做一下導(dǎo)出

?

13.1 找到index這個文件做一下，導(dǎo)出

?13.2 Ctrl + D（可能快捷鍵是這個，將項目重啟一下）

?13.3 bug /deep/ ---這里我要找到這個地方給他換一種寫法

?13.4 把雙冒號替換成 V-什么什么

?：：v-deep

13.5 用鼠標(biāo)點一下這個文件

?

?給他改一下 ，這里也可能跟node版本有問題，升級之后說有問題，這里改完后項目重啟一下ctrl + d

13.6 最終效果就是有選項卡了，方便性就更好了

?13.7 這個首頁上你可以限制他不讓他關(guān)閉

?13.8 如果你想加某個屬性，不讓他關(guān)閉你就可以加一個affix屬性

?

?首頁上加一個屬性

?首頁不能加X了?

?14、登錄接口梳理，就拿這個登錄頁面來說，我們要準備幾個接口，以后關(guān)于接口，你就可以劃分多少功能一個功能有多少接口

14.1 你還得思考接口的路參和返回參是什么樣子的?

?14.2 我們登錄需要三個接口，先按F12

?14.3 我們點擊登錄，同時摁住F12,看一下我們會發(fā)出那些請求

?14.4 點了登錄之后，他做了兩件事，一個發(fā)了login請求，一個做了info請求

?14.5 查看請求參數(shù)-----點一下請求，然后點擊右側(cè)payload就行，這里他把用戶名和密碼發(fā)送過去了。

?14.6 查看他發(fā)送的地址，到瀏覽器的請求頭地址上，這里他發(fā)送的地址moke請求地址

?14.7 看一下他響應(yīng)的結(jié)果也是一個json，這里的流程是傳入用戶名和密碼，然后到后臺，驗證你的用戶名和密碼是否正確，如果正確就生成一個token,返回一個token給前端

?

?14.8 數(shù)據(jù)格式是怎樣的

?14.9看一下info的請求，來將他進行一下對比，這里info添加了參數(shù)，后端需要做的事情是驗證你這個token是否有效。14.10

?

?

?

?15.到j(luò)son.cn網(wǎng)站中進行json.cn格式的轉(zhuǎn)化

15.1 這樣就幫你轉(zhuǎn)了

15.2 我們登錄還有一個接口，點一下注銷

15.3 注銷點了之后，也會發(fā)出請求，把token給帶過去

?15.4 我們后臺拿到token之后，就可以返回給前端，給他返回一個success的請求

15.5 返回一個接口，接口的作用就是返回數(shù)據(jù)，你想到接口，你就應(yīng)該想到接口有哪些數(shù)據(jù)。

?15.6 我們除了要關(guān)注接口還要關(guān)注路參和請求方式，只要再塑造三個接口，實現(xiàn)前端和后端那么他們關(guān)系就打通了，就能夠?qū)崿F(xiàn)前后端分離了。

?

?