mvpzx-CSDN博客

原创 Vue组件开发姿势总结

前言临近毕业，写了个简单个人博客，项目地址是点我访问项目地址（顺便求star），本篇是系列总结第一篇。接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件。正文Vue 单文件组件开发当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本开发模式。// 注册Vue.component('my

2018-03-03 15:37:30 1362 1

原创使用Vue、React和Koa开发个人博客

前言实习了大半年，又临近毕业，一直想做一个属于自己的博客。于是就用Vue、React和Koa开发了一个服务端渲染的博客系统。其中： - 后端管理使用Vue开发 - 前端页面使用React服务端渲染框架nextjs - 接口服务使用Koa2 + mongodb + mongoose（使用nodemailer当接口发生500时向我发送邮件通知）项目地址是点我访问项目地址，（不要脸地求s

2018-03-01 20:26:16 1129

原创前端实现导出数据到excel文件

网页中的实现方式引入所需的依赖文件<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script><script src="https://cdn.bootcss.com/xlsx/0.11.3/xlsx.full.min.js"></script>s2ab函数function

2017-09-30 22:49:16 4173 2

前端上传图片预览此文将介绍两种方法来实现前端上传图片预览。方法1：FileReaderFileReader对象允许Web应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件。其中File对象可以是来自用户在一个<input>元素上选择文件返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自一个HTMLC

2017-09-09 19:32:37 2858

原创 NodeJS express+multer实现文件上传

前言本人所发的NodeJS系列学习笔记参考了一些书籍、官方文档以及一些前辈的代码及注释，可能有些地方理解的不对。如果有误，欢迎到我的github上提出。当然，希望可以点个星星。基于express+multer的文件上传安装依赖npm init（创建package.json文件）npm install express multer --save（安装依赖）单文件上传app.jslet fs

2017-09-09 19:26:30 3793

原创 NodeJS http模块

前言本人所发的NodeJS系列学习笔记参考了一些书籍、官方文档以及一些前辈的代码及注释，可能有些地方理解的不对。如果有误，欢迎到我的github上提出。当然，希望可以点个星星。node-httpNode.js提供了http模块，用于搭建HTTP服务端和客户端。创建Web服务器server.js/** * node-http 服务端 */let http = require('http');

2017-09-07 23:10:03 3873

原创 NodeJS dns模块

