- 博客(62)
- 收藏
- 关注
RSS订阅原创 使用NodeJS实现文件上传、转码、预览功能(零前端)
功能描述：1. 用户将保存图片的文件夹进行压缩，通过网页上传；2. 后端对接收到的压缩文件夹进行解压，并将图片转为web格式，存放至服务器指定位置；同时，把web图片列表的路径保存到image.json文件中；3. 前端页面请求图片的路径时，后端则读取image.json文件的内容，将其返回，前端则只接收图片地址，显示出来即可。实现过程：文件上传路径配置文件注：之所以将路径作为配置文件来写，是为了方便调试，例如，开发过程中服务器在本地，则解压之后的图片临时存放在本地，正式上线，图片路径则是服务器上指
2021-07-28 14:21:38
863
原创 JavaScirpt中的逻辑&&、||、!
很多时候最基础的反而掌握的不那么全面，只是一知半解。在此做下记录。逻辑与(&&)返回两个操作数中，其中一个操作数的值，具体是返回第一个还是第二个，分情况boolean类型：从结果看出，只有同时为true的情况，才会返回true,否则都为fasletrue && false; // falsetrue && true; // truefalse && true; // falsefalse && fal
2021-01-22 17:22:18
261
原创 在Angular6.x中使用 paper.js绘制矩形
Paper.js是一个开源的矢量图形的脚本，运行于HTM5的Canvas上，所以仅仅支持现代的浏览器。下面的例子是在Angular6.x 中使用paper.js。
2019-07-18 16:01:05
735
原创 Flex布局：实例篇
本文参考《阮一峰 Flex 布局 实例篇》注：代码稍有改动，原文的宽度刚好够放三个点，有时候，第二个点并未居中，但看起来似乎是居中的，容易引起歧义.本文 demo 源码一、骰子布局骰子的一面，最多可以放置9个点下面，就来看看Flex如何实现，从一个点到九个点的布局。如果不加说明，demo 中的HTML一律如下<div class="box"> <span ...
2019-06-04 17:30:38
1272
原创 Flex布局：语法篇
本文转载至阮一峰 Flex布局：语法篇布局的传统解决方案，基于“盒状模型”，依赖“display”属性+‘position’属性+‘float’属性，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现.一、Flex布局是什么？Flex 是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局.box{ displ...
2019-06-04 15:53:07
307
原创 在Angular 6.x 中使用ng2-smart-table中的ServerDataSource及添加特殊情况处理
上文链接从零开始在Angular 6中使用ng2-smart-table组件中的LocalDataSource
2018-10-30 14:18:30
3696
原创 在Angular 6.x 中使用ngx-translate组件进行国际化
1、导入模块app.module.tsimport {BrowserModule} from '@angular/platform-browser';import {NgModule} from '@angular/core';import {TranslateModule} from '@ngx-translate/core';@NgModule({ imports: [ ...
2018-10-18 09:13:16
1139
原创 从零开始在Angular 6.x 中使用ng2-smart-table组件中的LocalDataSource
ng2-smart-table 源码：[ng2-smart-table](https://github.com/akveo/ng2-smart-table/issues/479)第一步：创建新项目，用来做demo步骤一：创建新项目ng new demo-ng2-smart-table步骤二：下载依赖包npm i步骤三：下载ng2-smart-table 及相关的依赖项npm in...
2018-10-09 16:58:33
1797
原创 在Angular 6中使用ngx-echarts 组件的地图（map）图表
首先，贴出官网ngx-echarts 官方文档ngx-echarts 官方demongx-echarts是根据echarts插件开发的，适用于Angular2.x及以上，另外不同版本的ngx-echarts也适用于不同版本的Angular，主要划分版本是Angular 6.v4.0.0 for Angular &amp;amp;amp;gt;= 6v2.3.1 for Angular &amp;amp;amp;lt; 6步骤如下...
2018-09-30 15:37:31
7256
4
原创 如何优雅的在小程序中使用EChart组件
EChart提供了微信小程序版本，扫描二维码预览demo 下载地址：https://github.com/ecomfe/echarts-for-weixin Echart-wxapp下载下来，其中ec-canvas文件夹就是组件源码使用将ec-canvas组件放入小程序中，例如，components文件中， 在app.json中的pages下，增加‘pages...
2018-08-13 11:52:16
8946
2
转载 微信小程序UI组件 & 开发框架 & 实用库 & 经典demo
UI组件 weui-wxss - 同微信原生视觉体验一致的基础样式库 Wa-UI - 针对微信小程序整合的一套UI库 wx-charts - 微信小程序图表工具 wemark - 微信小程序Markdown渲染库 WeZRender - 微信小程序Canvas增强组件 wxapp-charts - 微信小程序图表charts组件 WeiXinProject- 列表的上拉刷新和...
2018-08-06 09:44:14
2186
原创 Angular 2自定义弹出组件toast（使用路由）
原理： 使用Angular2的命名路由插座，一个用来显示app正常的使用，一个用来显示弹出框，&amp;lt;router-outlet name='apps'&amp;gt;&amp;lt;/router-outlet&amp;gt;&amp;lt;router-outlet name='popup'&amp;gt;&amp;lt;/router-outlet&amp
2018-07-05 17:33:00
2919
原创 微信小程序之封装HTTP请求（升级版）
原版：微信小程序之封装请求函数 上代码function getErrorMsgByErrorNo(error_no) { let error_msg; switch (error_no) { case 100: error_msg = '操作失败，请稍后再试！'; break; default: error_msg = '网络错误，请稍后再试！'; break;...
2018-06-30 18:34:21
2080
原创 微信小程序自定义toast组件(含动画)
怎么创建就不说了，上一篇有 微信小程序自定义prompt组件 直接上代码 wxml<!-- components/toast/toast.wxml --><view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="toast-co...
2018-06-30 18:27:14
2702
原创 微信小程序自定义prompt组件
步骤一：新建一个component的文件夹，用来放所有的自定义组件； 步骤二：在该目录下新建一个prompt的文件夹，用来放prompt组件； 步骤三：右击–&amp;amp;gt;新建–&amp;amp;gt;component 直接上代码 wxml&amp;amp;lt;view class=&amp;quot;prompt-box&amp;quot; hidden=&amp;quot;{
2018-06-11 10:09:44
4626
1
原创 flex两列布局，左边固定（可折叠），右边自适应
需求：左边导航栏固定宽200px，并且导航栏可折叠隐藏，右边自适应，填充剩余的宽度. html:&lt;div class="body"&gt; &lt;div class="sidebar"&gt; &lt;div class="bar" id='bar'&g
2018-05-31 10:49:47
9789
2
原创 在Angular6中使用primeNG UI框架
第一种情况，项目还没开始。 第一步：使用ng new projectng new PrimeNGproject第二步：可以运行一下是否成功ng s第三步：安装primeNGnpm install primeng第四步：安装font-awesome(一个图标字体库和CSS框架 )npm install font-awesome第五步：配置angular....
2018-05-25 11:42:57
9318
1
原创 在Angular2中使用SVG自定义图表（条形图、折线图）组件
要求：用户将数据作为参数传进来，通过类型决定渲染何种类型的图标。 demo： html:<ngo-chart [inputParams]="options"></ngo-chart>ts: options = { type: 'line', //图表类型 xAxis: { //X轴的数据 ...
2018-05-24 14:56:52
2999
原创 SVG & Canvas动态画矩形
SVG<svg style="width: 700px;height: 400px;"> <rect x="20" y="20" width="50" height="200" fill="red"> <animate attributeName="height" fr
2018-05-23 17:05:13
1948
原创 关于SVG的viewBox和preserveAspectRatio
viewport表示SVG可见区域的大小。 //单位：不写默认为px。&lt;svg style="width:400; height:200;"&gt;&lt;/svg&gt;preserveAspectRatiopreserveAspectRatio=”align meetOrSlice” or preserveAspectRatio=”none” ...
2018-05-16 13:58:01
2025
原创 获取当周的周六、周日
需求：无论当前是哪一天，获取当天所在周的周末 是哪一天实现步骤： 比如，今天周一，则周日距离今天还有（7-1）=6天，那么将今天的时间（毫秒数），加上六天后的时间（6*_dayLongTime 毫秒数），然后根据date函数，转换为几月几日。1、获取当天的时间let _nowTime=new Date().getTime();2、获取当天是星期几let _w...
2018-03-26 12:18:48
1542
原创 CSS中transition以及时间函数steps()
概念transition：过渡、转变transition 是个简写属性，用于设置四个过渡属性transition-property 规定设置过渡效果的css属性的名称transition-duration 规定完成过渡效果需要多少秒或多少毫秒 必填项 必须带单位transition-timin...
2018-03-22 11:43:09
5363
原创 微信小程序中include和import的区别
概念import import是用来导入模板。include includes用来导入除模板以外的内容。区别一、引用区别看例子一、创建一个文件夹test,里面包含一个test.wxml(只做模板测试，其他文件可省略)； 二、test.wxml内容<template name="test"> template inner...
2018-03-20 16:22:59
9237
原创 CSS中nth-child和nth-of-type的区别
无空格作用域为冒号前面标签的兄弟节点及其子节点p:nth-child(2)：1、表示这是个段落标签；2、这是父标签的第二个孩子元素<div> <p>p1</p> <p>p2 变红 <span>sss变红</span> </p> &
2018-02-27 10:53:17
283
原创 Angular2之RxJS源码解读
基本概念Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions RxJS是一个库，它通过使用observable序列来编写异步和基于事件的程序。它提供了一个核心类型Observable，附属类型（Observer、Schedulers、Subjects）和受[Array#extras]启发的操作符（map、filter...
2018-02-26 15:08:13
2049
原创 Angular4之动画
在angular里面，动画的本质，是在一定时间，由一个状态转换到另一个状态，期间的过渡效果就是显示出来就是动画。 例如：import { Component,Input} from '@angular/core';import { trigger, state, style, animate, transition} from '@angular/animati
2018-01-19 20:17:03
2635
3
原创 js核心基础之Events事件机制（移动端事件、PC端事件、事件穿透）
PC端 在pc端，网页的操作都是用鼠标的，即响应的都是鼠标事件，包括mousedown、mouseup、click， 通常，click事件会在mouseup之后触发，会在300ms之后，因为，会凭借这个时间去判断是否触发双击事件（不准确） 1、mousedown,当用户在这个元素上按下鼠标键的时候； 2、mouseup，当用户在这个元素上松开鼠标键的时候，大概在moused
2018-01-16 19:53:24
2205
原创 js核心基础之Events事件机制（事件冒泡、事件捕获、事件执行顺序、阻止冒泡）
事件的触发有三个阶段： 1、document往事件触发地点，捕获前进，遇到相同注册事件立即触发执行； 2、到达事件位置，触发事件； 3、事件触发地点往document方向，冒泡前进，遇到相同注册事件立即触发。 注意：无论是冒泡阶段还是捕获阶段触发，都只会触发一次。默认为冒泡模式 例子： 简写的节点树：document->html->body->outdiv->
2018-01-16 19:51:28
626
原创 HTML中的attribute属性和JavaScript中的property属性的详解以及区别
一直没有搞懂attribute和property的区别，弄了个例子，总结了一下。一、基本概念区别 attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute； 注意：在使用setAttribute的时候，该函数一定接收
2018-01-11 17:55:11
20097
4
原创 微信小程序之发送模板消息（通过openid推送消息给用户）
一、获取access_token access_token是接口调用的凭证，目前有效期为两个小时，需要定时刷新，重复获取将导致上次获取的access_token失效。（注：不建议每次调用需要access_token的接口，都去重新获取access_token，会导致失败） 获取access_token的接口地址：https://api.weixin.qq.com/cgi-bin/token?gr
2017-12-23 17:17:28
142207
36
原创 微博API授权登录（仅二维码登录）
访问微博API都需要access_token再加uid或者screen_name，所以第一步就是要授权，获取到access_token。第一步：创建网站应用，创建之后，有个appkey和appsecret; 第二步：获取二维码，响应的是一串imgUrl，将其放在img标签的的src属性里面即可显示出二维码；//获取二维码的url//请求参数let paramsData={
2017-10-27 12:24:41
3542
原创 ES6基础之详解Promise基本用法
一、Promise是一个构造函数，用来生成promise实例；var promise=new Promise();二、构造函数接收一个参数，这个参数是一个函数，当创建实例的时候，参数里的函数会立即执行；var promise=new Promise( function(){ console.log('这行代码会立即执行！') } )三、参数里面的函数又接收两个参数，两个参数均为函数，一个resol
2017-09-29 11:20:49
2818
1
原创 ts实例应用之通过城市的citycode获取天气数据（逻辑）
授人以鱼不如授人以渔 这里只讲逻辑（伪代码），不写代码。需求：获取天气数据//条件：var appkey='xxxxxx';var url='https://way.jd.com/jisuapi/weather?city=xxx&cityid=xxxx&citycode=xx&appkey=appkey';则需要：city cityid citycode第一步：获取所有
2017-09-29 11:09:55
1654
原创 微信小程序之封装HTTP请求
微信小程序里自己封装了请求的函数，但几乎每个页面都要用到，所以为什么更方便的调用，再一次进行封装。在app.js里面定义个全局对象，这样想要用到该函数，只需要在该页面的js文件里面，请求一个app实例。废话不多说，先上代码：//全局对象httpClienthttpClient:{ request:function(method,url,data){ //返...
2017-09-29 10:26:16
5480
5
原创 Angular2秒表及改良版
初版代码：export class Watches { id: number; str: string;}export let watcheList: Watches[] = [{ id: 0, str: '123456'}, { id: 1, str: '564822'}]//watchList 是一个静态类watchList = watcheList;
2017-09-14 09:51:23
1115
原创 NodeJs安装之设置淘宝镜像（Windows）
angular-cli需要升级，但是旧版本的node和npm不太支持，所以需要安装最新的，但是node在window下貌似不可以直接升级，那就只能先卸载再安装。1、卸载node 电脑–>属性–>控制面板主页–>程序与功能–>nodejs–>右击卸载2、安装node npm是node的包管理器，所以node更新了，npm随之也更新了 地址安装node3、设置淘宝镜像 最直接的一种
2017-09-01 17:12:47
3528
原创 ts核心基础之接口（Interface）
作为一个纯粹的前端攻城狮，有时候很难理解面向对象的思维，所以，有些功能你能够用JS完成，但是转换成TS就有点不知所措了。面向对象设计和编程遵循的几个原则： SOLID原则：SRP(Single Responsibility Principle) 单一职责原则；OCP(Open Closed Principle) 开/闭原则；LSP(Liskov Substitutio
2017-09-01 11:21:41
4755
1
原创 微信小程序之使用腾讯云服务器的一系列坑
一、在微信公众平台的设置中，配置服务器信息 点击立即前往，购买服务器与域名，腾讯云有个优惠，前两个月只要3块钱。二、搭建vsftp服务器 FTP是文件传输协议 复制外网IP地址： 腾讯云–>云主机–>主IP地址（公网）；本人使用的是putty.exe， 输入你刚刚复制的ip地址，点击open，使用root登录。下载vsftp服务yum install vsft
2017-08-29 17:17:41
30420
原创 微信小程序开发教程之新手“出坑”系列
这里不讲教程只讲如何避免入那些不必要或者容易出错而文档恰恰又没指明的坑。 一、导航栏 1、小程序在用app.json配置公共导航栏时，利用tabBar这个属性配置，这个对象是一个数组，只需配置即可，不需要添加节点。 注意点： 1.list属性只能配置2~5个，也就是说只支持2~5个导航按钮； 2. list属性值里的pagePath属性里，一定要有一个pages/ind
2017-08-24 13:55:50
1175
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人