Emily's Blog

如何在html中加载jsp页面背景业务场景解决方案背景在实际工作中，可能会见证公司技术栈的变迁，比如说：从写jsp到前后端分离。但在这个过渡的阶段中，可能会遇到非得在html页面中加载jsp页面的情况。下面来总结一下如何实现这种需求吧~业务场景当前是一个前后端分离的项目，使用的是vue-cli脚手架，使用webpack进行打包，入口页为index.html。由于历史原因，需要用到一个公共组件 xxxComponent，由于该公共组件适用于大部分用jsp写的项目，因此提供的引入方式是<%=XXX

codemirror react使用专题及常见问题如何使用Q1：想换编辑器的底色、代码的颜色？Q2：我编辑器要写JSON的！Q3：想给编辑器添个高度，换下字号改下样式啥的你可能会遇到的问题Q1.在表单里使用CodeMirror，无法赋初始值，无法正常输入？Q2.格式不对齐、行号错位的样式问题？在使用Ant Desgin Pro进行业务开发的过程中，遇到需要编辑/展示JSON配置的需求。Ant Design推荐使用react-codemirror2 或者 react-monaco-editor作为代码编辑

【Ant design vue】antd实现动态增减表单项效果图支持的功能官方案例封装组件代码演示封装的组件组件的使用效果图用了一年多antd组件，发现需要做动态表单的场景可真不少！今天就来整理一下vue版的动态表单该如何实现吧！~效果图如下：支持的功能官方案例官方的案例如下，一行只有一个表单项且没有赋初始值。封装组件基于官网最朴实无华的例子，做了一下延伸。封装的组件，支持一下功能：一行可有多个表单项表单项可赋初始值（如：应用在编辑场景！）可在一个页面上多次复用该组件，效果如下：

axios的get请求参数里有数组导致后端接收数据异常异常情景原因解决方法异常情景传递参数nameList=[‘Tom’, ‘Jerry’]到接口，发送请求http://emily-project.xxx/api/mock/list?nameList=[%27Tom%27,%20%27Jerry%27]。此时，后端反馈报400，没映射进去后端接口！经过一番问题排查，最后发送请求http://emily-project.xxx/api/mock/list?nameList=%5B%27Tom%27,%2

进度条根据完成度的不同设置不同的颜色业务需求代码演示业务需求当完成度<50%时，进度条显示红色；当完成度>=50%且<90%时，进度条显示黄色；当完成度>90%时，进度条显示绿色；代码演示思路：抽出方法：利用progress组件的strokeColor属性。通过判断已完成的分段百分比在哪个区间，就设置所需的颜色。抽出方法：利用progress组件的format，可以自定义进度条后面的文字格式<div class="progress">

antd Modal.confirm实现延迟关闭效果业务场景分析代码--拿来即用Ant Design的Modal组件在业务中十分常用。当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。今天用大白话来讲讲如何用promise来延迟关闭确认对话框（Modal.confirm）。业务场景当开发删除、退出等功能时，我们常常会使用Modal.confirm()来实现。希望用户点击确定按钮后，请求相应的接口，请求成功后再关闭该弹窗。效果图展示（在文章的最后会附上代码）：

Ant Design Select组件支持一键全选/空选业务场景代码演示业务场景在使用Ant Design的Select组件时，难免会遇到需要一键全选的场景。如果把额外的按钮放在Select框外面，会不那么美观。因此，我利用了 dropdownRender 对下拉菜单进行自由扩展，实现了下面的效果：代码演示下面演示了，select在表单中使用的方法。当然了，select也可以通过v-model进行绑定，在selectAll和clearAll函数中进行赋值即可。主要是添加了maxTagCount属

解决Antd select框渲染大量数据卡顿问题一、模拟卡顿场景二、优化方案三、代码拿走即用一、模拟卡顿场景在使用ant design vue开发时候，可能会遇到Select框需要加载几百条甚至上千条数据的场景，比如说需要选个员工啥的。有的小伙伴可能会说了，这么多数据，为啥不分级展示？但有的时候，数据的底层不是我们前端说改就能改的啊，产经给出这需求只能给它搞定！根据下图可以看到，当Select的数据源是很多条数据的时候，点击Select框就会卡顿，更别说搜索啥的了。二、优化方案优化方案：初次

Antd Pro如何配置代理，webpack devServer怎么用？一、抛出问题二、理论解答官网怎么说？三步理解webpack devServer三、代码实践 -- 配置不同环境下axios事例的baseURL开发环境生产环境注意：修改完配置文件，需要重启项目，才能让效果生效一、抛出问题使用Antd Pro of Vue进行开发的时候，难免会遇到一个问题：我前端开发的地址和请求的接口地址域名不一样啊，这可咋整？我要怎么统一处理接口前缀？？二、理论解答官网怎么说？关于如何代理到后端服务器，官网

最近使用ANT DESIGN PRO OF VUE进行内部系统的开发，发现从官网拉下来的脚手架默认语言为英文，那么就需要我们额外设置一波了！通过简单3步，日期控件等默认也均为中文哒！Step1. 在src\locales\index.js文件修改默认语言// default lang// import enUS from './lang/en-US'import zhCN from './lang/zh-CN' // 默认语言由英文改为中文Vue.use(VueI18n)// export