中台项目步骤

发布于:2022-11-09 ⋅ 阅读:(12) ⋅ 点赞:(0) ⋅ 评论:(0)

项目课设计

人力资源的环境搭建

vue-element-admin的了解和介绍

目标: 学习和了解通用的vue后台集成方案vue-element-admin

vue-element-admin 是一个后台前端解决方案,它基于 vueelement-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。

vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.

vue-element-admin 有一个成熟的集成方案,里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.

这里是官网地址

这里是线上demo地址

注意:集成方案并不适合我们直接拿来进行二次开发,基础模板则是一个更好的选择

基础模板, 包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板, 我们可以直接在该模板上进行功能的扩展和项目的二次开发

 本节任务: 浏览vue-element-admin的文档,了解这个集成方案

搭建项目前的一些基本准备

目标: 介绍搭建一个vue中台项目,需要环境和工具

接下来要做的是一个大型的项目,我们需要更好的环境准备和资源前置,所以提前检查我们的环境和资源

nodejs环境

nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的npm功能来管理依赖包

查看node 和 npm的版本 (注意使用稳定版)

$ node -v #查看node版本
$ npm  -v #查看npm版本

npm淘宝镜像

npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议 将 npm设置成国内的淘宝镜像

设置淘宝镜像

$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址

vscode编辑器

vscode编辑器是目前前端开发的编码利器, 以及丰富的插件系统,非常适合开发前端项目

vscode编辑器插件 + vetur + eslint

vetur是基于 单文件组件开发的支持插件, eslint是 基于代码校验的插件工具

除此之外, eslint需要在vscode中进行一些参数的配置

4、添加eslint配置

eslint作用:规范和统一代码格式

为什么要配置呢?

答:考虑到团队开发的时候,如果代码规范都不一样,那么合并代码后会出现比较多的问题,因此团队开发代码风格必须统一。

{ 
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

本项目的技术栈 本项目技术栈基于 ES2015+vuevuexvue-routervue-cliaxioselement-ui

本节任务: 大家检查各自的开发环境和资源,尤其是npm的淘宝镜像额外需要注意

项目模板启动和目录介绍

目标: 拉取项目的基础模板,并对目录进行介绍

vue-element-admin的基础 模板和我们之前开发的项目一样吗 ?本章节,我们对该项目目录进行一下介绍

git拉取基础项目模板

$ git clone  https://gitee.com/panjiachen/vue-admin-template.git hr

安装项目依赖(定位到项目目录下)

$ cd hr
$ npm install  #安装依赖

启动项目

$ npm run dev #启动开发模式的服务

 项目运行完毕,浏览器会自动打开基础模板的登录页,如上图

目录结构

本项目已经为你生成了一个基本的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js          # 配置文件
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

此时,你可能会眼花缭乱, 因为生成的目录里面有太多的文件 我们在做项目时 其中最关注的就是src目录, 里面是所有的源代码和资源, 至于其他目录, 都是对项目的环境和工具的配置

本节任务: 按照操作和讲解步骤,进行拉取代码,安装依赖,运行项目,阅读目录和文件的操作

本节注意 需要注意自己的npm是否已经设置了淘宝镜像

项目运行机制和代码注释

目标: 了解当前模板的基本运行机制和基础架构

眼花缭乱的目录和文件到底是怎么工作的? 我们进行一下最基本的讲解,帮助大家更好的去理解和开发

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件

main.js

请注释掉mock数据的部分,如图

同时,请注释掉vue.config.js中的 before: require('./mock/mock-server.js')

 App.vue

 permission.js

src下,除了main.js还有两个文件,permission.jssettings.js

permission.js 是控制页面登录权限的文件, 此处的代码没有经历构建过程会很难理解, 所以先将此处的代码进行注释,等我们构建权限功能时,再从0到1进行构建。

清理代码

settings.js则是对于一些项目信息的配置,里面有三个属性 title(项目名称),fixedHeader(固定头部),sidebarLogo(显示左侧菜单logo)

settings.js中的文件在其他的位置会引用到,所以这里暂时不去对该文件进行变动

Vuex结构

当前的Vuex结构采用了模块形式进行管理共享状态,其架构如下


 

其中app.js模块和settings.js模块,功能已经完备,不需要再进行修改。 user.js模块是我们后期需要重点开发的内容,所以这里我们将user.js里面的内容删除,并且导出一个默认配置

export default  {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {}
}

同时,由于getters中引用了user中的状态,所以我们将getters中的状态改为

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device
}
export default getters

scss

该项目还使用了scss作为css的扩展语言,在styles目录下,我们可以发现scss的相关文件

