vue项目开发实战案例(vue项目开发实战案例的介绍)

发布网友 发布时间：2024-09-06 19:59

我来回答

共1个回答

热心网友 时间：2024-09-13 09:50

本文是Vue实战系列的第六篇文章，主要介绍Falcon项目中通用Table组件的开发和使用。Falcon项目地址：

随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

对于一个中后台类的项目，一个比较常见的展示形式就是Table了，相信大家都不陌生，如下图所示：

一个Table通常由如下几个部分构成：

除此之外，由于Table中的数据往往都是从后端获取的，所以这个包含Table的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个Loading动画；当请求数据为空时，需要显示一个占位的空元素控件。

在Falcon项目的实践中，我们发现，每一个页面中的Table除了行数，列数，及单元格的内容不同之外，其它的地方，包括样式，分页及数据处理逻辑都是一样的，每次新增一个这样的页面无非就是拷贝粘贴了，那么在这种情况下，我们抽取出了一个通用的Table组件，取名为：TableBox。

说到这里插一个题外话：

关于这个问题我认为，如果一个功能只出现在了一个或两个页面中，往往是没有必要处理的，因为一两个功能的重复还不足以说明问题，也很难看出其中的共性，如果强行抽取的话，反而会增加维护的负担；如果出现的地方超过了两处，那么我们就需要考虑将这个功能进行抽取了，我也常常和Team的人说：“如果一个功能你拷贝粘贴了1次，没关系，不用纠结；2次的话，就得考虑其复用性和组件化了”。

当然，以上内容只适用于那些初期开发过程中无法预测未来变化的项目，如果刚开始产品设计的时候，就能够充分的预见和考虑未来的业务发展，并且给出详细的产品及UI设计方案，那么就另当别论了。

回到我们的主题，抽取这个TableBox其实并不是一气呵成的，而是在业务迭代中，不断地发现新的场景，新的问题，带着这些问题我们不断的优化TableBox，最终达到一个较为完整的状态。这也符合Vue本身渐进式的理念。接下来我们花些时间，一起探讨一下这些场景和问题：

我们发现，对于不同的页面，只要带有Table的，其数据都需要从远端服务器获取，一般情况下，我们会在每个业务中都去写一下这个网络获取数据的逻辑，但是，如果仔细想想，你就会发现，其实这类列表数据获取和处理的逻辑都是一样的。所以针对这个情况，我们只要和后端协商好列表相关的统一API数据结构，如：

那么数据获取，渲染，Loading动画展示隐藏，分页加载等操作都可以在TableBox中完成。

这个组件需要的只是向外暴露出数据请求的API地址及各种参数：

然后写好对应的获取数据的fetchData方法：

这样对于调用者来说，只需要简单的传入相关API地址及参数就可以了，数据加载的事情让TableBox去处理就好了，非常的方便。

因为TableBox组件本身是和业务无关的，所以其肯定无法知道我的这个Table的表头是什么，有多少行，也无法知道每一行展示什么数据，这些内容全部应该由父组件告知TableBox。

要实现以上的功能，我们可以借助于Vue本身提供的强大的工具Slot，如果简单点说，大家可以把Slot理解为一个坑位，因为大多数情况下，组件自己无法预先知道某块区域放置什么内容，那么组件可以先将个区域放置一个Slot，就是挖个坑，当父组件引入子组件时，会告诉子组件往这个坑位中填充什么样的内容。

回到我们的TableBox组件，我们首先挖两个坑（放置两个Slot），命名为ths和item，分别用于表头和行列表内容：

这样对于表头的数据，可以由引入TableBox的父组件来指定，用法如下，其中slot='ths'就是刚才我们在TableBox

中放置的Slot

同样，对于每一行的内容，也是由引入TableBox的父组件来指定，用法如下：

在开发业务的过程中，遇到一个场景：当页面数据已经全部加载完毕后，在某些场景下需要改变Table中某些数据的状态（删除某列或改变某一列的数据）。

这里具体举个Falcon中的实际例子：

我们允许用户给每个项目分配多个环境，以区分测试，生产，开发和各种自定义的场景，在每个环境下，用户可以设置不同的GitBranch。用户点击ChooseBranch按钮后，会触发一个请求到后端，变更当前环境的GitBranch，修改成功后该列表项的按钮会显示为CurrentBranch。

由于以上逻辑都是在引入了TableBox的父组件中完成的，其能够控制数据的刷新，由于场景1中我们已经把数据请求的逻辑都封装在了TableBox中，所以我们需要让其向外暴露出一个Boolean属性：reloadData，当此属性为true时，TableBox会重新请求一次API，并刷新列表。

同理，由于操作数据是由父组件发起的，所父组件中也需要有同样的属性，并且和TableBox中的reloadData保持数据同步，这里用到了Vue2.3版本增加的一个.sync修饰符进行处理。

