2023年2月

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在VUE+Element 前端应用中，图标是必不可少点缀界面的元素，因此整合一些常用的图标是非常必要的，还好Element界面组件里面提供了很多常见的图标，不过数量不是很多，应该是300个左右吧，因此考虑扩展更多图标，我引入了
vue-awesome
组件，它利用了Font Awesome的内置图标，实现了更多图标的整合，可以在项目中使用更多的图标元素了，另外在本随笔的图标管理中，提供了对图标名称进行搜索，并根据图标颜色样式生成对应图标的代码，非常方便使用。

Vue-Awesome 是基于 Vue.js 的 SVG 图标组件，内置图标来自
Font Awesome
。

本篇随笔先来上一个图标管理的界面效果，然后在逐一进行介绍Element内置图标和Vue-Awesome的图标吧。

Element图标管理界面如下：

基于Vue-Awesome的图标管理如下所示。

其中查询提供了名称进行图标查询，以及限制一次性展示多少个，另外提供一个自定义颜色选项，从而可以改变图标的展示颜色。

1、Vue-Awesome的使用介绍

Vue-Awesome 的 npm的安装命令如下所示：

npm install vue-awesome

安装方式如下所示

import Vue from 'vue'

/*在下面两种方式中任选一种*/

//仅引入用到的图标以减小打包体积
import 'vue-awesome/icons/flag'

//或者在不关心打包体积时一次引入全部图标
import 'vue-awesome/icons'

/*任选一种注册组件的方式*/import Icon from'vue-awesome/components/Icon'

//全局注册（在 `main .js` 文件中）
Vue.component('v-icon', Icon)//或局部注册（在组件文件中）
export default{

  components: {'v-icon': Icon

  }

}

界面使用代码如下所示，详细Demo可以参考
https://justineo.github.io/vue-awesome/demo/
了解。

<!--基础用法-->
<v-iconname="beer"/>

<!--添加选项-->
<v-iconname="sync"scale="2"spin/>
<v-iconname="comment"flip="horizontal"/>
<v-iconname="code-branch"label="Forked Repository"/>

<!--堆叠图标-->
<v-iconlabel="No Photos">
  <v-iconname="camera"/>
  <v-iconname="ban"scale="2"class="alert"/>
</v-icon>

Vue-Awesome图标提供了一些prop的属性设置，参考下面列表所示。

name: string
图标名称。如果本组件没有用作图标堆栈的容器，那么这个字段是必须的。所有合法的值都对应于图标文件相对于
icons
目录的路径。请注意当你在 FontAwesome 官网查找到图标名词后，需要确认一下图标集的名称。比如，在
500px
这个图标的详情页
会有一个 URL 参数
style=brands
，故图标名称就是
brands/500px
。
默认情况下，只能使用 FontAwesome 的免费图标，另外由于
solid
样式中的图标最多，我们将其设为了默认图标集，所以路径前缀可以省略。
当传入
null
时，整个组件将不会渲染。
scale: number|string
用来调整图标尺寸，默认值为
1
。
spin: boolean
用来指定图标是否需要旋转。默认值为
false
。（不能与
pulse
一同使用。）
pulse: boolean
用来指定图标是否有脉冲旋转的效果。默认值为
false
。（不能与
spin
一同使用。）
inverse: boolean
为
true
时图标颜色将被设置为
#fff
。默认值为
false
。
flip: 'vertical'|'horizontal'|'both'
用来指定图标是否需要翻转。
label: string
当指定时会设置图标的
aria-label
。
title: string
为图标设置标题。

另外，我们也可以注册自定义图标，如下所示。

