小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

vue 快速入门系列 —— 玩转 CMS

作者：小蓝xlanll | 2024-05-03 16:32:03

踩

玩转 CMS

目前接手的内容管理系统（CMS）基于 ant-design-vue-pro（简称模板项目或ant-vue-pro）开发的，经过许多次迭代，形成了现在的模样(简称本地项目)。

假如让一名新手接手这个项目，他会遇到很多问题，比如 .env 的作用、开发时后端接口没有写好如何联调、样式使用less还是 CSS Modules、表单和表格如何使用等等

技术是为产品服务，只需要能用技术做出项目，不需要所有技术、所有最佳实践都清楚。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。

本地项目使用的是 ant design vue 1.x 版本，基于 vue 2

样式

Ant Design Pro 默认使用 less 作为样式语言。

Tip: less 语法 —— 重要，不紧急（后续补上）。直接在 less 中用 css 语法也能完成项目，然后逐步的利用 less 功能。

vscode 搜索，发现 90% 以上都有 scoped，样式语言也确实是 less。


// 69处
<style 
 
// 49处
<style lang="less" scoped>
 
// 15处
<style scoped>

样式开发过程，要避免全局污染，通过 scoped 特性和 css modules 设置组件样式作用域。


<style lang="less" scoped>
  .chart-trend {
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
  }
</style>

Tip:

有关 scoped 更多介绍请看这里
如何在 Vue 中优雅地使用 CSS Modules，可以参考网友的文章

注：避免在 scoped 中使用元素选择器。比如转成 button[data-v-xxxxxx] 会比类选择器组合要慢，因为要匹配的元素太多了。

@import

在单文件组件的样式中，通过 @import 引入 less 文件：


<template>
  <div>
    <p class="red">hello</p>
  </div>
</template>
 
<style lang="less" scoped>
@import './index.less';
</style>


// index.less
.red{
    color: red;
    font-size: 23.5px;
}

请问 .red 是全局的还是局部的，是否会影响到其他页面？

笔者测试发现，是局部的。最后编译出来是这样：


<style type="text/css">.red[data-v-2b80bebf] {
  color: red;
  font-size: 23.5px;
}
</style>

Tip：网上有的说这么写是全局。

如果不加 scoped 则会全局生效。就像这样：


<style lang="less">
@import './index.less';
</style>

导入写法

从 ant-design-vue 库的样式文件中导入 index.less 文件


// index.less 
// ~ant-design-vue/lib/style/index 表示从 ant-design-vue 库的样式文件中导入 index 文件
// 导入的是 index.less 文件，而不是 index.css
// 在 Less 中，通过 @import 关键字导入的文件可以是 Less 文件或 CSS 文件。如果导入的文件没有指定后缀名，Less 会尝试导入同名的 .less 文件，如果不存在，Less 会尝试导入同名的 .css 文件。
@import '~ant-design-vue/lib/style/index';

同一目录下的名为chart.less的文件


<style lang="less" scoped>
// 同一目录下的名为chart.less的文件。不存在，Less 将会继续尝试导入同名的chart.css文件
@import "chart";
</style>

@import '../index.less'; 是 Less 的新语法格式，它不使用 url() 函数。更加简洁和直观。


// 旧语法
@import url('../index.less')
 
// 新语法
@import '../index.less';

使用的是支持新语法的 Less 版本，这两种写法是等价的。

@import "~@/components/index.less"; 是一种在 Less 中导入模块化组件的常见方式。


<style lang="less" scoped>
// 正确
@import "~@/components/test.less";
 
// 错误。less 并不会识别 @ 符号作为项目根目录的表示
// @import "@/components/test.less";
</style>

样式文件类别

在一个项目中，样式文件根据功能不同，可以划分为不同的类别

公共样式

可以将样式提取到一个公共文件，比如 Pro 提取的 src/global.less 然后在 main.js 将样式引入 import './global.less'

工具样式

src/utils/utils.less 这里可以放置一些工具函数供调用，比如清除浮动 .clearfix。


// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;
 
  &::before,
  &::after {
    display: table;
    content: ' ';
  }
 
  &::after {
    height: 0;
    clear: both;
    font-size: 0;
    visibility: hidden;
  }
}

