JesusAllen30-CSDN博客

原创 2018在路上，先给自己一点掌声！

1、前言也是序2017，毕业了...职业：前端开发坐标：杭州座右铭：一直在路上2017年是我人生的一个转折点再见济南，你好杭州！我在二环路的里边想着你你在远方的山上春风十里今天的风又吹向你下了雨我说所有的酒都不如你 — —《春风十里》想说很多，不知从哪下笔。2017改变了很多，仍需努力。记录自己，聊聊前端。毕业

2017-12-25 23:11:53 1177 2

原创前端框架Vue（15）——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目

一、前言在这个 vue 系列的第一篇文章，我写过是 vue-cli-simple 脚手架的环境搭建。前段时间，也刚好给公司做了一个后台管理系统的产品，用的就是 vue-cli-simple。一个月的时间将系统从无到上线，组件化、模块化开发的非常快速、可读性、复用性，整理架构清晰，易管理、维护。所以，这次利用 vue-cli 完整版来实践一下。那么这个 simple 在哪呢？其实，simpl

2017-09-08 00:25:52 5182

原创前端框架Vue（13）——vue 中如何对公共css、 js 方法进行单文件统一管理，全局调用

1、前言最近，为公司开发交付的一个后台管理系统项目，我使用了 Vue 框架进行开发实践。模块化、组件化、工程化的开发体验非常好。良好的 api，优雅的设计，对于工程师非常友好。但是由于模块比较多，我对于每个模块分配了不同的组件，发现一个项目中有许多相同的方法，在每个组件中我都需要进行重复的编写。所以，我希望能够将这些公共的方法，抽离出来放到同一个 js 中，

2017-08-04 16:32:50 18140 4

原创前端框架Vue（16）——vue-i18n ，vue项目中如何实现国际化

一、前言趁着10月的最后一天，来写一篇关于前端国际化的实践型博客。国际化应该都不陌生，就是一个网站、应用可以实现语言的切换。在这就不谈原理，只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。二、demo 场景需求分析需求很简单，左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮，点击弹出提示框，确认切换语言后，实现英文版本。切换成英文版本：三、实现国际化首先，我开发是以

2017-10-31 21:12:38 26342 20

原创前端框架Vue（14）—— 利用 vue 过渡效果（transition）+定时器实现轮播图通用组件

序论：轮播图相信都不会陌生，很多的网站都会有，而且实现的方式也是千变万化，可以利用封装好的 UI 库（bootstrap），也可以原生的 JS 进行编写。但是其中，动画（transition）和定时器都是必不可少的。本文就是利用 vue 自带的 transition 动画过渡效果加上定时器编写轮播图。效果： 1、功能分析。从上面的效果图中看，有四个基本功能：1、自动的轮播的功能；

2017-08-24 16:49:44 14996

原创 web前端二三招——计算机原理知识点总结

一、前言本分类下的文章内容将会总结一些关于 web 前端的笔试题和面试题，文章的内容将有本人总结的，也有互联网上存在的知识点，作为搬运工分享给自己和所有的 CSDN 用户。内容会持续更新...二、浏览器协议1、HTTPS与HTTP的一些区别 —— 来自 code小生 HTTPS协议需要到CA申请证书。 HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL

2017-08-01 13:40:27 1022

原创前端框架Vue（12）——如何将 vue-cli 项目打包压缩（npm run build）后放到服务器

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

2017-07-20 17:17:38 24559

原创 NodeJS（三）——基础环境、函数调用和继承