import Icon from 'vue-awesome/components/Icon'Icon.register({

  baidu: {

    width:23.868,

    height:26,

    d:'M3.613 13.701c2.827-.608 2.442-3.986 2.357-4.725-.138-1.139-1.477-3.128-3.296-2.971C.386 6.21.052 9.515.052 9.515c-.309 1.528.74 4.793 3.561 4.186zm3.002 5.875c-.083.238-.268.846-.107 1.375.315 1.187 1.346 1.24 1.346 1.24h1.48v-3.619H7.749c-.713.213-1.057.767-1.134 1.004zM8.86 8.035c1.562 0 2.823-1.797 2.823-4.019C11.683 1.796 10.421 0 8.86 0 7.301 0 6.036 1.796 6.036 4.016c0 2.222 1.265 4.019 2.824 4.019zm6.724.265c2.087.271 3.429-1.956 3.695-3.644.272-1.686-1.074-3.644-2.552-3.98-1.48-.339-3.329 2.032-3.497 3.578-.2 1.89.271 3.778 2.354 4.046zm5.114 9.923s-3.229-2.498-5.113-5.198c-2.666666-3.981-6.185-2.361-7.399-.337-1.209 2.024-3.093 3.305-3.36 3.644-.271.334-3.9 2.293-3.095 5.871.806 3.576 3.635 3.508 3.635 3.508s2.085.205 4.504-.336c2.42-.537 4.503.134 4.503.134s5.652 1.893 7.199-1.751c1.545-3.645-.874-5.535-.874-5.535zm-9.671 5.423H7.352c-1.587-.316-2.219-1.4-2.299-1.584-.078-.188-.528-1.059-.29-2.539.686-2.219 2.642-2.379 2.642-2.379h1.956V14.74l1.666.025v8.881zm6.844-.025h-4.229c-1.639-.423-1.716-1.587-1.716-1.587v-4.677l1.716-.027v4.203c.104.447.661.529.661.529h1.742v-4.705h1.825v6.264zm5.986-12.486c0-.808-.671-3.239-3.159-3.239-2.492 0-2.825 2.295-2.825 3.917 0 1.548.131 3.71 3.227 3.641 3.096-.068 2.757-3.507 2.757-4.319z'}

})

如果你的 SVG 文件有多个路径或多边形，以及/或者你想预定义一些样式，可以用如下方式进行注册：

路径方式：

import Icon from 'vue-awesome/components/Icon'Icon.register({

  webpack: {

    width:1200,

    height:1200,

    paths: [

      {

        style:'fill:#8ED6FB',

        d:'M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z'},

      {

        style:'fill:#1C78C0',

        d:'M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z'}

    ]

  }

})

多边形方式：

import Icon from 'vue-awesome/components/Icon'Icon.register({

  vue: {

    width:256,

    height:221,

    polygons: [

      {

        style:'fill:#41B883',

        points:'0,0 128,220.8 256,0 204.8,0 128,132.48 50.56,0 0,0'},

      {

        style:'fill:#35495E',

        points:'50.56,0 128,133.12 204.8,0 157.44,0 128,51.2 97.92,0 50.56,0'}

    ]

  }

})

对于自定义的这些图标，我们可以把它们一起放在一个独立的JS文件里面进行定义，然后全局统一加入即可。

使用上和其他的图标没有差异，只是名称不同而已。

    <divstyle="height:100px;padding:10px">
      <span>vue-Awesome 自定义图标:(在utils/awesome-icon-customed.js中引入)</span>
      <v-iconname="baidu"scale="2":style="iconStyle" />
      <v-iconname="vue"scale="2" />
      <v-iconname="webpack"scale="2"spin/>
      <v-iconname="html5-c"scale="2"spin/>
    </div>

2、导入Element 图标和Vue-Awesome图标

在我们进行页面管理的时候，我们需要提取Element 图标和Vue-Awesome图标，以便能够进行界面的展示处理。

Element图标，我们只需要在一个JS文件里面，包含它的名称进去一个列表里面即可，如下定义所示。

const elementIcons =['platform-eleme', 'eleme', 'delete-solid', 'delete', ..........

]



exportdefault elementIcons

在其中录入对应Element的图表名称，移除el-icon-的前缀即可构成所需列表的每项内容。

而对于Vue-Awesome图标，我们安装对应的组件后，它的图标资源肯定也一定下载下来了，我们找到对应的node_modules 目录下的文件就可以看到了，如下截图所示。

可以看到它的每个图标对应一个js文件，而且不同样式还有不同的目录的，我们只需要自动加入对应的文件名称即可。

定义一个js文件，如vue-awesome-icon.js，用来获取对应Awesome图标名称，如下逻辑所示

