首页

记录点滴,修炼自己。
0

【阿里云ECS】LAMP开发环境的完整搭建配置过程

前言  为了顺利进行web开发,一套完整易用的开发环境是十分必要的,这可以大大提高团队的合作和开发效率。这里说的开发环境包括IDE,数据库,开发语言组件,版本控制工具等一系列内容。最近在使用的是比较流行的php开发架构,在windows下,无疑推荐WAMP + MySQL-Front + phpStorm,WAMP集成了Apache、MySQL、PHP,可以免除许多安装配置的问题。这样的环境在具体开发中是没有什么问题的,但是当项目上线并且需要版本维护时,我们还是要在Linux系统上进行部署。  基于这样的需求,最近搭建了一套完整的LAMP环境并测试通过,可以实现代码版本控制,APP端API测试调用,项目自动化部署持续集成(CI)。包括的主要内容有:

0

React Router的history探究

前言  路由是单页应用中十分重要的概念。具体在react中,react-router为我们提供了一套完整的路由机制。 概述  项目history相关文档主页:Histories。文档的讲解十分详细。本文只是通过在实际项目中history的状态变化进行简单小结。以dva应用为例,经过这样的配置后,容器组件可以在props中拿到history对象和相关参数。 表现如上所示,history中包含了一

0

客户端代理配置的几种常见方式

PAC文件  PAC文件是一些简单的javascript程序,可以在运行过程中计算代理设置,是一种动态方案。配置方案示例如下(以登录内部局域网为例):在IE浏览器Internet选项做如下配置,填写的地址是目标服务器上的代理配置文件根据已有信息访问代理进行登录后可以使用。 PAC文件结构如下: Chrome插件SwitchyOmegaCharles Web Debugging Proxy注:以上

0

Bootstrap等前端框架栅格系统的原理

栅格系统基本使用方法基本原理  Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。  栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap

0

客户端浏览器检测

前言  几种web浏览器在实现相关标准时会有一些差异和区别,这可能会给开发带来一些问题。此时就会需要进行客户端检测从而给出不同的方案。但是,从根本上来讲,只要能够找到更通用的方法,就应该优先采用更通用的方法,先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案。《JavaScript权威指南》相关描述如下: 检测方法与主要参数navigator对象的主要参数 方法 主流浏览器的userAg

0

JavaScript的预加载与懒加载

预加载目的  增强用户的体验,当用户需要查看时可直接从本地缓存中渲染。。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白。但会加载服务器的负担。并且,如果不设置预加载,那么当需要渲染十分大的图片时,可能就会有“逐行扫描渲染”的感觉,用户体验不好。使用预加载的话,我们可以在图片完整渲染完成之前在页面上设置“loading”类的图标提示,而当图片数据完全获取后一次

0

使用AngularJs封装Tabs选项卡组件

angular-table使用AngularJs封装Tabs选项卡组件 功能描述  该组件是管理系统中很常用的功能,平台使用者可能会同时使用不同模块的功能,这时候需要打开多个模块,Tabs组件是一种类似浏览器多标签页的效果。可以: 可以在多个模块的页面间进行切换 在某个页面上右键关闭 附带收起侧边栏功能 … 实现 demo源码托管于github,详见Github gcidea/angula

0

CSS预处理---Less使用案例

前言示例12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152@import "../../assets/less/common";.countDownAd { &:extend(.flexLayout); padding: 30rem /

0

使用AngularJs封装表格内容渲染(含分页)组件

功能描述  该组件是管理系统中很常用的功能,管理系统的典型使用是批量数据的处理,表格展示是最直接的方式。该插件实现: 批量数据的列表展示 每行数据提供操作项(修改,删除等)接口 翻页查询接口 每页显示条数修改 点击表头排序 列表宽度自定义 … 实现 demo源码托管于github,详见Github gcidea/angular-table html结构  承载该表格插件的主要html结

0

AngularJs中使用拦截器interceptor对全局HTTP错误进行统一处理

前言  在web开发的各种业务场景中,http请求无疑是家常便饭,任何前后端交互数据都需要通过http请求进行传输。同时我们知道,HTTP响应有很多状态码,对应着很多种不同的服务处理结果。在这种情况下,如果项目中每一处http请求中我们都要对各种响应结果做以判断的话,那么整个工程中就会出现大量重复代码,这样做会带来不少问题,比如:重复劳动,代码结构不清晰、核心逻辑不明确,一旦对错误处理的需求变更

0

AngularJs的$emit和$broadcast事件分析

前言  Angular的作用域在本质上是分层次的:它们可以通过父子关系很自然地来回沟通。但通常,作用域是不共享变量的,它们执行的功能往往各不相同,跟在父树上的位置无关。在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通信。  因为作用域是有层次的,所以我们可以在作用域链上传递事件。通常来说,选择要使用的事件传递方式,一个好的经验法则是:查看将要触发事件的作用域。如果要通知整个事件系

0

AngularJs中组件---component的相关总结

前言  组件component是AngularJs中一个非常重要的概念,一个项目的前端代码结构可以完全以组件component为单位进行实现,也就是说项目的不同页面(比如列表页、详情页、编辑页)或者通用功能(比如表格渲染组件、分页组件)都可以设计为一个独立的component,再通过路由配置关联起来,实现功能需求。本篇以AngularJs官方文档为根据,对组件相关内容进行总结。 综述  在An

0

AngularJs中$scope.$apply()方法总结

功能  $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply()。 参数  $apply()函数接受一个可选的参数。这个表达式可选地接受一个字符串或函数,并且是在当前作用域内执行。如果传入一个字符串,$apply()首先会在这个

0

AngularJs中$q服务(service)的使用

前言  $q服务的实现与ES6(ES2015)中的promise十分相似,这种方式改变了传统长期使用的JavaScript异步编程方式-处理回调函数。试想一下,如果有这样的业务逻辑:我们需要根据某个异步ajax请求的结果是否符合要求,再发起一个异步请求,在回调函数中对响应数据进行请求后再发起异步请求… …当出现这样的异步嵌套逻辑,代码结构就会变得很差。promise正是改变了这种情况,以一种流式

0

Nginx服务器基本配置及在模块化项目中的转发应用

nginx概述 来源  Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由Igor Sysoev为俄罗斯访问量第二的Rambler.ru站点开发的,第一个公开版本0.1.0发布于2004年10月4日。2011年6月1日,nginx 1.0.4发布。 特点  占有内存少,并发能力强。Nginx可以在大多数Unix

0

使用dora-proxy-plugin处理异步请求跨域问题

前言  这个问题描述的背景,是基于访问本地前端项目的nodejs服务器,但是却请求线上API数据接口的场景。如果能做到统一本地线上环境是更好的,有利于维护和调试,具体做法可以参考:使用SwitchyOmega和Charles配置统一的开发和生产环境、客户端代理配置的几种常见方式 概述  根据前后端分离的原则,前端独立进行功能的开发,在与后端真实接口进行对接之前,可以自己通过mock数据的方式进行

0

Hexo博客框架配置优化-网站sitemap和RSS源订阅

前言  Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式,就是XML 文件,在其中列出网站中的网址以及关于每个网址的其他元数据(上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等),以便搜索引擎可以更加智能地抓取网站。    简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。