雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅 第10页

去分类设置中添加分类描述吧

获取上传文件实时进度条的尝试

2018-03-12admin阅读(3229)评论(0)

之前每次写项目, 一遇到这种需要获取进度条的, 大多数时间都是直接去找各种插件, 如果实在没有找到合适的, 就做一个假的进度条!

今天有点时间, 查了点资料, 做了一个使用jquery 上传文件获取进度的小例子!

首先,做一个简单的小表单

1
2
3
4
<form method="post" enctype="multipart/form-data" action="index.php">
    <input type="file" name="" placeholder="">
    <input type="button" name="" placeholder="" value="提交">
</form>

然后做点击事件处理及ajax处理,

其中有两个参数需要特别注意

1, processData用于对data参数进行序列化处理，默认值是true。默认情况下发送的数据将被转换为对象，如果不希望把File转换，需要设置为false,

2, 默认值为contentType = "application/x-www-form-urlencoded", 如果不设置这里, 我们的 后端 php 收不到文件数据, 查了一下资料:

因为对于上传文件，我们没有在使用原有的 http 协议，所以 multipart/form-data 请求是基于 http 原有的请求方式 post 而来的.那么来说说这个全新的请求方式与 post 的区别

  1. 请求头的不同，对于上传文件的请求，contentType = multipart/form-data是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。
  2. 请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 post 当然就没有分界符直接以 name = “value”的形似发送。

contentType 必须false才会自动加上正确的Content-Type,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$('input[type="button"]').click(function () {
        var formData = new FormData();
        formData.append("catname", "我是一只喵");
        formData.append("age", 1);
        formData.append("userfile", $('input[type="file"]')[0].files[0]);
        console.log(formData)
        $.ajax({
            url: 'index.php',
            type: 'POST',
            processData: false,
            //必须false才会自动加上正确的Content-Type
            contentType : false ,
            data: formData,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , onprogress, false);
                    return xhr;
                }
            },
            success:function (res) {
                console.log(res)
            },
        })
    })
    function onprogress(evt){
        var loaded = evt.loaded;     //已经上传大小情况
        var tot = evt.total;      //附件总大小
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比
        $('#press').html(per+'%')
    }

然后我们选择一个较大的文件,查看上传进度!

webapp

至于php文件,简单的接收了一下上海传的数据!

1
2
3
4
5
6
7
8
9
10
11
12
<?php
/**
* Created by PhpStorm.
* User: iyahe@qq.com (天明)
* Date: 2018/3/12
* Time: 14:20
*/
 
print_r($_REQUEST['catname']);
print_r($_REQUEST['age']);
print_r($_REQUEST['userfile']);
print_r($_FILES);

 

在H5网页里判断是否在Wifi环境

2018-03-08admin阅读(13177)评论(0)

之前一直以为H5网页里肯定是无法判断网络环境的, 但是查了一下, 发现其实html5已结有了新的东西去判断,但是兼容性很差!

经过测试发现, 如果实在微信浏览器中, 高版本的微信内置浏览器, 直接在UA里面就能看到网络状态!

我们简单写了一个页面弹出当前的Ua,发现!

微信图片_20180308105053

这里的NetType/WIFI 就是当前的网络状态了. 切换到4G, 重新进入页面, 就是4G!!

注意这里是重新进入页面, 而不是直接在当前页面切换到4G然后刷新,

因为经过简单测试, 直接切换到4G,刷新页面, 弹出来的Ua是不会变化的, 还是之前的Ua!

如果换其他浏览器, 比如 UC, QQ浏览器等等,那就直接可以用  window.navigator.connection 来判断了!

最终版本就是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function isWifi() {
        try {
            let wifi = true
            let ua = window.navigator.userAgent
            let con = window.navigator.connection
            // 如果是微信
            if (/MicroMessenger/.test(ua)) {
                if (ua.indexOf('WIFI') >= 0) {
                    return true;
                }else{
                    wifi = false
                }
                // 如果支持navigator.connection
            } else if (con) {
                let network = con.type
                if (network !== 'wifi' && network !== '2' && network !== 'unknown') {
                    wifi = false
                }
            }
            return wifi
        } catch (e) {
            return false
        }
    }

 

