数据库设计与前端框架

 数据库设计与前端框架

学习目标：

理解多租户的数据库设计方案

熟练使用PowerDesigner构建数据库模型理解前端工程的基本架构和执行流程

完成前端工程企业模块开发

多租户SaaS平台的数据库方案

多租户是什么

多租户技术（Multi-TenancyTechnology）又称多重租赁技术：是一种软件架构技术，是实现如何在多用户环境下

（此处的多用户一般是面向企业用户）共用相同的系统或程序组件，并且可确保各用户间数据的隔离性。简单讲： 在一台服务器上运行单个应用实例，它为多个租户（客户）提供服务。从定义中我们可以理解：多租户是一种架 构，目的是为了让多用户环境下使用同一套程序，且保证用户间数据隔离。那么重点就很浅显易懂了，多租户的重 点就是同一套程序下实现多用户数据的隔离

需求分析

传统软件模式，指将软件产品进行买卖，是一种单纯的买卖关系，客户通过买断的方式获取软件的使用权，软件的 源码属于客户所有，因此传统软件是部署到企业内部，不同的企业各自部署一套自己的软件系统

Saas模式，指服务提供商提供的一种软件服务，应用统一部署到服务提供商的服务器上，客户可以根据自己的实际 需求按需付费。用户购买基于WEB的软件，而不是将软件安装在自己的电脑上，用户也无需对软件进行定期的维护 与管理

在SaaS平台里需要使用共用的数据中心以单一系统架构与服务提供多数客户端相同甚至可定制化的服务，并且仍可 以保障客户的数据正常使用。由此带来了新的挑战，就是如何对应用数据进行设计，以支持多租户，而这种设计的 思路，是要在数据的共享、安全隔离和性能间取得平衡。

多租户的数据库方案分析

目前基于多租户的数据库设计方案通常有如下三种：

  • 独立数据库
  • 共享数据库、独立 Schema
  • 共享数据库、共享数据表

独立数据库

独立数据库：每个租户一个数据库。

优点：为不同的租户提供独立的数据库，有助于简化数据模型的扩展设计，满足不同租户的独特需求；如果 出现故障，恢复数据比较简单。

缺点： 增多了数据库的安装数量，随之带来维护成本和购置成本的增加

这种方案与传统的一个客户、一套数据、一套部署类似，差别只在于软件统一部署在运营商那里。由此可见此方案用户数据隔离级别最高，安全性最好，但是成本较高

共享数据库、独立 Schema

（1） 什么是Schema

oracle数据库：在oracle中一个数据库可以具有多个用户，那么一个用户一般对应一个Schema，表都是建立在Schema中的,（可以简单的理解：在oracle中一个用户一套数据库表）

骚戴理解：其实oracle的Schema就相当于mysql中的database

mysql数据库：mysql数据中的schema比较特殊，并不是数据库的下一级，而是等同于数据库。比如执行create schema test 和执行create database test效果是一模一样的

共享数据库、独立 Schema：即多个或所有的租户使用同一个数据库服务（如常见的ORACLE或MYSQL数据库）， 但是每个租户一个Schema。

优点： 为安全性要求较高的租户提供了一定程度的逻辑数据隔离，并不是完全隔离；每个数据库可支持更多的租户数量。

缺点： 如果出现故障，数据恢复比较困难，因为恢复数据库将牵涉到其他租户的数据； 如果需要跨租户统计数据，存在一定困难。

这种方案是方案一的变种。只需要安装一份数据库服务，通过不同的Schema对不同租户的数据进行隔离。由于数据库服务是共享的，所以成本相对低廉。

骚戴理解：共享数据库、独立 Schema方案其实就是假如我在服务器上安装了一个mysql服务端，然后每一个用户就给他创建一个数据库database，这样多个用户就只需要创建多个database数据库即可，不需要像独立数据库方案一样每一个用户我就要去搭建一个mysql服务端。共享数据库、共享数据表方案就是我就一个数据库，一套数据库表，大家都用这个，至于怎么区分到底哪条记录是哪个用户的？加个用户标识的字段就可以了！

共享数据库、共享数据表

共享数据库、共享数据表：即租户共享同一个Database，同一套数据库表（所有租户的数据都存放在一个数据库的同一套表中）。在表中增加租户ID等租户标志字段，表明该记录是属于哪个租户的。

优点：所有租户使用同一套数据库，所以成本低廉。

缺点：隔离级别最低，安全性最低，需要在设计开发时加大对安全的开发量，数据备份和恢复最困难。

这种方案和基于传统应用的数据库设计并没有任何区别，但是由于所有租户使用相同的数据库表，所以需要做好对 每个租户数据的隔离安全性处理，这就增加了系统设计和数据管理方面的复杂程度。

