Vue + Spring Boot 项目实战(十七):后台角色、权限与菜单分配

logo


重要链接:
「系列文章目录」

「项目源码(GitHub)」

前言

有感于公司旁边的兰州拉面进化成了兰州料理,咱们的小破项目也被我做了一次品牌升级,虽然并没有什么卵用。

近两年在深圳,发现评价高的店味道不一定好吃,但环境、服务一定ok,过去很火的苍蝇铺子小吃摊逐渐吃不开了。人们的喜好在随经济发展变迁,这种发展变迁其实是有迹可循的,从先发展的地方搬运理念,是一种很常见的赚钱思路。然而现在人人都明白这个事,想做好不那么容易,所以这两年到处在嚷嚷下沉经济、垂直领域。昨天看了一篇分析商业趋势的长文,里面讲“区域崛起与县域经济”下产生的隐性冠军企业,提到全世界 60% 的假发产自我的家乡河南许昌,据说远销非洲大陆,这我还是头一次听说,不知道各位老铁有没有相关需求,要是你们够给力,我就辞职回去当一波靠山吃山的地头蛇。


(韭菜分割线)

这篇文章主要讲在已经实现了菜单和功能访问控制的情况下,如何编写实现 角色、权限、菜单分配 功能的接口与页面,本质是增删改查、表单表格,但以下知识点需要拿出来讲一下:

  • JPA 如何自定义查询语句?
  • 如何使用 element-ui 的树组件?
  • 如何接收并处理没有实体类型对应的数据?
  • Vue 如何不刷新清除路由记录?

这里每一个点讲深了都值得单独写一篇文章,你们要是有分享知识的欲望又苦于没有题材,完全可以从我每篇教程列出来的点里随便挑一个扩充一下,只要排版排到位再起个好题目,肯定会有不少人看。

一、角色、权限分配

角色分配,也就是给用户指定角色。根据我们之前的数据库设计,本质是更新 admin_user_role 表。为了实现这个目的,我们需要进行一系列的开发。

1.用户信息表与行数据获取

首先,我们要有一个组件负责展示查询出来的用户信息,并提供编辑操作的入口。element 的 table 组件提供了表格能用到的很多功能,比如排序、筛选、选择、懒加载等等,用的时候尽管怎么骚怎么来。我反正一直是走简约风格的:
用户信息
这个组件具体展示哪些信息可以根据你的喜好,但是一般来说没人会在这儿展示用户密码吧?而且 Hash 过的密码展示了也没用啊。前端可以控制显示的字段,但最好还是对后端查询的接口做相应的改造,直接不查询相应的内容。

JPA 默认查询出来的就是全量的数据,如果想指定字段,就需要自定义查询语句了。自定义查询语句写在 JpaRepository 类的方法上面,也就是我们的 UserDAO.java 中的 list() 方法:

@Query(value = "select new User(u.id,u.username,u.name,u.phone,u.email,u.enabled) from User u")
List<User> list();

这是 JPQL 的写法,也可以写原生的 SQL 语句,指定 nativeQuery = true 即可。

如果你习惯用 DTO(数据传输对象),也可以直接控制传递给 DTO 的参数。

前端表格示例代码如下:

<el-table
  :data="users"
  stripe>
  <el-table-column
    prop="id"
    label="id"
    width="100">
  </el-table-column>
  <el-table-column
    prop="username"
    label="用户名"
    fit>
  </el-table-column>
  
  ······
  
  <el-table-column
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click="editUser(scope.row)"
        type="text"
        size="small">
        编辑
      </el-button>
      <el-button
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

通过 data 绑定表格对应的数据,并通过 prop 指定列对应的字段。若想对表格里某一行的数据进行操作,就要想办法获取当前的数据。观察 “操作” 一列的代码:

<el-table-column
  label="操作"
  width="120">
  <template slot-scope="scope">
    <el-button
      @click="editUser(scope.row)"
      type="text"
      size="small">
      编辑
    </el-button>
  </template>
</el-table-column>

scope.row 便是点击编辑按钮所获取到的该行的数据。这里实际上利用的是作用域插槽,通过 <el-table-column> 组件获取到了数据。关于插槽,如果有不清楚的地方,可以看看下面这篇文章:

「深入理解vue中的slot与slot-scope」

