SAAS-多租户SaaS平台的数据库方案(前端框架)

标签: SAAS

3 前端框架

3.1 脚手架工程

技术栈

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

前端环境

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

3.2 启动与安装

(1)解压提供的资源包

(2)在命令提示符进入该目录,输入命令:

cnpm install

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

(3)关闭语法检查

打开 config/index.js 将useEslint的值改为false。

useEslint: false,

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

(4)输入命令:

npm run dev

3.3 工程结构

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

├── 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

3.4 执行流程分析

3.4.1 路由和菜单

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

这里的路由分为两种, constantRouterMapasyncRouterMap

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

在这里插入图片描述

3.4.2 前端数据交互

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

  1. UI 组件交互操作;
  2. 调用统一管理的 api service 请求函数;
  3. 使用封装的 request.js 发送请求;
  4. 获取服务端返回;
  5. 更新 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设置等

版权声明:本文为weixin_42528266原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42528266/article/details/103751256

智能推荐

memmove函数与memcpy函数的模拟实现

memmove函数和memcpy函数都是在内存复制任意类型的,但是它俩也有区别。当源区域和目标区域有重复的,memmove函数会复制缓冲区重叠的部分,而memcpy相反,会报出未知错误。 下面给出两个函数的实现 首先,memmove函数。 实现的基本原理如下图。 具体代码如下: memcpy函数的实现很简单,就直接给出源代码了...

SpringFramework核心 - IOC容器的实现 - 总结

1. 概述 把Spring技术内幕第一章和第二章过了一遍,也做了一些笔记, 对IOC容器的实现有了一定皮毛理解,现在跟着源码再过一遍总结一下IOC容器的初始化,Bean的初始化的过程,做一下总结 ① IOC容器和简单工厂模式 在开始之前,先想想我们平时是怎么使用IOC容器为我们管理Bean的,假设我们要把下面的User类交给IOC容器管理 我们不想关心如何创建一个User对象实例的,仅仅在需要他的...

Python和Django的安装

个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈  一、下载并安装Python Python 官方下载地址:http://www.python.org/ftp/python/ 我们这里选择的是 Python 2.7.2 。虽然目前最新版是Python 3.2.2, 但是Django目前还不支持 Python 3.2.2。 安装步骤很简单,双击安装包开...

OpenStack代码贡献初体验

为什么80%的码农都做不了架构师?>>>     OpenStack如今已成为开源云平台中的明星项目,得到广泛关注。OpenStack的优秀出众依赖于众多开发者的努力,在享受其带来的便利与快捷的同时,为其做一份贡献也是一个开发者的义务。  在前段时间的OpenStack的测试过程中,我发现Nova项目中的一个Bug,于是向社区提交了Bug报...

猜你喜欢

SQL Server之8:sql查询每个学生得分最高的两门课

这是一道面试题,今天有空把它记下来,以后遇到此类问题作个参考!刚一看到这个题目,估计好多人都会想到关键字top,其实这里用到的关键字是partition, 好了,先看看表结构,及数据吧!     接下来看一看partition的功能,执行语句   结果如下:   到这里一目了然知道最终结果了!   View Code     &...

vue-video-player 浏览器缩放

文章目录 前言 一、vue-video-player的封装 二、调用 1. 引入 2. vue template代码 2. 主要js代码 效果 前言 此篇是在上一次《[Vue 播放rtmp直播流]》基础之上的更新及补充;近期接到客户需求,需要在视频流上显示额外的信息;当然,视频流上叠加信息可以通过canvas来完成(透明canvas实现),但是在测试的过程中发现,当浏览器缩放时,叠加的图层信息与初...

Hibernate简单实例:数据库驱动配置及数据的输入

前言:本次使用的hibernate框架为idea自动创建的版本:5.3.7.Final   本机的mysql版本为 8.0.11  下载的mysql 驱动程序版本为 mysql-connector-java-8.0.11.jar 一、Hibernate开发的环境搭建 1.使用idea工具创建hibernate项目 然后一路next,按照自己的需要填写项目名称,项目存放...

K8S最小调度单位Pod详解

k8s里面非常重要的一个概念pod,首先简单的介绍是pod是k8s最小的调度单位,一个pod里面可以包含一个或者多个container,一个pod共享一个namespace,它们之前可以通过localhost来进行通信。 docker:Namespace 做隔离,Cgroups 做限制,rootfs做文件系统。 容器本质是进程,而k8s是操作系统。 pod就是类似于进程组。 部署的一些应用有着类似...

实战:Gitlab的搭建以及网站托管的使用方法(一)

实战:Gitlab的搭建以及网站托管的使用方法!(一) gitlab搭建之gitlab标准版本安装 下一期预告:gitlab搭建之***本** 学习之前我们先来看一下我们的学习素材: 链接:https://pan.baidu.com/s/1CgZULZv1EuUmCxmtCAwOpw 提取码:Gitl 前期注意事项: 1、把物理内存调到6G,不然后安装时,会内存太低报错。 (建议使用虚拟机,服务器...