3、幽络源微服务项目实战：Vue2前端项目登录与多租户数据表设计与界面创建

3、幽络源微服务项目实战：Vue2前端项目登录与多租户数据表设计与界面创建

36

前言

在上节教程，我们搭建了Vue2项目并且成功启动了，这里先不探讨电网巡检项目的业务流程，此项目肯定是有 多租户的，本节就来设计多租户表与创建前端界面。

表的设计考虑

关于此电网巡检项目，基本的用户、角色、权限是必有的。

如果说是公司自己用，那则可以不考虑别的公司，也就是说只需要考虑到 用户、角色、权限 的管理功能即可，只关心系统内部的权限分配，不关心用户来自哪个组织或公司，这个本质叫做 ​​权限管理模型​，感兴趣可以了解一下RBAC模型。

如果说这个系统不仅仅自己用，别的公司也想用，那么就要考虑进去不同公司的数据隔离，说到这里，大家也可以了解下sass系统，sass系统的全称是软件即服务​​，对于提供该sass系统或软件的一方来说就是我们提供成品服务，你只需要付费即可使用我们的服务，能够拥有持续的资金流，而不是一次性被用户买断。

因此，这里需要 用户、角色、权限、公司四张表，但是用户与角色、角色与权限优势多对多的关系，因此还需两张关系表，即 用户-角色关系表，角色-权限关系表，最终定为 6 张表。

幽络源这里初步设计表如下：

CREATE TABLE `company` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '公司ID',
  `name` varchar(100) NOT NULL COMMENT '公司名称',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态(0:禁用,1:启用)',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_name` (`name`)
) ENGINE=InnoDB COMMENT='公司信息表';

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `real_name` varchar(50) NOT NULL COMMENT '真实姓名',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `company_id` bigint NOT NULL COMMENT '所属公司ID',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态(0:禁用,1:启用)',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_username` (`username`),
  KEY `idx_company_id` (`company_id`)
) ENGINE=InnoDB COMMENT='用户表';

CREATE TABLE `role` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '角色ID',
  `name` varchar(50) NOT NULL COMMENT '角色名称',
  `code` varchar(50) NOT NULL COMMENT '角色编码',
  `description` varchar(200) DEFAULT NULL COMMENT '角色描述',
  `company_id` bigint NOT NULL COMMENT '所属公司ID',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_company_code` (`company_id`,`code`),
  KEY `idx_company_id` (`company_id`)
) ENGINE=InnoDB COMMENT='角色表';

CREATE TABLE `user_role` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `user_id` bigint NOT NULL COMMENT '用户ID',
  `role_id` bigint NOT NULL COMMENT '角色ID',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_role` (`user_id`,`role_id`),
  KEY `idx_role_id` (`role_id`)
) ENGINE=InnoDB COMMENT='用户角色关联表';

CREATE TABLE `permission` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '权限ID',
  `name` varchar(50) NOT NULL COMMENT '权限名称',
  `code` varchar(100) NOT NULL COMMENT '权限编码',
  `type` tinyint NOT NULL COMMENT '权限类型(1:菜单,2:按钮,3:API)',
  `parent_id` bigint DEFAULT NULL COMMENT '父权限ID',
  `path` varchar(200) DEFAULT NULL COMMENT '菜单路径',
  `icon` varchar(50) DEFAULT NULL COMMENT '图标',
  `sort` int DEFAULT '0' COMMENT '排序',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_code` (`code`),
  KEY `idx_parent_id` (`parent_id`)
) ENGINE=InnoDB COMMENT='权限表';

CREATE TABLE `role_permission` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `role_id` bigint NOT NULL COMMENT '角色ID',
  `permission_id` bigint NOT NULL COMMENT '权限ID',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_role_permission` (`role_id`,`permission_id`),
  KEY `idx_permission_id` (`permission_id`)
) ENGINE=InnoDB COMMENT='角色权限关联表';

初始化的前端项目稍作删除与修改

