本文章轉載于【SpringBoot+Vue】全網最簡單但實用的前后端分離項目實戰筆記 - 前端_大菜007的博客-CSDN博客
僅用于學習和討論，如有侵權請聯系
源碼：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
數據庫筆記：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
1、寫一個用戶管理頁面
1.1 弄成這樣的布局
?1.2 用戶電話查詢條件
?2、表格，分頁
?2.1 新增按鈕
?2.2? 這些布局結構，我們用的都是element組件
?2.3 設計外觀需要用到element腳手架，這里我們要前往element官網，他里面用到的版本是2.13.2
element官網鏈接：element.eleme.cn/#/zh-CN/component/installation
3、使用ELEMENT組件，可以查閱相關組件用到項目里來
3.1 我們先做一個查詢區域，輸入框，按鈕，以及新增
?4 打開前端，點擊我們user.vue文件
?4.1
5 我在這里寫個輸入框，直接寫輸入框，邊界沒有明顯區域，因此我先給他套一個cart
5.1 我想要Cart 這種樣式
?5.2? 直接把代碼給copy下來
5.3 先套一個el-cart
?5.4 輸入框
?5.5 把他copy過來
6 一定一定要熟悉組件庫，熟悉組件庫，快速開發項目
6.1
7 弄一個圓角按鈕
?7.1 這里的寬度設置的100%。
8 這里的Cart合在一起來，
8.1
9 這里的內邊距怎么設那，這里要點擊摁住F12
9.1
10、我想給這個整體樣式添加
10.1
11、全局樣式在根組件里寫樣式代碼也可以實現
11.1
12 邊距出來了
?12.1
13 給他們輸入輸入框定義寬度
?13.1 給他們定義輸入框
?14、右外邊距
?
?14.1 我想添加一些icon圖標
?14.2? 找到搜索的圖標
?14.3? 把這個名字復制過來
?14.4? 放到項目里的icon屬性就行
?15 增加一個新增的按鈕
?15.1 找到圓形按鈕
?15.2 復制圓形按鈕
16 這個圓形按鈕默認是可以搜的，給他改成plus
?16.1
17 他現在的位置在這里，我希望他的位置在這里
?17.1 這里建議用上element布局的
?17.2? 這里內容組件默認是左對齊，我們只要默認為右對齊就行
18 列，只要加起來等于24就行，分24分欄
18.1
19 把代碼復制過去
?19.1中間內容不需要
?19.2 再來
?19.3 前面這一欄，就是兩個輸入框加一個查詢按鈕
?19.4按鈕放下面，基本布局完成
19.5 對齊屬性，align,默認是左對齊的，這里我要改成右對齊?
19.6 搜索欄順利完成
20、底部放一個Cart標簽，后面放一個表格
?20.1 結果列表
20.2 太近了怎么辦，給他設置一個底部的外邊距
?20.3 底部邊距
?20.4 表格找到官網組件
?20.5 找到帶斑馬紋的表格，復制到指定內容
?
##
21、系統會報錯
21.1
22 定義一個Data放到里面
?22.1 給他修改數據源
?22.2 這里給他定義一個數據源
?22.3 現在不報錯了
23 現在改成我們想要的字段
23.1
24 給他生成一個索引號
24.1
25 改成username,改成#
25.1
26 寬度改成80就行
26.1
27 看一下表里，有哪些字段，有5處標紅的字段?
27.1
28 預覽一下樣式
?28.1效果
29 分頁組件，也找組件庫，這里找完整功能?
29.1
30、將完整分頁復制過去
?
30.1
31、這里的handleSizeChange發生了改變，就會觸發了一件事，先得把方法定義出來
31.1currentPage4 ,我們當前定義的是第幾頁?
31.2 這里給他一個默認值：1，一個初始值10，
32 這里要綁定到pageNo上面去
33 PageSize默認可以顯示多少個
34 效果是這樣
34.1
35 改變默認值以及不寫死
35.1
36total總計務數，這里是后臺傳過來的，我們得定義一個變量
37 這個變量給他定義一下，默認值保存為0
38、基本布局做出來了，但是還有一個問題，total是個英文
?
?38.1
39 英文如何修改，找到我們的main.js,把en改成zh-CN
39.1
40 布局構建成功，F12檢查一下有沒有問題
)
