- 博客(40)
- 收藏
- 关注
RSS订阅
原创 VUE项目中使用node.js搭建server连接本地mysql数据库
最近在研究vue项目中使用node.js搭建server服务器，链接本地mysql数据库，进行数据操作。准备工作：1.vue2.node.js3:mysql前面两项对于入行前端的小伙伴应该不是问题了吧， 如果有的话，可以参考vue安装项目。我选用的vue-cli构建项目，我好久没有用vue了，才发现快落伍了，现在3.0版本使用的vue create < project-name&...
2020-02-29 15:59:05
16313
19
原创 vue中使用echarts图表自适应的几种基本解决方案
1.使用window.onresizelet myChart = echarts.init(document.getElementById(dom))window.onresize = function () { myChat.resize()}优点：可以根据窗口大小实现自适应缺点：多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）；let myCh...
2019-01-10 15:40:18
18140
39
转载 记录一次nginx重定向以后POST请求变为GET请求的解决【转发】
今天测试twilio的回调地址，想在本地看到具体的回调内容，于时就将内网一台测试服务器的流量转发到了我的电脑上；现象：但是我用postman先行测试请求的时候爆出请求方法异常，奇怪了我明明是post为什么变成了get，于是我去看了一下nginx的日志，如下可以看到，经过重定向以后，变成了get请求；又看了一下nginx的配置文件原来是这里的问题，首先是因为重定向使用的状态码不正确，重定向使用的状态码如下有缓存的301和308，浏览器在接收一次重定向以后，会缓存重定向的地址，以后请求会直接访问重定向
2022-06-30 16:16:22
1240
原创 js实现删除k位数字使得最终的数字最小算法
算法题干：实现一个function，有两个入参number，key，使得number删除key位数字之后生成的最小。示例：输入输出14562,214289122,1912289122,212210,20110,20思路：最优解是删除出现的第一个左边>右边的数，因为删除之后高位减小。具体function如下：function reduceNumber(number, key){ let result = []; if(key
2020-09-09 23:33:13
552
2
原创 VUEX中mapActions和mapMutations使用方法
分享一个vuex的小知识：使用vuex，修改状态用commit,或者dispatch，如this.$store.commit('user/age', 10)this.$store.dispatch('user/age', 10)也可以使用mapActions和mapMutations进行映射，使用方法：...mapActions({ stateChange: 'user/upd...
2020-05-06 18:01:02
1872
原创 VUE给动态生成的el-checkbox添加v-model
需求描述：根据返回的数据，页面动态for循环添加el-checkbox，动态绑定v-model；html代码：<el-checkbox class="all-choose" v-for="(item,index) in tabList" :key="index" v-model="item.status" @change="C...
2020-04-22 17:24:35
3093
2
原创 微信小程序saveFile:fail the maximum size of the file storage limit is exceeded
话不多说，上解决方案wx.getSavedFileList({ // 获取文件列表 success(res) { res.fileList.forEach((val, key) => { // 遍历文件列表里的数据 // 删除存储的垃圾数据 wx.removeSavedFile({ ...
2020-03-19 16:24:37
3703
2
原创 微信小程序生成小程序码图片-【附坑点】
最近做小程序遇到一个功能：从列表进入的详情页面，有生成海报的功能，这个功能用canvas就可以实现，我之前的文章有哦。附上链接只是这次的功能上要在海报上加上生成当前页面的小程序码，分享出去朋友识别就能进入这个页面。比如小程序页面路径是 “/pages/home/detail?id=4100”，这是你要分享出去的页面路径。好，下面来讲怎么实现这个功能：先来看一组小程序生成小程序码的官方文档...
2020-02-23 16:46:26
2915
原创 深入了解JavaScript之parseInt
parseInt(string,radix) 解析(取整)，接受两个参数// string: 需要解析的值，字符串开头的空白符将会被忽略。// radix 一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时，不同的实现会产生不同的结果，通常将值...
2019-09-02 13:59:50
192
原创 微信小程序授权获取用户手机号
需要前端进行调用getPhoneNumber，后端需要配合写接口进行解密，然后返回手机号一.先看官方文档二.总结就是1.获取微信用户绑定的手机号，需先调用wx.login接口。2.wxml页面中使用button按钮触发，bindgetphonenumber绑定授权同意或者拒绝的回调函数<button open-type="getPhoneNumber" bindgetphonenu...
2019-08-23 18:07:54
3861
2
原创 微信小程序用canvas画图并分享
最近开始做微信小程序，有这样一个需求：从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片如下图的列表：分享出来的样子：解决方案和思路：canvas画图生成图片上代码：【html部分】<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCan...
2019-08-16 16:41:28
1942
5
原创 jQuery自定义down选择插件 移动端
最近自己鼓捣了一个移动端dropdown插件，支持单选和多选（原创的哦）演示地址：http://www.jq22.com/yanshi21792下载地址：http://www.jq22.com/jquery-info21792
2019-06-28 11:17:28
491
原创 vue项目中上传头像的简易方法（一）
作为一名代码届的前端码农，上传头像这样的功能肯定是见怪不怪了，这两天有点儿空余时间，整理了一下上传头像的功能实现方法。首先：考虑上传的相关需求要求1、格式要求（jpg | png | jpeg | gif ）2、大小要求（比如不超过300kb）3、尺寸大小限制（1:1，4:9，9:16）4、是否可以裁剪5、单张还是多张（单张一般用在用户头像）…...
2019-03-07 17:42:09
13053
25
原创 VScode 自动修复vue项目中eslint报错
1、安装插件 eslint-plugin-vuenpm i -g eslint-plugin-vue2、修改项目跟路径下的文件：.eslintrc | .eslint.js添加vue选项3、添加eslint 和 vetur 插件4、修改vscode首选项配置【汉化版 文件>首选项>设置找到对应的配置文件】【英文版 file>preferences>se...
2018-12-18 17:31:27
5437
8
原创 webpack管理静态页面项目
最近在写一个微信h5页面的项目，其中作为前端开发经常遇到的几个问题都被我遇到了 1.项目已经做好了，测试也通过了，但是UI调整以后，测试上页面没有改动，查了半天，原来是缓存； 2.每次改动都是一次版本更新，好不容易做好了，又给你说：还是改回原来的，那你怎么弄？当然，传统的解决方案就是清除一下手机缓存，版本更换的时候做好备份就可以了。诚然，这样是可以解决问题的，但是遇到项目反复改动，版本迭代...
2018-07-30 17:54:09
1786
原创 webpack+vue 在使用element-ui时import ‘element-ui/lib/theme-chalk/index.css‘失败
1.确认style-loader!css-loader是否下载，如果下载，是否在config文件中进行了配置配置文件如下：{ test: /\.css$/, loader: 'style-loader!css-loader', exclude: /node_modules/ }但是这样仍然无法正常运行的，因为在elment...
2018-03-28 15:34:40
3093
原创 vue-cli项目中用json-sever搭建mock服务器，模拟本地json数据
在使用vue-cli开发项目时，无论后台接口是否开发完成，我们都可以自己使用本地json数据用于模拟，但这些json数据要作为接口开发，json server 作为模拟工具就提供了这样的功能，并且使用十分方便。前提：已经使用vue-cli搭建好了项目1、全局安装json-servernpm install json-server -g或使用cnpm install json-s...
2018-03-20 17:07:49
16884
2
原创 input的blur事件隐藏div,div上的onclick事件不生效解决方案
之前做一个项目，点击当获取input输入框的焦点时，将之前搜索的列表显示，失去焦点时隐藏这个列表，列表上有点击事件进行搜索【不使用插件和框架】。问题：点击列表的时候不触发列表的点击事件？<input type="text" name="" onfocus="show()" onblur="hide()" />//这个input控制下面test列表div的显示和隐藏&l...
2018-03-07 16:16:42
2795
原创 APICLOUD实现沉浸式导航栏在Android和ios上的兼容
最近在使用apicloud开发一款APP，项目没有使用安卓和ios开发人员，选择APICLOUD开发，犹豫UI设计的导航栏是沉浸式，在Android和ios上的效果是不一样的，ios上导航栏会浮在内容上面，将内容部分遮挡，如图： 我要达到的是不希望导航栏遮挡住内容部分，经过不懈的努力和各种尝试，终于解决了这个问题，具体步骤如下： 1、在config文件里面配置 "statusBarA
2018-01-16 17:28:19
5942
8
原创 js正则验证数字，字母和下划线（至少包含其中两种，数字不能开头）
最近做了一个注册验证用户名，要求数字，字母和下划线（至少包含其中两种，数字不能开头），在网上找了好多例子，要么只能实现字母和下划线（数字不能开头），要么就只能实现数字，字母和特殊字符（至少包含其中两种，数字不能开头），无法排除其他的特殊字符，在尝试了很多次以后，我试着将这两种情况的判断结合在一起就实现了上面的要求，直接贴代码var myTestValue="3333dddddks__+";var
2017-11-28 16:40:16
14299
7
原创 APICloud 如何实现将UIScrollPicture 模块添加到指定元素里面
先注意以下几点： 1、 UIScrollPicture 模块是 scrollPicture 模块的优化版。 2、不能同时添加的模块：fog2使用APICloud做APP的小哥哥小姐姐们是不是一样会遇到这个问题，在项目中使用UIScrollPicture 制作轮播图效果，想把UIScrollPicture 放在自己写的一个div标签中。但是UIScrollPicture 模块使用的时候
2017-11-24 14:09:33
3087
4
原创 bootstrap datetimepicker 中文显示
使用bootstrap datetimepicker时，想让日期，星期，时间，年份等用中文显示，一共有两种方法。 第一种 引用bootstrap-datetimepicker.zh-CN.js，并在language配置zh-CN（中文）$('.form_date').datetimepicker({ language: 'zh-CN', //日期
2017-10-16 14:17:10
8069
原创 angular 未登录状态拦截路由跳转
使用angularjs的但页面应用时，由于是本地路由在控制页面跳转，但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。angularjs是mvc架构所以实现起来很容易也很灵活，我们只MainController里增加一个路由事件侦听并判断，这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了
2017-10-11 16:18:12
5349
原创 angularJs同步请求
最近在用angualr做微信开发，涉及到拿取用户登录信息，要在登录成功之后才可以进入相应的页面，在没有登录情况下去登录。首先想到同步请求的方法，我们可以用请求嵌套的方法实现，但是这样写代码量增多，并且可维护性减低。在前端做同步读取显然不是好的实践做法，同步之后会严重影响前端的体验和性能。但是angular提供了一个内置Service $q，它提供了一种承诺/延后（promise/deferred），
2017-09-20 20:06:03
4391
转载 Angularjs中ng-select和ng-options用法【select联动数据】
1、使用前景 最近在使用angualr项目中遇到select联动数据，尝试了很多次都失败，终于在查找了很多资料以后解决了问题。 2、介绍ng-select ng-select用来将数据同HTML的标签进行绑定。这个指令可以和ng-model以及ng-options指令一起使用，构建精细且表现良好的动态表单。 ng-options的值可以是一个内涵表达式（compreh
2017-09-06 17:59:23
3269
原创 ng中infinite-scroll插件无限请求问题解决方法
在使用angular开发移动端页面的童鞋们，有时要做到上拉加载，虽然jquery有很多插件可以满足这个效果，但是我们要知道使用angualr项目就尽量不要再使用jquery，因此ng的infinite-scroll上拉加载就很有作用了，但是使用的小伙伴遇到无限请求怎么办呢？最近我也遇到了这个问题，解决方案如下： 我们通过infinite-scroll的自带属性infinite-scroll-di
2017-08-24 17:19:10
4504
原创 angularjs1结合ui-router、ocLazyLoad分步按需加载js文件
还在使用angular1进行开发的前端小伙伴有没有想过这个问题，当项目不断延伸扩展时，页面开始增多，js,css文件同样会增多，如果继续使用粗暴的将所有文件加载在index.html页面中，那么首页就会加载很多无用的代码，从而造成首屏加载时间过长，首页加载时间超长我想没有一个用户能忍的吧，直接 GG 了。那么，可不可以做到，首页只引入首屏需要显示的必要代码，而在必要的时候再去加载各个模块的代码，做到
2017-08-10 17:22:14
1125
原创 本地存储localStorage的用法总结
一、什么是localStorage？ 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。二、localStorage的优势与局限 localSto
2017-07-31 15:04:13
4178
原创 LocalStorage存储JSON对象的问题
1、localStorage - 没有时间限制的数据存储 var arr=[1,2,3]; localStorage.setItem("temp",arr); //会返回1,2,3 console.log(typeof localStorage.getItem("temp"));//string console.log(localStorage.getItem("temp"));//1,2,3
2017-07-25 15:00:39
1277
原创 关于angular路由传值（一个或多个）问题
在ng的页面条转传参数的方法，ui-sref，$state1、Ui-sref:用于html页面进行单页面的跳转；2、$state:用于js代码中跳转。[传递单个参数]对于传递方：传递方：ui-sref=”home.ideas.edit({id:detailIdeas[0].idea.id}) 或者：$state.go(home.ideas.edit,{id: detailIdeas[0].id
2017-07-07 17:18:45
3612
转载 Angularjs 中 ui-sref 和 $state.go 如何传递单个多个参数和将对象作为参数
一： 如何传递单个参数首先，要在目标页面定义接受的参数：传参， ui-sref: $state.Go: 接收参数， 在目标页面的controller里注入stateParams，然后"stateParams，然后 "stateParams.参数名” 获取 二：传递多个参数其实也很简单可以在上面的单个后面直接拼 1：目标页面定义需要传的传输个数.state("default.certque
2017-07-07 17:12:01
972
原创 angular阻止事件冒泡
使用angular时，当我们遇到多个ng-click事件而发生事件冒泡导致项目出错时，我们就需要将事件的冒泡阻止，具体如下<div ng-click="FunFitness();$event.stopPropagation();">取消订单</div>加上$event.stopPropagation();便可实现阻止事件的冒泡
2017-07-04 15:19:59
4147
原创 Angular.js中使用Swiper插件不能滑动的解决方案
我们都知道swiper是交互体验十分好的轮播插件 但是通过angular（ng-repeat）循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行：html<div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div c
2017-06-23 13:54:52
970
原创 bootstrap-select清除选中的状态，恢复默认状态
PC端项目中经常会出现大量的数据列表页面，涉及到下拉框选择筛选条件； 当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢？如【图1】当我们选择摸一个条件之后如【图2】此时点击重置按钮要将【图2】的状态回到【图1】，我们会使用很多方法，比如： $("#loc_province_search").attr("lang",'0');//将下拉
2017-06-20 11:01:22
42978
12
原创 meta标签及其含义大全
meta运用在head标签中，但是对于H5中meta标签元素的定义已经运用场景没有几个人能够说是熟练运用的，现在我就来罗列html中meta标签的定义以及运用场景。定义和用法:<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值
2017-06-14 15:38:06
1894
原创 js控制textarea禁止输入表情
在网页中控制textarea不能输入表情：<textarea onkeyup="this.value=this.value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,'')"></textarea>只需要在textarea中输入事件中进行正则过滤即可实现代码为replace(/\uD83C[\uDF00-\uDFFF]|\uD83
2017-05-31 17:23:51
8339
2
原创 高德地图搜索以后生成的marker的点击事件
使用高德地图时，通过搜索便可将地址搜索出来，但是想点击当前marker获取当前的经纬度和具体地址时，如下图： AMap.event.addListener(autocomplete, "select", function(e){ //TODO 针对选中的poi实现自己的功能 placeSearch.search(e.poi.name); //这是实现搜
2017-05-25 11:47:08
30034
4
原创 iframe，H5标签embed加载页面，session失效后页面嵌套解决办法
在登录页面加入如下的script语句<script language="javascript"> if (top != window) top.location.href = window.location.href; </script> 即可解决问题
2017-05-25 11:08:31
1676
原创 vue绑定的点击事件阻止冒泡
当我们在使用vue做项目时，经常用到点击事件的绑定，但是我们绑在一个div上，里面的其他按钮（如删除、修改）等按钮也会加载这儿div的点击事件，而事实我们不需要，如何解决：首先我们来区分事件冒泡、事件捕获是什么（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 6.0: div -> body -> html ->
2017-03-01 16:33:24
22389
原创 echarts入门新手必看
传统网站开发中，我们有时会十分苦恼，当页面设计大量的数据展示并且这些数据是动态显示的时候，我们以前的做法就是table，手动去用代码将表格设计并完善，但是数据还是展示在一个页面上，数据之间的关系不清楚。（如下图，以前的传统数据展示） 但是现在，当你学会echarts数据统计表格之后，你就可以制作如下的数据展示（这样）（这样） （还有这样）[这些都是我实际项目中的] 学会echarts让图标
2017-02-27 10:16:22
1474
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人