2020前端实践|优雅的实现一个全栈项目（一）

vweb_visual是一个简单的后台管理项目，疫情在家为了不无聊抽时间写的，一来呢自己的github有点空荡荡的，想想自己已经步入社会，不能像学生时代一样觉得时间充足。所以下定决心做一个长期维护的全栈项目，不仅仅是为了自己的成长。

技术选型

UI框架： iview
前端框架： Vue.js + Typescript.js
请求库：Axios
样式编译： sass
模拟库： easymock
图表：AntVG2
图标： iconfont图标
布局选型：flex + rem布局

项目安装

1.将项目克隆到本地

git clone https://github.com/wangly19/bweb_visual_vue.git

2.安装依赖

npm install
yarn install

3.跑动项目

npm run serve

前言

当我使用typescript作为和vue.js搭档的时候。我对于ts在vue的使用是一无所知的，随着项目的进行，也慢慢的对于ts得心应手，但是我突然发现了在vue2中使用ts，本身是一件非常坑的事情，类型验证的优势反而没有起到预想中的作用，甚至ts本身的功能都没有发挥出来，不过优点也是有的，代码折叠非常的优雅。所以既然都进坑了，那么爬出来是有必要的。

axios 碰上 restful

现在的数据都是mock去模拟出来用来展示的，为了页面不显得突兀。所以数据是不规范的，难以阅读的。接口也是使用了分离式，没有和view层放在一起。统一放在了api文件中。遵守restfulAPI（我只在设备管理中做了一个大概）后续会在nest.js中继续完善。

放出一个请求实例

import service from '@/api/axios.config'

// get & post 请求 => 资源统一用parmas
export function tradDevice<T>(params: T, type: string): Promise<any> {
  return service({
    url: `/device`,
    method: type,
    params
  })
}

// put & delete 需要带上数据的id
export function alterDevice<T>(id: number, params: T, type: string): Promise<any> {
  return service({
    url: `/device/${id}`,
    method: type,
    params
  })
}

看过很多大佬的项目，基本都是将请求层独立出来，其实我是比较喜欢的，当api请求出错时，我只需要去定位请求层然后更改请求的代码就OK了。而不需要在万军丛中去更改this.$axios(xxxx)等一系列的代码，保证在view层中利用async/await做出处理。架构清晰，保证可读性。

样式重置

在项目中是引入了normalize.css v8.0.1，这是一个非常好用的css，配合上自己常用的一些样式重置，能够满足大部分的项目所需。是一个非常好的项目。

rem适配

这里贴上个人的一个rem适配方案。方案不代表最优，只是自己用的舒服罢了。如果您觉得有用，不妨在项目中继续完善它。

resetPageSize.ts

/**
 * @author: wangly
 * 页面fontsize重置
 */
(function (window: Window): void {
  window.addEventListener('resize', function () {
    document.documentElement.style.fontSize = `${getWindowSize() / 10}px` // 按照设计图
  })
  document.documentElement.style.fontSize = `${getWindowSize() / 10}px` // 按照设计图
  console.warn('当前的设计图rem: ', getWindowSize())
})(window)

/**
 * 获取字体大小
 * @return 获取当前页面的宽度
 */
function getWindowSize (): number {
  const __width: number = document.documentElement.clientWidth
  return __width > 1920 ? 1920 : __width
}

main.ts

// 引入rem根字体大小
import '@/tools/resetPageSize'

scss转换方法

@function rem($px){
  $remSize: $px / 192px;
  @return $remSize * 1rem;
}

使用方式

html{
  height: rem(192px); // => 1rem
}

flex & postion 等mixins

当你需要反复的去写一个flex布局，position布局，不妨尝试一下sass mixins，它会很好的去帮助你生成需要的样式，且精简。

// flex布局
@mixin flex($justify: flex-start, $align: flex-start, $direction: row) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  flex-direction: $direction;
}

// position定位
@mixin position($position: relative, $top: initial, $right: initial, $bottom: initial, $left: initial) {
  position: $position;
  left: $left;
  right: $right;
  bottom: $bottom;
  top: $top,
}

当然，对于圆角和zinde我也会做留一手

// 设置层级
@mixin zIndex($zindex: 0) {
  z-index: $zindex;
}

// 圆角
@mixin radius($px: 0) {
  border-radius: $px;
}

ts方法库

这个后续会抽成一个单章，提前拉出来溜溜。因为能说的太多了。每个人都有自己的骚东西。不是吗QAQ。

export function cssExpand<T>(css: T, id: string) {
  let style: HTMLStyleElement = document.createElement('style')
  style.type = "text/css"
  style.innerHTML = `@charset "UTF-8"; ${css}`
  if (id) {
    let $style: HTMLElement | null = document.getElementById(id)
    if ($style != null) $style.outerHTML = ''
    style.id = id
  }
  // 应用新样式
  document.head.appendChild(style)
}

布局设计

布局采用传统的葫芦式布局，顺序分别如下: 头部 >>> 导航 >>> 内容 + 抽屉设计。比较符合审美，easymock的官网也是相同的设计。这点我确实是抄袭他的，在自己的想法上进行更改。无异于是非常适合iview的。如果大家觉得不错，可以给个星星给我哦。当前缺点也很明显啦，toolbar的空间没有充分利用好，显得有点华而不实的感觉。且一个动画都还没做好，这是一个长期的过程。