OK,我们通过点击事件触发 editUser 方法并传入了该行的数据,接下来会发生什么事,要看你怎么设计。我的思路是弹出对话框,并通过表单组件实现单用户信息的显示与修改,效果如下:
修改信息
这里可以复用图书编辑弹出框,相同的内容就不赘述了,下面重点讲一下角色分配一栏。

2.角色分配

因为我们的用户和角色是多对多的关系,所以这里使用了多选框组件。为了正确显示用户对应的角色,我们需要先把所有的角色信息查询出来,再根据用户信息选中相应的角色。

查询出所有角色的方法很简单,在 mounted() 方法中调用即可。关键是如何选中当前用户对应的角色。

首先,我们需要查询出当前用户的角色。这时有两种思路:

  • 第一种,可以以用户名或 id 为参数向后端发送请求,查询出对应的角色值并返回
  • 第二种,改造后端查询用户信息的接口,直接在查询用户信息时就把角色信息查询出来

为了前后端传递参数更方便一些,我选用了第二种方法。使用这种方法需要在 User 实体类中添加属性来存放角色信息,但是由于数据库中并没有相应定义,所以我们要加上 @Transient 注释。

@Transient
List<AdminRole> roles;

// getter and setter
public List<AdminRole> getRoles() {
    return roles;
}

public void setRoles(List<AdminRole> roles) {
    this.roles = roles;
}

相应地在 UserService 中修改列出所有用户的方法:

public List<User> list() {
    List<User> users =  userDAO.list();
    List<AdminRole> roles;
    for (User user : users) {
        roles = adminRoleService.listRolesByUser(user.getUsername());
        user.setRoles(roles);
    }
    return users;
}

AdminRoleService 中添加 listRolesByUser() 方法:

public List<AdminRole> listRolesByUser(String username) {
    int uid = userService.findByUsername(username).getId();
    List<Integer> rids = adminUserRoleService.listAllByUid(uid)
            .stream().map(AdminUserRole::getRid).collect(Collectors.toList());
    return adminRoleDAO.findAllById(rids);
}

这样查询出的用户就会带上角色信息了。

之后,我们使用 <el-checkbox-group>,也就是多选框组来实现角色的显示与编辑。观察如下代码:

<el-form-item label="角色分配" label-width="120px" prop="roles">
  <el-checkbox-group v-model="selectedRolesIds">
      <el-checkbox v-for="(role,i) in roles" :key="i" :label="role.id">{{role.nameZh}}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

roles 是从后端查询到的所有角色信息,我们通过遍历渲染出角色的中文名称,并指定多选框的 label 值为 role.id 。selectedRolesIds 是一个 Array 类型的变量,也就是当前用户对应的角色的 id。组件会根据其中的数据匹配 label 值,并选中相应的内容。

可以在点击编辑按钮时调用处理方法,获取当前用户对应的角色的 id:

 editUser (user) {
   this.dialogFormVisible = true
   this.selectedUser = user
   let roleIds = []
   for (let i = 0; i < user.roles.length; i++) {
     roleIds.push(user.roles[i].id)
   }
   this.selectedRolesIds = roleIds
 }

这样,对话框中的角色信息就能正确渲染了。由于 selectedRolesIds 是与多选框双向绑定的,我们通过点选就可以改变这个 Array 的值。还是为了后端接收方便,我们在提交更改时可以做一些处理,通过这些角色 id 获得角色本身并传递。

onSubmit (user) {
  let _this = this
  // 根据视图绑定的角色 id 向后端传送角色信息
  let roles = []
  for (let i = 0; i < _this.selectedRolesIds.length; i++) {
    for (let j = 0; j < _this.roles.length; j++) {
      if (_this.selectedRolesIds[i] === _this.roles[j].id) {
        roles.push(_this.roles[j])
      }
    }
  }
  this.$axios.put('/admin/user', {
    username: user.username,
    name: user.name,
    phone: user.phone,
    email: user.email,
    roles: roles
  }).then(resp => {
    if (resp && resp.status === 200) {
      this.$alert('用户信息修改成功')
      this.dialogFormVisible = false
      // 修改角色后重新请求用户信息,实现视图更新
      this.listUsers()
    }
  })
}

后端对应的代码如下:

// UserController
@PutMapping("/api/admin/user")
public Result editUser(@RequestBody User requestUser) {
    userService.editUser(requestUser);
    String message = "修改用户信息成功";
    return ResultFactory.buildSuccessResult(message);
}
// UserService
public void editUser(User user) {
    User userInDB = userDAO.findByUsername(user.getUsername());
    userInDB.setName(user.getName());
    userInDB.setPhone(user.getPhone());
    userInDB.setEmail(user.getEmail());
    userDAO.save(userInDB);
    adminUserRoleService.saveRoleChanges(userInDB.getId(), user.getRoles());
}