SAAS-HRM数据库设计

在SAAS-HRM平台中，分为了试用版和正式版。处于教学的目的，试用版采用共享数据库、共享数据表的方式设 计。正式版采用基于mysql的共享数据库、独立 Schema设计。

数据库设计与建模

数据库设计的三范式

三范式

第一范式（1NF）：确保每一列的原子性（做到每列不可拆分）

第二范式（2NF）：在第一范式的基础上，非主字段必须依赖于主字段（一个表只做一件事）

第三范式（3NF）：在第二范式的基础上，消除传递依赖

反三范式：反三范式是基于第三范式所调整的，没有冗余的数据库未必是最好的数据库，有时为了提高运行效率，就必须降低范式标准，适当保留冗余数据。

骚戴理解：第二范式其实就是假如有一个学生表，除了学生基本信息的一些字段，如果你还有课程成绩相关的字段在这个表就不符合第二范式，把课程成绩相关字段拆出来分作一个成绩表，那就符合第二范式。继续上面的例子，现在已经分成了学生表和成绩表，学生表里有个字段是成绩表的id，那么我每次查询学生的所有信息（包括成绩）我都要去查询学生表然后根据成绩id去成绩表再查一次，这样就要查询两次，所以就有了反三范式的出现，反三范式就是加冗余字段，也就是把成绩信息又加到学生表里，这样只要查询学生表就可以查询出学生的所有信息，当然这是跟第二范式冲突的，所以叫“反”三范式。至于这个三范式其实就是假如有个表，里面有单价和数量两个字段，那么就可以根据单价和数量去计算出总价，所以就可以不需要总价这个字段，这也叫传递依赖

数据库建模

了解了数据的设计思想，那对于数据库表的表设计应该怎么做呢？答案是数据库建模

数据库建模：在设计数据库时，对现实世界进行分析、抽象、并从中找出内在联系，进而确定数据库的结构。它主 要包括两部分内容：确定最基本的数据结构；对约束建模。

建模工具

对于数据模型的建模，最有名的要数PowerDesigner，PowerDesigner是在中国软件公司中非常有名的，其易用性、功能、对流行技术框架的支持、以及它的模型库的管理理念，都深受设计师们喜欢。他的优势在于：不用在使 用create table等语句创建表结构，数据库设计人员只关注如何进行数据建模即可，将来的数据库语句，可以自动生成

使用pd建模

选择新建数据库模型 打开PowerDesigner，文件->建立新模型->model types（选择类型）->Physical Data Model(物理模型)

控制面板

创建数据库表

点即面板按钮中的创建数据库按钮创建数据库模型

切换columns标签，可以对表中的所有字段进行配置

如果基于传统的数据库设计中存在外键则可以使用面版中的Reference配置多个表之间的关联关系，效果如下图

导出sql

菜单->数据库（database）->生成数据库表结构（Generate Database）

前端框架

脚手架工程

此项目采用目前比较流行的前后端分离的方式进行开发。前端是在传智播客研究院开源的前端框架（黑马Admin商用后台模板）的基础上进行的开发。

官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主界面菜单样式 等内容。 课程已经提供了功能完整的脚手架，我们可以拿过来在此基础上开发，这样可以极大节省我们开发的时间。

技术栈

  • vue 2.5++
  • elementUI 2.2.2 vuex
  • axios
  • vue-router vue-i18n

前端环境

  • node 8.++
  • npm 5.++

启动与安装

官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主界面菜单样式 等内容。 课程已经提供了功能完整的脚手架，我们可以拿过来在此基础上开发，这样可以极大节省我们开发的时间。

  • 解压提供的资源包
  • 在命令提示符进入该目录，输入命令：

cnpm install

通过淘宝镜像下载安装所有的依赖，几分钟后下载完成如果没有安装淘宝镜像，请使用npm install

  • 关闭语法检查

打开 将useEslint的值改为false。

config/index.js

useEslint: false,

此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了 Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写分号等等，这些规则其实是可以设置的。我们作为前端的初学者，最好先关闭这种校验，否则会浪费 很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启

  • 输入命令：

npm run dev

工程结构

整个前端工程的工程目录结构如下：