这样，当reloadData在数据更新完毕后还原为false状态时，我们可以显示的触发一个emit事件：

由于目前所有的数据获取都是在TableBox内部处理的，所以父组件本身是无法直接获取到数据的。但是在某些情况下，我们又希望父组件能够获取到数据，以便能够在顶层进行更灵活的处理，这时我们就需要在TableBox内部将数据抛出。

抛出的方式也很简单，我们可以使用emit方法抛出一个事件。根据这个思路我们改造一下上文提到的fetchData方法：

然后在父组件中监听这个事件，这样就能获取到完整的数据了。

解决了以上4个场景的问题后，我们这个TableBox可以说告一段落了，后续如果有遇到新的场景，新的问题，我们只需要不断的去优化去完善这个组件即可。

到目前为止，TableBox已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。

并且随着这样的组件越来越多，甚至我们的后端工程师经过简短的培训，也可以上手部分前端页面的开发了。

最后附上TableBox的地址：

Vue2/ArcGis4开发实战

更新：2021-8-18

最近用Vue2结合ArcGis4做了一个项目，因为此前并没有怎么接触过ArcGisforJavaScript,所以整个过程还是比较痛苦的，虽然GIS官网有例子，并没有起到什么实质作用，网上关于vue/gis的资料又少的可怜，好了废话不多说，直接上干货！

安装好cli后，开始引入GIS,在目录srcassetsjs下新建下新建ArcGisServe.js文件,供我们编写ArcGisServe服务地址。

这里可以定义自己服务器上的底图的地址，默认情况下是官网地址，也可以添加其它服务地址，随意。

这中方法就不多说了，直接script标签引入CDN网址，要说明的是，可用CDN网址较少，官网提供的地址在国内加载较满。

.vue组件

.vue组件

二者都可以通过npm安装的依赖包，不同的是：

本文记录一些vue3+ts+less开发过程中的一些小问题。

不断开发、不断更新...

新建Hello.vue文件，App.vue文件引入Hello.vue，报错如下：

没有发现模块components/Hello或者它对应的类型申明

参考链接：

要让TypeScript正确推断Vue组件选项中的类型，需要使用defineComponent全局方法定义组件。

参考文档

引用第三方库时，如果第三方类库并没有ts的.d.ts类型的声明文件，则无法在项目中正常使用。如果要顺利使用这些库，就需要我们添加声明文件。

通过此地址可以查找当前安装的库有没有.d.ts的声明文件。

项目中引入echarts

在ts声明查找地址发现echarts已经包含.d.ts类型的声明文件，则不需要我们手动去声明echarts模块

看了基础类型模块，想当然以为定义对象类型为下面示例：

报错如下：

提示不能使用object作为类型。推荐考虑使用Recordstring,unknown代替。

参考文档

参考文档

通过asHTMLElement进行类型转换

在setup中定义的变量和方法，都必须通过return{}暴露出去，外界才能使用，ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）

在setup里获取ref绑定的dom，需要在setup的return有ref(null)的属性，模板上ref用对应属性名

通过this.$refs去获取

缺点：在any类型的变量上，访问任何属性都是允许的。它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用asany。

在src根目录*.d.ts文件中进行类型申明

这次给大家带来Vue组件开发有哪些技巧，Vue组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。

Vue单文件组件开发

当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本开发模式。

//注册

Vue.component('my-component',{

template:'pAcustomcomponent!/p'

})

//创建根实例

newVue({

el:'#example'

})

接下来，开始写一个dialog组件。

Dialog

目标对话框组件的基本样式如图：

根据目标样式，可以总结出：

dialog组件需要一个titleprops来标示弹窗标题

dialog组件需要在按下确定按钮时发射出确定事件（即告诉父组件确定了）

同理，dialog组件需要发射出取消事件

dialog组件需要提供一个插槽，便于自定义内容

那么，编码如下:

template

pclass="ta-dialogwrapper"

pclass="ta-dialog"

?pclass="ta-dialogheader"

?span{{title}}/span

?iclass="ios-close-empty"@click="handleCancel()"/i

?/p

?pclass="ta-dialogbody"

?slot/slot

?/p

?pclass="ta-dialogfooter"

?button@click="handleCancel()"取消/button

?button@click="handleOk()"确定/button

?/p

/p

/p

/template

script

exportdefault{

name:'Dialog',

props:{

title:{

?type:String,

?default:'标题'

},

},

methods:{

handleCancel(){

?this.$emit('cancel')

},

handleOk(){

?this.$emit('ok')

},

},

}

/script

这样便完成了dialog组件的开发，使用方法如下：

ta-dialog

title="弹窗标题"

@ok="handleOk"

@cancel="handleCancel"

p我是内容/p

/ta-dialog