saveRoleChanges() 方法即修改 admin_user_role 表里相应的内容。修改的思路是先删除原有用户(uid)对应的所有行,再根据新传递的数据做插入操作。这样的缺点是比较费自增 id(其实无所谓),但省去了比对的麻烦。

@Transactional
public void saveRoleChanges(int uid, List<AdminRole> roles) {
    adminUserRoleDAO.deleteAllByUid(uid);
    List<AdminUserRole> urs = new ArrayList<>();
    roles.forEach(r -> {
        AdminUserRole ur = new AdminUserRole();
        ur.setUid(uid);
        ur.setRid(r.getId());
        urs.add(ur);
    });
    adminUserRoleDAO.saveAll(urs);
}

因为我们执行了删除操作,所以需要加上 @Transactional 注释开启事务,以保证数据的一致性。(不加是会跑出异常的哈)

OK,这样我们就完成了角色分配功能的开发。

3.权限分配

权限分配即为角色指定对应的权限。模仿上面的步骤,开发一套角色信息列表、编辑框即可。
权限分配
值得一讲的是菜单配置功能的实现。

二、菜单分配

本来菜单分配也是一样的逻辑,但谁让人家是树结构呢。

首先在前端显示上,我们得使用 「树形控件」,同时还要加上选择功能,好在这些 Element 都想到了。我们来看一下前端的代码:

<el-form-item label="菜单配置" label-width="120px" prop="menus">
  <el-tree
    :data="menus"
    :props="props"
    show-checkbox
    :default-checked-keys="selectedMenusIds"
    node-key="id"
    ref="tree">
  </el-tree>
</el-form-item>

各属性的作用如下:

  • data 指定了数据源为向后端查询到的菜单信息
  • props 指定树显示数据源的哪些属性
  • show-checkbox 开启了选择功能
  • :default-checked-keys 设置树第一次加载时默认选中的节点
  • node-key 指定树节点关联的属性为 id
  • ref 指定树的引用名,以方便调用相关方法

menus 同样可以在 mouted() 中调用查询方法获取。我们可以在后端定义根据角色查询 id 的方法:

public List<AdminMenu> getMenusByRoleId(int rid) {
    List<Integer> menuIds = adminRoleMenuService.findAllByRid(rid)
            .stream().map(AdminRoleMenu::getMid).collect(Collectors.toList());
    List<AdminMenu> menus = adminMenuDAO.findAllById(menuIds);

    handleMenus(menus);
    return menus;
}

// 处理树结构的代码
public void handleMenus(List<AdminMenu> menus) {
    menus.forEach(m -> {
        List<AdminMenu> children = getAllByParentId(m.getId());
        m.setChildren(children);
    });

    menus.removeIf(m -> m.getParentId() != 0);
}

再根据系统管理员角色的 id 进行查询:

@GetMapping("/api/admin/role/menu")
public List<AdminMenu> listAllMenus() {
    List<AdminMenu> menus = adminMenuService.getMenusByRoleId(1);
    return menus;
}

即可获得全量的菜单数据。

前端树控件的 props 设定如下:

props: {
  id: 'id',
  label: 'nameZh',
  children: 'children'
}

左边是树组件的属性,右边是我们数据的属性。为了正确地根据 id 加载选中项,在点击编辑按钮时我们需要执行如下操作:

editRole (role) {

  ...
  
  let menuIds = []
  for (let i = 0; i < role.menus.length; i++) {
    menuIds.push(role.menus[i].id)
    for (let j = 0; j < role.menus[i].children.length; j++) {
      menuIds.push(role.menus[i].children[j].id)
    }
  }
  this.selectedMenusIds = menuIds
  // 判断树是否已经加载
  // 第一次打开对话框前树不存在,无法调用方法,需要通过设置 default-checked 正确选中菜单项
  if (this.$refs.tree) {
    this.$refs.tree.setCheckedKeys(menuIds)
  }
}

通过视图选择相应菜单项后,我们可以向后端发送更新请求,然鹅跟前两个不同的是,这次我们只发 id 就好,因为树结构比对起来比较麻烦。请求的代码如下:

this.$axios.put('/admin/role/menu?rid=' + role.id, {
  menusIds: this.$refs.tree.getCheckedKeys()
}).then(resp => {
  if (resp && resp.status === 200) {
    console.log(resp.data.data)
  }
})

getCheckedKeys() 是 tree 组件提供的,可以很方便地发送选中的数据(根据 node-key 的设置获取数据)。后端接收到的是一个 Map,处理时稍微费劲一点:

// RoleController
@PutMapping("/api/admin/role/menu")
public void updateRoleMenu(@RequestParam int rid, @RequestBody LinkedHashMap menusIds) {
    adminRoleMenuService.updateRoleMenu(rid, menusIds);
}
// AdminRoleMenuService
@Modifying
@Transactional
public void updateRoleMenu(int rid, Map menusIds) {
    adminRoleMenuDAO.deleteAllByRid(rid);
    List<AdminRoleMenu> rms = new ArrayList<>();
    for (Integer mid : (List<Integer>)menusIds.get("menusIds")) {
        AdminRoleMenu rm = new AdminRoleMenu();
        rm.setMid(mid);
        rm.setRid(rid);
        rms.add(rm);
    }

    adminRoleMenuDAO.saveAll(rms);
}

同样是执行了删除操作,要为 updateRoleMenu 方法开启事务。

此外还有一个问题,后台切换用户后前端会报路由重复的错误,所以我们要在注销登录时把原本的路由信息清空。比较容易想到的是通过刷新页面清空路由,但是这样页面就会有明显的卡顿或空白,所以我们尝试利用别的方法清空路由。

常见的方法是:

  • 新建一个路由,包含不需动态加载的默认路由信息
  • 设置当前路由的 matcher 为新路由的 matcher

网上关于替换 matcher 的解释如下:

替换当前路由实例的 matcher 之所以能实现删除动态添加的路由,是因为替换当前路由的 matcher 本质 上是 替换了现有的路由实例的路由映射容器。新的 matcher 始终 仅仅 包含路由实例化时的路由,而 不会包含 后期被 addRoutes 方法添加的路由,那么替换当前路由的 matcher 就可实现删除通过 addRoutes 添加的路由。

ok,首先我们在 router\index.js 中添加一个新建默认路由的方法:

// 用于创建默认路由
export const createRouter = routes => new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Default',
      redirect: '/home',
      component: Home
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex
        },
        {
          path: '/jotter',
          name: 'Jotter',
          component: JotterIndex
        },
        {
          path: '/editor',
          name: 'Editor',
          component: Editor,
          meta: {
            requireAuth: true
          }
        },
        {
          path: '/library',
          name: 'Library',
          component: LibraryIndex
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/admin',
      name: 'Admin',
      component: AdminIndex,
      meta: {
        requireAuth: true
      },
      children: [
        {
          path: '/admin/dashboard',
          name: 'dashboard',
          component: DashBoard,
          meta: {
            requireAuth: true
          }
        }
      ]
    }
  ]
})

再在执行 logout 方法时调用,记得导入

<script>
  import {createRouter} from '../../router'

  export default {
    name: 'Header',
    methods: {
      logout () {
        var _this = this
        this.$axios.get('/logout').then(resp => {
          if (resp.data.code === 200) {
            _this.$store.commit('logout')
            _this.$router.replace('/index')
            // 清空路由,防止路由重复加载
            const newRouter = createRouter()
            _this.$router.matcher = newRouter.matcher
          }
        }).catch(failResponse => {})
      }
    }
  }
</script>

这样就不会报错了。

至此,角色、权限、菜单的分配功能就完成了。基本上有了这些,一个后台管理系统就成形了。此外我还开发了批量添加用户、新建角色、用户与角色状态变更等功能,各位可以参照源码自行实现。

下一步

我打算开发一些实用的模块,比如文章(新闻)、轮播图等内容的发布和管理,完成后这个项目就可以改造为个人主页或者门户网站之类的应用发布了。至于数据级访问控制的实现可能要先鸽一下,因为这个东西目前没有特别好的示例场景,若只是针对图书管理这一功能,要讲的东西跟前面基本是一回事。

CSDN 的 APP 推荐各位下载一下,今年改版了好多次,出了很多新功能,比如可以发 Blink 动态,一般我发布文章后都会臭不要脸来一条,这样你们就能知道我这逼又更新了。说实话,我觉得我能获得这么多关注主要是因为赶上了平台发展的好时候,你们也赶快上车啊。