SCSS处理的了解和使用

目标: 了解和学习Scss处理器的规范和用法

官方文档

首先注意,这里的sass和我们的scss是什么关系

sass和scss其实是一样的css预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。 两者是有不同的,继sass之后scss的编写规范基本和css一致,sass时代是有严格的缩进规范并且没有‘{}’和‘;’。 而scss则和css的规范是一致的。

变量

sass使用$符号来标识变量

$highlight-color: #f90 

上面我们声明了一个 名为$highlight-color的变量, 我们可以把该变量用在任何位置

#app {
    background-color:  $highlight-color;
} 

以空格分割的多属性值也可以标识变量

$basic-border: 1px solid black;


#app {
    background-color:  $highlight-color;
    border: $basic-border
}  

变量范围

CSS属性不同,变量可以在css规则块定义之外存在。当变量定义在css规则块内,那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中(如@media或者@font-face块),情况也是如此:

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}
​
# 编译后 
nav {
  width: 100px;
  color: #F90;
  background-color: black;
}
​

在这段代码中,$nav-color这个变量定义在了规则块外边,所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav{ }规则块内,所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量,不会对这里造成影响。

嵌套语法

和less一样,scss同样支持嵌套型的语法

#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }

转化后

#content article h1 {
  color: #1dc08a;
}
​
#content article p {
  font-style: italic;
}
​
#content aside {
  background-color: #f90;
}
&父选择器
假如你想针对某个特定子元素 进行设置
比如 
#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }

学到这里,我们会发现scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名

此时,我们再来看一下模板中的 styles/variables.scss

上述文件,实际上定义了我们的一些基础数值,方便大家在某个文件统一的处理.

本节任务:对scss进行了解和掌握

建立远程Git仓库并完成初始提交

目标码云或者github上建立相应的远程仓库,并将代码分支提交

建立远程仓库

远程仓库建立只需要在网站上直接操作即可

本地项目提交

注意: 由于我们之前的项目是直接从 vue-element-admin 克隆而来,里面拥有原来的提交记录,为了避免冲突, 先将原来的.git文件夹删除掉

并且对项目进行git初始化

$ git init  #初始化项目
$  git add . #将修改添加到暂存
$  git commit -m '人资项目初始化' #将暂存提到本地仓库

查看版本日志

$ git log #查看版本日志

推送到远程仓库

推送到远程仓库一般先将远程仓库地址用本地仓库别名代替

$ git remote add origin <远程仓库地址>  #添加远程仓库地址

当我们不清楚自己的仓库对应的origin地址时, 我们可以通过命令查看当前的远程仓库地址

$ git remote -v #查看本地仓库的远程仓库地址映射

推送master分支到远程仓库

$ git push -u origin master #将master分支推送到origin所代表的远程仓库地址

本节任务: 同学们 根据以上操作,将拉取下的项目提交到自己的仓库里面

API模块和请求封装模块介绍

目标 介绍API模块的单独请求和 request模块的封装

Axios的拦截器介绍

该项目采用了API的单独模块封装和axios拦截器的方式进行开发

axios的拦截器原理如下

axios拦截器

axios作为网络请求的第三方工具, 可以进行请求和响应的拦截

通过create创建了一个新的axios实例

// 创建了一个新的axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 超时时间
})

请求拦截器

请求拦截器主要处理 token的统一注入问题

// axios的请求拦截器
service.interceptors.request.use(
  config => {
    // 逻辑
  }
)

响应拦截器

响应拦截器主要处理 返回的数据异常数据结构问题

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 逻辑
  }
)

这里为了后续更清楚的书写代码,我们将原有代码注释掉,换成如下代码

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
​
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 超时时间
}) // 创建一个axios的实例
​
service.interceptors.request.use() // 请求拦截器
service.interceptors.response.use() // 响应拦截器
​
export default service // 导出axios实例

api模块的单独封装

我们习惯性的将所有的网络请求 放置在api目录下统一管理,按照模块进行划分

单独封装代码

import request from '@/utils/request'
​
export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}
​
export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}
​
export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}
​

上面代码中,使用了封装的request工具,每个接口的请求都单独导出了一个方法,这样做的好处就是,任何位置需要请求的话,可以直接引用我们导出的请求方法

为了后续更好的开发,我们可以先将user.js代码的方法设置为空,后续在进行更正

// import request from '@/utils/request'
​
export function login(data) {
​
}
​
export function getInfo(token) {
​
}
​
export function logout() {
​
}
​

提交代码

本节任务: 将request和用户模块的代码进行清理,理解request和模块封装

项目初始化