【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端

配套视频地址：https://www.bilibili.com/video/BV1dG4y1T7yp/

如果您需要原版笔记，请up喝口水，可以上我的淘宝小店 青菜开发资料 购买，或点击下方链接直接购买：
源码+PDF版本笔记
源码+原始MD版本笔记

感谢支持！

前端笔记

1. node环境

官网：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/
   • 1
   npm install
   • 1

4. 运行测试

   npm run dev
   • 1

5. 配置修改

   

6. 重启测试

4. 登录页修改

1. 中文描述

2. 背景图

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

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

   登录框调整

3. 登录用户名取消限制
   

5. 修改右上角用户下拉菜单

6. 首页面包屑导航

7. 菜单初始化

1. 在src\views目录下创建sys模块目录、test模块目录（充数用，后续可用作权限分配测试）

2. 在sys下创建user.vue、role.vue两个组件文件

   在test下创建test1.vue、test2.vue、test3.vue

3. 修改路由配置

   { path: '/sys', component: Layout, redirect: '/sys/user', name: 'sys', meta: { title: '系统管理', 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' } } ] }
   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31
   • 32
   • 33
   • 34
   • 35
   • 36
   • 37
   • 38
   • 39
   • 40
   • 41
   • 42
   • 43
   • 44
   • 45
   • 46
   • 47
   • 48
   • 49

   图标svg文件可上 https://www.iconfont.cn/ 下载

8. 标签栏导航

1. @/layout/components/AppMain.vue
   

   <keep-alive :include="cachedViews"> <router-view :key="key" /> keep-alive>
   • 1
   • 2
   • 3
   cachedViews() { return this.$store.state.tagsView.cachedViews }
   • 1
   • 2
   • 3

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
   • 1
   • 2
   • 3

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

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

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

   新增

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

7. Affix 固钉
   当在声明路由是 添加了 Affix 属性，则当前tag会被固定在 tags-view中（不可被删除）
   

9. 登录接口梳理

• 1

• 1

• 1

10. 对接后端接口

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

   VUE_APP_BASE_API = 'http://localhost:9999'
   • 1

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

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

4. 测试，预期会出现跨域错误

5. 后端做跨域处理测试应该成功，并可在调试窗口观察接口调用情况

11. 用户管理

预览

• 用户查询

  1. 定义userManager.js

  2. 分页序号处理

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

• 用户新增

  1. 窗口关闭后数据还在

     监听close，清理表单

  2. 表单数据验证

     常规验证

     自定义验证

  3. 窗口关闭后上次验证结果还在

• 用户修改

• 用户删除