react-redux-starter-kit 项目启动报错

 报错信息:  

D:\workspace\AAA                                                                                        
λ  npm start                                                                                            

> react-redux-starter-kit@3.0.1 start D:\workspace\AAA                                                  
> cross-env NODE_ENV=development node build/scripts/start                                               

i Starting server...                                                                                    
i Enabling webpack development and HMR middleware                                                       
events.js:182                                                                                           
      throw er; // Unhandled 'error' event                                                              
      ^                                                                                                 

Error: listen EADDRINUSE :::3000                                                                        
    at Object._errnoException (util.js:1021:11)                                                         
    at _exceptionWithHostPort (util.js:1043:20)                                                         
    at Server.setupListenHandle [as _listen2] (net.js:1344:14)                                          
    at listenInCluster (net.js:1385:12)                                                                 
    at Server.listen (net.js:1469:7)                                                                    
    at Function.listen (D:\workspace\AAA\node_modules\express\lib\application.js:618:24)                
    at Object.<anonymous> (D:\workspace\AAA\build\scripts\start.js:5:30)                                
    at Module._compile (module.js:624:30)                                                               
    at Object.Module._extensions..js (module.js:635:10)                                                 
    at Module.load (module.js:545:32)                                                                   
    at tryModuleLoad (module.js:508:12)                                                                 
    at Function.Module._load (module.js:500:3)                                                          
    at Function.Module.runMain (module.js:665:10)                                                       
    at startup (bootstrap_node.js:187:16)                                                               
    at bootstrap_node.js:608:3                                                                          
npm ERR! code ELIFECYCLE                                                                                
npm ERR! errno 1                                                                                        
npm ERR! react-redux-starter-kit@3.0.1 start: `cross-env NODE_ENV=development node build/scripts/start` 
npm ERR! Exit status 1                                                                                  
npm ERR!                                                                                                
npm ERR! Failed at the react-redux-starter-kit@3.0.1 start script.                                      
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.      

npm ERR! A complete log of this run can be found in:                                                    
npm ERR!     C:\Users\shwh\AppData\Roaming\npm-cache\_logs\2017-10-18T02_38_11_981Z-debug.log           

由于近几日几个项目来回切换,本地使用nvm for Windows做了版本管理,
当我再次切换为node最新版时,又爆了这个眼熟的错误,于是,我优先的查看了下端口号是否被占用,果然,端口被占用了。

老套路解决

D:\workspace\AAA
λ  netstat -aon|findstr :3000
  TCP    0.0.0.0:3000           0.0.0.0:0              LISTENING       3080
  TCP    [::]:3000              [::]:0                 LISTENING       3080
D:\workspace\AAA
λ  tasklist /fi "pid eq 3080"

映像名称                       PID 会话名              会话#       内存使用
========================= ======== ================ =========== ============
node.exe                      3080 Console                    2     13,968 K
D:\workspace\AAA
λ  tasklist /fi "pid eq 3080"

映像名称                       PID 会话名              会话#       内存使用
========================= ======== ================ =========== ============
node.exe                      3080 Console                    2     13,968 K
D:\workspace\AAA
λ  kill 3080
D:\workspace\AAA
λ  tasklist /fi "pid eq 3080"
信息: 没有运行的任务匹配指定标准。  

再次npm start,成功启动。

inline-block导致页面元素错位

OK,刚才在编码的时候发现页面上元素错位了,使用开发者工具查看了半天,没有发现有多余的像素。
如图所示:

很好,在经过深思熟虑,加上百度谷歌后,发现问题所在,因为子元素显示方式为行内块。而且没有定义对齐方式,所以导致了元素错位。
这种属于经验问题,好在这一个坑踩过了就不会再崴到脚了。
解决办法:
父元素样式:

font-size: 0;  
-webkit-text-size-adjust:none;

子元素样式:

display:inline-block;  
vertical-align:top;  

OK,在回头刷新页面,一切完好。

node开发环境报错error code ELIFECYCLE

