- 博客(1174)
- 资源 (47)
- 收藏
- 关注
RSS订阅原创 【VUE项目实战】65、配置路由懒加载
当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
2022-09-18 11:24:51
1112
2
原创 【VUE项目实战】64、CND优化ElementUI以及首页内容定制
本篇我们来学习通过CND优化ElementUI的打包，以及完成根据生产和测试环境进行不同定制不同的首页内容。
2022-09-04 15:12:47
1696
原创 【VUE项目实战】63、指定打包入口及加载外部CDN资源
上一篇我们制定了项目的优化以及上线工作目标，本节我们来为开发模式与发布模式制定不同的打包入口，然后为项目加载外部CDN资源
2022-08-27 15:06:09
1829
原创 【VUE项目实战】62、项目优化上线准备+生成项目报告
我们的VUE项目开发完毕之后，就需要考虑如何优化项目，以及将项目部署上线，供外界用户进行使用。所以我们的学习目标为：◆能够优化Vue项目◆能够部署Vue项目学习内容为：◆项目优化：如何对Vue项目进行优化；◆项目上线：如何将优化完毕后的Vue项目部署上线。......
2022-08-14 16:07:16
1458
1
原创 【VUE项目实战】61、添加页面加载进度条效果
我们要实现上面的进度条loading效果，就需要使用一个叫“nprogress”的第三方的包，官方工程github地址为：https://github.com/rstacruz/nprogress
2022-07-30 17:01:47
4943
2
原创 【玩转vue】判断快递单号是否符合规则
1、为快递公司select控件设置change事件，当selelct控件的值发生变化时，触发change事件，然后获取select的值保存起来（如果快递单号此时有值，直接进行选中的快递公司的格式判断）2、然后快递单号值也写个change事件，如果快递单号发生变化，获取之前保存的快递公司select的值，判断快递单号的格式（此时必须要求用户先选择快递公司，没有就报错）3、判断快递单号的逻辑是一个公共方法，判断的正则表达式可以自己定义，也可以从公共接口获取。（大神门可以绕道了，轻喷T_T），.........
2022-07-22 09:46:36
1522
原创 【VUE项目实战】59、订单的物流信息查询功能
接上篇《58、订单修改收货地址的功能》上一篇我们完成了订单列表的修改收货地址功能，本篇我们来实现订单的物流信息查询功能。我们要实现点击操作列的“物流进度”绿色按钮，弹出该订单的物流信息记录，并以时间轴的形式显示出来：我们来实现点击“物流进度”绿色按钮弹出物流信息对话框的效果，首先为“物流进度”按钮绑定一个名为“showProgressBox”的click点击事件：然后在div的内部最后添加物流信息的对话框逻辑：然后在数据区域定义progressVisible显示属性，默认为false不显示；
2022-07-10 15:16:44
4653
4
原创 【VUE项目实战】58、订单修改收货地址的功能
接上篇《57、订单管理功能介绍和基本结构搭建》上一篇我们完成了订单管理模块的介绍和基本结构的搭建，本篇我们来完成订单列表的修改收货地址功能。我们要实现如下效果，首先点击操作区域的修改按钮，弹出一个对话框，对话框中有“省市区/县”和“详细地址”字段：在“省市区/县”有一个级联选择器，可以根据情况联动选择的省市区。首选我们找到操作列的编辑按钮，为其绑定一个名为“showBox”的点击事件：然后在视图区域的最底部div内，编写对话框内容：然后在数据区定义addressVisible显示参数，默认
2022-07-10 15:06:27
1969
原创 【VUE项目实战】57、订单管理功能介绍和基本结构搭建
接上篇《56、商品添加功能（六）-提交添加的商品》上一篇我们完成了商品列表及商品添加的所有功能功能。本篇我们开启新模块“订单管理”的开发，先进行模块的介绍和基本结构的搭建。开发新的模块，我们需要创建新的git分支，在VScode打开终端，在控制台输入“git branch”查看我们所在的分支（可以看到是在master主分支上），然后我们使用“git checkout -b order”创建一个名为“order”的分支，可以看到自动切换到了新的分支上：然后我们通过“git push -u origin
2022-07-02 20:58:37
2210
2
原创 【VUE项目实战】56、商品添加功能（六）-提交添加的商品
接上篇《55、商品添加功能（五）-商品内容模块》上一篇我们完成了商品内容编辑模块的开发，也即是完成了商品所有的信息编辑，本篇我们就来开发提交商品所有信息到后台的功能。我们要实现点击“添加商品”的按钮，将5个页签中的所有信息全部封装为一个表单对象，然后统一提交至后台：我们在之前每个页签的开发中其实已经将所有商品信息统一封装在addForm对象中去了，我们只要向后台提交该表单即可。首先在提交商品信息之前，需要校验我们提交的数据是否全部合法，需要对addForm对象进行表单预验证。首先我们为“添加商品”按
2022-06-26 15:40:27
2722
原创 【VUE项目实战】55、商品添加功能（五）-商品内容模块
接上篇《54、商品添加功能（四）-商品图片上传模块》上一篇我们完成了商品图片上传模块的开发，本篇我们来完成商品内容编辑模块的开发。我们要实现在商品内容页签部分嵌入一个富文本编辑框，可以让用户在编辑框中编辑大段带格式的文字：我们本次要使用的富文本编辑框组件，是名为“vue-quill-editor”的依赖，我们首先需要打开之前一直在使用的VUE UI可视化工具界面（打开cmd命令提示符窗口，输入“vue ui”指令即可打开图形化工具）：找到“依赖”菜单，然后点击“安装依赖”：在搜索框中输入“vue
2022-06-26 15:33:42
1190
原创 【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇《53、商品添加功能（三）-商品参数及属性模块》上一篇我们完成了商品参数和商品属性面板的开发，本篇我们来完成商品图片上传模块的开发。我们在商品图片页签，需要放置一个“点击上传”的按钮，点击后会让我们选择电脑里的图片，选择完图片后，图片会自动通过API接口上传到后台，然后在按钮下方展示：如果需要查看该图片大图，点击该图片的名称即可：如果需要删除该图片，我们点击右上角的叉叉即可：以上就是商品图片页签的功能介绍。下面我们来逐步实现它。我们要是使用Element-UI中的upload组件来作为我
2022-06-12 11:51:32
2434
原创 【VUE项目实战】53、商品添加功能（三）-商品参数及属性模块
接上篇《52、商品添加功能（二）-基本信息》上一篇我们完成了多页签汇总信息添加商品的逻辑梳理，以及完成基本信息的添加面板，本篇我们来完成商品参数和商品属性面板的开发。我们要实现的效果：这里我们要先从后台获取该商品的所有参数信息，然后给它渲染到页面上。调用的API如下：●响应数据这里在请求url里加入一个ID，这个ID就是第一个页面选择的商品ID，然后sel是获取静态属性还是动态参数，我们这里的商品参数时动态参数，所以写死为“many”即可。我们首先在点击“商品参数”Tab时，来发起请求获取动
2022-06-05 14:20:45
1546
2
原创 【VUE项目实战】52、商品添加功能（二）-基本信息
接上篇《51、商品添加功能（一）》上一篇我们完成了添加商品的基本页面结构绘制，本篇我们来完成多页签汇总信息添加商品的逻辑。一、分析添加行为并设置表单我们来分析一下页面上的添加行为，我们将一个商品的信息维护在了五个Tab面板中，每个Tab面板只维护了当前商品的部分数据，只有将这五个面板的数据合起来，才是一个完整的商品信息数据，所以我们应该在这五个Tab页签的外面，用一个统一的Form表单进行包裹：在Element-UI中，我们选择带有“表单验证”的Form表单组件(https://element.
2022-05-29 14:26:34
1801
原创 【VUE项目实战】51、商品添加功能（一）
接上篇《50、商品列表分页、查询和删除效果》上一篇我们完成了商品列表的分页、查询以及删除效果，本篇我们来完成商品的添加功能一、商品添加跳转效果实现我们要实现点击页面的“添加商品”按钮，跳转到添加商品的页面，如下：首先我们先给添加商品按钮增加一个点击事件，函数名为“goAddpage”，用于跳转页面：<el-col :span="4"> <el-button type="primary" @click="goAddpage()">添加商品</el-but..
2022-05-22 18:23:48
3346
2
原创 【VUE项目实战】50、商品列表分页、查询和删除效果
接上篇《49、商品列表功能模块初始化》上一篇我们完成了商品列表基础页面的搭建和数据的渲染，本篇我们来完成商品列表的分页、查询以及删除效果。一、商品列表的分页效果我们要在商品数据列表的左下方加入一个分页组件：Element-UI为我们提供了“Pagination分页”组件，我们选择功能最全的分页组件：样例代码如下：<template> <div class="block"> <span class="demonstration">完整功能&l...
2022-05-15 11:43:12
3161
原创 【VUE项目实战】49、商品列表功能模块初始化
接上篇《48、参数下可选项的增删改》上一篇我们完成了参数管理模块的所有开发，本篇我们开启商品列表功能的开发。一、创建新分支开发新的模块，我们需要创建新的git分支，在VScode打开终端，在控制台输入“git branch”查看我们所在的分支（可以看到是在master主分支上），然后我们使用“git checkout -b goods_list”创建一个名为“goods_list”的分支，可以看到自动切换到了新的分支上：然后我们将本地的分支推送到云端：然后我们前往gitee云端，可以看到新
2022-05-08 17:51:29
2341
原创 【VUE项目实战】48、参数下可选项的增删改
接上篇《47、渲染参数下的可选项》上一篇我们完成了参数下可选项的渲染，本篇我们来完成可选项的添加和删除。一、添加按钮与文本框的切换显示我们要实现点击添加按钮后，变成一个文本框的效果：逻辑是点击添加按钮后，按钮切换为一个input文本框，而input文本框失去焦点之后，则会变回添加按钮。我们通过v-if和v-else和一个boolean值就可以轻松实现。添加按钮我们可以通过element-UI官网el-tag提供的动态编辑效果来实现：官方实现代码：<el-tag :key=.
2022-05-01 12:37:51
1421
5
原创 【VUE项目实战】47、渲染参数下的可选项
接上篇《46、完成参数的编辑和删除功能》上一篇我们完成了参数的编辑和删除功能，本篇我们来渲染参数下的可选项。一、要实现的效果：我们要实现的效果就是，点击参数左侧的拓展按钮，在展开行中将参数的所有可选项渲染出一个列表，同时可以点击后面的添加按钮，新增对应的可选项：新增可选项时，输入可选项按回车就可以新增：点击选项卡后面的叉叉就可以删除该选项：二、开发思路首先我们在开发好的版面上，按F12打开开发者选项，清空控制台，选择好“曲面电视”商品分类，在控制台上可以看到打印出来的对象，其中“att
2022-05-01 12:28:06
731
原创 【VUE项目实战】46、完成参数的编辑和删除功能
接上篇《45、编写添加参数和添加属性的功能》上一篇我们完成了“添加参数”和“添加属性”的功能，本篇我们来完成参数的编辑和删除功能。一、要实现的效果我们要实现在点击“修改”按钮的时候，可以对动态参数或静态属性进行修改：里面会自动带出当前的参数或属性信息。思路：因为修改对话框和添加对话框的元素基本一致，可以复制添加对话框的代码修改为修改对话框。二、绘制修改对话框首先我们赋值添加对话框，在其下面粘贴修改为以下代码：<!-- 修改参数的对话框 --><el-dialo
2022-04-16 14:27:54
2583
原创 【VUE项目实战】45、编写添加参数和添加属性的功能
接上篇《44、渲染静态属性和动态参数的Tab》上一篇我们完成了渲染静态属性和动态参数的Tab页签。本篇我们来完成“添加参数”和“添加属性”的功能一、要实现的效果：点击“添加参数”按钮后，需要弹出一个添加对话框，其中有一个input输入框和确定及取消按钮：点击“添加属性”按钮后，也是弹出一个类似的对话框：这里我们就可以确定开发的思路了，因为除了标题名称和input左侧的属性名不一样外，两个对话框的结构基本相差不大，我们可以编写一个添加对话框，然后让两个按钮触发事件共用该对话框。二、编写Dig
2022-04-09 11:18:24
2590
5
原创 【VUE项目实战】44、渲染静态属性和动态参数的Tab
接上篇《43、参数管理模块基本结构搭建》上一篇我们完成添了参数管理模块的基本结构编写，并实现了商品分类的级联选择。本篇我们来渲染静态属性和动态参数的Tab页签。一、实现Tab页签切换这里我们需要用到一个新的ElementUI组件，名为“Tabs标签页”：它的基本用法就是实现不同页签之间的切换。下面是官网针对上图效果的示例代码：<template> <el-tabs v-model="activeName" @tab-click="handleClick"> ..
2022-04-04 11:48:44
5554
原创 【VUE项目实战】43、参数管理模块基本结构搭建
接上篇《42、添加商品分类功能（三）》上一篇我们完成添了商品分类模块的所有功能，本篇我们来准备开发新的模块————参数管理。一、参数管理概述商品参数用于显示商品的固定的特征信息，可以通过电商平台详情页面直观的看到。例如下图：参数分为动态参数和静态属性，其中动态参数就是用户在选择商品的时候可以动态选择不同的属性（颜色、版本）；同时，商品固定的（上市年份、机身宽度等）不会变化的参数为静态属性。我们要实现的参数管理模块的效果如下（动态参数和静态属性）：这里要先选择需要设置的商品，这里因为是.
2022-03-27 13:17:32
2193
5
原创 【VUE项目实战】42、添加商品分类功能（三）
接上篇《41、添加商品分类功能（二）》上一篇我们处理了添加分类时表单相关的内容，本篇我们来完成添加分类的提交入库。一、提交商品表单入库我们需要调用“添加分类”的API接口，参数如下：该接口的请求类型是post，请求参数需要通过请求体，包含cat_pid、cat_name以及cat_level三个参数。我们找到“添加”按钮的函数“addCate”，编写预校验的逻辑，判断用户填写的数据是否合法，如果合法，就调用提交接口，将表单提交至后台，并判断是否成功：//点击按钮，添加新的分类addC
2022-03-20 12:40:01
2077
1
原创 【VUE项目实战】41、添加商品分类功能（二）
接上篇《40、添加商品分类功能（一）》上一篇我们实现了部分添加商品分类的功能，本篇我们来继续处理添加分类时表单相关的内容。一、优化上一章剩余的小问题首先我们先处理一下选中之后想要清除选中的数据的问题，给el-cascader组件添加一个clearable属性即可：<el-cascader class="cascader" v-model="selectedKeys" :options="parentCateList" :props="cascaderProps"...
2022-03-20 12:32:48
2570
3
原创 【VUE项目实战】40、添加商品分类功能（一）
接上篇《39、商品分类树形表格渲染和分页》上一篇我们实现了“排序”和“操作”列的渲染，以及表格的分页效果。本篇我们来实现添加商品分类的功能。我们最终要实现的效果：首先点击添加分类按钮，会弹出相应的对话框，然后里面有“分类名称”以及“父级分类”的编辑框，其中“父级分类”为一个“级联选择框”（一个新组件）。一、实现弹出页面的基本布局我们在原来的“<el-card>”卡片视图标签的下方，添加Dialog对话框标签，用于展示弹出的添加对话框：<!-- 添加商品分类的对话框 -
2022-03-13 15:31:10
4952
原创 【VUE项目实战】39、商品分类树形表格渲染和分页
接上篇《38、实现商品分类的树形表格》上一篇我们完成了商品分类的树形结构效果，本篇我们来实现“排序”和“操作”列的渲染，以及表格的分页效果。一、渲染“排序”和“操作”列需要实现的渲染效果如下：查看商品分类的返回数据结构：{ "data": [ { "cat_id": 1, "cat_name": "大家电", "cat_pid": 0, "cat_level": 0,...
2022-03-13 15:23:30
4245
2
原创 【VUE项目实战】38、实现商品分类的树形表格
接上篇《37、商品分类功能介绍和基本结构搭建》上一篇我们完成了商品分类模块的介绍和基本结构的搭建，本篇我们来完成商品分类的树形结构效果。需要实现的整体效果如下：这个树形结构组件ElementUI是没有提供的，我们需要依赖第三方插件来完成。一、安装tree-table组件我们打开VUE的可视化面板（在cmd控制台输入“vue ui”指令，如何安装之前在环境搭建时讲解过），找到“依赖”模块，点击右上角“安装依赖”：在对话框中，在“运行依赖”下搜索“vue-table-with”插件（可以点价“
2022-03-06 17:44:45
3655
3
原创 【VUE项目实战】37、商品分类功能介绍和基本结构搭建
接上篇《36、用户分配角色功能》上一篇我们完成了为用户分配角色的功能，结束了权限管理模块。本篇我们开启新模块“分类管理”的开发，先进行模块的介绍和基本结构的搭建。一、商品分类管理介绍商品分类用于在购物时，快速找到索要购买的商品，可以用过电商平台主页直观的看到，例如：最左侧的部分是一级分类，例如“家用电器”。下面的“电视”、“空调”是二级分类，最下面的“曲面电视”等，是三级分类。我们在管理平台要开发的效果，如下：在主菜单有一个“商品分类”的菜单，点击后，右侧是一个选项卡页面，有一些Tab表
2022-02-26 19:10:51
5021
原创 【VUE项目实战】36、用户分配角色功能
接上篇《35、编辑角色下的权限（二）》上一篇我们完成了为角色分配新的权限并保存的效果，本篇我们来完成为用户分配角色的功能。一、完成对话框和待分配角色加载我们打开用户列表的页面（User.vue组件），需要在点击编辑按钮的时候弹出角色分配的对话框：效果：此时需要在编辑按钮处指定一个click显示方法，名为“setRole”，参数为当前用户对象：<el-table-column label="操作" width="200px"> <template slot-sco..
2022-02-13 19:25:59
3747
6
原创 【VUE项目实战】35、编辑角色下的权限（二）
接上篇《34、编辑角色下的权限（一）》上一篇我们完成了角色下权限编辑的递归树加载和已有权限展示功能，本篇我们来完成为角色分配新的权限并保存的效果。例如我们打开角色的“分配权限”按钮，勾选了一些权限：然后点击确定的时候，应该向服务器发送请求，将该角色勾选的权限都保存在服务器中，进行数据的持久化。为角色授权的API如下：该请求为一个post请求，请求路径中包含了两个参数，其中roleId代表当前角色的id，rids是一个以逗号分隔的所有权限的列表（1/2/3级权限都有），不在url中，而是包装在p
2022-02-13 19:17:57
1808
原创 【VUE项目实战】34、编辑角色下的权限（一）
接上篇《33、角色下权限的删除》上个阶段我们完成了角色下的权限删除功能，本篇我们来实现角色下权限的编辑功能。一、要实现的效果点击角色下的“分配权限”按钮，弹出权限列表的对话框，选中部分为目前角色下的权限，未选中部分为待选：二、实现对话框的弹出我们在分配权限按钮上，绑定一个click事件处理函数“showSetRightDialog”：<el-table-column label="操作" width="300px"> <template slot-scope..
2022-02-06 17:02:07
1892
原创 【VUE项目实战】33、角色下权限的删除
接上篇《32、权限管理-实现角色列表》上个阶段我们完成了角色管理列表模块，本篇我们来完成角色下的权限删除功能。一、添加删除图标以及设置触发方法效果图：首先我们需要为每一个权限标签实现一个“关闭”的小图标，我们在点击产出小图标的时候弹出确认对话框，确认后删除该角色下的权限。关闭小图标，可以通过Element-UI的“可移除标签”实现，即在el-tag上增加“closable”属性（下面在展开列的所有el-tag上增加closable属性）：<!-- 展开列 --><e
2022-02-05 17:17:19
1679
3
原创 【VUE项目实战】32、权限管理-实现角色列表
接上篇《31、权限管理-实现权限列表》上个阶段我们完成了权限管理模块，本篇我们来介绍用户、角色和权限三者的关系，并完成角色管理列表模块。一、权限管理业务分析通过权限管理模块，控制不同用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同功能的权限：对一个列表来说，它分为增删改查等等这些操作，每一个操作都叫做一个权限。例如有的用户只允许有添加的权限，但是没有删除的权限，有的用户只有查询的权限，没有增加和删除的权限。此时我们就可以认为不同的用户由于他身份的
2022-01-23 13:26:34
4745
5
原创 【VUE项目实战】31、权限管理-实现权限列表
接上篇《30.实现删除用户功能》上个阶段我们完成了用户管理模块的所有功能，本篇我们来开始开发权限管理的模块。一、创新新的git分支因为我们要开发的是新的模块，按照模块协作开发的原则，我们需要创建一个开发权限管理的专用分支，待权限管理开发全部完毕后，将分支合并到主分支上。首先在开vscode，在控制台输入“git branch”查看我们所在的分支（可以看到是在master主分支上），然后我们使用“git checkout -b rights”创建一个名为“right”的分支，可以看到自动切换到了
2022-01-16 12:15:05
3385
2
原创 【VUE项目实战】30.实现删除用户功能
接上篇《29.实现修改用户功能》上一篇我们完成了用户修改的功能，半篇我们来完成用户删除的功能。一、要实现的效果我们需要实现，点击“删除”按钮的时候，弹出一个提示对画框：当用户点击“取消”按钮，不进行删除动作，显示“已取消删除”：当用户点击“确定”按钮时，进行后台数据删除操作，成功后显示“删除用户成功”。二、实现删除提醒对话框我们需要使用ElementUI提供的MessageBox弹框组件中的“确认消息”，来实现对话框：样例代码：<template> <el.
2022-01-08 14:15:09
6780
原创 【VUE项目实战】29.实现修改用户功能
接上篇《28.实现添加用户功能（2）-预校验与发起新增请求》上一篇我们完成了用户新增的功能，本篇我们来完成用户修改的功能。一、要实现的效果我们要实现的效果就是，找到要修改的用户，点击操作一栏的修改按钮：然后会弹出修改用户的对话框，当前用户的基本信息会加载出来（用户名只读）：我们可以修改允许修改的内容，然后点击“确定”按钮后，就完成修改用户信息了。二、实现修改对话框的弹出首先实现点击修改按钮弹出修改对话框，我们找到修改按钮为其添加一个click属性，指定名为“showEditDialog
2022-01-03 10:24:59
8107
4
原创 【VUE项目实战】28.实现添加用户功能（2）-预校验与发起新增请求
接上篇《27.实现添加用户功能（1）-表单渲染和校验规则实现》上一篇我们实现了新增用户表单的渲染和校验规则的实现，本篇我们来完成用户新增的预校验和网络请求的发起。一、表单预校验我们来实现在添加用户前的表单预校验功能，即我们填写完用户信息在点击“确定”按钮时，调用一个函数，在函数中对整个表单数据进行一个预验证，确保在真正提交后台之前所有数据是合法的。首先我们为“确定”按钮绑定一个点击事件函数：<!-- 底部区 --><span slot="footer" class="
2022-01-03 09:26:05
2744
3
原创 【VUE项目实战】27.实现添加用户功能（1）-表单渲染和校验规则实现
接上篇《26、实现用户信息搜索功能》上一篇我们实现了用户的搜索功能，本篇我们来实现新增用户的功能。一、绘制对话框UI结构我们首先要实现点击“添加用户”按钮，弹出一个添加用户的对话框：对话框功能，我们使用Eelement-UI的“Dialog”对话框组件：首先在plugins/element.js中按需导入“Dialog”组件：import Vue from 'vue'import { Button, Form, FormItem, Input, Message, Container,.
2021-12-25 14:22:55
4322
vue判断输入的快递单号是否符合规则Demo
2022-07-22
使用Sidecar支持异构平台的微服务-代码部分.zip
2020-01-30
Hystrix Dashboard的使用-代码部分.zip
2019-10-20
Feign对Hystrix的支持-代码部分.zip
2019-10-04
覆写Feign的默认配置-代码部分.zip
2019-08-06
将微服务注册到Eureka Server上-代码部分.zip
2019-07-01
Eureka简介与Eureka Server-代码部分.zip
2019-06-26
Spring Boot与MyBatis整合工程
2018-09-08
osgi-SpringDM
2016-03-16
TortoiseSVN-1.8.11.26392-x64-svn-1.8.13.msi
2015-12-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人