微信小程序中rpx与rem单位转换

2018-01-29admin阅读(6755)评论(0)

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5      1rpx = 0.42px 　　    1px = 2.34px
iPhone6      1rpx = 0.5px 　　　　1px = 2rpx
iPhone6s    1rpx = 0.552px 　　  1px = 1.81rpx
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx;
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,单位换算相对简单!

rpx的使用

1）小程序中rpx与px的转换
例如：设计稿750px宽度
那么恭喜您，你ps上量出宽度是多少，那么你就定义多少rpx，也就是 1px = 1rpx
例如：设计稿640px宽度
那么很遗憾，你需要转换一下 1px = 750/640 rpx
小程序中rpx和px的转换
2）小程序中如何继续使用rem
例如：设计稿750px宽度
此时1rem = （750/20）rpx = 37.5px
例如：设计稿640px宽度
此时1rem = （750/20）rpx = 32px
小程序中rem的使用
注意：无论设计稿多少，rem与rpx换算总是一样的，但是rem与px在小程序中换算是 rem =
设计稿宽/20，这一点与我们平时使用的rem完全不一样。

JS输出格式化的json字符串

2018-01-05admin阅读(4310)评论(0)

最近几天在写后台管理, 太多的表单数据要处理,但是仔细一想!~~~

这个后台是我自己用的,收集表单多麻烦,直接写json不就行了,

~~于是开始想办法找一个可以直接格式化json的方法, 防止json写错了~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
    var formatJson = function (json, options) {
        var reg = null,
                formatted = '',
                pad = 0,
                PADDING = '    ';
        options = options || {};
        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        } else {
            json = JSON.parse(json);
            json = JSON.stringify(json);
        }
        reg = /([\{\}])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /([\[\]])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /(\,)/g;
        json = json.replace(reg, '$1\r\n');
        reg = /(\r\n\r\n)/g;
        json = json.replace(reg, '\r\n');
        reg = /\r\n\,/g;
        json = json.replace(reg, ',');
        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
            reg = /\:\r\n\{/g;
            json = json.replace(reg, ':{');
            reg = /\:\r\n\[/g;
            json = json.replace(reg, ':[');
        }
        if (options.spaceAfterColon) {
            reg = /\:/g;
            json = json.replace(reg, ':');
        }
        (json.split('\r\n')).forEach(function (node, index) {
                    var i = 0,
                            indent = 0,
                            padding = '';
 
                    if (node.match(/\{$/) || node.match(/\[$/)) {
                        indent = 1;
                    } else if (node.match(/\}/) || node.match(/\]/)) {
                        if (pad !== 0) {
                            pad -= 1;
                        }
                    } else {
                        indent = 0;
                    }
 
                    for (i = 0; i < pad; i++) {
                        padding += PADDING;
                    }
 
                    formatted += padding + node + '\r\n';
                    pad += indent;
                }
        );
        return formatted;
    };
    //引用示例部分
    //(1)创建json格式或者从后台拿到对应的json格式
    var originalJson = {"name": "天明", "sex": "男", "age": "25"};
    //(2)调用formatJson函数,将json格式进行格式化
    var resultJson = formatJson(originalJson);
    //(3)将格式化好后的json写入页面中
    document.getElementById("writePlace").innerHTML =  resultJson;

原本是黏在一起的一行json,  {“name”: “天明”, “sex”: “男”, “age”: “25”};

转完了就是

{
“name”:”天明”,
“sex”:”男”,
“age”:”25″
}

这种格式~~

收工~

 

关于微信小程序Websocket的一些小坑

2018-01-02admin阅读(7022)评论(0)

最近几天做微信小程序的Websocket来处理一些聊天消息!期间遇到了一些比较坑的地方,记录一下

第一: 微信小程序不支持设置端口, 而我们做socket一般都会自己定义端口号来访问

这里,由于微信小程序不支持设置端口号,

那我在本地发起socket请求,则填写:

1
2
3
wx.connectSocket({
     url: 'wss://play.he29.com/websocket'
});

这样的话,我们就可以在nginx里设置规则来获取

设置nginx的代理到我们socket服务指定的端口!

1
2
3
4
5
6
7
8
9
10
location /websocket {
        proxy_pass http://127.0.0.1:4006;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Real-IP $remote_addr;
}

由于我的后端socket是php的woekman写的,

workman自己可以设置ssl, 所以如果在nginx里配置了ssl,

则一定不要在php的socket里设置ssl,不然会出错!

8326cffc1e178a82f0fbfa6aff03738da877e831

cents6.4安装nodejs问题记录

2017-11-02admin阅读(2384)评论(0)

使用源码编译方式安装了多次都失败了,报了很多错,理不清

后来找到一个可行方法! 使用yum安装nodejs

官方文档：
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

1
2
3
curl -sL https://rpm.nodesource.com/setup | bash -
Then install, as root:
yum install -y nodejs

安装完成后, 查看结果

[root@instance_439b09 bin]# node
> 1+1
2
>

正常,但是npm确报错了, /usr/local/bin/npm: line 1: ../lib/node_modules/npm/bin/npm-cli.js: No such file or directory

首先我们找到 npm-cli.js 在哪

find / -name “npm-cli.js”

找到后,查看  /usr/local/bin/npm

vim  /usr/local/bin/npm

然后看到里面的文件地址, 修改成刚find找到的 npm-cli.js 绝对地址

npm -v

npm: relocation error: npm: symbol SSL_set_cert_cb, version libssl.so.10 not defined in file libssl.so.10 with link time reference

解决办法：

   yum -y install openssl  

如果已经安装，就更新一下

  yum -y update openssl

然后就OK啦

 

使用 nodeJs 写个简单的小小爬虫

2017-10-30admin阅读(2538)评论(0)

最近开始想好好看看nodeJs, 写点东西练习一下!

首先了解一下使用了那些东西!

1, express ,npm地址 https://www.npmjs.com/package/express

这个主要是用来启动一个本地服务器,

2, supervisor , npm地址 https://www.npmjs.com/package/supervisor

主要用来负责重启node进程

3, request , npm地址: https://www.npmjs.com/package/request

这个模块主要用来 发起http请求,

4. cheerio, npm地址: https://www.npmjs.com/package/cheerio

这个模块主要用来提供像jquery一样来选择html元素的方法,

代码很简单,会写javascript的看一眼就能懂!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var express = require('express');
var app = express();
var request = require('request');
const cheerio = require('cheerio');
const fs = require('fs');
 
app.get('/', function (req, res) {
    request('https://gitee.com/explore/starred?lang=PHP', function (error, response, body) {
        console.log(response.statusCode);
        const $ = cheerio.load(body);
        let arr = [];
        $('#git-discover-list').find('.item').each(function (k,v) {
            let starFork = $(v).find('.watch-star-fork');
            let json = {
                name:$(v).find('.project-namespace-path').text(),
                desc:$(v).find('.project-desc').text(),
                watch:starFork.find('a').eq(0).find('span').text(),
                star:starFork.find('a').eq(1).find('span').text(),
                fork:starFork.find('a').eq(2).find('span').text(),
            };
            arr.push(json)
        });
        let jsonstr = JSON.stringify(arr,null,2);
        console.dir(arr);
        fs.appendFile('list.json', jsonstr, (err) => {
            if (err) throw err;
        });
        res.send(jsonstr)
    });
})
app.listen(3000);

主要启动了一个服务监听 3000 端口,

然后 请求 码云 的php项目列表,

请求完成,获取所需的数据,写入到数组,

最后一步,把数组写入到本地的json文件里!