一、开发条件开发前你得先安装 nodejs,以及可以事先安装好包管理器 npm。二、简介： Node.js是运行在服务器端的JavaScript，可编写高性能服务器。单线程、异步、事件驱动。特点：速度快、但是内存消耗多（可解决）。可用框架：express、koa、Hapi。三、开发基础代码打开 sublime,建一个 hello.js 文件：var http = require('http

2017-07-19 23:28:39 739

原创前端框架Vue（11）——Vue+表单验证 VeeValidate 实践

这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢？来看一下 github 上的图片就明白了！为 Vue 而来的！不清楚是不是 Vue 的官方表单验证插件。废话不多说直接显示效果：===============================分隔线================================== 为什么需要用表单验证插件，想想自己重写过几次

2017-06-23 17:13:57 59867 3

去年的这个时候，看着学长、学姐们穿着学士服，穿行在学校的每个角落，只为在这点滴的大学时光留下里，留下尽量多的能够回忆的东西。 2017年6月10号，随着我走出毕业答辩的教室，我的大学生涯也画上了句点。总说毕业遥遥无期，那些年吹过的牛，逃过的课，打过的篮球赛，追过的女孩，通宵打过的游戏还历历在目，兄弟们先撤了！溜了溜了，兄弟们常联系！男生就是这样，嘴上说的若无其事，眼睛却早就开始模糊。抒情就到这。讲

2017-06-15 21:48:11 1568 3

原创前端框架Vue（10）——vuex 状态管理

1、Vuex 是什么？ Github vue-spa-demo 项目地址在使用 Vue 框架做单页面应用时，我们时常会遇到传值，组件公用状态的问题。（子父间传值文章传送门），如果是简单的应用，兄弟组件之间通信还能使用 eventBus 来作为中介。但是一旦应用比较庞大，那状态将会变得难以维持管理。 Vue 为我们提供了进行大型状态管理的 Vuex,类似 Flux 。Vuex 采用了集中式存

2017-05-11 17:34:11 6222 4

转载 JavaScript：数组中删除指定一项 arr.remove( str )

JavaScript：如何删除数组中指定的一项Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; };//在 Array

2017-05-10 11:20:19 8904 1

转载 Python（3）——函数

/============================ 以下所有内容，均来自廖雪峰的官方网站， Python 教程。链接地址：http://www.liaoxuefeng.com ============================/ 在 JavaScript 中我们经常做的就是将实现一个功能的所有代码封装进一个函数里面，只留出参数接口，供调用者自定义。python 中的函数也是

2017-05-04 16:37:21 778

原创 JavaScript：利用JavaScript实现的功能、算法和奇淫技巧（持续更新）