OK,今早npm install particlesJS之后,再启动时,项目开发环境报了错,报错信息如下:

20 error code ELIFECYCLE
21 error errno 1
22 error react-redux-starter-kit@3.0.1 start: `cross-env NODE_ENV=development node build/scripts/start`
22 error Exit status 1
23 error Failed at the react-redux-starter-kit@3.0.1 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]  

由于自信自己代码没有问题,所以我很自然的删掉了我添加的代码,然后重新运行项目,果然如我所料,这个报错仍然存在。
于是,我开始怀疑人生,并且把 node_modules 目录删除,准备重新来过。
执行如下:

npm install  

OK, Suprise!
出现了新的 error log,如下:

npm ERR! sha1-9HGh2khr5g9quVXRcRVSPdHSVdU= integrity checksum failed when using sha1: wanted sha1-9HGh2khr5g9quVXRcRVSPdHSVdU= but got sha1-TvvarUqut1YrwQiMia0cMKtCRaw=. (2236 bytes)  

Google了一下,在github的issue中找到了解决方法:

npm cache clear --force  
npm install -g npm  

当我再次执行 npm start 的时候,一切都是完美的!!!
小插曲:
当我再次启动项目的时候报了个错说是3000端口被占用。
解决办法:

cmd  
netstat -aon|findstr :3000    // 查看占用3000端口的应用的pid  
tasklist /fi "pid eq 3132"    // 查看占用3000端口的应用3132是什么应用,发现是node  
kill 3132                     // 关闭该进程。

windows下 nginx启动失败,进程看不到nginx.exe

1、先找到nginx.exe同级目录下的logs目录,查看error.log日志文件。

2017/10/10 10:20:29 [emerg] 8664#7224: CreateDirectory() "D:\workspace\nginx-1.8.1/temp/client_body_temp" failed (3: The system cannot find the path specified)  

发现以上报错日志。
解决方案:
1、在nginx.exe同级目录下创建temp目录,并且设定权限可写入。
2、在temp目录下创建client_body_temp 目录,并设定权限可写入。

VSCODE 在写React组件的过程中,使用ES6的写法,组件名会有红色波浪线

VSCODE 在写React组件的过程中,使用ES6的写法,组件名会有红色波浪线,鼠标hover上去会看到一个警告。

[js] Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove 
this warning.

解决办法是在根目录创建一个 tsconfig.json 文件

// tsconfig.json    
{    
    "compilerOptions": {  
        "experimentalDecorators": true,  
        "allowJs": true  
    }  
}  

使用npm国内镜像

镜像使用方法(三种办法任意一种都能解决问题,建议使用第1或者第3种,将配置写死,下次用的时候配置还在):
1.通过config命令
npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)
2.命令行指定
npm –registry https://registry.npm.taobao.org info underscore
3.编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

JavaScript 一个原型继承的小demo

唔, 就不说其他的了,直接上代码吧.

use strict";  

var hello = function(){};  
hello.prototype.sayHello = function(name,say){  
    this.name = name;  
    this.say = say; 
    return alert(this.name + 'just say :' + this.say);  
};  

var hi = new Hello();  

hi.sayHello('iamorz','hello world!');

var bunjor = new Hello();  

bunjor.sayHello('comeriven','hihihi');  

可以自己实际运行一下试试看结果.

PHP和前端如何配合

首先我们需要一个PHP接口

假设有接口为 getUser.php

PHP
<?php
// 设置返回的数据格式为json
header('Content-Type: application/json');
// 链接数据库
$conn = mysqli_connect('127.0.0.1','root','123456','database',3306);
// 提交sql 命令
mysqli_query($conn, "SET NAMES UTF8");
$sql = "SELECT id,name,pass FROM table";
$result = mysqli_query($conn, $sql);
// 整理为json格式
$output = [];
while(($row=mysqli_fatch_assoc($result))!==NULL){
$output[] = $row;
}
$str = json_encode($output);
echo $str;
?>

继续阅读PHP和前端如何配合