- 博客(198)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 Axios学习(5)---axios请求的封装与使用
Axios学习(5)—axios请求的封装与使用思路分析axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。第一步：新建 src/service/contactApi.js 文件const CONTACT_API = { // 获取联系人列表 getContactList:{...
2019-10-08 12:58:36
723
原创 vue项目笔记（7）-使用iconfont
vue中iconfont的使用步骤1、进入iconfont官网（http://www.iconfont.cn），进入“官方图标”，选择你所需要的图标，加入购物车。2、进入“购物车”，将选择好的图标“添加至项目”，选择对应的项目，点击“确定”。3、在项目中，点击“下载至本地”，解压缩，文件目录如下：4、将字体文件及对应的iconfont.css文件复制到项目目录中，如...
2018-08-09 23:59:59
1552
原创 Vue入门-兄弟组件之间的通信
兄弟组件通信的逻辑实现注意: 借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发.第一步: 在child1子组件中,给button按钮绑定一个点击事件toChild2, 在事件中我们通过公共的vue对象totalVm.$emit()方法去触发一个定义事件event1,并传递我们的参数str.第二步: 在child2组件创建的钩子(created())中监听事件event...
2018-06-21 11:55:38
2257
原创 Vue入门-子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),而msg已经在data中声明,其值为”...
2018-06-21 11:38:11
1300
原创 Flutter环境搭建
将压缩包解压，然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中（例如 D:\software\flutter）。
2023-02-17 11:33:54
1936
原创 数组中对象去重
数组中对象去重方法应用场景在某些场景下，我们需要将后端获取的一维数组，转化为二维数组的树形结构，才能方便我们使用；比如：城市、区域列表等等场景。示例数据格式如下： arr: [ { code: 1, text: '张三' }, { code: 1, text: '张三' }, { code: 2, text: '李四' }, { code: 1, text: '张三' }, { code: 3, text
2021-12-10 16:59:07
2407
原创 vscode开发常用插件一览表
vscode开发常用插件一览表小程序开发助手Add jsdoc comments 函数参数注释插件any-rule 常用正则表达式Auto Close Tag 自动闭合标签Auto Rename Tag 自动重命名标签Beautify 整理代码格式Chinese (Simplified) Language Pack for Visual Studio Code 中文语言插件CSS Peek 通过class名称自动定位到css样式文件的位置Dracula Official 吸血鬼主题Hi
2020-09-10 16:05:49
820
原创 vue项目中使用echarts
vue项目中使用echarts一、使用场景在项目开发中，我们往往会遇到数据统计方面的需求，这时候为了直观的呈现数据，我们需要制作图表。此时，我们可以使用 echarts 来制作。二、使用步骤安装 echartsnpm install echarts --save在 main.js 中引入import echarts from "echarts";挂在到 Vue 实例上Vue.prototype.$echarts = echarts;DOM结构<div id
2020-07-02 16:05:20
1018
原创 Vue开发精要之底部导航栏
Vue开发精要之底部导航栏在我们日常开发中，尤其是移动端开发（H5、微信公众号、企业微信等）中，我们往往需要自己设计底部导航栏。或许，导航栏这种常见功能，大家都是司空见惯的，但是其中设计的知识点却是不少，本片文档将要介绍地步导航栏涉及的知识点与常用方法，共同学习，共同进步。一、导航切换HTML<!-- 占位容器 --><div class="placegolder-container"></div><!-- 底部导航栏 --><di
2020-06-16 15:24:23
786
原创 前端加密-crypto-js插件使用
前端加密步骤1. 安装crypto-js插件npm install crypto-js2. 新建src/utils/aes.js文件import CryptoJS from 'crypto-js'export default { //加密 encrypt(word, keyStr){ keyStr = keyStr ? keyStr : 'zaqxswcde123vfr4'; var key = CryptoJS.enc.Utf8.parse(keyStr);
2020-06-12 16:38:03
2330
2
原创 Vant UI + Vue + Cli3.0 + Rem移动端项目搭建
Vant UI + Vue + Cli3.0 + Rem移动端项目搭建1. 创建vue项目创建项目vue create vant-demo引入less (通过vue ui 可视化页面安装依赖插件）vue ui2. 引入vant uinpm i vant -S3. 按需引入3-1. 安装babel 插件npm i babel-plugin-import -D温馨提示：在使用自动按需引入的时候，在使用相关组件的时候，需要在maim.js中一一引入，如下：import
2020-06-10 11:17:57
1272
原创 substring()与substr()的区别
substring()与substr()的区别substring(from, to)方法用法介绍substring() 方法用于提取字符串中介于两个指定下标之间的字符。substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。备注：to参数非必填，如果不填写，表示返回的子串会一直到字符串的结尾。示例var str="2020-04-02 10:00:0...
2020-04-03 13:40:03
930
1
原创 移动端调试插件vconsole.js的使用
移动端调试插件vconsole.js的使用1. 使用场景在移动端开发的时候，如果仅仅是手机网页，调试的时候我们直接使用浏览器自带的调试工具就可以了。但是如果是微信公众号或者企业微信，需要在微信的环境正才可以访问的页面，这个时候调试就不方便了。此时，推荐使用vconsole.js进行调试，而不是使用alert方法。2. vue开发微信公众号调试安装npm install vconso...
2020-03-17 14:59:20
2316
原创 微信公众号中关闭页面
微信公众号中关闭页面一、应用场景在微信公众号中为什么要通过JS方法关闭页面？答：防止用户通过连接地址进入公众号，杜绝安全隐患，以及登录失效的情况。二、具体的实现思路在封装好的请求文件中的响应拦截器中，添加网络请求结果的判断。该示例中，通过resultInfo.ResStatus == "3"标识登录失效，并做关闭页面的逻辑处理。三、代码instance.inter...
2020-03-12 19:56:21
1766
原创 获取地址栏参数
获取地址栏参数在很多时候，我们需要通过页面的链接来传递参数。既然是传递，那么我们肯定是需要在下一个页面接收，并且使用。那么，如果获取连接中的参数呢？具体的方法如下：1. 代码function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = que...
2020-03-11 14:51:50
384
原创 粘贴板clipboard.js的使用方法
粘贴板clipboard.js的使用方法一、使用场景在移动端开发的时候，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。二、使用步骤1. npm安装clipboard.js插件npm install clipboard --save2. 在文件中引入import Clipboard from "clipboard";3. 使用方法coppUrl(...
2020-03-11 13:55:33
5849
原创 vue公众号开发--二维码生成
vue公众号开发–二维码生成在H5项目中，我们往往会需要生成二维码，其实二维码的生成很简单，具体的步骤如下：1、安装依赖qrcodejs2npm install qrcodejs2 -S2、引入使用import QRCode from "qrcodejs2";3、html结构<div class="code-ontainer column-between-center"...
2020-02-05 20:40:07
1015
原创 IOS系统不支持伪类active效果
IOS系统不支持伪类active效果问题描述：在手机端网页中，设计了按钮、标签点击时的active效果，但是IOS端没有效果；解决方案：diamante如下<body ontouchstart="" onmouseover=""></body>总结：给body标签添加ontouchstart与onmouseover事件即可；亲测有效……...
2020-01-14 14:48:42
603
1
原创 cmd常用指令win10（持续更新中）
cmd 常用指令win10（持续更新中）一、文件夹操作md demo 创建demo文件夹cd demo 进入demo文件夹cd .. 返回上一级目录dir 列出文件夹的所有的文件夹与文件二、文件操作cd.>1.txt 创建1.txt文件del demo 删除demo文件夹中的所有文件del *.txt 删除所有后缀为.txt的文件三、温馨提示指令操作删除...
2019-12-13 13:06:05
685
原创 Vue中 path + query 传参的坑（参数类型变化）
Vue中 path + query 传参的坑一、概述在我们使用Vue中 path + query 方式传参的时候，这里存在一些坑或者说是现象（参数类型因为刷新而变化），记录一下，供大家学习。二、使用场景我们在使用Vue中 path + query 方式传参的时候，可以使用参数中的某一个作为区分新增与编辑的标识。就我的个人习惯而言，我通常会传参数0为新增，具体的非0参数为编辑（后端中主键是...
2019-12-04 16:18:51
5960
原创 Canvas学习-时钟绘制
Canvas学习-时钟绘制1. 绘制时钟外边框创建画布<div class="container"> <canvas id="clock" height="200px" width="200px"></canvas></div>备注：该容器就是绘制图形的画布。绘制圆环var dom = document.getEleme...
2019-11-17 15:51:26
589
原创 POST接口上传图片base64接口中“+”转化为空格问题解决
POST接口上传图片base64接口中“+”转化为空格问题解决问题在使用element UI上传图片的时候，发现转化为base64的图片字符中含有 + 号，但是传递给后端后，后端接收的字符串中的 +，全部变成了空格，导致图片不能正常显示，但是怎么解决呢？解决方案let str = 'base64图片地址';let newStr = encodeURIComponent(str);...
2019-11-12 17:22:51
844
原创 vsCode常用快捷键操作
vsCode常用快捷键操作行操作Shift + Alt up/down 在当前行上下复制当前行Ctrl + Shift + K 删除行Ctrl + Enter 在当前行下插入新的一行Ctrl + Shift + Enter 在当前行上插入新的一行Altl + up/down 向上/下移动当前行光标操作Home 光标跳转到行头End 光标跳转到行尾Ctrl + Home ...
2019-11-02 17:33:16
967
原创 Vue开发精要之底部导航栏
Vue开发精要之底部导航栏在我们日常开发中，尤其是移动端开发（H5、微信公众号、企业微信等）中，我们往往需要自己设计底部导航栏。或许，导航栏这种常见功能，大家都是司空见惯的，但是其中设计的知识点却是不少，本片文档将要介绍地步导航栏涉及的知识点与常用方法，共同学习，共同进步。一、导航切换HTML<!-- 占位容器 --><div class="placegolde...
2019-10-31 17:51:47
1064
4
原创 程序员的浪漫
程序员浪漫表白艺术系，可以用意境丰富的画作来表达爱意；文学系，可以用文辞优美的文章来传递情话；而程序员呢？大多人以为程序员都是宅男，没有情趣；实则不然，当程序员遇见爱情，你便会明白什么是 ‘不鸣则已，一鸣惊人’！1. 决定let finalDecision = myDecision == girlFriendDecision? myDecision : girlFriendDecision;...
2019-10-24 18:53:53
1823
2
原创 macbook全局安装vue cli3.0报错
在使用MacBook安装vue cli3.0的时候出现了一下报错？报错的原因是没有权限，具体的做法是：npm全局安装文件时可以使用 ‘sudo’ 任何管理员账户都可以使用sudo来获取 root 权限，所以使用一下指令即可；sudo npm install -g @vue/cli安装之后，使用一下指令查询版本信息vue -V //查看vue cli的版本信息安装完成。...
2019-10-24 14:24:04
618
原创 Vue中使用计时器实时刷新页面数据
Vue中使用计时器实时刷新页面数据1. 需求说明在前端开发中，往往会遇到页面需要实时刷新数据的情况，给用户最新的数据展示。2. 逻辑分析如果需要数据实时更新，我们自然是需要使用定时器，不断的调用接口数据，会相对的消耗内存。3. 代码示例data(){ return { intervalId:null }},methods:{ // 定时刷新...
2019-10-24 14:21:43
9331
原创 vue cli 3 打包部署测试出现net::ERR_ABORTED 404 (Not Found)问题解决
vue cli 3 打包部署到服务器上出现net::ERR_ABORTED 404 (Not Found)问题解决解决方法：配置vue.config.js如下：module.exports = { publicPath: "./"}注意：具体配置请参考官网教程 https://cli.vuejs.org/zh/config/#vue-config-jspublicPath...
2019-10-22 10:49:56
13607
1
原创 element UI使用小技巧(持续更新中)
element UI使用小技巧1. 回到顶部组件的使用在页面较长的时候，为了优化用户体验，我们往往需要添加回到顶部功能方便用户操作。具体的使用方法如下：<el-backtop target=".el-main" :visibility-height='150' :right="50" :bottom="50"></el-backtop>将组件放置到 App.vu...
2019-10-12 16:17:55
1179
原创 常用的CSS样式搜集(持续更新中)
常用的CSS样式搜集(持续更新中)PC端1. 滚动条美化::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0;}::-webkit-scrollbar { -webkit-appearance: none; width: 5px; height: 5px; // ...
2019-10-11 18:27:12
341
原创 Vue路由传参的3种形式
Vue路由传参的3种形式在列表向详情页面跳转，而后在详情页面查看列表的详情信息，此时设计路由传参，vue中有3种传参形式，介绍如下：<div class="action-btn" @click="viewDetails(item.id)">查看详情</div>一、path形式methods：{ insurance(id) { //直接调用$rou...
2019-09-30 15:59:17
846
原创 Axios学习(4)---axios拦截器、错误处理与取消请求
Axios学习(4)—axios拦截器、错误处理与取消请求一、拦截器什么拦截器？在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器拦截器的使用方法请求拦截器 // 请求拦截器 axios.interceptors.request.use(config => { // 在发送请求前做些什么 return confi...
2019-09-28 17:17:17
8868
原创 Axios学习(3)---axios实例
一、axios实例的创建比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：// 实例1let instance = axios...
2019-09-28 15:24:25
998
原创 Axios学习(2)---axios常用请求方法
一、axios常用的请求方法方法列举：get, post, put, patch, deleteget：一般用户获取数据post：一般用于表单提交与文件上传patch：更新数据（只将修改的数据推送到后端）put：更新数据（所有数据推送到服务端）delete：删除数据备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。二、get...
2019-09-28 13:42:09
1682
原创 Axios学习(1)---介绍与使用
一、Axios介绍1、Axios是什么？Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。2、Axios特性（1）支持Promise API（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。（3）转换请求数据和响应数据，比如...
2019-09-26 23:45:58
599
原创 uni-app开发(7)---兼容多类型DOM结构组件封装
在页面列表结构中，公共组件可以封装使用。但是，公共组件中类型可能有很多种，比如：文本、图文、视频、分享等等不同类型，我们在进行公共组件开发的时候，没有必要根据类型封装多个组件，我们只需要封装一个组件，其中根据不同类型使用多个template根据类型编译即可。代码结构如下：<view class="u-f-ajc"> <!-- 图片 --> <templa...
2019-09-22 19:15:06
485
响应式网站设计（gulp打包与未打包两版）
2018-08-24
vue-cli及vue路由学习
2018-06-25
vue-axios的使用及其中get与post网络请求
2018-06-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人