├── assets                         | 资源
├── build                           | webpack编译配置
├── config                         | 全局变量
├── src                             | 源码
│   ├── api                         | 数据请求
│   ├── assets                     | 资源
│   ├── components                 | 组件
│   ├── mixins                     | mixins
│   ├── filters                     | vue filter
│   ├── icons                       | 图标
│   ├── lang                       | 多语言
│   ├── router                     | 路由
│   ├── store                       | 数据
│   ├── styles                     | 样式
│   ├── utils                       | 工具函数库
│   ├── module-dashboard           | 框架程序
│   │   ├── assets
│   │   ├── components
│   │   ├── pages
│   │   ├── router
│   │   └── store
│   ├── module-example             | 示例程序
│   │   ├── assets
│   │   ├── components
│   │   ├── pages
│   │   ├── router
│   │   └── store
│   ├── App.vue                     | app
│   ├── main.js                     | 主引导
│   └── errorLog.js               | vue全局错误捕捉
├── dist                           | 编译发布目录
├── README.md
├── index.html                     | 页面模板
├── package.json                   | npn包配置
├── static
└── test                           | 测试
   ├── e2e
   └── unit

执行流程分析

路由和菜单

路由和菜单是组织起一个后台应用的关键骨架。本项目侧边栏和路由是绑定在一起的，所以你只有在@/router/index.js 下面配置对应的路由，侧边栏就能动态的生成了。大大减轻了手动编辑侧边栏的工作量。

当然这样就需要在配置路由的时候遵循很多的约定这里的路由分为两种， constantRouterMap 和 asyncRouterMap 。

  • constantRouterMap 代通用页面。
  • asyncRouterMap 代表那些业务中通过 addRouters 动态添加的页面。

骚戴理解：路由分为两种，公共路由和模块路由，公共路由就是下面的第二个红框画出来的，通常就是登录、注册、404页面这些公共模块的路由定义，下面module-saas-clients就是一个模块，所有模块通常都是以module开头的，那么模块下面的router路由自然就是模块路由

其实每一个模块就是下面的左侧栏，例如这个模块对应的就是SAAS企业这个左侧栏，

前端数据交互

一个完整的前端 UI 交互到服务端处理流程是这样的：

  • UI 组件交互操作；
  • 调用统一管理的 api service 请求函数；
  • 使用封装的 request.js 发送请求；
  • 获取服务端返回；
  • 更新 data；

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 src/api 文件夹中，并且一般按照 model纬度进行拆分文件

api/
 frame.js
 menus.js
 users.js
 permissions.js
 ...

其中， src/utils/request.js 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。 它封装了全局 request拦截器 、 respone拦截器 、 统一的错误处理 、 统一做了超时，baseURL设置等

骚戴理解：这里我一开始不理解为什么明明用的是demo却可以找到module-demo这个模块？

上面的这个main.js里面定义了模块的名称，所以你的路径里用的是demo也可以找到module-demo这个模块

企业管理

需求分析

在通用页面配置企业管理模块，完成企业的基本操作

搭建环境

新增模块

手动创建

方式一：在src目录下创建文件夹，命名规则：module-模块名称（）

在文件夹下按照指定的结构配置assets，components，pages，router，store等文件

使用命令自动创建

安装命令行工具

npm install -g itheima-cli

执行命令

itheima moduleAdd saas-clients
`saas-clients` 是新模块的名字
自动创建这些目录和文件
│   ├── module-saas-clients     | saas-clients模块主目录
│   │   ├── assets             | 资源
│   │   ├── components         | 组件
│   │   ├── pages               | 页面
│   │   │   └── index.vue       | 示例
│   │   ├── router             | 路由
│   │   │   └── index.js       | 示例
│   │   └── store               | 数据
│   │       └── app.js         | 示例

每个模块所有的素材、页面、组件、路由、数据，都是独立的，方便大型项目管理， 在实际项目中会有很多子业务项目，它们之间的关系是平行的、低耦合、互不依赖。

构造模拟数据

  1. 在/src/mock中添加模拟数据company.js
import Mock from 'mockjs'
import { param2Obj } from '@/utils'
const List = []
const count = 100
for (let i = 0; i < 3; i++) {
    let data = {
        id: "1"+i,
        name: "企业"+i,
        managerId: "string",
        version: "试用版v1.0",
        renewalDate: "2018-01-01",
        expirationDate: "2019-01-01",
        companyArea: "string",
        companyAddress: "string",
        businessLicenseId: "string",
        legalRepresentative: "string",
        companyPhone: "13800138000",
        mailbox: "string",
        companySize: "string",
        industry: "string",
        remarks: "string",
        auditState: "string",
        state: "1",
        balance: "string",
        createTime: "string"
   }
  List.push(data)
}
export default {
  list: () => {
    return {
        code: 10000,
        success: true,
        message: "查询成功",
        data:List
   }
 },
  sassDetail:() => {
    return {
      code: 10000,
      success: true,
      message: "查询成功",
      data:{
        id: "10001",
        name: "测试企业",
        managerId: "string",
        version: "试用版v1.0",
        renewalDate: "2018-01-01",
        expirationDate: "2019-01-01",
        companyArea: "string",
        companyAddress: "string",
        businessLicenseId: "string",
        legalRepresentative: "string",
        companyPhone: "13800138000",
        mailbox: "string",
        companySize: "string",
        industry: "string",
        remarks: "string",
        auditState: "string",
        state: "1",
        balance: "string",
        createTime: "string"
     }
   }
 }
}
  1. 配置模拟API接口拦截规则