.clearfix() 混合器定义了清除浮动的样式。然后，你可以通过 .clearfix() 在选择器 .selector 中调用混合器，从而应用清除浮动的样式:


.selector {
  // 调用 .clearfix() 混合器
  .clearfix();
}

通用模块级

例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。如果你的项目中需要使用其他布局，也建议将布局相关的 js 和 less 放在这里 src/layouts。

组件级

组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。

Tip：有时样式配置特别简单，也没有重复使用，你也可以用内联样式 style="{ fontSize: fontSizeVar }" 来设置。

覆盖组件样式

由于业务的个性化需求，我们经常会遇到需要覆盖组件样式的情况。请看示例：


<template>
  <div class="test-wrapper">
      <a-select v-model="name" style="width:400px">
          <a-select-option value="1">Option 1</a-select-option>
          <a-select-option value="2">Option 2</a-select-option>
          <a-select-option value="3">Option 3</a-select-option>
      </a-select>
  </div>
</template>
 
<script>
export default {
  data(){
    return {
      name: 'Option 1'
    }
  }
}
</script>
<style lang="less" scoped>
// 使用 scss, less 时，可以用 /deep/ 进行样式穿透
.test-wrapper ::v-deep .ant-select {
  font-size: 26px;
}
 
.test-wrapper /deep/ .ant-select {
  font-weight: 700;
}
</style>
 
<style scoped>
/* 这里注释不可以用 `//` */
.test-wrapper >>> .ant-select {
  color: blue
}
</style>

在 scss、less 中可以使用 /deep/或::v-deep 进行样式穿透，在css 中可以使用 >>> 穿透。

最终渲染成：


<style type="text/css">
.test-wrapper[data-v-2b80bebf] .ant-select {
  font-size: 26px;
}
.test-wrapper[data-v-2b80bebf] .ant-select {
  font-weight: 700;
}
</style>
 
<style type="text/css">
/* 这里注释不可以用 `//` */
.test-wrapper[data-v-2b80bebf] .ant-select {
  color: blue
}
</style>

请求

axios

首先回顾下 axios 如何使用的。

在 vue-admin-template（基于 element-ui）中使用 axios 有以下几步：

安装 axios 包
对 axios 进行封装，比如封装到 request.js 文件中。关键增加请求拦截器和响应拦截器，比如返回 403、500等都会通过 Message 组件提示给用户
每个页面（或模块）引入 request.js，导出接口。

ant-vue-pro 中axios 用法类似：

通过 src\utils\request.js 封装 request.js
每个页面（或模块）引入 request.js，导出接口。例如登录模块对应 src\api\login.js

为了方便管理维护，统一的请求处理都放在@/src/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：


api/
  user.js
  permission.js
  goods.js
  ...

本地项目 api

本地项目的 api 大概是这样：


import { axios } from '@/utils/request'
import cancelAxios from 'axios'
import qs from 'qs'
 
/* 取消请求 */
var CancelToken = cancelAxios.CancelToken
export let cancellistApi
 
// 列表
export function list (parameter) {
  return axios({
    url: '/acms/demo/list',
    method: 'get',
    // params 参数用于将数据通过查询字符串的形式添加到请求的 URL 中。这种方式适用于 GET 请求
    params: parameter,
    cancelToken: new CancelToken(function (c) {
      cancellistApi = c
    }),
    // paramsSerializer 是 axios 的一个配置选项，用于将请求参数序列化为 URL 查询字符串格式
    // 比如转换开始结束时间的格式：rangeDate[]=2023-11-11&rangeDate[]=2023-12-03 转成 rangeDate=2023-11-11&rangeDate=2023-12-03
    paramsSerializer: function (params) {
      return qs.stringify(params, {
        arrayFormat: 'repeat'
      })
    }
  })
}
 
// get请求
export function review (id) {
  return axios({
    url: `/acms/demo/detail/${id}`,
    method: 'get'
  })
}
 
// post请求
export function pass (data) {
  return axios({
    url: `/acms/demo/pass`,
    method: 'post',
    // data 参数则是将数据作为请求的正文发送给服务器。这种方式适用于 POST、PUT、DELETE 等请求
    // 请求中的 Content-Type 头附带的是 application/json 或 multipart/form-data 等适合传递数据的类型
    data
  })
}
 
