diaocheng9093-CSDN博客

转载 Vue——路由：登录状态的判断

在搭建的系统中，最基本的登录都是必须的，结合Vue的路由，涉及最多的就是登录状态的判断。也就是说，如果一个组件要校验登录状态，则在用户初始进入时，就要去判断用户是否登录，这里的校验登录状态就是本篇的重点。直接上实例，需要的拿走一、router / index.js 路由中加校验export default new Router({ routes: [ {...

2018-07-11 15:49:00 648

转载 vue——vuex安装及使用

一、vuex 的理解官方解释：vuex是一个专为vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。我的理解：全局变量，同 angular 中的根元素$rootScope例如：有模块a 和模块b，想让模块b 获取模块a 的数据。这时候我们就可以定义全局变量，模块a 的数据赋值给全局...

2018-07-11 15:19:00 172

转载 JS 将页面上的表格导出为 Excel 文件

如果在页面上展示了一个表格，想把这个表格导出为Excel文件，那么在要求不高的情况下，可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出。不过，这就是利用了 Excel 能打开 HTML 文档的特性，所以导出的表格实际上是一个 HTML 文档，并且其扩展名只能为 .xls，而不能是 .xlsx，否则Excel无法打开。（有使用JavaScript生...

2018-06-15 18:07:00 624

转载获取用户当前位置信息的两种方法——H5、微信

在之前的调用百度地图API的总结中获取当前位置信息我用的是 H5 ，其实微信也提供了获取用户地理位置的方法，现将这两种方法都贴出来，看情况选择使用。一、H5 获取当前地理位置得到经纬度 // H5 获取当前位置经纬度 var location_lon = '',location_lat = ''; // 经度,纬度 if (navigator.ge...

2018-06-15 11:38:00 2318

转载上传图片获取base64编码、本地预览

一、读取文件的对象 — new FileReader()上传图片接口参数有图片base64编码（数组，imgBase64List ），主要用到读取文件的对象【 new FileReader() 】 //获取文件 var file = $("#imgForm").find("input")[0].files[0]; //创建读...

2018-06-15 10:13:00 672

转载前端生成二维码/条形码

上一篇写到调用微信扫一扫接口，现在来生成二维码、条形码。在我们的系统中，使用订单号生成二维码、条形码，司机在公众号内扫描该二维码、条形码之后显示订单号，以供确认该订单是否可以签收。一、jquery.qrcode.min.js 生成二维码1、使用步骤（1）引入文件：<script src="jquery-2.1.0.js" type="text/javascr...

2018-06-12 14:45:00 472

转载调用微信公众平台扫一扫示例及解决接口报错 { "errMsg": "config:invalid signature" }...

一、解决报错问题单从报错信息 invalid signature 就可以看出是签名signature 有问题，查了很多资料，终于知道了问题点，后台让我直接调接口是不对的，签名是根据请求接口的页面url来生成的，所以url要动态地传给后台，而且这个页面url还要除去'#'hash部分，可用 location.href.split('#')[0] 获取,需不需要 en...

2018-06-11 16:20:00 1511

转载调用百度地图API的总结

因为项目要用到百度地图，所以先摸索了一下，各种功能官方都有文档，点击可查看，文章的话我就直接写我用到的功能例子了，要用可以直接复制粘贴~一、主要涉及到的几个接口（先申请密钥）：1、技术一：坐标转换API（转换成百度地图的经纬度）官网地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition可以...

2018-05-18 15:30:00 1003

转载移动端安卓和 IOS 开发框架 Framework7 布局

对应的各种效果，Framework7 里面实现的方式比较多，这里我就只写我用的一种，样式有的自己修改了的，想看官方详细的参见 http://framework7.cn一、手风琴布局Accordion Layout<div class="content-block accordion-list custom-accordion"> <div cla...

2018-05-16 18:55:00 158

转载 Framework7 + Angular 开发问题解决汇总

本篇主要汇总一下使用Framework7 + Angular 开发中遇到的一些难点及我的解决方法，以后再遇到会在这里继续更新。一、页面表格按需加载情况描述：默认加载10条，在用户上拉页面是再进行下一页的内容加载。解决方法：利用Framework7 的无限滚动。1、页面：<tbody id="orderContent"> <tr ng-...

2018-05-16 15:55:00 141

转载 Vue —— 从环境搭建到发布

之前学习 Vue 的时候也是按着别人的文档一步步下载安装构建项目再运行，为了避免忘记步骤，所以还是记在这吧。参考链接：https://www.zybuluo.com/xudongh/note/758521 以及https://juejin.im/entry/57fcd8088ac2470058cadd6e 感谢转载于:https://www.cnblogs.com...

2018-04-28 14:47:00 82

转载 Js 实现页面缩放

分享一个很棒的东西：：：：：优点：不用考虑适配问题，按设计稿进行固定尺寸开发。1、将下面这段 js 放在页面的<head>中function bodyScale() { var devicewidth = document.documentElement.clientWidth; var scale = devicewidth / 1440...

2018-03-27 16:05:00 1304

转载例子：Vue 配合 vue-resource 从接口获取数据

vue-resource 是vue 的一个与服务器端通信的 HTTP 插件，用来从服务器端请求数据。结合例子——图片列表来写一下 Vue获取接口数据。html ：<div id="app"> <ul> <li> <img v-for="imgItem in imgList" ...

2018-03-27 15:24:00 226

转载 H5本地存储详解

H5之前存储数据一般是通过 cookie ，但是 cookie 存的数据容量比较少。H5 中扩充了文件存储能力，可存储多达 5MB 的数据。现在就实际开发经验来对本地存储 ( Storage ) 的使用做一个总结。一、cookie 方式对于 cookie 的使用，可以看我之前写的总结：JS操作cookie二、H5 localStorage / sessionStorage本...

2017-08-13 12:03:00 248

转载移动端——微信内登陆与认证

之前一直做PC端比较多，最近在做公司的微信公众号，涉及到一个问题，我们这个公众号是为特定的企业开放的，用于园区资产平台管理，所以涉及到一个用户登录认证的问题。一、描述。在微信的内部页面运行：当用户未关注公众号（或企业号），则自动引导到关注画面，关注后进入公众号，公众号中有“主页”，用户点击进入我们的平台，可以实现提交工单服务需求，查看园区信息等。但是在进入我们平台时需要做一个登录...

2017-08-04 18:32:00 532

转载 JavaScript WebSocket 使用总结

翻看之前写的Highcharts使用总结和前后台交互之传参方式，想对WebSocket 单独写一个使用总结。一、认识 WebSocket 。WebSocket是 H5 新出的一种协议，为解决客户端与服务端实时通信而产生的技术。通过 HTTP/HTTPS 协议进行三次握手后创建一个用于交换数据的 TCP连接，此后服务端与客户端通过此 TCP 连接进行实时通信，任意时...

2017-08-04 15:12:00 3340

转载移动端效果 — 点击图片全屏查看

在公众号中提交服务需求工单后，经过“待分配”、“待执行”、“执行中”、“待验收” 这些阶段后，需要验收人提交评论上传图片才能变成“已完成”。做好后新增点击图片全屏查看的需求，刚开始使用的方法能够做到，但是由于 jquery 的版本冲突，所以不得已换了现在的方法。一、简单例子。<div class="add_photo"> <ul>...

2017-07-30 18:28:00 1233

转载 CSS — 隐藏滚动条，依旧可以滚动

公司的系统，在PC端可以管理我们的公众号，在发布模块页面时有一个预览功能，呈现页面在手机端的样式。做法很简单，一会就完成了，但是在预览内容过长时手机外框会有一个滚动条，影响美观，于是就想把它去掉，有一个方法个人觉得很好用，记录下。思路：写两个 div 嵌套在一起，高度都固定，外面的 div 固定宽度并且 overflow: hidden; 里面的div宽度比外面的稍宽，最好算好...

2017-07-30 17:42:00 146

转载移动端—— 兼容PC端，移动端的点击事件

移动设备上不支持鼠标事件，好在webkit内核的移动浏览器支持 touch 事件，所以触摸事件是移动应用中所必须的。touchstart、touchmove、touchend事件可以类比于mousedown、mouseover、mouseup的触发。一、touch 相应事件touchstart : 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。touchmove ...

2017-07-07 17:08:00 1900

转载移动端——页面点击（ touchend -> click）

手机端页面好多要注意的，点击事件就是其中一个：在手机端页面中使用 click，安卓手机能正常实现点击效果，可是苹果手机不能点击；用 touchend 代替 click，苹果手机中能点击，但是可能出现小问题。所以，在进行移动端页面优化时，一般使用 touch 事件替代鼠标相关事件，用的较多的是使用 touchend 事件替代PC端的 click 和 mouseup 事件。注：在...

2017-07-04 17:36:00 690

转载用socket.io实现websocket的一个简单例子

socket.io 是基于 webSocket 构建的跨浏览器的实时应用。逛博客发现几个比较好的一、用socket.io实现websocket的一个简单例子http://biyeah.iteye.com/blog/1295196二、socket.io的介绍http://www.cnblogs.com/mazg/p/5467960.html...

2017-06-30 17:51:00 356

转载移动端——JS（一）

javascript(简称js)语言在移动前端可以说必不可少，许多效果都是和js相关的，包括现在移动端的一些框架：jqmobi、jqtouch、sencha touch、jquerymobile等等。都是基于js编写的。暂时不讨论这些框架，主要讨论一下部分常用的js事件在移动端的使用。举几个例子：1、隐藏地址导航栏：<script>// 该函数由Simon...

2017-02-09 18:27:00 140

转载移动端——link标签

meta标签中提到了部分功能要结合link标签进行使用，link标签主要是存放CSS文件的地方，同时还有一些专属的移动端设置。<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-wi...

2017-02-09 17:51:00 174

转载移动端——meta标签

meta标签主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。<meta http-equiv="Content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale...

2017-02-09 17:25:00 120

转载 CSS3 新特性

~平时喜欢逛博客，看别人的学习总结和遇到的问题解决办法，恰好最近在做书签整理，翻到了之前一个前辈移动前端的总结，所以我就按他的总结模块对自己的知识进行了梳理，不过由于都是手写的，为了方便，下面的都是平时常用的。首先，对于前端页面结构来说，总体由三个层组成：html结构层、css表现层、javascript行为层，他们相互独立而又相互依存。由于IOS系统移动端坚决抵制FLASH等插...

2017-02-09 17:16:00 64

转载 Ajax/Highcharts—动态图表

前面写过“Highcharts的用法总结”，当然了，在实际应用中，图表数据都是要从后台获取的，根据之前的使用，贴一些例子来分享学习。首先，如果没有获取后台数据，又希望呈现一个动态图表的话，可以很轻易的想到，Y值可以写成随机数，当然，X轴最常见的就是当前时间。那么，同理，用后台获取的数据替换随机数，不就实现了“Ajax—动态图表”嘛。一、向图表中插入随机点<div i...

2017-01-18 13:08:00 85

转载初写C#的小总结

虽然大学学过很多计算机语言，但是现在工作是前端，一个刚入行的前端菜鸟，之前对于后台完全零接触，但是最近有个项目，我也是第一次真正接触C#，中间遇到了一些小问题，就做个总结记录下，真的是超级简单的小知识点。。。项目工具：Visual Studio 2015一、ASP.NET MVC模式的简单理解模型（Model）、控制器（Controller）、视图（View）组成MVC模式...

2017-01-13 17:10:00 91

转载 H5 FormData对象的使用——进行Ajax请求并上传文件

XMLHttpRequest Level2 添加了一个新的接口——FormData。【主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的Ajax相比，它能异步上传二进制文件】利用FormData对象，可通过js用一些键值对来模拟一系列表单控件，还可以使用XMLHttpRequest的send()方法异步提交表单。首先，在之前的“前后台交互之传参方式”中讲了传统的...

2017-01-04 16:30:00 289

转载 ajax请求成功后新窗口window.open()被拦截的解决方法

ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是该操作并不是用户主动触发的，所以它认为这是不安全的就拦截了（不过如果是 _self 的话就不会有这个限制），即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为（trigger('click')），浏览器也会认为不是由用户主动触发的，因此不能被安全执行，所以被拦截。...

2016-11-08 15:14:00 157

转载前后台交互之传参方式

前台向后台传参，一般有如下几种方式：一、URL方式传参1、使用这种方式时，参数接在url后面，用？分隔，如果有多个参数，各参数间用 & 连接。get方式请求时可以使用URL方式传参。巴特URL传参在应用时也有缺陷：1.1 参数长度限制：（1）IIS 7 对 Query String 有长度限制；默认：2048 ；（2）IE浏览器对URL的长度现限制为204...

2016-09-24 12:37:00 966

转载 Chrome 控制台使用大全

Chrome的开发者工具已经强大到没朋友的地步了，特别是功能丰富界面友好的console一、console.log将输出到控制台的信息进行分类会更好：console.log(); 普通信息console.info(); 提示类信息console.error(); 错误信息console.warn(); 警示信息console.log(...

2016-09-23 17:57:00 107

转载移动端效果 — 页面引入在线视频

其实很简单，我只是写了来记录一下自己遇到的这个小坑。随便找个优酷视频，点击下图分享：直接把代码复制粘贴到你的代码中即可。但是，有三种，用哪种合适？我用的时候，最开始用的html代码，遇到一个问题：第一次预览的时候，有视频，不关闭页面，点击刷新页面，视频不知道怎么的就没了。很奇怪。网上百度什么的也没找到个原因。后来用了通用代码，就好了。。。。。。。。。。。如果要做...

2016-09-22 15:40:00 186

转载移动端——简单计分表单

之前在笔记里面有个很简单的调查表，各选项是输入的方式，可是现在那种计分表单很常见，就是比如一个问题有四个选项，选择不同选项有不同分值。下面来看看从之前的简单调查表怎么演变为计分表单。（同样，主要侧重功能，所以表单依旧没有任何样式。）一、将手动输入的选项改为单选<div id="man" style="display: none;"> <...

2016-09-11 18:53:00 121

转载 JS操作cookie

cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。...

2016-09-09 17:24:00 83

转载 JS笔记一

最近有时间，觉得应该整理一下，额，就从很久之前的基础开始吧，正好也巩固下，菜鸟需要扎实基础。下面是一个简单的调查表，因为没有写任何样式，所以就是简单的表单输入框之类的。选择“男”或者“女”时，会出现对应的开支项，效果如下：当时我就想，在网上经常会看见那种提示几秒后跳转至某某页面之类的，那我能不能在出现结果后也加一个这样的小效果呢，于是就动手了 (^∇^*)很...

2016-09-09 11:41:00 48

转载移动端页面字体——rem的使用

浏览器的默认字体高是16px。兼容性：目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。对于不支持的浏览器，要多写一个绝对单位的声明，这样浏览器就会忽略用rem设定的字体大小。%css中的body先全局声明font-size=62.5%，%的算法和rem一样。因为16px=100%，1px=6.25%...

2016-09-08 10:10:00 192

转载 Highcharts 使用总结

一、Highcharts series属性1、下面是一个基本曲线图的例子：<html><head><meta charset="UTF-8" /><title>Highcharts 曲线图</title><script src="http://apps.bdimg.com/libs/jquer...

2016-09-07 17:38:00 219

转载 CSS水平居中

一、使用CSS水平居中的三种情况。1、行内元素（文本、图片等）；2、定宽块状元素；3、不定宽块状元素（3种方法）；二、具体解决方法。1、行内元素（文本、图片等）：给父元素设置 text-align：center;2、定宽块状元素：<style>div{ border:1px solid blue;...

2016-03-19 19:43:00 51

空空如也

空空如也