配套視頻地址：https://www.bilibili.com/video/BV1dG4y1T7yp/

如果您需要原版筆記，請up喝口水，可以上我的淘寶小店 青菜開發(fā)資料 購買，或點擊下方鏈接直接購買：
源碼+PDF版本筆記
源碼+原始MD版本筆記

感謝支持！

前端筆記

1. node環(huán)境

官網(wǎng)：https://nodejs.org

注意，node可以比我稍低，但不要更高

2. 下載vue-admin-template

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

3. 項目初始化

1. 解壓至非中文無空格目錄下

2. vscode打開項目

3. 安裝依賴

   npm config set registry http://registry.npm.taobao.org/
   

   npm install
   

4. 運行測試

   npm run dev
   

5. 配置修改

   

6. 重啟測試

4. 登錄頁修改

1. 中文描述

2. 背景圖

   圖片放在assets里面，然后修改.login-container

   background-image: url('../../assets/bg.jpeg');
   

   登錄框調(diào)整

3. 登錄用戶名取消限制
   

5. 修改右上角用戶下拉菜單

6. 首頁面包屑導航

7. 菜單初始化

1. 在src\views目錄下創(chuàng)建sys模塊目錄、test模塊目錄（充數(shù)用，后續(xù)可用作權限分配測試）

2. 在sys下創(chuàng)建user.vue、role.vue兩個組件文件

   在test下創(chuàng)建test1.vue、test2.vue、test3.vue

3. 修改路由配置

   {
       path: '/sys',
       component: Layout,
       redirect: '/sys/user',
       name: 'sys',
       meta: { title: '系統(tǒng)管理', icon: 'sys' },
       children: [
         {
           path: 'user',
           name: 'user',
           component: () => import('@/views/sys/user'),
           meta: { title: '用戶管理', icon: 'userManage' }
         },
         {
           path: 'role',
           name: 'role',
           component: () => import('@/views/sys/role'),
           meta: { title: '角色管理', icon: 'roleManage' }
         }
       ]
     },
   
     {
       path: '/test',
       component: Layout,
       redirect: '/test/test1',
       name: 'test',
       meta: { title: '功能測試', icon: 'form' },
       children: [
         {
           path: 'test1',
           name: 'test1',
           component: () => import('@/views/test/test1'),
           meta: { title: '測試點一', icon: 'form' }
         },
         {
           path: 'test2',
           name: 'test2',
           component: () => import('@/views/test/test2'),
           meta: { title: '測試點二', icon: 'form' }
         },
         {
           path: 'test3',
           name: 'test3',
           component: () => import('@/views/test/test3'),
           meta: { title: '測試點三', icon: 'form' }
         }
       ]
     }
   

   圖標svg文件可上 https://www.iconfont.cn/ 下載

8. 標簽欄導航

1. @/layout/components/AppMain.vue
   

   <keep-alive :include="cachedViews">
       <router-view :key="key" />
   </keep-alive>
   

   cachedViews() {
       return this.$store.state.tagsView.cachedViews
   }
   

2. 復制vue-element-admin項目中的文件到相應的目錄中

   @/layout/components/TagsView
   @/store/modules/tagsView.js
   @/store/modules/permission.js

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

   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,   
   permission_routes: state => state.permission.routes
   

4. 修改文件@store/index.js
   

5. 修改文件@\layout\index.vue
   

6. 修改文件@layout\components\index.js

   新增

   export { default as TagsView } from './TagsView'
   

7. Affix 固釘
   當在聲明路由是 添加了 Affix 屬性，則當前tag會被固定在 tags-view中（不可被刪除）
   

9. 登錄接口梳理

{"code":20000,"data":{"token":"admin-token"}}

{"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}

{"code":20000,"data":"success"}

10. 對接后端接口

1. 修改 .env.development 中的base api，打包部署的話要修改.env.production

   VUE_APP_BASE_API = 'http://localhost:9999'
   

2. 修改vue.config.js，屏蔽mock請求
   

3. 修改src\api\user.js，將url中的/vue-admin-template去掉
   

4. 測試，預期會出現(xiàn)跨域錯誤

5. 后端做跨域處理測試應該成功，并可在調(diào)試窗口觀察接口調(diào)用情況

11. 用戶管理

預覽

• 用戶查詢

  1. 定義userManager.js

  2. 分頁序號處理

     <template slot-scope="scope">
         {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
     </template>
     

• 用戶新增

  1. 窗口關閉后數(shù)據(jù)還在

     監(jiān)聽close，清理表單

  2. 表單數(shù)據(jù)驗證

     常規(guī)驗證

     自定義驗證

  3. 窗口關閉后上次驗證結(jié)果還在

• 用戶修改

• 用戶刪除文章來源地址http://www.zghlxwxcb.cn/news/detail-796394.html

到了這里，關于【SpringBoot+Vue】全網(wǎng)最簡單但實用的前后端分離項目實戰(zhàn)筆記 - 前端的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！