// 删除文章
export function delArticle (id) {
  return axios({
    url: `/acms/article/${id}`,
    // DELETE 方法用于请求服务器删除指定的资源。它通常需要在请求中指定要删除的资源的标识符。例如，使用 DELETE 方法可以删除用户账号、删除文章等。
    method: 'delete'
  })
}
// 上线文章
// PUT 方法用于向指定的 URL 发送数据，通常是用于更新服务器上的资源
export function onlineArticle (id) {
  return axios({
    url: `/acms/article/online/${id}`,
    method: 'put'
  })
}

get、post、put、delete请求，有时引入 qs 包，用于将请求的参数对象序列化，比如处理开始时间和结束时间。

Tip: qs 是一个用于序列化和反序列化 URL 查询字符串的 JavaScript 库。比如：

序列化：将 JavaScript 对象序列化为 URL 查询字符串的格式，以便作为请求参数添加到 URL 中。例如，将 { key1: 'value1', key2: 'value2' } 转换为 key1=value1&key2=value2。
反序列化：将 URL 查询字符串解析为 JavaScript 对象，方便进行参数的提取和处理。例如，将 key1=value1&key2=value2 转换为 { key1: 'value1', key2: 'value2' }。
处理复杂参数：qs 支持处理复杂对象、数组等数据结构，可以将它们转换为合适的 URL 查询字符串格式，方便进行网络请求。

cancelAxios 用于取消请求。不过有的同事用法不对，他用在搜索的 input 框中，想实现输入字符延迟查询。可以用 .lazy 或 lodash 的延迟。

Tip: ant design vue 中 lazy(<a-input v-model.lazy=)不起作用。根据场景可以使用lodash 中的防抖或节流。当调用 delayedRequest 函数时，如果在 1000 毫秒内没有再次调用该函数，那么延迟时间结束后，请求逻辑将会执行。


import { debounce } from 'lodash';
 
const delayedRequest = debounce(() => {
  // 在这里执行你的请求逻辑
}, 1000); // 延迟时间为 1000 毫秒
 
// 调用 delayedRequest 函数
delayedRequest();

async和Promise

在 ant-vue-pro 中只使用了 Promise，没有使用 async。

从 ./src/views 中搜索：

async、await 都没有
promise 在13个文件中有 23 处。

用法大致如下：


// 模拟网络请求、卡顿 800ms
new Promise((resolve) => {
   
}).then(() => {
    
})


// 两个都成功才进入 then
Promise.all([repositoryForm, taskForm]).then(values => {
    
}).catch(() => {
   
})


new Promise((resolve) => {
 
}).then(() => {
    
}).catch(() => {
 
// 总是会执行。比如关闭`加载中...`弹框
}).finally(() => {
    
})

本地项目的写法

本地项目的写法有以下几种：

取消发布。只处理了成功的情况


// axios 在响应拦截器中已经处理了http 非 200 的请求，也处理的 5000、4000 等 token 过期或其他错误，最后到这里通常是约定好的接口数据。
cancelPublish(params).then((res) => {
    if (res.code === 0) {
        this.getDataList()
        this.$message.success(res.msg)
    }
})

编辑。在 finally 中关闭关闭加载中...弹框


async editFn (contentType, params) {
    this.loading = true
    try {
        const res = await updateArticle(params)
        if (res.code === 0) {
            // 请求成功...
        }
    } catch (err) {
 
    } finally {
        this.loading = false
    }
},

只有一个异步请求，并且需要处理错误情况。可以这么写：


fetchData(false).then(() => {
    // do ...
}).catch(() => {
    console.log('error')
})

如果不觉得 try...catch 麻烦，也可以这样：


try {
    let p = await fetchData(false)
    // do ...
} catch (e) {
    console.log('error')
}

注：try...catch 除了可以捕获语法报错，还能捕获 reject 。


const fetchData = new Promise((resolve, reject) => {
    reject(11);
});
 
async function myAsyncFunction() {
    try {
        let p = await fetchData;
        console.log('p', p);
        // 其他代码...
    } catch (e) {
        console.log('error', e);
    }
}
 
myAsyncFunction();
 
// => error 11

需要注意的几点

错误写法

遮罩层没有消失


async function request() {
    console.log('开启遮罩')
    // 报错就退出了
    let json = await requestUserList() // {1}
    // 处理数据...
    console.log('关闭遮罩');
}