这时候发现一个问题，通过使用v-if或者v-show来控制弹窗的展现时，没有动画！！！，看上去很生硬。教练，我想加动画,这时候就该transition组件上场了。使用transition组件结合css能做出很多效果不错的动画。接下来增强dialog组件动画，代码如下:

template

transitionname="slide-down"

pclass="ta-dialogwrapper"v-if="isShow"

?//省略

/p

/transition

/template

script

exportdefault{

data(){

return{

?isShow:true

}

},

methods:{

handleCancel(){

?this.isShow=false

?this.$emit('cancel')

},

handleOk(){

?this.isShow=true

?this.$emit('ok')

},

},

}

/script

可以看到transition组件接收了一个nameprops，那么怎么编写css完成动画呢？很简单的方式，写出两个

关键class(css的className)样式即可：

.slide-down-enter-active{

animation:dialog-enterease.3s;

}

.slide-down-leave-active{

animation:dialog-leaveease.5s;

}

@keyframesdialog-enter{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframesdialog-leave{

from{

opacity:1;

transform:translateY(0);

}

to{

opacity:0;

transform:translateY(-20px);

}

}

就是这么简单就开发出了效果还不错的动效，注意transition组件的name为slide-down,而编写的动画的关键className为slide-down-enter-active和slide-down-leave-active。

封装Dialog做MessageBox

Element的MessageBox的使用方法如下:

this.$confirm('此操作将永久删除该文件,是否继续?','提示',{

confirmButtonText:'确定',

cancelButtonText:'取消',

type:'warning'

}).then(()={

this.$message({

type:'success',

message:'删除成功!'

});

}).catch(()={

this.$message({

type:'info',

message:'已取消删除'

});?

});

看到这段代码，我的感觉就是好神奇好神奇好神奇（惊叹三连）。仔细看看，这个组件其实就是一个封装好的dialog,

接下来，我也要封装一个这样的组件。首先，整理下思路：

Element的使用方法是this.$confirm，这不就是挂到Vue的prototype上就行了

Element的then是确定，catch是取消，promise就可以啦

整理好思路，我就开始编码了：

importVuefrom'vue'

importMessgaeBoxfrom'./src/index'

constCtur=Vue.extend(MessgaeBox)

letinstance=null

constcallback=action={

if(action==='confirm'){

if(instance.showInput){

?instance.resolve({value:instance.inputValue,action})

}else{

?instance.resolve(action)

}

}else{

instance.reject(action)

}

instance=null

}

constshowMessageBox=(tip,title,opts)=newPromise((resolve,reject)={

constpropsData={tip,title,...opts}

instance=newCtur({propsData}).$mount()

instance.reject=reject

instance.resolve=resolve

instance.callback=callback

document.body.appendChild(instance.$el)

})

constconfirm=(tip,title,opts)=showMessageBox(tip,title,opts)

Vue.prototype.$confirm=confirm

至此，可能会疑惑怎么callback呢，其实我编写了一个封装好的dialog并将其命名为MessageBox,

它的代码中，有这样两个方法:

onCancel(){

this.visible=false

this.callback(this.callback.call(this,'cancel'))

},

onConfirm(){

this.visible=false

this.callback(this.callback.call(this,'confirm'))

},

没错，就是确定和取消时进行callback。我还想说一说Vue.extend,代码中引入了MessageBox,

我不是直接newMessageBox而是借助newCtur，因为这样可以定义数据(不仅仅是props)，例如：

instance=newCtur({propsData}).$mount()

这时候，页面上其实是还没有MessageBox的，我们需要执行:

document.body.appendChild(instance.$el)

如果你直接这样，你可能会发现MessageBox打开的时候没有动画，而关闭的时候有动画。解决方法也很简单，

appendChild的时候让其仍是不可见，然后使用类这样的代码：

Vue.nextTick(()=instance.visible=true)

这样就有动画了。

总结

通过transition和css实现不错的动画。其中，transition组件的name决定了编写css的两个关键类名为[name]-enter-active和[name]-leave-active

通过Vue.extend继承一个组件的构造函数（不知道怎么说合适，就先这样说），然后通过这个构造函数，便可以实现组件相关属性的自定义（使用场景：js调用组件）

js调用组件时，为了维持组件的动画效果可以先document.body.appendChild然后Vue.nextTick(()=instance.visible=true)

vue实战（1）：准备与资料整理

vue实战（2）：初始化项目、搭建底部导航路由

vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由

vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态

vue实战（5）：总结一

vue实战（6）：异步显示数据、开发Star组件

vue实战（7）：完整开发登录页面（一）

vue实战（8）：完整开发登录页面（二）

vue实战（9）：总结二

vue实战（10）：开发店铺详情（一）

vue实战（11）：开发店铺详情（二）

vue实战（12）：完结+附学习视频

这一部分内容，回到之前完成的Login.vue页面，做逻辑之前先完成一些必要的效果。

2）判断是否可以发送验证码

3）login.vue页调用并判断