1、JavaScript：输入日期获得从该日期开始的一个月时间function getNextMonth(time) { var arr = time.split(/-|\//), year = arr[0], month = arr[1], other = arr[2];

2017-05-02 17:08:25 2460

原创前端框架Vue（9）——百度地图使用

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口无使用次数限制。地址传送门：http://lbsyun.baidu.com/index.php?tit

2017-04-27 20:22:52 36165 16

原创 Python（2）——基础知识爬坑

/============================ 以下所有内容，均来自廖雪峰的官方网站， Python 教程。链接地址：http://www.liaoxuefeng.com ============================/廖雪峰 python 教程中的 python 基础，对于其中的几个重点知识和坑点来沉淀一下：1、输入 input(）、输出 print(）print(

2017-04-27 16:05:08 719

原创 Python（1）——python安装和第一个程序

/============================ 以下所有内容，均来自廖雪峰的官方网站， python 教程。链接地址：http://www.liaoxuefeng.com ============================/python 简介1、python 是一种跨平台，面向对象、解释型的计算机程序语言。2、python 语法简洁而清晰，具有丰富并且强大的类库。3、py

2017-04-25 15:14:23 4309

原创前端框架Vue（8）——子父组件的传参通信

父子间的通信传值是 vue 中的一个重要的内容和掌握点。 *vue2.0 推荐使用 vuex,全局进行状态管理。（后面再讲）首先讲一下遇到的需求背景：解释一下：组件之间的关系： <div id="app"> <loginPage v-on:showState="changeState" v-if="loginShow" :fromParent="fromParent"><

2017-04-14 15:26:40 17286

原创前端框架Vue（7）——Vue+ElementUI:简易login登录框重构

目标：Vue 来实现一个简易的登录框，有用户名（user）和密码（password），具备简单的校验。使用的UI框架：ElementUI vue 登录框的优点: 无须操作 dom，只需建立数据模型，自动渲染。双向数据绑定。登录框的解决点：数据如何绑定登录校验先上代码：<template><div class="dialog"> <div class="logi

2017-04-14 14:32:57 22704 6

原创前端框架Vue（6）——Vue 介绍和相关操作

*本博客会持续更新1、VueJS 浏览器的兼容性 2、如何获得当前点击的元素（整体）methods: { showDeleteIcon:function($event){ console.log(event.currentTarget); } } 3、如何获得当前点击的元素（个体）showDele

2017-04-11 17:38:47 1988

原创 JavaScript：响应式——rem

单独建立一个 js 文件，内容：document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + "px"; window.addEventListener("resize",setRemSize,false); f

2017-04-08 11:23:26 1032

转载实用的 jQuery 技巧（转）

1、animate 动画方法：$(selector).animate(styles,speed,easing,callback)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div id="box" style="width:

2017-04-07 12:21:01 732

原创前端框架Vue（5）——Vue+Echarts

Echarts 是数据可视化中佼佼者！推荐大家可以玩一玩，非常实用！如果第一次接触Echarts的同学，这边有我以前写过的一篇入门：浅谈Echarts3.0 Vue+Echarts 现附上代码：<template>  <div id="main" style="width: 600px;height: 400px;"></div

2017-04-05 19:55:23 28404 4

原创前端框架Vue（4）——vue-cli 目录结构

1、vue-cli 项目结构图2、目录分析目录/文件说明bulid项目构建的一些 js 文件config配置文件项，index.js 比较重要，打包上线需要修改配置dist项目打包后的文件node_modulesnpm安装包位置src项目的开发目录assets:图片、字体等资源 components:公共组件部分config:开发分支和生产分支的切换配置，以及 fetch.js 对于前

2017-04-05 10:32:18 5414

转载 src引入ftp上的图片：路径格式（转）

2017-04-01 14:53:41 7720 1

原创前端框架Vue（3）—— vue.resource 、axios、ajax 异步通信

vue 中如何支持异步请求1、vue 支持开发者引入 jquery 使用 $.ajax()2、vue.resource（ 2.0后不再更新）1、 npm 安装 vue-resource npm install vue-resource2、 main.js 中引入 import VueResource from 'vue-resource' Vue.use(VueResource)3、使用this

2017-03-31 15:57:37 6544

原创前端框架Vue（2）——Vue-Router 路由跳转

1、最简单：html+js全在一个文件中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态路由匹配</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://u

2017-03-30 18:19:16 6993 2

转载前端框架Vue（1）——vue（脚手架）推荐开发环境（转）

首先我认为你已经安装并且会使用node.js 和 npm1、安装淘宝镜像npm install -g cnpm --registry= https://registry.npm.taobao.org2、全局安装webpack1、安装了淘宝镜像npm install webpack -g2、没安装cnpm install webpack -g3、安装vue脚手架npm install vue-cli

2017-03-30 17:11:48 4460

转载实用的CSS片段（转）

1、垂直对齐如果你用 CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用 CSS3 的 Transform，可以很优雅的解决这个困惑：.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50

2017-03-28 09:42:24 524

原创从需求管理到产品开发流程，硅谷产品方法论大揭秘

Annie Wu /微软（美国）大数据产品总监，在腾讯课堂上对关于需求管理到产品开发流程开设一节分享会。一、这边进行简单的总结：市场为驱动的产品开发。创造对市场、顾客具有创新性的产品。产品本身对于公司的盈利。产品需求性、可靠性、用户体验。产品团队的能力。敏捷不断迭代的开发模式。Hard SkillsSort Skills Sort Skills: 情商+约束力 1、自信心

2017-03-23 23:51:07 1693

转载 jQuery中断ajax请求

转载来自：http://blog.csdn.net/a600423444/article/details/6117889 <html> <head> <mce:script type="text/<a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库"

2017-03-20 23:12:06 6406

原创 layer：子父之间的数据传递

layer中有这样的情况，父页面与弹窗（子页面）之间的数据通信。*表单中的表单元素必须有name属性。这边我讲一下两种情况（都是以表单为例子）：1、父页面的数据在弹窗（子页面）中显示。 2、子页面（弹窗）反馈的信息，在父页面显示。先解释一下逻辑：一、子——>父 1、点击“标记”，弹出弹窗：2、填写表单，并提交，点击提交按钮后，判断是否标记了“黑名单“，如果“是”，则在父页面显示layer.m

2017-03-14 19:34:46 36401 9

原创 layer分页器使用

layui给我们提供了分页器的组件，进行简单的配置就能做出分页的效果上代码：// 点击查询按钮开始显示表格内容// 如果查询内容不存在则显示为空$('#searchBtn').click(function(){ var html = ''; $.ajax({ type:"GET", url:"data/tsResult.json",

2017-03-12 17:10:10 7009 1

转载 Javascript 面向对象编程（一）：封装 ——转自阮一峰博客

Javascript 面向对象编程（一）：封装作者：阮一峰日期： 2010年5月17日学习Javascript，最难的地方是什么？我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。下面就是我的学习笔记，希望对大家学习这个部分有所帮助。我主要参考了以下两本书籍：《面向对象的Javascript》（Object-Oriented

2017-03-11 19:56:22 1145

转载 JS正则方法大全，各类表单验证

/*用途：windows下验证文件名*/var reg = new RegExp('^[^\\\\\\/----:*?\\"<>|]+$');// 转义 \ 符号也不行alert(reg.test("新建文件\\夹")); // 弹出 true/*用途：检查输入手机号码是否正确输入：s：字符串返回：如果通过验证返回true,否则返回false*/function checkMo

2017-03-10 18:40:45 693

转载常用的正则表达式大全（转摘）

转载来自懒人建站：原文链接一、校验数字的js正则表达式 1 数字：/^[0-9]*$/ 2 n位的数字：/^\d{n}$/ 3 至少n位的数字：/^\d{n,}$/ 4 m-n位的数字：/^\d{m,n}$/ 5 零和非零开头的数字：/^(0|[1-9][0-9]*)$/ 6 非零开头的最多带两位小数的数字：/^([1-9][0-9]*)+(.[0-9]{1,2})?$

2017-03-07 10:24:35 351

转载浅谈前端代码规范

1、实现的目标：代码一致性和最佳实践。通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 2、HTML 属性顺序一致保证易读性idclassnamedata-xxxsrc,for,type,hreftitle,alt 引号统一双引号 HEAD模板<!DOCTYPE html><html lang

2017-03-07 10:12:45 510

原创 git push origin master出现错误：公钥缺失

输入命令行 $ git push origin master出现下面的错误提示：$ git push origin masterPermission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the

2017-03-06 13:48:17 913

原创 IE、谷歌、火狐浏览器兼容性、默认属性样式总结

IE1、去掉input框中自动添加的 X 和眼睛图标情境：在 IE 浏览器下的 input 框中，输入内容时： 1、 type = text 会自动生成一个 X。 2、 type = password 会自动生成一个眼睛的图标。解决：有时为了保证浏览器之间的一致性，就需要将这个样式取消掉// 去掉IE input X 和眼睛图标input::-ms-clear,::-ms-reveal

2017-03-06 11:20:56 6392

原创 Git pull,Git push不上去问题和解决

问题描述：输入命令行：$ git push origin master显示：To [email protected]:AllenChinese/workSpace.git ! [rejected] master -> master (non-fast-forward)error: failed to push some refs to '[email protected]:AllenChine

2017-03-05 20:35:31 10702 4

基于cropperJS图片上传

空空如也