await 与并行


// 下面这段代码是串行
async function foo() {
    let a = await createPromise(1)
    let b = await createPromise(2)
}

可以通过下面两种方法改为并行：


// 方式一
async function foo() {
    let p1 = createPromise(1)
    let p2 = createPromise(2)
    // 至此，两个异步操作都已经发出
    await p1
    await p2
}
 
// 方式二
async function foo() {
    let [p1, p2] = await Promise.all([createPromise(1), createPromise(2)])
}

async 有时会比 Promise 更容易调试

promise.catch

以下两段代码等效


promise1.then(null, () => {
    console.log('拒绝')
})
 
// 等价于
 
promise1.catch(() => {
    console.log('拒绝')
})

链式捕获错误


let p1 = new Promise((resolve, reject) => {
    resolve('10') // {1}
})
 
// 三个完成处理程序都有可能出错，我们可以在末尾添加一个已拒绝处理的程序对这个链式统一处理
p1.then(() => {
    throw new Error('fail')
    console.log(1)
}).then(() => {
    console.log(2)
}).then(() => {
    console.log(3)
}).catch(e => {
    console.log(e.message)
})
 
// 输出：fail

如果将 {1} 改成 reject(10)，也会直接到 catch 中，这时 e 就是 10。

await 的返回值

await 命令后面是一个 Promise 对象。如果不是，会被转为一个立即 resolve 的 Promise 对象。Promise 的解决值会被当作该 await 表达式的返回值。


async function fa() {
    return await 1
}
 
// 等价于 
 
async function fa() {
    return await Promise.resolve(1)
}
 
// 等价于 
async function foo() {
    return await new Promise((resolve, reject) => {
        resolve(1)
    })
 }

在看一个示例：


function resolveAfter2Seconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function f1() {
  let x = await resolveAfter2Seconds(10).then(res => {return 1});
  console.log(x); // 1
}
 
f1();

每调用一次 then 就会创建一个新的 Promise。

async 函数中的 return

return 返回值，会成为 then() 方法回调函数的参数


async function foo() {
    return 'hello'
}
 
foo().then(v => {
    console.log(v)
})
 
// hello

Promise 执行器错误

每个执行器中都隐含一个 try-catch 块，所以错误会被捕获并传入给已拒绝回调。以下两段代码等价：


let p1 = new Promise(function(resolve, reject){
    throw new Error('fail')
})
 
p1.catch(v => {
    console.log(v.message) // fail
})


let p1 = new Promise(function(resolve, reject){
    try{
        throw new Error('fail')
    }catch(e){
        reject(e)
    }
})
 
...

env

.env 是一种用来存储环境变量的文件。

模板项目的 env

在 ant-vue-pro 中一共有三个 .env 文件。


// .env
NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api
 
// .env.development
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api
 
// .env.preview
NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api

.env - 在所有的环境中被载入
.env.[mode] - 只在指定的模式中被载入

一个环境文件只包含环境变量的“键=值”对：


FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
FOO2 = bar # 等号前后加空格也可以

注：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量默认可以被识别。比如 FOO=bar 就不会被识别，除非使用其他手段进行变量扩展。

三个模式

默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

比如配置如下：


// .env
NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api
 
VUE_APP_address = 长沙
 
// .env.development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api
 
tel = 2222
VUE_APP_NAME=peng 3
VUE_APP_tel = 1111

运行 npm run serve（对应package.json中 "serve": "vue-cli-service serve",），会依次加载 .env 和 .env.development，后者会将前者的值覆盖，所以最后通过 process.env 输出：


console.log(process.env)
 
{
BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_API_BASE_URL: "/api"
VUE_APP_NAME: "peng 3"
VUE_APP_PREVIEW: "true"
VUE_APP_address: "长沙"
VUE_APP_tel: "1111"
}

比如：

VUE_APP_address 从 .env 中得到
tel 被忽略
NODE_ENV 在 .env.development 中被自动加上该属性
VUE_APP_tel 中 = 前后有空格也能生效

Tip：每次修改 .env，需要重新启动服务才会生效。

--mode

可以通过 --mode 覆写默认的模式。比如本地开发我可以代理到测试的url，也像代理到预发布的url，我可以这样做：
增加 .env.pre:

