【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. 配置修改

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

  6. 重启测试

4. 登录页修改

  1. 中文描述

  2. 背景图

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

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

    登录框调整

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

  1. 登录用户名取消限制
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第3张图片

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

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

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
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第5张图片

    <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
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第6张图片

    visitedViews: state => state.tagsView.visitedViews,
    cachedViews: state => state.tagsView.cachedViews,   
    permission_routes: state => state.permission.routes
    
  4. 修改文件@store/index.js
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第7张图片

  5. 修改文件@\layout\index.vue
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第8张图片

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

    新增

    export { default as TagsView } from './TagsView'
    
  7. Affix 固钉
    当在声明路由是 添加了 Affix 属性,则当前tag会被固定在 tags-view中(不可被删除)
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第9张图片

9. 登录接口梳理

接口 url method
登录 /user/login post
获取用户信息 /user/info get
注销 /user/logout post
{"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去掉
    【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第10张图片

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

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

11. 用户管理

预览
【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_第11张图片

  • 用户查询

    1. 定义userManager.js

    2. 分页序号处理

      <template slot-scope="scope">
          {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
      template>
      
  • 用户新增

    1. 窗口关闭后数据还在

      监听close,清理表单

    2. 表单数据验证

      常规验证

      自定义验证

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

  • 用户修改

  • 用户删除

你可能感兴趣的:(vue.js,前端,spring,boot,elementui)