Vue+ElementUI搭建商铺管理后台项目概要

背景在开发了商铺客户端后，掌握了客户端的一些开发技术，并从中积累了项目经验。由于客户端的商户应用页面是基于静态数据渲染的，在实际应用实践中，静态页面数据并不能满足实际应用场景的需求。如果我们要定期更改页面上的内容，对于普通应用程序用户来说并不容易。或许最尴尬的方式是联系应用开发者修改原有的项目内容，但如果想把这种使用需求一劳永逸地交给普通用户，还是使用GUI界面操作更为方便。在开发和管理后台项目的同时，还可以掌握Vue+ElementUI的技术栈组合项目介绍本项目以Vue+ElementUI为核心技术开发，所有功能均由个人独立开发。本项目主要功能是管理客户端项目http://123.57.204.48:5000的数据，包括各页面数据的增删改查，以及首页数据的可视化展示的应用程序。您也可以将本项目作为模板进行二次开发。本项目的UI和功能实现可以作为参考。欢迎有兴趣进一步交流的同学在项目仓库提issue，欢迎大家收藏关注，谢谢！仓库地址：https://github.com/konglingwe...在线地址：http://123.57.204.48:5000/admin部分应用页面截图店铺配置页面产品管理页面产品编辑页面应用开发技术核心技术架构：Vue@2.6.X+Element-ui@2.12.X依赖包：vue-routerv-charts（基于echarts包的vue组件库）axios（http请求工具）构建工具：vue-cliless部署运行：github-动作云服务器开发过程中的案例介绍由于本应用使用场景广泛，相关业务场景的实现过程在此不再介绍。项目开发完成后，总结了几种常见场景下的技术实现，在此分享。如果遇到一类功能需求，可以参考下面的功能实现二次打包uplod上传组件组件源码地址：https://github.com/konglingwe...我们在大多数应用中都会遇到这样的需求.,从本地电脑上传一张或多张图片到网站，将上传的内容作为网站需要为我们展示的内容。在开发这个功能的时候，对于习惯了element-ui中上传组件的我来说，对于上传一张或者多张图片的业务处理，我们也可以自定义封装上传组件。这样细粒度的处理方便，更符合我们的业务需求。最常用的是嵌入在表单中的图片上传功能。除了输入框等类型的表单可以处理v-model形式的数据外，还可以使用upload，大大方便了提交表单时的数据。过程。首先为上传组件定义这样的道具。props:{value:[String,Array],multipart:{type:Boolean,default:false}}，看过vue官方文档中自定义v-model指令的基本介绍的都知道，value属性是用来接收componentsv-model指令的绑定值通过输入事件在组件中对应发出，传入的参数会自动更新为指令绑定的值。另一个多部分属性指示组件一次可以上传的文件数。有了这两个props，我们就有了一个大致实现整个组件功能的思路。接下来，可以根据这两个属性实现触发输入事件的功能。所有原生el-upload上文件更新的事件监听器，根据multipart属性的值，这里以on-success事件为例进行这种处理。//这里只是部分代码handlerSuccess(res,file,fileList){if(!this.multipart){if(fileList.length>1){fileList.shift();}}常量值=this.multipart？文件列表。map(item=>{return(item.response&&item.response.path)||item.url;}):res.path;this.$emit("input",value);}至此动态更新组件v-模型指令绑定值的逻辑就完成了。但是，经过我的测试，发现还有一个组件初始化过程需要处理，即组件绑定的file-list字段的初始化过程。首先，我们需要在组件中定义一个fileList变量data(){return{fileList:[]}}。使用这个fileList变量，我们可以初始化基本上传组件的数据。具体的绑定过程这里就不演示了。详情操作可以查看官方组件使用情况。但是经过测试，这里还是有问题。我们在表单中调用这个组件时，v-model绑定的值，大部分都是通过API请求的方式异步获取的。当请求完成后，通过v-model指令传入的值并不能实时同步到变量fileList中，那么如何解决这个问题呢？想了想，想到了vue提供的$watchAPI。我们可以通过观察组件的value属性来解决这个问题。//这里我们只需要在组件创建的时候观察一次`value`属性值的变化created(){constunwatch=this.$watch("value",newVal=>{this.fileList=Array(this.newVal).flat().map(item=>({name:"",url:newVal}));unwatch&&unwatch();});}:::^Remark组件源码：https://github.com/konglingwe...:::现在去测试组件，发现页面选项可以完美运行卡片视图切换渲染源码https://github.com/konglingwe...Tab视图是一种类似于浏览器页面浏览的操作方式，通过点击tabs来切换页面。我们可以在这里查看点击的页面，点击关闭按钮可以关闭对应的标签页。tab组件本身的功能很简单，这里就不详细介绍了。下面主要讲一下如何实现点击页面后的交互效果。既然有了标签页，我们需要的是让浏览过的页面保持有状态，下次切换回来时保持离开页面时的状态。说到这里，我们很容易想到vue本身提供的keep-alive组件。通过用这个组件包装我们动态切换的路由组件，我们可以缓存项目渲染的组件。keep-alive的具体使用就不多说了。详情请参考官方文档。为了存储标签页和缓存组件的数据，我们需要定义两个数组类型的变量，通过对这两个数组进行操作和处理来实现具体的功能。/*tab-标签组件使用说明title:HTML原生属性Stringclick:监听标签点击事件Functionclose:监听标签关闭事件Functionclosable:是否可以关闭Booleanactive:布尔标签当前是否激活///Only相关的代码片段显示在这里for="(tag,index)intags":key="index":closable="!tag.isHome":active="$route.path===tag.path":style="{width:`${100/maxTags}%`}">{{tag.label}}