- 博客(42)
- 收藏
- 关注
RSS订阅转载 前端路由vs后端路由
（一）定义（页面之间的跳转）后端路由：通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML；也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML前端路由：前端单页应用 SPA(Single Page Application)中，...
2019-06-09 20:32:49
926
转载 在vue中webSocket通信
1、简单介绍基于webSocket通信的库主要有 socket.io，SockJS，这次用的是 SockJS。2、前提这里我们使用sockjs-client、stomjs这两个模块，要实现webSocket通信，需要后台配合，也使用相应的模块。sockjs-clientsockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS....
2019-05-11 10:28:25
5670
转载 nginx基本信息
#运行用户user nobody;#启动进程,通常设置成和cpu的数量相等worker_processes 1;#全局错误日志及PID文件#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pi...
2019-04-02 09:10:26
218
原创 vue-cli打包并配合nginx域名二级子目录
可以修改三个配置1.路由const route = new Router({mode : 'history',base: '/admin/',routes:[]})2.打包文件 config/index.jsbuild设置assetsPublicPath: '/admin/',3.nginx配置try_files $uri $uri/ /admin/in...
2019-03-09 10:51:09
2655
转载 css中图片等比例缩放，自适应16:9实现
前阵子，产品跑过来问我现有的模板中没有图片模板，需要添加一个图片模板；然而，他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放，并且居中展示图片。我当时想着，抛开技术实现层面，图片展示也理应是这样的，更加友好。当时我就说应该没啥大问题，于是就有了下文（PS:萌新还没技术积累，只能是凭着一点积累和现查来调研）。1. 图片等比缩放 网上搜了一下图片等比缩放，有介绍使用:...
2018-11-23 09:44:41
12314
2
转载 vue-cli环境变量配置
vue-cli在开发和产品上线的时候，对于不同的地址，可以在项目中进行配置，并配置axios，两种方式可以参考（一）mian.js中let baseUrl=null;if (process.env.NODE_ENV == 'development') { baseUrl = 'url1';//开发环境请求地址} else if (process.env.NODE_E...
2018-07-28 11:40:14
1534
原创 vue-router项目中的登录验证问题
思路：登录的时候，将从后台拿到的token信息，使用sessionStorage进行存储，然后在全局的导航守卫中；判断本地存储sessionStorage是否是存在token的信息，如果是存在就可以进行其他导航页面访问，不存在的情况下就停留在登录页面；退出登录的以后，将sessionStorage存储的信息进行清空。步骤一：用户登录 this.$axios.post(url,data).then(...
2018-06-26 09:55:24
1748
转载 vue2父组件传递props异步数据到子组件的问题
使用v-if可以解决报错问题，和created为空问题// parent.vue<template> <div> 父组件 <child :child-object="asyncObject" v-if="flag"></child> </div></template> <script&
2018-06-03 21:27:06
2255
转载 html5自适应布局rem
1. rem是一个相对于根元素大小的相对单位。可以利用js来控制根元素的font-size:<script> (function(){ var designW = 640; //设计稿宽 var font_rate = 100; //适配document.getElementsByTagName("html")[0].style.fon...
2018-04-07 14:53:07
326
转载 sublime install and config
ackage Control插件本身是一个为了方便管理插件的插件，在Sublime text 3中，Package Control 的安装方法一开始出来的方法是要先安装Git，再输入代码来安装，原因说是“sublime text 3更新的python的函数，说白了就是API不同了，导致基于python开发的插件很多都不能工作”。不过后来出了个方便的安装方法，下面介绍一下通过 ctrl+`
2017-12-09 10:56:13
221
转载 IE下的hack
对于前端开发来说IE一直是心里的痛，不管你觉得做的多好的网页，放到它上面总会有一些意想不到的问题发生，所以你不得不针对IE单独做些手脚,你就有必要知道一些IE浏览器下的hack写法。比较常用的几个hack(目前大多公司都只要求兼容到IE8，稍微变态点的也就是IE7下没大的错位就行了，下面hack足以):\9 像如:width:6.5em;width:8em\9;在ie7-ie10宽
2017-12-07 17:12:34
312
转载 input file图片上传并回显
// 图片上传借助于html5的文件读取实现<!DOCTYPE html><meta charset="utf-8"/><script src="jquery.js"><input type="file"multiple id="inputs"/>//multiple(多文件上传)
2017-11-21 23:59:35
7881
转载 手机端页面布局之rem
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = d
2017-11-13 11:32:22
477
原创 后台返回的map转成json的形式
// 在前后端交互中，后台可能由于某种原因，会返回map类型的数据，因此，前端的开发中，需要解析成标准的JSON的格式来使用； //字符串和数组的方法实现var obj = '{name=zhangsan,age = 16, job =IT}';function formatJSON(str){var newObj={};str= str.substring(1,str
2017-09-30 11:20:08
5083
原创 针对后台返回Object 对象数据的操作
// 需求，后台返回数据，要求根据对应的id的值显示，对应的name属性的值；用到知识： 对象的访问， 数组的遍历操作var ary = [{"id":1,"name":"李铭","age":12,"job":"IT" },{"id":1,"name":"张三","age":12,"job":"IT" },{"id":1,"name":"王勤","age":
2017-09-29 09:43:13
5200
原创 js中模拟筛选过滤
//模拟筛选的刷新，通过提交ajax,并且实现页面的跳转的效果：Document(function(){$("#arg").click(function(){var _name = $("#name").val();var _age = $("#age").val();var _url = "h
2017-09-28 16:21:25
350
原创 vue中使用v-bind:class的选项卡
//vue中的选项卡的实现，数据驱动dom,因此需要使用数据，来改变class； 详细见代码实现ul{overflow: hidden;}ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;}ul li
2017-09-28 10:16:12
3616
转载 vue-cli 脚手架
参考资料:Vue2.0 新手完全填坑攻略—从环境搭建到发布1.Node.js安装 https://nodejs.org/en/download/2.安装vue-cli npm install -g vue-cli3.使用vue-cli初始化项目 vue init webpack my-project-name4、进到目录cd
2017-09-23 10:33:34
211
转载 ajax请求成功之后控制页面刷新一次
方案一：functionrefresh(){window.location.reload();setTimeout(refresh ,5000);}方案二：setInterval(function(){window.location.reload();},5000)
2017-09-13 19:43:32
7957
转载 JavaScript cache
1.在jsp中加入头 "Pragma" CONTENT="no-cache"> "Cache-Control" CONTENT="no-cache"> "Expires" CONTENT="0">或者加入 "pragma" content="no-cache" /> "content-type" content="no-cache, must-revalidate" /
2017-09-13 16:04:22
1352
原创 vue中transition之slide效果
//在vue中的slide的效果可以使用自带的transition实现，下面是样式的部分代码。Document.expand-enter-active { transition: all 3s ease; height: 50px; overflow: hidden;}.expand-leave-active{ transition: a
2017-08-17 20:37:33
10769
原创 vue2.0自定义指令方式
分析：当我们在vue中使用默认的指令中（v-if,v-show）,当然在实际的场景中，由于不能满足需求的时候。就需要自定义指令了，下面是自定义指令的方式，用于扩展htm结构自定义指令 this is a directive this is another directive//指令中的多个值形式 传入对象字面
2017-08-17 09:48:52
508
转载 智能手机检测
// 由于pc和移动的显示的不同，有时候需要，在pc和移动界面上显示不同的效果，这样就需要检测到是手机还是电脑访问的页面：以下信息是根据浏览器的内核进行判断。//智能手机检测function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad =
2017-08-10 18:57:20
811
转载 常见排序算法之JavaScript实现
1.为了方便说明，默认按从小到大排序1.冒泡排序基本思路：1.依次比较相邻的两个数，如果第一个比第二个小，不变。如果第一个比第二个大，调换顺序。一轮下来，最后一个是最大的数2.对除了最后一个之外的数重复第一步，直到只剩一个数代码：function bubbleSort(myArray){ var len = myArray.length;
2017-08-04 19:27:21
205
原创 vue中格式化时间过滤器
直接上代码：Document {{ message | formatTime('YMD')}}{{ message | formatTime('YMDHMS')}} {{ message | formatTime('HMS')}} {{ message | formatTime('YM'
2017-07-26 19:41:28
14085
转载 Vm生命周期和钩子函数
前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是
2017-07-24 12:55:00
479
转载 Vue中提交表单数据
这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交?123456789101112
2017-07-16 22:58:29
28706
转载 js排序
冒泡排序：最简单，也最慢，貌似长度小于7最优插入排序： 比冒泡快，比快速排序和希尔排序慢，较小数据有优势快速排序：这是一个非常快的排序方式，V8的sort方法就使用快速排序和插入排序的结合希尔排序：在非chrome下数组长度小于1000，希尔排序比快速更快系统方法：在forfox下系统的这个方法非常快// ---------- 一些排序算法// js 利用sort进行排序sys
2017-07-11 15:03:09
173
原创 vue2中过滤器属性
vue2.x中的过滤器，不同于vue1.X,在vue2.X中的过滤器，要在js中设置，如果是复杂的格式的装换，可以使用计算属性：html>html lang="en">head> meta charset="UTF-8"> title>过滤器title> script src="https://unpkg.com/vue">script>head>body>
2017-07-11 09:53:01
519
转载 vue2中filter()
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。定义的方法如下： 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); });1234123完整代码如下：
2017-07-09 12:05:25
2757
转载 Vue 生命周期钩子
Vue 实例中的生命周期钩子Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(da
2017-06-29 10:28:00
1030
转载 vue 数据遍历筛选 过滤 排序的应用
在vue 中对v-for 遍历数据的处理方式 可以分为两类 ： 使用computed 方法来过滤筛选数据;也可以使用methods 方式来筛选过滤数据代码如下：[html] view plain copybody> div id="app"> ul> li
2017-06-27 13:39:36
1548
转载 在Apache下开启SSI配置
在Apache下开启SSI配置开启SSI：html、shtml页面include网页文件 使用SSI(Server Side Include)的html文件扩展名，SSI（Server Side Include)，通常称为"服务器端嵌入"或者叫"服务器端包含"，是一种类似于ASP的基于服务器的网页制作技术。默认扩展名是 .stm、.shtm 和 .shtml。 环境：A
2017-06-15 22:10:42
864
原创 jsonp 跨域请求 VUE
html>html lang="en">head> meta charset="UTF-8"> title>百度下拉框搜索框title> script src="vue.js">script> script src="vue-resource.js">script> style type="text/css"> ul{
2017-06-12 22:22:50
592
转载 javascript 中的location地址信息
location.pathname：返回URL的域名（域名IP）后的部分。例如 http://www.joymood.cn/wordpress/返回/wordpress/，又或则 http://127.0.0.1/index.html 返回/index.html，注意是带url的域名或域名IP，在磁盘上随便建个Html文件进行location.pathname测试，如浏览器上的路径是：C:
2017-06-12 16:07:36
303
转载 数组方法reduce
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。参数callback执行数组中每个值的函数，包含四个参数previousValue上一次调用回调返回的值，或者是提供的初始值（initialValue）currentValue数组中当前被处理的元素index当前元素在数组中的索引array调用 reduce
2017-06-10 22:10:37
1762
原创 js中检测数据类型
html>html lang="en">head> meta charset="UTF-8"> title>title> script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js">script>head>body>script> var num=12; var str =
2017-06-09 13:15:30
327
转载 js 判断微信浏览器
我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息，比如：Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36，那么我们也可以通过该方法来获取微信内置浏览器的相关信息：Mozilla/5.0 (i
2017-05-29 10:40:51
573
转载 移动端iScroll
是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。iScroll的最新版本是2011.07.03发布的4.1.7版。最新版比以往更顺畅，添加了更多的自定义事件，提供了更高级的可编程性。使用方法：DOM结构应尽量保持简洁，避免过多的嵌套。滚动区域为第一个子元素。html代码：?1
2017-05-28 18:52:28
627
转载 JavaScript中getBoundingClientRect()方法详解
getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。var box=document.getElementById('box'); // 获取元素alert(box.getBoundingClientRect().top);
2017-05-20 14:52:24
302
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人