没做过产品的后端不是个好前端

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1）使用inline-block+text-align（1）原理、用法原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-block，对父框设置text-align:center。（2）代码实例 DEMO .child {displa

Validform使用入门1、引入css请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中（文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的）。之前发现有部分网友把整个style.css都引用在了页面里，然后发现样式冲突了。2、引入js （jquery 1.4.3 以上版本都可以） 1 2 <script type="t..

文件上传一个经常用到的功能，它有许多中实现的方案。页面表单 + RFC1897规范 + http协议上传页面控件(flash/html5/activeX/applet) + RFC1897规范 + http协议上传页面控件(flash/html5/activeX/applet) + 自定义数据规范 + http协议上传页面控件(flash/html5/activeX/applet) + FTP协议上传页面控件(flash/html5/activeX/applet) + 自定义协议.

1.JQuery ajaxfileupload插件使用准备下载地址：http://www.phpletter.com/DOWNLOAD/2.原理分析ajaxfileupload也是利用iframe实现无刷新异步提交，与我的上一篇文章（WEB文件上传之apache common upload使用（一））中对iframe使用的方式有些不同。ajaxfileupload是通过监听iframe的onload方法来实现， 当从服务端处理完成后，就触发iframe的onload事件调用其绑定的方法.

本文主要介绍了如何通过原生JavaScript封装ajax请求，文中给出了具体的实现代码和详细的解释，希望对你有所帮助。一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象； ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据； 下面简单封装一个函数，之后稍作解释 ajax({ url: "./TestXHR.aspx", //请..

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素js在父窗口中获取iframe中的元素1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();2、格.

　幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。　　事先声明：这些题目的来源：面试曾经被问过；工作被别人问过或者遇见过；网上看见过... 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我

前戏前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。（名词解释：在互联网架构中，we...

前言：分离模式　　对前后端分离研究了一段时间，恰逢公司有一个大项目决定尝试使用前后端分离模式进行，便参与其中。该项目从2016年初立项至今，平平稳稳得度过，但也涌现出越来越多的问题，绝对不是说前后端分离模式不好，而是很多公司在尝试前后端分离的时候没有做好充分得准备。　　网上对前后端分离介绍的文章已经屡见不鲜，接下来本人用一点粗浅的言语也谈谈这块，献丑了。为什么要分离？　　如果只问“前后端分离的意义大么？”这是废话，因为从软件架构的角度 Web 的前后端从一开始不就一直是分离的么，而且 bro

前后端分离该如何做? 这个问题，不同的技术人员，由于所处的岗位不一样，给出的答案都不一样。前后端分离的问题，不仅仅是技术上的选型问题，还涉及到整个团队在认知、职责、流程上面重新定义的问题，这也是为什么前后端分离概念看起来简单易懂，但真正团队在落地的时候，一不小心，往往鸡飞狗跳，甚至最终放弃"治疗"。下面，基于自己之前的对一个团队前后端分离改造的实践经历，介绍一下如何打造一个前后端分离的技术团队。背景介绍项目介绍交付一个服务于跨境电商的供应链金融项目。 需求已经相对明确，产品的原型已经出来

一、什么是Rest?REST不是"rest"这个单词，而是几个单词缩写 -- REpresentational State Transfer 直接翻译：表现层状态转移，但这个翻译正常人根本看不懂，找到的一种最好理解的说法是，URL定位资源，用HTTP动词（GET,POST,DELETE,DETC）描述操作。REST成熟度的四个层次 第一个层次（Level0）的Web 服务只是使用 HTTP 作为传输方式，实际上只是远程方法调用（RPC）的一种具体形 式。SOAP和 XML-RPC都属于此类。..

因为会上出了个意外，ppt图片全部丢失，只好对着白板跟大家交流了半个多小时。由于我做演讲不喜欢写太多的文字，没有图片的情况下讲漏了一些内容。这篇文章是我在会上分享内容对照ppt进行地整理。基本介绍首先从一个重要的概念“模板”说起。 广义上来说，web中的模板就是填充数据后可以生成文件的页面。 严格意义上来说，应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。由于当场有一部分同学对node.

一、概述consul是google开源的一个使用go语言开发的服务发现、配置管理中心服务。内置了服务注册与发现框 架、分布一致性协议实现、健康检查、Key/Value存储、多数据中心方案，不再需要依赖其他工具（比如ZooKeeper等）。服务部署简单，只有一个可运行的二进制的包。每个节点都需要运行agent，他有两种运行模式server和client。每个数据中心官方建议需要3或5个server节点以保证数据安全，同时保证server-leader的选举能够正确的进行。@clientCLIENT

一、配置config/index.js本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。（1）页面空白的解决：打开config/index.js，将build模块的assetsPublicPath值改为’./’ 1 assetsPublicPath:'./', 发布路径 （2）css引用图片资源找不到问题：因为打包后路径发生变化，导致..

引入mui1.不需要npm安装;直接从官方下载丢进来2.那就是全局引用了;没错,就是index.html里直接引入,当然也可以main.js引入,随意啦!so easy3.找到webpack.base.conf.js,在module与plugins之间插入以下代码:4.这样就可以在项目里面直接用了.然就是mui与vue-router及点击事件会有一些冲突的问题;在mounted里加入这行代码:路由就可以跳转了eg:就直接代替a标签了;可..

完整项目地址：vue-element-admin系列文章：手摸手，带你用 vue 撸后台 系列一（基础篇） 手摸手，带你用 vue 撸后台 系列二(登录权限篇) 手摸手，带你用 vue 撸后台 系列三 (实战篇) 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板) 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本) 手摸手，带你封装一个 vue component 手摸手，带你优雅的使用 icon 手摸手，带你用合理的姿势使用 webpack4（

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles"@click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}.

使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。1、传递基本类型数据当子组件

在vue项目中，往往会遇到这样的情况，就是要实现在一个循环列表中，点击其中一条跳转到下个页面，然后将这一条的相关数据带到下个页面中显示，这是个循环列表，无论点哪一条都是跳到相同的页面，只是填的数据不一样，这个时候就需要实现跳转的时候一起把参数携带过去。1、我在项目中想要点击v-for的<li>，然后跳到下个页面的表格，顺带将参数传递过去。如下图：这里实现的是第一个组件跳转到第二个组件的时候将待办任务的id传递过去，第二个组件接收id后提交给后台请求列表的数据。实现如下：第一个组件里

eslint基础环境搭建 全局安装eslint：npm install eslint -g 项目eslint初始化：eslint --init，按团队或自己的编程风格回答三道题。 ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? Standard ? What format do you wan

本人也是在学习过程中，所以文章只作为学习笔记，如果能帮到你，那就更好啦~当然也难免会有错误，请不吝指出~一、准备工作1、本人学习教程：慕课网Scott老师的《Node.js七天搞定微信公众号》 ，但是有点小贵，经济条件允许的话可以支持一下。2、文档：微信开发官方文档，必备。https://mp.weixin.qq.com/wiki3、微信开发测试号：测试公众号，必备。https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

forever.jpeg我用本地mac连接阿里云服务器，启动nodejs服务，客户端掉线，服务也会终止。如何在客户端掉线的情况下，node服务正常运行？forever介绍forever是一个nodejs守护进程，完全由命令行操控。forever会监控nodejs服务，并在服务挂掉后进行重启。forever安装npm install -g foreverforever使用forever start index.js //index.js是你要启动的js...

送给新手的简单命令操作、远程Git和local的同步实现流程：1、把git上的代码clone到本地$ git clone http:xxxx(地址，可以http也可以ssh)2、clone到本地以后、使用branch -a 查看远程所有分支$ git branch -a3、如若你有分支：master branch1 branch2 ，使用checkout用来切换分支。还可以用第2条指令去创建本地分支目录和远程的保持一致，并且切换远程分支到本地分支目录$ git checkout b.

推荐21个顶级的Vue UI库！最近，随着“星球大战”（指 GitHub 的 Star 数量大比拼）的爆发，Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React，但 Vue.js 的受欢迎程度似乎在持续增长。1、VuetifyStar 数为 11K，提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器，包括 IE11 和 Safari 9

前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入.尝试1:创建 global.js 并且在其中定义 1 let a = 10; 在入口文件中引入 global.js 1 import './global.js' 在项目中使用: 1.

本篇文章主要介绍了webpack引入eslint配置详解，现在分享给大家，也给大家做个参考。webpack中eslint使用首先，要使webpack支持eslint，就要要安装 eslint-loader ，命令如下:1npm install --save-dev eslint-loader在 webpack.config.js 中添加如下代码：123456789{test: /\.js$/,loader: 'eslint-loader',enforce: "...

设置图片元素上下垂直居中的7种css样式阅读(9548) @2018-07-15 14:13:34图片、文字左右居中很简单，只需要以下代码： 1 text-align:center; 文字上下居中也很简单，假设外部div元素的高度是100px，那么： 1 line-height:100px; line-height不适用于图片...

DIV或者DIV里面的图片水平与垂直居中的方法<div class=“box”>　　<img /></div>水平居中的常用方式：　　text-align:center ——这可以实现子元素字体，图片的水平居中。　　margin:0 auto —— 这是针对块元素的水平居中方法垂直居中的常用方式： 　　vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。...

在项目中，我们常将一些常量信息做成配置项，如，数据库的链接配置，业务错误代码配资等等。我们通过两种方式可以解决该问题。 系统环境变量的方式 配置文件的方式 下边，将以这两方面进行展开。1. 系统环境变量Node.js 中通过process.env来访问当前的环境变量信息$vim test.jsconsole.log(process.env.HELLO_MSG);// 系统设置环境变量$ export HELLO_MSG="Hello, world" &a.

原文https://github.com/wangdahoo/vue-scroller主题Vue.jsVue ScrollerVue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.DemoChange Logsv0.3.9 add getPosition method for scrolle...

前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。一、JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。

说明官网的客户端是命令行形式的，有兴趣可以去了解下。 这里针对图形界面的smartgit做一个使用说明。软件下载和安装下载地址[2016.12.16测试可以]按需选择,如果不知道自己电脑是什么系统的，那我没话说了 https://www.syntevo.com/smartgit/安装注意：license：有试用、付费、非商业用途三种，按照个人情况选择。其他就默认安装选Next就好 我选择的是非商业用途（Unlicensed (for non-commercial use only)

javascriptIE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox中：document.body.clientWidth ==> BODY对象宽度

一 Canvas跨域现象地图导出是地图中常用的功能，并且OpenLayers3中也提供了两个地图导出的例子:http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html。看到这两个例子我们都很兴奋，直接copy过来不就实现导出地图了吗？so easy，妈妈再也不用担心我导出不了地图图片啦！但当我们抄好代码执行时，现实就是这么赤裸裸的打脸

Express实现路由分发控制、RESTful API标签（空格分隔）： Node.js最近在用Express作为自己的WEB应用框架，其中最为迷惑的就是Express的路由控制和分发，在网上搜了很多资料，但是大部分的资料都是将Express的路由控制写在了app.js入口文件中，但是这样的写法写一些Demo是可以的，但是在实战项目中基本上不会这样来写，因为随着项目的庞大，在app.js入口文件中的路由控制将会越来越复杂。所以，我们实际项目中一般会将不同的业务逻辑交给不同的模块开负责。以下是这几

我们平时在使用express写代码的过程中，会根据类别，将路由分为多个不同的文件，然后在项目的入口文件（例如app.js）中将其依次挂载，例如：1234567const index = require('./routes/index')const user = require('./routes/user')// ...其他路由文件app.use('/', index)app.use('/user', user)// ...挂载其他路由但是当路由文件过多时，这样写会多出很多重.

一.webpack基础　　1.在项目中生成package.json：在项目根目录中输入npm init，根据提示输入相应信息。（也可以不生成package.json文件，但是package.json是很有用的，所有建议生成）　　2.安装webpaack　　　　a.在全局中安装webpack：npm install webpack -g　　　　b.将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。说明此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以从后面提到的入口文件开始查看。分析不包括che

当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。2、打包好的静态资源均是...

javascript设计模式系列创建型：1.抽象工厂模式（Abstract Factory）2.构建者模式（Builder）3.工厂方法模式（Factory Method）4.原型模式（Prototype）5.单例模式（Singleton）结构型：1.适配器模式（Adapter）2.桥接模式（Bridge）3.组合模式（Compositor）4.装饰者模式（Decorator）5.外观模式（Facade）6.享元模式（Flyweight）7.代理.