最终得到结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
[
  {
    "name": "暗夜在火星/PhalApi",
    "desc": "简称π框架，一个轻量级PHP开源接口框架，专注于接口服务开发，支持HTTP/SOAP/RPC协议，拥有自动生成的在线文档、多种开发语言的客户端SDK包以及可重用的扩展类库，可用于快速搭建微服务、RESTful接口或Web Services。",
    "watch": "438",
    "star": "1.1k",
    "fork": "365"
  },
  {
    "name": "IBOS开源OA协同办公管理/IBOS",
    "desc": "基于Yii和bootstrap的开源OA/协同办公平台，连接全平台覆盖的酷办公客户端（Win，IOS，Android,Mac,Linux），支撑您的企业管理二次开发－－作为国内首家开源OA，有的不只是颜值",
    "watch": "439",
    "star": "910",
    "fork": "550"
  },
  {
    "name": "白俊遥/thinkphp-bjyadmin",
    "desc": "thinkphp整合Auth权限管理、支付宝、微信支付、阿里oss、友盟推送、融云即时通讯、云通讯短信、Email、Excel、PDF等等",
    "watch": "390",
    "star": "822",
    "fork": "330"
  },
  {
    "name": "einsqing/wemall",
    "desc": "wemall微信商城云平台 快速创建您的微信商城",
    "watch": "388",
    "star": "763",
    "fork": "425"
  },
  {
    "name": "ycchen/iWshop",
    "desc": "微信开源商城，基于高性能框架Phalcon，自主开发微信Sdk, 基于腾讯Weui开发店铺页面。",
    "watch": "366",
    "star": "742",
    "fork": "355"
  },
  {
    "name": "雾渺/KODExplorer",
    "desc": "KodExplorer是一款快捷高效的私有云和在线文档管理系统，为个人网站、企业私有云部署、网络存储、在线文档管理、在线办公等提供安全可控，简便易用、可高度定制的私有云产品。采用windows风格界面、操作习惯，无需适应即可快速上手，支持几百种常用文件格式的在线预览，可扩展易定制。GPL v3开源协议.",
    "watch": "317",
    "star": "741",
    "fork": "275"
  },
  {
    "name": "CRM8000/PSI",
    "desc": "PSI是一款基于SaaS模式(Software as a Service软件即服务)的企业管理软件。PSI以商贸企业的核心业务：采购、销售、库存（进销存）为切入点，最终目标是行业化的ERP解决方案。",
    "watch": "342",
    "star": "739",
    "fork": "344"
  },
  {
    "name": "奕潇/OpenCenter",
    "desc": "通用性强的开源用户及后台管理系统，非常适合全新系统的开发。\n基于ThinkPHP开发，遵循与ThinkPHP相同的开源协议。\n2016年最新更新，加入了新的功能。修复了以前一些老的Bug。\n欢迎关注我的另一个项目：http://git.oschina.net/yhtt2020/OpenSNS-V2\n基于Apache2.0 开源通用 用户及后台管理框架，提供了注册登录、头像裁剪、单点登录、权限管理、扩展资料管理、等级头衔、自定义积分管理、用户行为日志机制、模块装卸、插件机制，提供建议的安装程序。...",
    "watch": "356",
    "star": "726",
    "fork": "347"
  },
  {
    "name": "rainfer/YFCMF",
    "desc": "YFCMF是采用ThinkPHP5.0.10+国外ACE1.40的UI模板的后台内容管理框架。演示网站：http://www.rainfer.cn/admin.php  用户名：demo密码：123456  交流：http://www.yfcmf.net QQ群：213321650",
    "watch": "262",
    "star": "691",
    "fork": "230"
  },
  {
    "name": "Karson/fastadmin",
    "desc": "基于ThinkPHP5和Bootstrap的极速后台开发框架",
    "watch": "271",
    "star": "681",
    "fork": "281"
  },
  {
    "name": "thinkcmf/ThinkCMFX",
    "desc": "ThinkCMF 是一款高速PHP内容管理框架，扩展性良好可高程度的提高开发者的开发效率，节省开发成本。",
    "watch": "282",
    "star": "654",
    "fork": "336"
  },
  {
    "name": "Lane/LaneWeChat",
    "desc": "微信PHP快速开发框架。封装微信公众号接口，简单调用，快速上线。详尽的文档和示例，让开发者快速上手。",
    "watch": "321",
    "star": "606",
    "fork": "263"
  },
  {
    "name": "风一样的世界/laravel5_backend",
    "desc": "基于laravel 5 框架的后台基础系统。包括登录验证、用户管理，修改密码，用户权限，用户组权限，功能管理，系统日志，文件上传、工作流。目前还附加了简单的blog功能。可以快速基于此系统进行laravel5的快速开发，免去每次都写一次后台基础的痛苦。",
    "watch": "255",
    "star": "582",
    "fork": "276"
  },
  {
    "name": "小微OA/smeoa",
    "desc": "基于ThinkPHP开发的PHP开源OA办公系统\n\n新版地址：https://git.oschina.net/smeoa/xiaowei",
    "watch": "340",
    "star": "582",
    "fork": "304"
  },
  {
    "name": "Discuz!/DiscuzX",
    "desc": "Discuz! X 官方 Git/SVN SC_UTF8 版本，最新版本 X3.4 R20171001+",
    "watch": "236",
    "star": "581",
    "fork": "341"
  },
  {
    "name": "ApiAdmin/ApiAdmin",
    "desc": "基于ThinkPHP V3.2开发的面向API的后台管理系统！",
    "watch": "206",
    "star": "538",
    "fork": "192"
  },
  {
    "name": "微擎团队/pros",
    "desc": "微擎是一款免费开源的微信公众号管理系统，基于目前最流行的WEB2.0架构（php+mysql），支持在线升级和安装模块及模板，拥有良好的开发框架、成熟稳定的技术解决方案、活跃的第三方开发者及开发团队，依托微擎开放的生态系统，提供丰富的扩展功能。除了Master外其它分支皆为不稳定的开发版。欢迎大家Fork",
    "watch": "213",
    "star": "492",
    "fork": "224"
  },
  {
    "name": "easysoft/zentaopms",
    "desc": "禅道是第一款国产的开源项目管理软件。它集产品管理、项目管理、质量管理、文档管理、组织管理和事务管理于一体，是一款专业的研发项目管理软件，完整地覆盖了项目管理的核心流程。注重实效，合软件架构合理，操作简洁高效，扩展灵活，多语言支持，多风格支持，搜索功能，统计功能——这一切，您通过禅道，都可以拥有！",
    "watch": "211",
    "star": "483",
    "fork": "228"
  },
  {
    "name": "祺爸PiscDong/sns_PHP",
    "desc": "网易微博、百度、Google、微软、Instagram、Facebook、360、GitHub、淘宝等平台的账号登录及api操作，使用oauth 2.0。官方提供的sdk都太过庞大，这是我自己简化的，提供简单的账号登录、获取个人信息、发布微博等功能，如果需要其他功能可以根据官方的api文档自行添加。\n",
    "watch": "202",
    "star": "474",
    "fork": "228"
  },
  {
    "name": "大愚/payment",
    "desc": "Payment是一个php版本的支付聚合第三方sdk，集成了微信支付、支付宝支付、招商一网通支付。提供统一的调用接口，方便快速接入各种支付、查询、退款、转账能力。",
    "watch": "239",
    "star": "472",
    "fork": "133"
  },
  {
    "name": "ThinkPHP/thinkphp",
    "desc": "开源PHP框架",
    "watch": "237",
    "star": "464",
    "fork": "203"
  },
  {
    "name": "JAE/QueryList",
    "desc": "QueryList是一个基于phpQuery的简洁、优雅的PHP采集工具，具有高扩展性。",
    "watch": "186",
    "star": "444",
    "fork": "154"
  },
  {
    "name": "jry/lyadmin",
    "desc": "lyadmin(lysite分支全新发布)是一套轻量级通用后台，采用ThinkPHP+Bootstrap3制作，内置系统设置、上传管理、权限管理、模块管理、插件管理等功能，独有的Builder页面自动生成技术节省50%开发成本，先进的模块化开发的支持让开发成本一降再降，致力于为个人和中小型企业打造全方位的PHP企业级开发解决方案。另外提供整套企业开发解决方案，集PC、手机、微信、App、小程序五端于一体，更有用户中心模块、门户模块、钱包支付中心模块、商城模块、OAuth2统一登陆、内部Git模块、Do...",
    "watch": "177",
    "star": "386",
    "fork": "131"
  },
  {
    "name": "奕潇/OpenSNS-V5开源版",
    "desc": "2017年9月29日更新，全面升级到V5\n产品介绍：www.opensns.cn\n业界最强大的开源SNS系统，最受社交创业项目欢迎的开源项目。",
    "watch": "173",
    "star": "353",
    "fork": "206"
  },
  {
    "name": "B_fox/ke361",
    "desc": "淘宝客程序 —— 突破了传统淘宝客程序对自动采集商品收费的模式，该程序的自动 采集模块对于所有人开放，代码不加密，方便大家修改。集成淘点金组件，自动转换淘宝链接为淘宝客推广链接。",
    "watch": "171",
    "star": "351",
    "fork": "150"
  }
]