在/src/mock/index.js中配置模拟数据接口拦截规则

import Mock from 'mockjs'
import TableAPI from './table'
import ProfileAPI from './profile'
import LoginAPI from './login'
import CompanyAPI from './company'
Mock.setup({
  //timeout: '1000'
})
//如果发送请求的api路径匹配，拦截
//第一个参数匹配的请求api路径，第二个参数匹配请求的方式，第三个参数相应数据如何替换
Mock.mock(/\/table\/list\.*/, 'get', TableAPI.list)
//获取用户信息
Mock.mock(/\/frame\/profile/, 'post', ProfileAPI.profile)
Mock.mock(/\/frame\/login/, 'post', LoginAPI.login)
//配置模拟数据接口
// /company/12
Mock.mock(/\/company\/+/, 'get', CompanyAPI.sassDetail)//根据id查询
Mock.mock(/\/company/, 'get', CompanyAPI.list)  //访问企业列表

注册模块

编辑src/main.js

...
/*
* 注册 - 业务模块
*/
import dashboard from '@/module-dashboard/' // 面板
import saasClients from '@/module-saas-clients/' //刚新添加的 企业管理
Vue.use(dashboard, store)
Vue.use(saasClients, store)
...

配置路由菜单

打开刚才自动创建的/src/module-saas-clients/router/index.js

import Layout from '@/module-dashboard/pages/layout'
const _import = require('@/router/import_' + process.env.NODE_ENV)
export default [
 {
    path: '/saas-clients',
    component: Layout,
    redirect: 'noredirect',
    name: 'saas-clients',
    meta: {
      title: 'SaaS企业管理',
      icon: 'international'
   },
    root: true,    
    children: [
     {
        path: 'index',
        name: 'saas-clients-index',
        component: _import('saas-clients/pages/index'),
        meta: {title: 'SaaS企业', icon: 'international', noCache: true}
     }
   ]
 }
]

骚戴理解： path: '/saas-clients'是父路径， component: _import('saas-clients/pages/index')可不是子路径， path: 'index'才是子路径，我一开始以为 component: _import('saas-clients/pages/index')是子路径，其实 component: _import('saas-clients/pages/index') 只是说从根据这个路径去找Vue视图页面

编写业务页面

创建/src/module-saas-clients/pages/index.vue

<template>
  <div class="dashboard-container">
    saas企业管理
  </div>
</template>
<script>
export default {
  name: 'saasClintList',
  components: {},
  data() {
    return {
   }
 },
  computed: {
 },
  created() {
 }
}
</script>

注意文件名 驼峰格式 首字小写

页面请放在目录 /src/module-saas-clients/pages/

组件请放在目录 /src/module-saas-clients/components/

页面路由请修改 /src/module-saas-clients/router/index.js

企业操作

创建api

在api/base目录下创建企业数据交互的API（saasClient.js）

import {createAPI, createFormAPI} from '@/utils/request'
export const list = data => createAPI('/company', 'get', data)
export const detail = data => createAPI(`/company/${data.id}`, 'get', data)

骚戴理解：`/company/${data.id}`这里注意带参数的写法，然后注意是梵引号不是单引号

企业列表

在src\module-saas-clients\pages\index.vue里面引用上面的API

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!--elementui的table组件
          data：数据模型
         -->
            <el-table :data="dataList"  border style="width: 100%">
            <!--el-table-column : 构造表格中的每一列 
              prop： 数组中每个元素对象的属性名
            -->
            <el-table-column  type="index" label="序号"  width="50"></el-table-column>
            <el-table-column  prop="name" label="企业名称" ></el-table-column>
            <el-table-column  prop="version" label="版本" ></el-table-column>
            <el-table-column  prop="companyphone" label="联系电话" ></el-table-column>
            <el-table-column  prop="expirationDate" label="截至时间"  ></el-table-column>
            <el-table-column  prop="state" label="状态" >
              <!--scope:传递当前行的所有数据 -->
              <template slot-scope="scope">
              <!--开关组件
                  active-value：激活的数据值
                  active-color：激活的颜色
                  inactive-value：未激活
                  inactive-color：未激活的颜色
               -->
              <el-switch
                  v-model="scope.row.state"
                  inactive-value="0"    
                  active-value="1"
                  disabled
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <router-link :to="'/saas-clients/details/'+scope.row.id">查看</router-link>
              </template>
            </el-table-column>
          </el-table>
      </el-card>
     </div>
  </div>