//Vue-Awesome图标自动加入
const req = require.context('vue-awesome/icons', true, /\.js$/)

const requireAll= requireContext =>requireContext.keys()



const re= /\.\/(.*)\.js/const vueAwesomeIcons= requireAll(req).filter((key) =>{return key.indexOf('index.js') < 0}).map(i=>{return i.match(re)[1]

})



exportdefault vueAwesomeIcons

通过 require.context 的操作以及仅需filter的数组过滤，我们就可以获得对应的Awesome图标名称了。

在管理页面里面，我们需要引入Element和Vue-Awesome的图标管理文件，如下所示。

import elementIcons from './element-icons' //引入Element图标
import vueAwesomeIcons from './vue-awesome-icons' //引入vue-awesome图标

然后构造页面的data数据，如下所示，其中searchForm 是用来承载查询条件的。

export default{

  name:'Icons',

  data() {return{//查询表单
searchForm: {

        label:'',

        pagesize:50,

        color:'#409EFF'},//自定义svg图标集合
svgIcons,//element图标集合
elementIcons,//vueAwesome图标集合
vueAwesomeIcons

    }

  },

然后增加几个Computed函数，用来处理数据的过滤查询等操作。

computed: {

    iconStyle:function() {return { color: this.searchForm.color }

    },

    elementIconsFiltered:function() {

      const that= this
      var list = that.elementIcons.filter(item =>{return item.indexOf(that.searchForm.label) >= 0})if (that.searchForm.pagesize > 0) {return list.slice(0, that.searchForm.pagesize)

      }else{returnlist

      }

    },

    vueAwesomeIconsFiltered:function() {

      const that= this
      var list = that.vueAwesomeIcons.filter(item =>{return item.indexOf(that.searchForm.label) >= 0})if (that.searchForm.pagesize > 0) {return list.slice(0, that.searchForm.pagesize)

      }else{returnlist

      }

    }

  },

然后在method里面，对常规的图标进行生成处理即可。

methods: {generateElementIconCode(symbol) {return `<i class="el-icon-${symbol}" style="color:${this.searchForm.color};"/>`
},

    generateAwesomeIconCode(symbol) {return `<v-icon name="${symbol}" style="color:${this.searchForm.color};"/>`
},

    handleClipboard(text, event) {if(text) {

        clipboard(text, event)

      }

    }

  }

对于界面的展示，我们以Vue-awesome图标展示为例介绍，如下所示。

      <el-tab-panelabel="Vue-Awesome 图标">
        <divv-for="item of vueAwesomeIconsFiltered":key="item"@click="handleClipboard(generateAwesomeIconCode(item),$event)"
        >
          <el-tooltipplacement="top">
            <divslot="content">{{ generateAwesomeIconCode(item) }}</div>
            <divclass="icon-item">
              <v-icon:name="item"scale="2":style="iconStyle" />
              <span>{{ item }}</span>
            </div>
          </el-tooltip>
        </div>
      </el-tab-pane>

这样就可以实现对应图标的动态过滤和展示了。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

VUE+Element 前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用（如果不知道，请自行补习一下我的随笔：
ABP框架使用
），ABP框架作为后端，是一个非常不错的技术方向，但是前端再使用Asp.NET 进行开发的话，虽然会快捷一点，不过可能显得有点累赘了，因此BS的前端选项采用Vue+Element来做管理（后续可能会视情况加入Vue+AntDesign），CS前端我已经完成了使用Winform+ABP的模式了。本篇随笔主要介绍Vue+Element+ABP的整合方式，先从登录开始介绍。

1、ABP开发框架的回顾

ABP
是ASP.NET Boilerplate的简称，ABP是一个
开源
且文档友好的
应用程序框架
。ABP不仅仅是一个框架，它还提供了一个
最徍实践
的基于
领域驱动设计(DDD)
的体系结构模型。

启动Host的项目，我们可以看到Swagger的管理界面如下所示。

我们登录获得用户访问令牌token后，测试字典类型或者字典数据的接口，才能返回响应的数据。

我根据ABP后端项目之间的关系，整理了一个架构的图形。

应用服务层是整个ABP框架的灵魂所在，对内协同仓储对象实现数据的处理，对外配合Web.Core、Web.Host项目提供Web API的服务，而Web.Core、Web.Host项目几乎不需要进行修改，因此应用服务层就是一个非常关键的部分，需要考虑对用户登录的验证、接口权限的认证、以及对审计日志的记录处理，以及异常的跟踪和传递，基本上应用服务层就是一个大内总管的角色，重要性不言而喻。

对于通过Winform方式展示界面，以Web API方式和后端的ABP的Web API服务进行数据交互，是我们之前已经完成的项目，项目界面如下所示。

主体框架界面采用的是基于菜单的动态生成，以及多文档的界面布局，具有非常好的美观性和易用性。

左侧的功能树列表和顶部的菜单模块，可以根据角色拥有的权限进行动态构建，不同的角色具有不同的菜单功能点，如下是测试用户登录后具有的界面。

2、Vue+Element整合ABP框架的前端登录处理

之前我们开发完成的Vue+Element的前端项目，默认已经具有登录系统的功能，不过登录是采用mock方式进行验证并处理的，本篇随笔介绍是基于实际的ABP项目进行用户身份的登录处理，这个也是开发其他接口展示数据的开始步骤，必须通过真实的用户身份登录后台，获得对应的token令牌，才能进行下一步接口的开发工作。

例如对应登录界面上，界面效果如下所示。

在用户登录界面中，我们处理用户登录逻辑代码如下所示。

    //处理登录事件
handleLogin() {this.$refs.loginForm.validate(valid =>{if(valid) {this.loading = true
          this.$store

            .dispatch('user/login', this.loginForm)

            .then(()=>{this.$router.push({ path: this.redirect || '/'})this.loading = false})

            .catch(() =>{this.loading = false})

        }else{

          console.log('error submit!!')return false}

      })

    }

这里主要就是调用Store模块里面的用户Action处理操作。

例如对于用户store模块里面的登录Action函数如下所示。

const actions ={//user login
login({ commit }, userInfo) {

    const { username, password }=userInforeturn new Promise((resolve, reject) =>{

      login({ username: username.trim(), password: password }).then(response=>{

        const { result }= response //获取返回对象的 result
var token = result.accessToken

        var userId = result.userId//记录令牌和用户Id
        commit('SET_TOKEN', token)

        commit('SET_USERID', userId)//存储cookie
setToken(token)

        setUserId(userId)

        resolve()

      }).catch(error =>{

        reject(error)

      })

    })

  },

而其中 login({ username: username.trim(), password: password }) 操作，是通过API封装处理的调用，使用前在Store模块中先引入API模块，如下所示。

import { login, logout, getInfo } from '@/api/user'

而其中 API模块代码如下所示。

export functionlogin(data) {returnrequest({

    url:'/abp/TokenAuth/Authenticate',

    method:'post',

    data: {

      UsernameOrEmailAddress: data.username,

      password: data.password

    }

  })

}

这里我们用了一个/abp的前缀，用来给WebProxy的处理，实现地址的转义，从而可以实现跨站的处理，让前端调用外部地址就和调用本地地址一样，无缝对接。

我们来看看vue.config.js里面对于这个代理的转义操作代码。

而 http://localhost:21021/api 地址指向的项目，是我们本地使用ABP开发的一个后端Web API项目，我们可以通过地址
http://localhost:21021/swagger/index.html
进行接口的查看。

我们打开获取授权令牌的Authenticate接口，查看它的接口定义内容

通过标注的1,2，我们可以看到这个接口的输入参数和输出JSON信息，从而为我们封装Web API的调用提供很好的参考。

ABP框架统一返回的结果是result，这个result里面才是返回对应的接口内容，如上面的输出JSON信息里面的定义。

所以在登陆返回结果后，我们要返回它的result对象，然后在进行数据的处理。

const { result } = response //获取返回对象的 result

然后通过result来访问其他属性即可。

var token = result.accessToken //用户令牌
var userId = result.userId //用户id

用户登录成功后，并获取到对应的数据，我们就可以把必要的数据，如token和userid存储在State和Cookie里面了。

//修改State对象，记录令牌和用户Id
commit('SET_TOKEN', token)

commit('SET_USERID', userId)//存储cookie
setToken(token)

setUserId(userId)

有了这些信息，我们就可以进一步获取用户的相关信息，如用户名称、介绍，包含角色列表和权限列表等内容了。

例如对应用户信息获取接口的ABP后端地址是
http://localhost:21021//api/services/app/User/Get

那么我们前端就需要在API模块里面构建它的访问地址（/abp/services/app/User/Get）和接口处理了。

export functiongetInfo(id) {returnrequest({

    url:'/abp/services/app/User/Get',

    method:'get',

    params: {

      id

    }

  })

}

如上所示，在Store模块里引入API模块，如下所示。

import { login, logout, getInfo } from '@/api/user'

然后在Store模块中封装一个Action用来处理用户信息的获取的。

  //获取用户信息
getInfo({ commit, state }) {return new Promise((resolve, reject) =>{

      getInfo(state.userid).then(response=>{

        const { result }=response

        console.log(result)//输出测试

        if (!result) {

          reject('Verification failed, please Login again.')

        }



        const { roles, roleNames, name, fullName }=result//角色非空提醒处理
        if (!roles || roles.length <= 0) {

          reject('getInfo: roles must be a non-null array!')

        }



        commit('SET_ROLES', { roles, roleNames })

        commit('SET_NAME', name)//commit('SET_AVATAR', avatar) //可以动态设置头像
        commit('SET_INTRODUCTION', fullName)

        resolve(result)

      }).catch(error =>{

        reject(error)

      })

    })

  },

Vue + Element前端项目的视图、Store模块、API模块、Web API之间关系如下所示。

登录后我们获取用户身份信息，在控制台中记录返回对象信息，可以供参考，如下所示

有了token信息，我们就可以继续其他接口的数据请求或者提交了，从而可以实现更多的管理功能了。

后续随笔将基于ABP接口对接的基础上进行更多界面功能的开发和整合。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在前面随笔《
循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
》介绍了一个系统最初接触到的前端登录处理的实现，但往往对整个系统来说，一般会有很多业务对象，而每个业务对象的API接口又有很多，不过简单来说也就是常规的增删改查，以及一些自定义的接口，通用都比较有规律性。而本身我们这个VUE+Element 前端应用就是针对ABP框架的业务对象，因此前端的业务对象接口也是比较统一的，那么可以考虑在前端中对后端API接口调用进行封装，引入ES6的方式进行前端API的抽象简化。本篇随笔主要针对这个方面，介绍前端API接口的封装处理，以便简化我们大量类似的业务接口的累赘代码实现。

1、ABP框架API接口的回顾

启动Host的项目，我们可以看到Swagger的管理界面如下所示。

上图就是ABP后端框架的API接口的查看页面，从上图可以看到，一般业务对象，都有Get、GetAll、Create、Update、Delete等常见接口，由于这些接口是给前端进行调用的。

Vue + Element前端项目的视图、Store模块、API模块、Web API之间关系如下所示。

前面介绍了，一般前端调用，通过前端API类的封装，即可发起对后端API接口的调用，如系统登录API定义如下代码所示。

export functiongetInfo(id) {returnrequest({

    url:'/abp/services/app/User/Get',

    method:'get',

    params: {

      id

    }

  })

}

按照常规的API类的处理，我们对应的业务类，就需要定义很多这样的函数，如之前介绍产品信息处理的API接口一样。

由于常规的增删改查，都是标准的API接口，那么如果我们按照每个API类都需要重复定义这些API，显然不妥，太臃肿。

如果是常规的JS，那么就以公布函数方式定义API接口，不过我们可以引入ES6的处理方式，在JS中引入类和继承的概念进行处理相同的API接口封装。

2、基于ES6的JS业务类的封装

关于ES6，大家可以有空了解一下《
ES6 入门教程
》，可以全面了解ES6很多语法和相关概念。

不过这里只需要了解一下JS里面关于类的定义和继承的处理关系即可。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过
class
关键字，可以定义类。

基本上，ES6 的
class
可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的
class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的
class
改写，就是下面这样。

class Point {

  constructor(x, y) {this.x =x;this.y =y;

  }



  toString() {return '(' + this.x + ', ' + this.y + ')';

  }

}

上面代码定义了一个“类”，可以看到里面有一个
constructor
方法，这就是构造方法，而
this
关键字则代表实例对象。也就是说，ES5 的构造函数
Point
，对应 ES6 的
Point
类的构造方法。

Point
类除了构造方法，还定义了一个
toString
方法。注意，定义“类”的方法的时候，前面不需要加上
function
这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。

Class 可以通过
extends
关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class Point {

}



class ColorPoint extends Point {

}

上面代码定义了一个
ColorPoint
类，该类通过
extends
关键字，继承了
Point
类的所有属性和方法。

有了这些知识准备，那么我们来定义一个API接口的封装类，如下 base-api.js 代码所示。

//定义框架里面常用的API接口：Get/GetAll/Create/Update/Delete/Count等
export defaultclass BaseApi {

  constructor(baseurl) {this.baseurl =baseurl

  }//获取指定的单个记录
Get(data) {returnrequest({

      url:this.baseurl + 'Get',

      method:'get',

      params: data

    })

  }//根据条件获取所有记录
GetAll(data) {returnrequest({

      url:this.baseurl + 'GetAll',

      method:'get',

      params: data

    })

  }//创建记录
Create(data) {returnrequest({

      url:this.baseurl + 'Create',

      method:'post',

      data: data

    })

  }//更新记录
Update(data) {returnrequest({

      url:this.baseurl + 'Update',

      method:'put',

      data: data

    })

  }//删除指定数据
Delete(data) {returnrequest({

      url:this.baseurl + 'Delete',

      method:'delete',

      params: data

    })

  }//获取条件记录数量
Count(data) {returnrequest({

      url:this.baseurl + 'Count',

      method:'post',

      data: data

    })

  }

}

以上我们定义了很多常规的ABP后端接口的封装处理，其中我们调用的地址通过组合的方式处理，而具体的地址则交由子类（业务对象API）进行赋值处理。

加入我们定义子类有DIctType、DictData等业务类，那么这些类继承BaseApi，就会具有相关的接口了，如下所示继承关系。

例如，我们对于DictDataApi的JS类定义如下所示。

通过一行代码 export default new Api('/abp/services/app/dictdata/') 就可以构造一个子类实例供使用了。

对于DictTypeApi来说，处理方式也是类似，继承自基类，并增加一些自己的接口实现即可。

这些API类的文件视图如下所示。

有了这些准备，我们就可以在视图页面类中导入这些定义，并使用JS类了。

//业务API对象
import dicttype from '@/api/dicttype'import dictdata from'@/api/dictdata'

加入我们要在视图页面中查询结果，直接就可以通过使用dictdata或者dicttype对象来实现对应的API调用，如下代码所示。

getlist() {//构造常规的分页查询条件
      var param ={

        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,

        MaxResultCount:this.pageinfo.pagesize,//过滤条件
        Name: this.searchForm.name,

        Remark:this.searchForm.remark,

        DictType_ID:this.searchForm.dictType_ID

      };//获取产品列表，绑定到模型上，并修改分页数量
      this.listLoading = truedictdata.GetAll(param).then(data => {this.list =data.result.itemsthis.pageinfo.total =data.result.totalCountthis.listLoading = false})

    }

或者如下代码所示。

    //删除指定字典类型
deleteDictType() {if (!this.searchForm.dictType_ID || typeof (this.searchForm.dictType_ID) === 'undefined') {return;

      }this.$confirm('您确认删除选定类型吗?', '操作提示',

        {

          type:'warning' //success，error，info，warning
          //confirmButtonText: '确定',
          //cancelButtonText: '取消'
}

      ).then(()=>{var param = { id: this.searchForm.dictType_ID }

       dicttype.Delete(param).then(data=> {if(data.success) {//提示信息
            this.$message({

              type:'success',

              message:'删除成功!'})//刷新数据
            this.getTree();

          }

        })

      })

    }

最后我们来看看使用这些接口处理，对字典管理界面的实现。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志