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

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

前端笔记

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/``````npm install
4. 运行测试npm run dev
5. 配置修改
6. 重启测试

4. 登录页修改

1. 中文描述
2. 背景图图片放在assets里面，然后修改.login-containerbackground-image:url('../../assets/bg.jpeg');登录框调整

1. 登录用户名取消限制

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'}}]}图标svg文件可上 https://www.iconfont.cn/ 下载

8. 标签栏导航

1. @/layout/components/AppMain.vue<keep-alive:include="cachedViews"><router-view:key="key"/></keep-alive>``````cachedViews(){returnthis.$store.state.tagsView.cachedViews}
2. 复制vue-element-admin项目中的文件到相应的目录中@/layout/components/TagsView @/store/modules/tagsView.js @/store/modules/permission.js
3. 修改文件@store/getters.jsvisitedViews: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{defaultas TagsView }from'./TagsView'
7. Affix 固钉 当在声明路由是 添加了 Affix 属性，则当前tag会被固定在 tags-view中（不可被删除）

9. 登录接口梳理

接口urlmethod登录/user/loginpost获取用户信息/user/infoget注销/user/logoutpost

{"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.productionVUE_APP_BASE_API='http://localhost:9999'
2. 修改vue.config.js，屏蔽mock请求
3. 修改src\api\user.js，将url中的/vue-admin-template去掉
4. 测试，预期会出现跨域错误
5. 后端做跨域处理测试应该成功，并可在调试窗口观察接口调用情况

11. 用户管理

预览

• 用户查询1. 定义userManager.js2. 分页序号处理<templateslot-scope="scope"> {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}</template>
• 用户新增1. 窗口关闭后数据还在监听close，清理表单2. 表单数据验证常规验证自定义验证3. 窗口关闭后上次验证结果还在
• 用户修改
• 用户删除