</template>

<script>
import {list} from '@/api/base/saasClient'
export default {
  name: 'saas-clients-index',
  data () {
    return {
      dataList:[]
    }
  },
  methods: {
    getList() {
      //调用API发起请求
      //res=响应数据
      list().then(res => {
        this.dataList = res.data.data
      })
    }
  },
  // 创建完毕状态
  created() {
    this.getList()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px 0px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>

骚戴理解：import {list} from '@/api/base/saasClient'通过这句引用API，在getList方法里面去用list()，这里也并没有直接发请求给后端，而是演示了一下mock怎样模拟数据，在src\mock\company.js填写模拟数据，然后注册到mock里面进行拦截，在src\mock\index.js这里面注册模拟的mockAPI，然后设置拦截路径，拦截对应的请求然后返回模拟数据

骚戴理解：

/\/company\/+/ 表示一个正则表达式，匹配包含 /company/ 后面跟着一个或多个字符的字符串，比如:

  • /company/apple
  • /company/google/maps
  • /company/microsoft/windows/excel

但是不匹配以下字符串：

  • /company/
  • /company
  • /companyapple

而 /\/company/ 则表示一个正则表达式，匹配所有以 "/company" 开头的字符串，包括:

  • /company
  • /company/apple
  • /company/google/maps
  • /company/microsoft/windows/excel

它也会匹配包含 /company 例如 /companyapple ， 因为该正则表达式只匹配 字符串开始部分的 /company。

import Mock from 'mockjs'
import { param2Obj } from '@/utils'

const List = []
const count = 100

for (let i = 0; i < 3; i++) {
    let data = {
        id: "1"+i,
        name: "企业"+i,
        managerId: "string",
        version: "试用版v1.0",
        renewalDate: "2018-01-01",
        expirationDate: "2019-01-01",
        companyArea: "string",
        companyAddress: "string",
        businessLicenseId: "string",
        legalRepresentative: "string",
        companyPhone: "13800138000",
        mailbox: "string",
        companySize: "string",
        industry: "string",
        remarks: "string",
        auditState: "string",
        state: "1",
        balance: "string",
        createTime: "string"
    }
  List.push(data)
}

export default {
  list: () => {
    return {
        code: 10000,
        success: true,
        message: "查询成功",
        data:List
    }
  },
  sassDetail:() => {
    return {
      code: 10000,
      success: true,
      message: "查询成功",
      data:{
        id: "10001",
        name: "测试企业",
        managerId: "string",
        version: "试用版v1.0",
        renewalDate: "2018-01-01",
        expirationDate: "2019-01-01",
        companyArea: "string",
        companyAddress: "string",
        businessLicenseId: "string",
        legalRepresentative: "string",
        companyPhone: "13800138000",
        mailbox: "string",
        companySize: "string",
        industry: "string",
        remarks: "string",
        auditState: "string",
        state: "1",
        balance: "string",
        createTime: "string"
      }
    }
  }
}

骚戴理解： 这里两个前端的点，通过以下的语句来实现序号排列数据，注意这个序号不是数据库里的id

<el-table-column fixed type="index" label="序号" width="50"></el-table-column>

通过下面的代码块来实现按钮， disabled直接设置按钮可不可设置

   <el-table-column fixed prop="state" label="状态"  width="150">
              <!--scope:传递当前行的所有数据 -->
              <template slot-scope="scope">
              <!--开关组件
                  active-value：激活的数据值
                  active-color：激活的颜色
                  inactive-value：未激活
                  inactive-color：未激活的颜色
               -->
              <el-switch
                  v-model="scope.row.state"
                  inactive-value="0"    
                  active-value="1"
                  disabled
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>

骚戴理解：这里我抽出来主要是要学会通过Vue的方式去发请求，注意是单引号去拼接请求的url路径

<template slot-scope="scope">
    <router-link :to="'/saas-clients/details/'+scope.row.id">查看</router-link>
</template>

企业详情

（1）配置路由

在 /src/module-saas-clients/router/index.js 添加新的子路由配置

 {
       path: 'details/:id',
       name: 'saas-clients-details',
       component: _import('saas-clients/pages/sass-details'),
       meta: {title: 'SaaS企业详情', icon: 'international', noCache: false}
     }

（2）定义公共组件在/src/module-saas-clients/components/下创建公共的组件页面enterprise-info.vue

<template>
  <div class="boxInfo">
    <!-- 表单内容 -->
    <div class="formInfo">
      <div>
        <div class="boxMain">
          <el-form ref="form" :model="formData" label-width="215px" labelposition="right">
              <el-form-item class="formInfo" label="公司名称：">
                <el-input v-model="formData.name" class="inputW" disabled></el-input>
              </el-form-item>
              <el-form-item class="formInfo" label="公司地区：">
                <el-input v-model="formData.companyArea" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="公司地址：">
                <el-input v-model="formData.companyAddress" class="inputW" disabled>
</el-input>
              </el-form-item>
              <el-form-item class="formInfo" label="审核状态：">
                <el-input v-model="formData.auditState" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="营业执照：">
                <span v-for="item in fileList" :key='item.id' class="fileImg">
                  <img :src="item.url">
                </span>
              </el-form-item>
              <el-form-item class="formInfo" label="法人代表：">
                <el-input v-model="formData.legalRepresentative" class="inputW"
disabled></el-input>
              </el-form-item>
              <el-form-item class="formInfo" label="公司电话：">
                <el-input v-model="formData.companyPhone" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="邮箱：">
                <el-input v-model="formData.mailbox" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="公司规模：">
                <el-input v-model="formData.companySize" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="所属行业：">
                <el-input v-model="formData.industry" class="inputW" disabled></elinput>
              </el-form-item>
              <el-form-item class="formInfo" label="备注：">
                <el-input type="textarea" v-model="formData.remarks" class="inputW">
</el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSub('1')">审核</el-button>
            <el-button @click="handleSub('2')">拒绝</el-button>
            
          </div>
        </div>
      </div>
    </div>
    </div>
</template>
<script>
import { auditDetail } from '@/api/base/sassClients'
import { imgDownload } from '@/api/base/baseApi'
var _this = null
export default {
  name: 'userInfo',
  components: {},
  props: ['formData'],
  data() {
    return {
      fileList: []
   }
 },
  methods: {
    // 业务方法
    // 界面交互
    handleSub(state) {
      auditDetail({
        id: this.formData.id,
        remarks: this.formData.remarks,
        state: state
     }).then(() => {
        if (state === '1') {
          this.$message.success('恭喜你，审核成功！')
       }
        if (state === '2') {
          this.$message.success('已拒绝审核！')
       }
        this.$emit('getObjInfo', this.formData)
     })
   },
    // 图片 blob 流转化为可用 src
    imgHandle(obj) {
      return window.URL.createObjectURL(obj)
   },
    // 图片下载
    fillDownload(fid) {
   }
 },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created: function() {
    _this = this
 },
  // 组件更新
  updated: function() {
    // this.imgDownInfo()
    if (
      this.formData.businessLicense !== null
   ) {
      this.fillDownload(this.formData.businessLicense)
   }
 }
}
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.fileImg{
  img{
    width:20%;
 }
}
</style>

（3）完成详情展示在在/src/module-saas-clients/pages/下创建企业详情视图details.vue

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
            <el-tabs v-model="activeName">
                <el-tab-pane label="企业信息" name="first">
                  <!--form表单
                      model ： 双向绑定的数据对象
                  -->
                  <el-form ref="form" :model="formData" label-width="200px">
                    <el-form-item label="企业名称" >
                      <el-input v-model="formData.name" style="width:250px" disabled>
</el-input>
                    </el-form-item>
                    <el-form-item label="公司地址">
                      <el-input v-model="formData.companyAddress"  style="width:250px"
disabled></el-input>
                    </el-form-item>
                    <el-form-item label="公司电话">
                      <el-input v-model="formData.companyPhone"  style="width:250px"
disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="formData.mailbox"  style="width:250px"
disabled></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                      <el-input v-model="formData.remark"  style="width:250px" ></elinput>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">审核</el-button>
                      <el-button>拒绝</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="账户信息" name="second">账户信息</el-tab-pane>
                <el-tab-pane label="交易记录" name="third">交易记录</el-tab-pane>
            </el-tabs>
      </el-card>
     </div>
  </div>
</template>
<script>
import {detail} from '@/api/base/saasClient'
export default {
  name: 'saas-clients-detail',
  data () {
    return {
        activeName: 'first',
        formData:{}
   }
 },
  methods: {
    detail(id) {
      detail({id:id}).then(res => {
        this.formData = res.data.data
        console.log(id)
        console.log(this.formData)
     })
   }
 },
  // 创建完毕状态
  created() {
    var id = this.$route.params.id
    this.detail(id);
 }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px 0px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>

骚戴理解: activeName: 'first'是默认加载first这个tab，如下所示

this.$route.params.id表示获取当前页面url路由参数中为"id"的值，并将其赋值给变量“id”。

具体来说，假设url为example.com/page/123，那么在vue.js应用程序中，如果当前页面的路由配置为{ path: '/page/:id', component: mycomponent }，则this.$route.params.id的值将为"123"。因此，以上代码将把"123"赋值给变量“id”。

接口对接

（1）启动企业微服务服务

（2）在 config/dev.env.js 中配置请求地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:9001/"'
})

骚戴理解：如果要前后端联调的话就需要把src\mock\index.js路径下的mock给禁用掉，然后修改上面的BASE_API: '"http://localhost:9001/"'为后端端口的地址，这样请求才会走后端

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/20490.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

力扣sql中等篇练习(二十一)

力扣sql中等篇练习(二十一)

力扣sql中等篇练习(二十一) 1 最大数量高于平均水平的订单 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 # Write your MySQL query statement below WITH t1 as (SELECT order_id,avg(quantity) AquantityFROM OrdersDeta…
阅读更多...
GEE：如何进行对MOD09GA数据集进行水体/云掩膜并计算NDVI将其导出至云盘？

GEE：如何进行对MOD09GA数据集进行水体/云掩膜并计算NDVI将其导出至云盘？

目录 01 为什么用GEE而不是传统的下载ENVIArcGIS&#xff1f; 02 操作详解 01 为什么用GEE而不是传统的下载ENVIArcGIS&#xff1f; 由于地理空间数据云中缺少2015年10月份的NDVI月合成影像&#xff0c;于是查看了地理空间数据云的NDVI数据集处理的一些介绍如下(地理空间数据…
阅读更多...
什么是SpringBoot自动配置

什么是SpringBoot自动配置

概述&#xff1a; 现在的Java面试基本都会问到你知道什么是Springboot的自动配置。为什么面试官要问这样的问题&#xff0c;主要是在于看你有没有对Springboot的原理有没有深入的了解&#xff0c;有没有看过Springboot的源码&#xff0c;这是区别普通程序员与高级程序员最好的…
阅读更多...
【C++】8.编译：CMake工具入门

【C++】8.编译：CMake工具入门

&#x1f60f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f60f;这篇文章主要介绍CMake工具的入门使用。————————————————学其所用&#xff0c;用其所学。——梁启超————————————————— 欢迎来到我的博客&#xff0c;一起学习知识…
阅读更多...
【前端客栈】使用CSS实现畅销书排行榜页面

【前端客栈】使用CSS实现畅销书排行榜页面

&#x1f4ec;&#x1f4eb;hello&#xff0c;各位小伙伴们&#xff0c;我是小浪。大家都知道&#xff0c;我最近是在更新各大厂的软件测试开发的面试真题&#xff0c;也是得到了很大的反馈和好评&#xff0c;几位小伙伴也是成功找到了测开的实习&#xff0c;非常不错。如果能前…
阅读更多...
Java的线程

Java的线程

介绍线程 线程是系统调度的最小单元&#xff0c;一个进程可以包含多个线程&#xff0c;线程是负责执行二进制指令的。 每个线程有自己的程序计数器、栈&#xff08;Stack&#xff09;、寄存器&#xff08;Register&#xff09;、本地存储&#xff08;Thread Local&#xff09…
阅读更多...
Git常用命令rebase

Git常用命令rebase

Git常用命令rebase 1、git常用命令rebase rebase 会把你当前分支的 commit 放到公共分支的最后面&#xff0c;所以叫变基&#xff0c;就好像你从公共分支又重新拉出来这个 分支一样。 例如如果你从 master 拉了个 feature 分支出来&#xff0c;然后你提交了几个 commit&…
阅读更多...
【C++】YY带你手把手掌握C++系列 （P2）未完结

【C++】YY带你手把手掌握C++系列 （P2）未完结

前言 大家好&#xff0c;这里是YY的带你手把手掌握C系列。大部分知识点都含有【特性介绍】【使用场景】【注意要点】【易混淆点】【代码演示】【画图演示】由于C体系之庞大&#xff0c;所以该系列以分P形式更新&#xff01;本篇博客为P2&#xff01; 大家可以通过本篇博客查找C…
阅读更多...
【鲁棒优化、机会约束】具有分布鲁棒联合机会约束的能源和储备调度研究（Matlab代码实现）

【鲁棒优化、机会约束】具有分布鲁棒联合机会约束的能源和储备调度研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
项目实现读写分离操作（mysql）

项目实现读写分离操作（mysql）

读写分离 1.问题说明 2.读写分离 Master&#xff08;主库&#xff09;----(数据同步)—> Slave&#xff08;从库&#xff09; Mysql主从复制 mysql主从复制 介绍 mysql主从复制是一个异步的复制过程&#xff0c;底层是基于mysql数据库自带的二进制日志功能。就是一台或多台…
阅读更多...
算法套路十七——买卖股票问题：状态机 DP

算法套路十七——买卖股票问题：状态机 DP

算法套路十七——买卖股票问题&#xff1a;状态机 DP 状态机DP是一种将动态规划方法应用于有限状态机&#xff08;Finite State Machine&#xff09;的问题求解方法。 状态机DP&#xff08;State Machine DP&#xff09;是一种动态规划的思想&#xff0c;它通常用于解决一些具…
阅读更多...
如何应用金字塔模型提高结构化表达能力

如何应用金字塔模型提高结构化表达能力

看一下结构化表达的定义&#xff1a; 结构化表达&#xff1a;是基于结构化思维&#xff0c;理清事物整理与部分之间关系、换位思考后&#xff0c;进行简洁、清晰和有信服力的表达&#xff0c;是一种让受众听得明白、记得清楚、产生认同的精益沟通方式。 结构化表达的基本原则是…
阅读更多...
总结如何申请注册 GitHub 教师教育优惠 Benefits for Teachers 来免费使用 copilot

总结如何申请注册 GitHub 教师教育优惠 Benefits for Teachers 来免费使用 copilot

目录 1. GitHub 教师教育优惠有什么2. 如何申请教师教育优惠呢2.1 选择学校2.2 更改个人信息2.3 准备证明材料2.4 提交申请2.5 遇到的问题2.5.1 问题 12.5.2 问题 22.5.3 问题 3 3. 申请免费的 GitHub Copilot 学生注册不在此处赘述了&#xff0c;网上有很多教程可以参考。但是…
阅读更多...
前端BFC

前端BFC

一、首先我们要先了解常见的定位方案&#xff0c;总共3种&#xff08;普通流、浮动、绝对定位&#xff09; 而BFC是属于普通流的 我们可以把BFC看作为页面的一块渲染区域&#xff0c;他有着自己的渲染规则 简单来说BFC可以看作元素的一种属性&#xff0c;当元素拥有了BFC属性…
阅读更多...
Python os模块详解

Python os模块详解

1. 简介 os就是“operating system”的缩写&#xff0c;顾名思义&#xff0c;os模块提供的就是各种 Python 程序与操作系统进行交互的接口。通过使用os模块&#xff0c;一方面可以方便地与操作系统进行交互&#xff0c;另一方面页也可以极大增强代码的可移植性。如果该模块中相…
阅读更多...
二叉堆讲解

二叉堆讲解

二叉堆讲解 大顶堆和小顶堆 从二叉堆的结构说起&#xff0c;它是一棵二叉树&#xff0c;并且是完全二叉树&#xff0c;每个结点中存有一个元素&#xff08;或者说&#xff0c;有个权值&#xff09;。 堆性质&#xff1a;父亲的权值不小于儿子的权值&#xff08;大根堆&#x…
阅读更多...
什么是JS事件流

什么是JS事件流

什么是JS事件流? 一&#xff1a;事件冒泡 <!DOCTYPE html> <html lang"en"> <head><title>事件冒泡例子</title> </head> <body><div id"box">点击我</div> </body> </html>上述的代…
阅读更多...
利用暴力攻击破解登陆密码

利用暴力攻击破解登陆密码

长久以来&#xff0c;入侵远程计算机系统的工具和技术并没有发生翻天覆地的变化。例如&#xff0c;在许多情况下&#xff0c;普通用户只要知道了相关密码&#xff0c;就能立刻变身为管理员。虽然这些情形听起来不够曲折&#xff0c;但在大多数情况下&#xff0c;暴力攻击是通过…
阅读更多...
css3 flex弹性布局详解

css3 flex弹性布局详解

css3 flex弹性布局详解 一、flexbox弹性盒子 2009年&#xff0c;W3C 提出了一种新的方案----Flex 布局&#xff0c;可以简便、完整、响应式地实现各种页面布局。目前&#xff0c;它已经得到了所有浏览器的支持&#xff0c;这意味着&#xff0c;现在就能很安全地使用这项功能。…
阅读更多...
【一起啃书】《机器学习》第五章 神经网络

【一起啃书】《机器学习》第五章 神经网络

文章目录 第五章 神经网络5.1 神经元模型5.2 感知机与多层网络5.3 误差逆传播算法5.4 全局最小与局部极小5.5 其他常见神经网络5.6 深度学习 第五章 神经网络 5.1 神经元模型 神经网络是由具有适应性简单单元组成的广泛并行互连的网络&#xff0c;它的组织能够模拟生物神经系统…
阅读更多...
最新文章

Copyright @ 2022~2023