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

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

拿一個(gè)項(xiàng)目看看：登錄進(jìn)去之后看到了一個(gè)初始頁面

?

?右上角點(diǎn)注銷：可以退出頁面

?1、看一下我們功能菜單項(xiàng)

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

?1.2 帶條件查詢效果

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

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

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

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

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

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

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

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

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

?5.1 下載：下載vue-admin-template，這個(gè)東西是啥：后臺(tái)前端解決方案?

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

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

源碼：https://gitee.com/green_vegetables/x-admin-project.git
素材：https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取碼：up4c
項(xiàng)目概述筆記：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 我下這個(gè)版本：

?5.4 接下來項(xiàng)目初始化：

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

?5.5 框架一覽

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

?

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

?

?前后端有個(gè)對(duì)接標(biāo)準(zhǔn)，如果你返回的不是兩萬，認(rèn)定你是失敗的

5.7視圖組件

?

?

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

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

?5.10 需要那些依賴

?6、安裝依賴：

?6.1 npm install 一下

?6.2 把項(xiàng)目運(yùn)行一下,npm run dev

?6.3 項(xiàng)目部署成功了，默認(rèn)部署在9528這個(gè)端口上

?

?6.4 簡(jiǎn)單的淘寶布局

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

?

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

?6.6.1 修改一下端口

?不處理，多寫個(gè)空格都報(bào)語法錯(cuò)誤

?改成false

?

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

?

?

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

?

?

?

?其他的，這個(gè)刪掉

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

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

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

?把他改成首頁

?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 校驗(yàn)提示刪掉

?7.8 密碼校驗(yàn)我們可以修改?，暫時(shí)我們不動(dòng)

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

?7.10 修改后的樣子

?8、給登錄頁面加一個(gè)背景圖

?8.1 點(diǎn)一下頁面看一下提示，在組件中找到這個(gè)提示器，對(duì)他進(jìn)行修改

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

8.3 剛才的大組件就是他

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

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

?

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

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

?效果

8.6 這里我想讓他下來一點(diǎn)：

?

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

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

?

?8.9 給他加一個(gè)背景顏色

?

?8.10 圓角設(shè)置

?8.11 給他加一個(gè)透明度

?

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

?

?

?

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

?

?

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

?

?

?9.2 實(shí)例

?9.3?

?

?10、前端菜單初始化

?

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

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

?10.3 新建textVue組件

?10.4 路由配置文件

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

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

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

?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、點(diǎn)一下快捷導(dǎo)航

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

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

?

?12.3 找到這個(gè)文件

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

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

?

?12.6定義一下計(jì)算屬性

?

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

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

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

?

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

?

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

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

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

?12.14 引用一下這個(gè)tagView這個(gè)文件

?

?

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

?

?把他放到該位置：

?

?12.16 使用一下該組件

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

?

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

?13.2 Ctrl + D（可能快捷鍵是這個(gè)，將項(xiàng)目重啟一下）

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

?13.4 把雙冒號(hào)替換成 V-什么什么

?：：v-deep

13.5 用鼠標(biāo)點(diǎn)一下這個(gè)文件

?

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

13.6 最終效果就是有選項(xiàng)卡了，方便性就更好了

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

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

?

?首頁上加一個(gè)屬性

?首頁不能加X了?

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

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

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

?14.3 我們點(diǎn)擊登錄，同時(shí)摁住F12,看一下我們會(huì)發(fā)出那些請(qǐng)求

?14.4 點(diǎn)了登錄之后，他做了兩件事，一個(gè)發(fā)了login請(qǐng)求，一個(gè)做了info請(qǐng)求

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

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

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

?

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

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

?

?

?

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

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

15.2 我們登錄還有一個(gè)接口，點(diǎn)一下注銷

15.3 注銷點(diǎn)了之后，也會(huì)發(fā)出請(qǐng)求，把token給帶過去

?15.4 我們后臺(tái)拿到token之后，就可以返回給前端，給他返回一個(gè)success的請(qǐng)求

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

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

?

?