这次项目主要是简单的练习一下模块的使用,以及几个npm包,看了node文档,还有很多东西需要看~~

记录几个常用的HTML空格占位符

2017-10-26admin阅读(2500)评论(0)

&#32; == 普通的英文半角空格

&#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行）

&#12288; == 中文全角空格 （一个中文宽度）

&#8194; == &ensp; == en空格 （半个中文宽度）

&#8195; == &emsp; == em空格 （一个中文宽度）

&#8197; == 四分之一em空格 （四分之一中文宽度）

相比平时的空格（&#32;），nbsp拥有不间断（non-breaking）特性。

即连续的nbsp会在同一行内显示。即使有100个连续的nbsp，浏览器也不会把它们拆成两行。

http://www.qdkf.net/41.html

简单理解vue的slot内容分发

2017-10-25admin阅读(2053)评论(0)

官方文档这样说

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。Vue.js 实现了一个内容分发 API，参照了当前 Web Components 规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。

那我们在实际中到底怎么使用:

我们新建两个组件

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
    <div class="hello">
        <div>
            <h1>我是父组件的标题</h1>
            <component>
              
            </component>
        </div>
    </div>
</template>
 
<script>
    import component from './Test.vue'
    export default {
        name: 'hello',
        data () {
            return {}
        },
        components:{
            component
        },
        created:function () {}
    }