咱们这个项目毕竟是开源的,我偷懒的时候你们不妨也尝试提交下代码,就算只是挑挑错误拼写熟悉熟悉 git 使用也挺有意义的,不要不好意思,我这儿很好通过的,咱们要充分发挥这个破玩意儿的价值。

头两天有读者发邮件问我多大了、干什么的、工作几年了,我寻思这语气是要给我介绍对象啊,我女票可是随时会看我邮箱的,咱们下次找个隐秘渠道私聊哈。实不相瞒,我就是个做 PPT 的,95 后老大叔,不喜欢折腾,但应该比百分之九十的同龄人努力,每周平均工作六天,每天平均学习 4 小时,没啥目标,就想挣它一个亿。我可能是为数不多的实现 2019 年小目标的人吧,2020 年继续加油喽。

上一篇:Vue + Spring Boot 项目实战(十六):功能级访问控制的实现

下一篇:Vue + Spring Boot 项目实战(十八):博客功能开发

<p> <strong><span style="font-size:24px;">课程简介:</span></strong><br /> <span style="font-size:18px;">历经半个多月的时间,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。</span><span></span> </p> <p> <span style="font-size:18px;">其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程!</span><span></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>核心技术栈列表</strong></span><span style="font-size:24px;"><strong>:</strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;">值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括</span><span style="font-size:18px;">Spring Boot</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring MVC</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis-Plus</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Shiro(</span><span style="font-size:18px;">身份认证与资源授权跟会话等等</span><span style="font-size:18px;">)</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring AOP</span><span style="font-size:18px;">、防止</span><span style="font-size:18px;">XSS</span><span style="font-size:18px;">攻击、防止</span><span style="font-size:18px;">SQL</span><span style="font-size:18px;">注入攻击、过滤器</span><span style="font-size:18px;">Filter</span><span style="font-size:18px;">、验证码</span><span style="font-size:18px;">Kaptcha</span><span style="font-size:18px;">、热部署插件</span><span style="font-size:18px;">Devtools</span><span style="font-size:18px;">、</span><span style="font-size:18px;">POI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Vue</span><span style="font-size:18px;">、</span><span style="font-size:18px;">LayUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">ElementUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">JQuery</span><span style="font-size:18px;">、</span><span style="font-size:18px;">HTML</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Bootstrap</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Freemarker</span><span style="font-size:18px;">、一键打包部署运行工具</span><span style="font-size:18px;">Wagon</span><span style="font-size:18px;">等等,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070402564453.png" alt="" /> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:24px;">课程内容与收益</span><span style="font-size:24px;">:</span><span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070403452052.png" alt="" /> </p> <p> <span style="font-size:18px;">总的来说,</span><span style="font-size:18px;">本课程是一门具有很强实践性质的“项目实战”课程,即“</span><span style="font-size:18px;">企业应用员工角色权限管理平台</span><span style="font-size:18px;">”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色权限菜单以及其他实体模块的管理;其中,还重点讲解了如何基于</span><span style="font-size:18px;">Shiro</span><span style="font-size:18px;">的资源授权实现员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">操作权限、员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图:</span> </p> <p> <span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070404285736.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>以下为项目整体的运行效果截图:</strong></span> <span></span> </p> <img src="https://img-bss.csdn.net/201908070404538119.png" alt="" /> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405002904.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405078322.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405172638.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405289855.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405404509.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405523495.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p style="text-align:left;"> <span style="font-size:18px;">值得一提的是,在本课程中,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070406328884.png" alt="" /> <p> <br /> </p>
相关推荐
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前端技术】<br /> Vue        互联网最火的前端框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端 HTTP 框架<br /> Element UI 前端 UI 框架<br /> Vue Element Admin 前端模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
<p> <img src="https://img-bss.csdn.net/201909231423115500.png" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/201909231423337403.png" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/201909231423434581.png" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/201909231424065321.png" alt="" /><img src="https://img-bss.csdn.net/201909231424244483.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <div style="color:#444444;"> 适用人群 <p style="color:#666666;"> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div style="color:#444444;"> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br />       现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />      Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年 <br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea<br /> 【课程收益】<br /> 学完课程能独立完成springboot2+vue+elementUI的整合项目开发(前后端分离) <br /> 学完课程能Shiro的权限控制,按钮级别的权限控制 <br /> 学完课程能独立后端开发和独立前端开发Vue <br /> 学完课程能快速的掌握目前互联网用的前沿的框架和技术实战 </div> </div>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值