VUE_APP_URL=/myapi

package.json 增加：


"scripts": {
    "serve": "vue-cli-service serve",
  + "serve:pre": "vue-cli-service serve --mode pre",

通过 npm run serve:pre 就能操作预发布环境的数据。现在输出：


console.log(process.env)
 
{
BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_API_BASE_URL: "/api"
VUE_APP_PREVIEW: "false"
VUE_APP_URL: "/myapi"
VUE_APP_address: "长沙"
}

注意，现在 NODE_ENV 是 development，这个值来自 .env，vue-cli 没有给我们增加一个 NODE_ENV 的变量。

execSync

关于构建，有的人可能会通过配置一个 js 去执行，这样能更灵活，比如运维需要你创建一个每次创建一个文件。就像这样：


// package.json
 
"scripts": {
  "build": "node src/libs/shell.js",
  "build:pre": "node src/libs/shell.js pre",
  "build:test": "node src/libs/shell.js test"


// shell.js
 
var dist = 'dist'
var d = new Date().getTime().toString()
var env = process.argv.splice(2)[0]
var writeFileSync = require('fs').writeFileSync
var execSync = require('child_process').execSync
 
if (env == 'test') {
    execSync('vue-cli-service build --mode test')
} else if (env == 'pre') {
    execSync('vue-cli-service build --mode pre')
} else {
    execSync('vue-cli-service build --mode prod')
}
 
writeFileSync(dist + '/xx.txt', d)

Tip: execSync 是 Node.js 的 child_process 模块提供的一个同步执行外部命令的函数。它允许通过 JavaScript 代码来执行系统命令，并等待命令执行完成后再继续执行后续代码。

Mock

ant-vue-pro 使用的是 mockjs2（好像和 mockjs 是同一个东西）。

本地项目使用的 proxy，当后端没有提供接口给前端时，前端还是需要自己去模拟数据。

笔者通过如下方式给模板项目添加 mockjs。

首先模板项目中有 ant-vue-pro 中的 mockjs2 包，直接跳过安装包。

创建 src/mock/index.js:


// 判断环境不是 prod 时加载 mock 服务
if (process.env.NODE_ENV !== 'production') {
 
  console.log('[antd-pro] mock mounting')
  const Mock = require('mockjs2')
  require('./skin.js')
  
  Mock.setup({
    timeout: 100 // 设置所有请求的响应时间为100ms
  })
}


// skin.js
import Mock from 'mockjs2'
const navList = {
    "code": 0,
    "msg": "查询成功",
    "error": "",
    "url": null,
    "data": [
        {...},
    ],
    "success": true
};
 
Mock.mock(/\/mockjs-cms\/channel\/list\/navigation/, 'get', navList)

main.js 中引入 src/mock/index:

import './mock/index.js'

最后是发起请求：


export function queryNavigation() {
    return axios({
        url: `/mockjs-cms/channel/list/navigation`,
        method: 'get',
    })
}

注：中途笔者遇到两个问题：

mockjs 返回了导航数据，但页面没有显示导航。将 timeout: 800 改成 timeout: 100。
本地开发时，保存 mock/index.js(按 ctrl + s) 文件 vscode 不会触发自动编译，在别的文件中保存会触发自动编译。最后引入这个资源，比如在 main.js 中引入，然后重启服务或vscode即可实现保存自动编译。

另外公司使用了 eolink，后端定义好接口后，就有一个简易 Mock 链接，开发阶段前端可以这样：


export function queryNavigation() {
    return axios({
        // 简易 Mock 链接
        url: 'https://mockapi.eolink.com/81F5kJv4c4f5ff6d3b8a7880xxxx',
        method: 'get',
    })
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/530566

vue 快速入门 系列 —— 玩转 CMS

玩转 CMS

样式

@import

导入写法

样式文件类别

公共样式

工具样式

通用模块级

组件级

覆盖组件样式

请求

axios

本地项目 api

async和Promise

本地项目的写法

需要注意的几点

错误写法

await 与并行

async 有时会比 Promise 更容易调试

promise.catch

await 的返回值

async 函数中的 return

Promise 执行器错误

env

模板项目的 env

三个模式

--mode

execSync

Mock

vue 快速入门系列 —— 玩转 CMS