</script>

子组件里

1
2
3
4
5
6
<template>
    <div>
        <h2>我是子组件的标题</h2>
        <slot>只有在没有要分发的内容时才会显示。</slot>
    </div>
</template>

 

这样执行以下代码,

效果是这样

QQ截图20171025101932

 

很明显可以看出来: 写在父组件 component 里面的内容被动态的显示在了子组件里面

如果我把 component  里面的内容删除,则会变成这样

QQ截图20171025102543

显示出来了我们定义的默认值,这样大家应该能想到使用场景了!

我们能直接动态传内容到子组件里面,如果不传,就使用子组件里面默认的值!

比如我们的弹窗,就可以直接使用这样来自定义内容了

vue 官方推荐Nuxt.js 服务端渲染尝试!

2017-10-18admin阅读(2488)评论(0)

安装

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。

项目安装

1
$ vue init nuxt-community/starter-template <project-name>

安装完成后, 进入项目!

安装依赖: npm install

启动项目!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default {
  head: {
    title: '哈哈哈~',
    meta: [
      { hid: 'description', name: 'description', content: 'About page description' }
    ]
  },
  serverCacheKey () {
    // Will change every 10 secondes
    return Math.floor(Date.now() / 10000)
  },
  asyncData ({ req, params }) {
    // We can return a Promise instead of calling the callback
    return axios.get('https://jsonplaceholder.typicode.com/posts')
    .then((res) => {
      return { posts: res.data.slice(0, 5) }
    })
  },
  components: {
    Logo
  }
}

直接设置head 即可设置SEO相关信息!

  • 上一页
  • 1
  • ···
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • ...
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2024年11月
一 二 三 四 五 六 日
« 十    
 123
45678910
11121314151617
18192021222324
252627282930  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 8年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2024 雅荷心语博客   网站地图