本章先初步创建登录界面和多租户管理界面，暂时不需要实际的数据，和实际的逻辑，后续我们去开发。

下面讲解项目的修改基本步骤，可以了解是怎么做的，最后会直接给出本章的源码可直接使用。

在上节创建的项目中，结构如下，删掉自带的东西，也就是幽络源这里勾选的三个文件

1

然后将路由index.js和App.vue中删掉如下红框勾选的内容，这是创建项目自带的演示内容

2

除此之外，这里幽络源还建议将public目录下的index.html文件中加入一点全局样式的修改，即外边距和内边距设置为0，最终如图

672ac4ac-3dce-4cf1-9ce7-64f14760a47c

对于初创的项目的基本删除和修改就结束了，然后是页面的开发和路由的配置，以及elementui的引入

项目引入elementui

为了快速开发前端界面，elementui是必不可少的，对于vue2的项目，引入elementui步骤如下

1. 安装 Element UI

npm install element-ui --save

2.引入ElementUI

在main.js加入如下代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

如图

12abeca3-9871-4c5f-88c0-834d3e9228d8

验证ElementUI引入成功

如何验证ElementUI引入成功呢？当然是使用了，最简单的方式就是用Element的语法写一个Aler试试。

在App.vue中是用mounted函数尝试弹出一个消息，代码如下

<script>
  export default {
    mounted() {
      this.$alert('这是一条消息', '标题', {
        confirmButtonText: '确定',
        callback: action => {
          console.log('用户点击了确定')
        }
      })
    }
  }
</script>

然后访问页面可以看到效果，如图

55d5745d-2b1e-48f1-aa4f-c142a3454826

思考项目界面的布局和界面

布局其实比较简单统一，一个顶部栏目，一个侧边栏，加上一个内容布局，因此这三项我们可以放到components目录去。

然后界面有 “登录页”，登录后来到系统的“主页”，系统还有一个多租户模块，包括了“用户管理”、“角色管理”、“权限管理”、“公司管理”。因此有6个页面，3个组件，多租户模块我们就放在views下的单独一个目录，名为tenant目录。

最终如下

bdd71bd5-f673-4dd4-ba85-7760d13ac1b2

当页面有了后，我们还需要去配置路由，内容如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginView from "@/views/LoginView.vue";
import LayoutView from "@/components/AppLayout.vue"
import HomeView from "@/views/HomeView.vue"


Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/',
    component: LayoutView,
    redirect: '/home',
    children: [
      {
        path: 'home',
        name: 'Home',
        component: HomeView,
        meta: { title: '首页' }
      },
      {
        path: 'tenant/users',
        name: 'Users',
        component: () => import('@/views/tenant/UsersView.vue'),
        meta: { title: '用户管理' }
      },
      {
        path: 'tenant/roles',
        name: 'Roles',
        component: () => import('@/views/tenant/RolesView.vue'),
        meta: { title: '角色管理' }
      },
      {
        path: 'tenant/permissions',
        name: 'Permissions',
        component: () => import('@/views/tenant/PermissionsView.vue'),
        meta: { title: '权限管理' }
      },
      {
        path: 'tenant/companies',
        name: 'Companies',
        component: () => import('@/views/tenant/CompaniesView.vue'),
        meta: { title: '公司管理' }
      },
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

最终的界面和源码

界面如下

粗略的做一下，后续还需完成实际的功能以及修改界面

8eea6e5f-52eb-4d72-9873-b12c7b6410d6

9594adfc-6408-44e4-8285-a86d7abd57d1

a292c9c7-8546-432d-b6f3-6478ca0c3f7f

f747f928-af6e-4fb7-836f-25c090f538e1

1

2

源码如下

2、3节教程的

https://pan.quark.cn/s/52f8925e08a7

结语

如上为幽络源的3、幽络源微服务项目实战：Vue2前端项目登录与多租户数据表设计与界面创建教程，如有疑问或对微服务感兴趣可加入我们的QQ群询问与交流：307531422

THE END
技术教程
喜欢就支持一下吧
分享