X_W123的博客

vue引用public目录下文件有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种：1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类

**完整的登陆页面开发**，组件使用的是vant ui，具体用法可去官网看。分几个部分考虑，一、输入框input的校验：1、blur时没有值和格式不符合的逻辑校验2、限制输入长度逻辑，比如手机号只能11位，验证码只能6位。二、验证码按钮逻辑：1、不同状态下验证码颜色，文案，是否能点击，是否显示记数需要兼顾。2、验证码能够正常点击是在手机号格式正确情况下，所以这里要有个监听手机号，一旦格式符合，验证码生效3、关于计数器的逻辑。以下会从上面的点开考虑：一、input的校验没有可说的，记住俩

记录下关于跨域，接口转发的理解//vue-cli3.0 里面的 vue.config.js做配置devServer: {proxy: {‘/rng’: { //这里最好有一个 /target: ‘http://45.105.124.130:8081’, // 后台接口域名ws: true, //如果要代理 websockets，配置这个参数secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true, //是否跨域

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

需求：不使用插件生成下载二维码。表格内某一列点击查看，展示二维码，且支持下载,如图。初始化的时候，后端返回表格数据的同时会把二维码图片地址返回。所以，整个逻辑就是，点击不同查看携带不同图片地址去访问接口。1、点击查看，展示图片。2、点击下载按钮（这里要解决跨域问题，本地开发和上测试服和生产的时候都得解决）,红色ip去除3、接下来就是拿每个图片的标识开始发请求。4、请求过去后，解析后端返回的流。注意：这里需要注意的就是图片下载跨域处理，关于如何解决，上篇博文说过。先关代码，我贴一

vue中proxy代理的理解今天开发的时候 意外发现对vue的代理有了新的理解，以前都是很模糊的状态，先看图吧。1、proxy里面是个大对象，如果有多个代理，直接在后面加子对象，实际开发中可能不止接口代理还有图片上传下载代理。2、整个代理流程如何？①首先得知道什么是代理，为什么需要代理？代理：顾名思义就是代替别人做某事，到开发中也是这样，因为本地开发时基于node服务器进行开发，是不能直接请求后端的接口，一旦直接请求会报跨域错误，（不信可以试试把url直接写成后端地址，这时就会报错）如果这样的话

采用element ui中upload组件上传，目前支持上传单张图片，如果多张可进行更改。一、页面上组件使用注意：①如果是多张图片，file-list会用到。②name是申明上传文件的格式，可以和后端商量，有时候上传图片后端只需要image格式，但有时候后端会把图片和文件定义成一种格式即file。③action。图片上传的接口地址，通常是公司的服务器，这个地址不能直接填测试地址，会报跨域问题，需要知道本地开发从哪里开始代理，我这里是从api开始代理，所以action后面为api+图片接口地址。④v-i

vue实现导出excel功能对于导出的excel理解：导出excel需要前后端协商约定返回流的格式，导出的内容和格式都是后端实现的，前端只需要将后端返回的文件流解析成浏览器能够识别的流，解析的过程都是统一的写法。1、如何写注意传参数方式：get方式的话，直接在请求接口后拼接参数，post方式，将参数放入data里面。最终效果如图：后端返回的文件流。完整代码如下：handleDownload() { axios({ method: 'get',

由于项目中有很多控制输入框字符校验的规则，每次找都比较复杂，今天先做个罗列。1、只能输入数字。其实这个方法element组件自带el-input-numer可以解决，但是！但是！有个坑，如果你想在输入数字的基础上保留俩位数，你可能未设置precisio=2，对吧对吧，但是如果你继续想控制小数点前的位置个数时你就会发现这个组件拿不到像后面带零的长度，比如1.00打印出来也只是1，所以这个就得额外处理点和0 。当时真的气死我，还好经过同事的指点发现一个更好用的方法。1⃣️只能输入数字的校验，注意input