dns模块下函数大类该模块包含两类不同的函数： 1. 使用操作系统配置文件进行域名解析，而且没必要进行网络通信。该分类只有一个函数： dns.lookup。“` var dns = require(‘dns’);dns.lookup(‘www.github.com’, (err, address, family) => { if (err) { throw e

2017-09-01 20:00:25 502

原创 ionic2混合应用调起原生地图应用

最近有个需求：在混合应用中点击“打开谷歌地图，要自动打开手机上的谷歌地图应用，并且谷歌地图要‘自动’为用户所在地到任务所在地这一段距离进行导航”（没错，就是要打开谷歌地图并且让它自动完成从一个经纬度到另一个经纬度之间的线路规划）百度一下认认真真搜了快一个小时，看了几十个网页，最后得出一个结论： TMD，这都什么玩意，说的什么东西**。（哈哈，其实我还是知道了要去看谷歌地图的URL SCHEME）。

2017-08-07 20:14:00 1089

原创 ionic自定义组件

简单暴力ionic自定义组件教程。目录结构（src）编写组件展开Components文件夹，先看mynavbar文件夹。mynavbar.html<div> <i (click)="goBack()"><img src="assets/svg/jiantou.svg" alt=""></i> {{ _title }}</div>mynavbar.scssmy-navbar {

2017-07-29 20:09:36 4155

原创牛客网编程题：获取url中的参数

获取 url 中的参数题目描述： 1. 指定参数名称，返回该参数的值或者空字符串 2. 不指定参数名称，返回全部的参数对象或者 {} 3. 如果存在多个同名参数，则返回数组示例：输入 http://www.baidu.com?key=1&key=2&key=3&test=4, ‘key’ 输出 [1, 2, 3]解决办法1function

2017-07-17 22:57:38 1490 1

原创 TypeScript入门教程

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。关于调试以下代码均在http://www.typescriptlang.org/play/index.html上运行通过。自动拆分字符串function test(te

2017-07-16 19:49:57 3881

原创 HTML5新特性

HTML5 是 HTML 标准的最新演进版本.它是同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。HTML5 音频在audio标签内使用source引入不同格式音频已保证各浏览器均能播放。<audio> <source src="example.mp3"> <source src="example.ogg"></audio>HTML5 视频同audi

2017-07-09 17:34:24 336

原创 jsPDF的避坑教程

jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。前言前两天做了一个在线制作问卷的网页，需要将设计好的问卷下载下拉，想到pdf格式比较稳定，就使用了jsPDF来生成文档，安利一下网页的地址：http://mvpzx.top/demo/qnaire/index.html引入依赖脚本原理上需要先把需要保存的节点渲染到一个canvas，然后利用这个canvas制作pd

2017-06-30 02:53:35 50482 37

原创前端面试题（二）

最近应聘前端开发，遇到不少问题，在此作个总结整理。1. AJAX发送请求为什么会乱码？怎样解决？摘要: 有的时候虽然设置了全站的编码，但仍可能出现中文乱码的问题，主要体现在get方法提交的请求。1.1 从客户端到服务器端：url地址后要传中文参数，url就要编码，用encodeURI(url)方法。这里要注意encode方法要使用两次，即encodeURI(encodeURI(url))；如果只使

2017-06-18 09:29:17 290

原创前端面试题（一）

最近应聘前端开发，遇到不少问题，在此作个总结整理。1.请实现一个函数，将一个字符串中的空格替换成“%20”。例如，当字符串为Hello World，则经过替换后为Hello%20World。思路：正则表达式、replace函数function convertSpaceTo%20 (str) { var newstr; newstr = str.replace(/\s+?/g, "%2

2017-06-17 12:46:18 447 2

原创 H5App-美丽天气

前段时间接触了mui，于是便做了一个H5天气app。1.预览已经用HBuilder打包成app在手机运行。分别对应春夏秋冬。2.背景的实现背景的实现依靠了两个div，HTML如下：<div class="weather-cover"></div><div class="weather-content"></div>其中，cover是季节壁纸（准备了春夏秋冬四张），其CSS如下：.weath

2017-06-15 10:22:25 8894 3

原创 AJAX理论学习

什么是AJAX？AJAX = 异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页某个部分进行更新。XMLHttpRequest是AJAX的基础。XMLHttpReauest对象所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用Active

2017-06-09 18:12:35 277

原创 jQuery项目--ES6入门教程网站

项目的预览图PC浏览器手机浏览器 DIV居中给父元素设置相对定位，就可以这样写子元素的样式来使其居中：div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}使用transform: translate(-50%, -50%);即使宽高不固定也能实现垂直

2017-05-12 20:24:47 685

原创 Vue开发小实践--身份查询系统

首先看一下项目的预览图手机微信浏览PC浏览器音乐播放器切歌功能的实现html部分：<audio src="" autoplay="true"></audio>我准备了5首歌，当歌曲放完时要自动切换到下一首，这就要靠JS实现了：var oPlayer = document.getElementsByTagName('audio')[0];oPlayer.src = "music/"+ Math

2017-05-02 15:38:19 1517

原创 PhantomJs 快速入门

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。1 安装windows系统可以去CSDN下载安装包，其他系统自行去官网下载（

2017-04-28 15:13:35 3975

原创 ::before和::after伪元素的使用

:before和:after伪元素在CSS中可以被用来添加元素、加小标、清浮动等。1 基本语法在 CSS3 中为了区别伪元素和伪类，伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。p::before {} p::after {}这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内

2017-04-28 10:34:40 434

原创 JS过滤HTML标签

在前端开发中，我们很有必要过滤掉用户输入的文本中的HTML标签以防范XSS攻击。我们可以用正则表达式来做到这个：var filterHTMLTag = function (msg) { var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag msg = msg.replace(/[|]*\n/, '') //去除行

2017-04-24 21:28:52 16610 1

原创 Node.js 使用Stream模块传送数据

Stream模块是Node.js一个重要模块。数据流是可读、可写或即可读又可写得内存结构。接下来介绍使用Stream模块来创建流，以及从它们中读出数据和向它们写入数据。 1 Readable流Readable流可以方便地读取从其他来源进入应用程序的数据。 Readable流公开了一些事件：- readable：在数据块可以从流中读取时发出。- data：类似于readable，但数据的处理程序

2017-04-19 16:39:16 585

原创 Node.js 处理JSON

JSON是一个非常轻量级的方法，可以用来把JavaScript对象和字符串的形式进行相互转换。当需要序列化对象，以便将它们从客户端传送到服务器，从一个进程传递到另一个进程，从一个流传递到另一个流，或者要把它们存在数据块时，使用JSON效果不错。1 把JSON转换成JavaScript对象JSON字符串以字符串形式表示JavaScript对象。该字符串的语法与代码非常相似。可以使用JSON.parse

2017-04-19 16:37:57 5732

原创 Node.js 事件发射器和监听器

可以使用Node.js的内置模块创建自定义事件，并实现当一个事件被触发时执行的监听器回调。1 将自定义事件添加到JavaScript对象上事件使用一个EventEmitter对象来发出。这个对象包含在events模块中。emit(eventName, [args])函数触发eventName事件，包括所提供的参数。下面代码展示了如何实现一个简单的事件发射器：var events = require(

2017-04-17 15:56:32 573

原创 Node.js 实现回调

1 向回调函数传递额外的参数大部分回调函数都有传递给它们的自动函数，如错误或结果缓冲区。使用回调函数时，常见一个问题：如何从调用函数给回调函数传递额外的参数。一个方法就是在一个匿名函数中实现该参数，然后用来自匿名函数的参数调用回调函数。示例:var events = require('events');var util = require('util');function CarShow() {

2017-04-17 15:55:12 253

原创 Node.js 使用async模块

假设要编写一些异步的代码： - 打开路径的句柄 - 判断路径是否指向一个文件 - 如果路径指向一个文件，加载这个文件的内容 - 关闭句柄并将内容返回给调用者函数如下所示：var fs = require("fs");function load_file_contents(path, callback) { fs.open(path, 'r', fu

2017-04-14 17:22:17 4187

原创 Node.js 异步编程

1. Node.js的编程方式首先看一下JavaScript的setTimeout函数。该函数的参数包含一个函数调用和等待时间，参数函数会在等待时间到达后执行：setTimeout(function () { console.log('2s过了，到我了！');}, 2000);console.log('猜猜我是不是第一个被打印。');运行上面代码，可以看到输出结果：猜猜我是不是第一个被

2017-04-09 18:16:07 1121

原创了解JavaScript

1 数据类型1.1 类型基础Node.js的核心类型有：number（数字）、boolean（布尔值）、string（字符串）以及object（对象）。function（函数）和数组（array）实际上是object的特殊形式。null和undefined也是object的特殊形式，在JavaScript中有特殊作用。undefined值代表还没有赋值或者不存在。null的意思就是“没有值”。我们可

2017-04-08 17:12:36 350

原创 Node.js 入门

Node.js 入门篇(以下都以Windows系统为例) 首先在自己的机器上下载安装好Node.js。将node.exe所在路径加入到系统变量Path下。最后运行cmd命令输入node –version。若命令提示窗打印出安装的Node的版本号，那么安装完成。1 运行 “Hello World”在电脑上使用Node.js有两种方式：直接使用Node Shell或着保存JavaScript文件后运行

2017-04-08 12:26:54 619

原创 MySQL权限系统

MySQL权限系统1 登陆到MySQL首先进入到机器的命令行界面并输入以下命令：mysql -h hostname -u username -p-h命令用于指定所希望连接的主机，即允许MySQL服务器的机器。如果是本机，可省略该命令和hostname参数。 -u命令用于指定连接数据库时使用的用户的名称。默认值是登录该操作系统的用户名。 -p命令指定连接密码。2 创建数据库创建数据库在M

2017-04-03 16:36:49 494

原创 PHP：字符串操作

字符串操作1 字符串整理可以使用trim()函数去除字符串开始位置和结束位置的空格，并把结果字符串返回。默认情况下，去除：\n 、 \r 、\t、\xOb、\0和空格。也可以传入第二个参数提供要过滤的特殊字符。 ltrim()只从字符串开始处去除，rtrim()只从字符串结束处去除。2 使用HTML标记格式化nl2br()函数将会把字符串中的换行符替换为<br>标记。3 转义字符串以便存储：add

2017-03-28 17:33:27 340

原创 PHP：使用数组

使用数组存储在数组中的值称为数组元素。每个数组元素有一个相关的索引（也称为关键字），它可以用来访问元素。PHP允许使用数字或字符串作为数组的索引，这样可以使得索引更具意义和有用。1 数字索引数组1.1 数字索引数组的初始化举个例子： $a = array(1, 2, 3); 如果需要将按升序排列的数字保存在一个数组中，可以使用range()函数自动创建这个函数，例： $b = range(1,

2017-03-28 16:26:09 277

原创 PHP：文件处理

文件处理将数据写入一个文件，有3个步骤： 1. 打开文件 2. 将数据写入这个文件 3. 关闭这个文件同样，从一个文件中读取数据，也有3个步骤 1. 打开文件。如果文件打不开，就应正确地退出 2. 从文件中读取数据 3. 关闭这个文件1. 打开文件要在PHP中打开一个文件，可以使用fopen()函数。当打开文件的时候还要指定打开模式。1.1 选择文件模式模式模式名称

2017-03-28 12:19:15 417

原创 PHP：PHP基础语法中的盲点

1.引用引用操作符可以在关联赋值中使用。通常，将一个变量的值赋给另一个变量的时候，先产生原变量的一个副本，然后再将它们保存在内存的其他地方。比如： $a = 5; $b = $a; 这两行代码首先会产生$a的一个副本，然后再将它保存到$b中。如果随后改变$a的值，$b的值不会改变： $a = 7;//$b仍旧是5 可以使用引用操作符来避免这样的副本。比如： $a =

2017-03-27 18:28:49 332

原创 PHP：PHP与XML

XML（扩展标记语言）是计算机业界中最重要的技术之一。它应用广泛，从计算机之间数据共享，到为一个独立的应用提供数据存储。XML提供的格式不仅能够保存信息，还能保存关于信息的信息（称为：“元信息”）。

2017-03-27 16:25:36 1634

原创 PHP：OOP编程示例-CMS系统

接下来我会用OOP实现一个CMS网站（就简单做一下文章的管理展示功能，其他功能就不做了，也许这不能称为CMS系统）。网站的文件组织：classes文件夹用来存放相关的类，includes文件夹存放将被包含的页面，views文件夹存放用于网页展示的页面，css就是样式表文件所在地了。1、创建数据库CREATE DATABASE cms CHARACTER SET UTF8;

2017-03-21 21:03:06 2014

原创 PHP：自动加载类

使用OOP，我们有时必须在所需的某种类型的对象的脚本中包含进它的类文件。例如：require('Shape.php');如果只需要包含一个类文件，那是不麻烦，但是如果程序中使用了很多类呢，包含这些类文件就太麻烦了。这时候我们就可以使用一种方法了。首先，定义一个知道如何为我们包含类文件的函数：function class_loader($class) { require('cl

2017-03-21 20:17:14 290

原创 PHP：迭代器

迭代器（iterator）是一种设计模式，它可以使所有复杂数据结构的组件都可以使用循环来访问。如我们所知，foreach循环可以对数组进行迭代，while循环可以用来读取查询结果，并且php中有对文件夹及文件内容进行迭代的函数。在以上的几种情况中，底层的数据结构是不一样的，但是对他们进行迭代的前提是相同的。迭代器，就是一种解决方案：无论迭代的是什么数据结构，我们都可以使用通用的代码（通常是

2017-03-21 20:06:33 415

原创 PHP：使用PDO与数据库进行交互

PHP数据对象（PDO）是PHP与数据库进行交互的一种替代方式。如果我们在项目中使用了PDO，那么更换数据库，只需要更改一行代码。要确定安装的PHP版本支持哪些数据库，可调用PDO类的getAvailableDrivers()方法。print_r(PDO::getAvailableDrivers());1、连接数据库所有对PDO的自定义都发生在与数据库建立连接的过程中，通过创建

2017-03-17 16:09:27 728

空空如也

空空如也