yeoman创建webapp

1 . 全局安装yeoman

npm install -g yo

2 . 全局安装bower

npm install -g bower

3 . install 基本的项目模板(generator)

$ npm install generator-webapp -g

4 . 创建项目

yo webapp my-project
cnpm install & bower install

5 .gulp执行项目

gulp serve

webpack学习

一、什么是webpack

随着网页内容的越来越丰富，在我们的网页上我们经常要用到很多的脚本文件，比如幻灯模块的脚本、列表模块的脚本和搜索模块的脚本等等。如果不对这些文件进行统一的打包，整个页面就会非常的凌乱。

于是，webpack就诞生了，我们可以把它想象成一台洗衣机+烘干机+叠衣机(据说岛国已经发明类似的机器人了)，我们可以把杂七杂八的衣服、裤子、袜子等等都丢进去，然后它就会帮我们洗干净、烘干、叠整齐了，一系列工作全自动完成，不需要我们亲自动手，怎么样，是不是很心动。

二、安装

//全局安装的作用是直接在命令行中使用
npm install -g webpack
//安装到项目目录，使用webpack的功能
npm install --save-dev webpack

三、创建项目

项目目录结构：

文件内容：
1. package.json
package.json 中包含各种所需模块以及项目的配置信息（名称、版本、许可证等）meta 信息。

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "just learn webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --content-base build --inline --hot"
  },
  "author": "Rick.Xu",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "node-sass": "^3.11.2",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "sass-loader": "^4.0.2",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }
}

webpack.config.js
webpack.config.js是webpack的配置文件

var webpack =require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin')

var path =require('path')


var static = path.resolve(path.resolve(__dirname), 'static')


module.exports = {
    entry: {
        index:'./static/javascript/index.js' //入口点
     },
    output: {
        path: path.resolve(__dirname,'dist'), //输出位置
        filename:'[name].js',                 //编译后的文件名
        publicPath:'./'                      //部署访问的路径
    },
    module: {
        loaders: [ 
         {test:/\.css$/,loader:'style!css'},
         {test:/\.scss$/,loader:"style!css!sass"} //sass加载器
      ]
     },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, './dist/index.html'), //编译后文件名
            template: './src/index.html',  //模板文件的位置
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency',
            chunks: ['manifest','vendor','index']//需要引入的Chunk，不配置就会引入所有页面的资源；index表示entry的key，说明该模板文件需要引入index.js
        }),
       new webpack.optimize.UglifyJsPlugin({    //压缩代码
            compress: {
           warnings: false
       },
       except: ['$super', '$', 'exports', 'require']    //排除关键字
      })
    ]
}

index.js
index.js是一个入口文件，该入口文件引用了两个模块module.js``index.scss

require('../stylesheet/index.scss');

document.write('webpack works.')
document.write(require('./module.js'))

模块module.js

module.exports='<br/>It works from module.js.'

模块index.scss
index.scss是一个样式文件

$myColor:blue;

body {
    color: $myColor;
}

四、编译

安装依赖

$ npm install

安装完成之后，我在项目路径下生成文件夹node_module
2. 编译打包

$ webpack

会在dist目录下生成文件index.html index.js,浏览器查看index.html,效果图如下

Node操作mysql

var http = require('http')
var mysql = require('mysql')

var connection = mysql.createConnection({
    host: '121.42.151.190',
    user: 'root',
    password: 'jkxyx205',
    database: 'medical'
})


http.createServer(function(req, res) {

    if ("/favicon.ico" !== req.url) {
        res.writeHeader(200, {"Content-Type": "text/plain"})

        connection.query("SELECT username, truename, email, mobile FROM user where id = '160' or id = '169'", 
            function(err, rows, fields) {

                rows.forEach(function(item) {
                    console.log(item.username);
                })

                res.write(JSON.stringify(rows));

                res.end()
            })
    }

}).listen(3000)

console.log("server start at port 3000... ");

Node小练习:自定义路由

注册页面login.html，通过用户名和密码验证成功后，跳向内容页index.html。index.html页面动态显示内容：admin 管理员

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        div.content {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <div class="content">
        <img src="../static/images/3.png" alt="">
        <h1>登录页面</h1>
        <form action="/loginCheck">
        <table>
            <tr>
                <td>username:</td>
                <td><input name="username"/></td>
            </tr>
             <tr>
                <td>password:</td>
                <td><input name="password"/></td>
            </tr>
             <tr>
                <td></td>
                <td><input type="submit" value="login">&nbsp;<input type="reset" value="reset"></td>
            </tr>
        </table>
        </form>
    </div>


</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容页面</title>
    <style>
        div.content {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <div class="content">
        <img src="../static/images/3.png" alt="">
        欢迎你，${username}, 角色：${ role }
    </div>
</body>
</html>

server.js

var http = require('http')
var url = require('url');

var Router = require('./router') //自定义路由模块


http.createServer(function(req, res) {
    if ("/favicon.ico" !== req.url) {
        try {
            Router.setErrorPage('./app/404.html');

            Router.map({
                '/login': {
                    'tpl':'./app/login.html'
                },
                '/loginCheck': {
                    'tpl':'./app/index.html',
                    'action': function(query) {
                        if (query['username'] === 'admin' && query['password'] === 'admin') {
                             this.data = query;
                             this.data.role = '管理员';
                             return true;
                        }
                        return '/login';
                     }
                }
            }, req, res);
        } catch(err) {
            res.writeHeader(200, {'content-Type': 'image/jpeg','charset': 'utf-8' });
            res.write('500 error');
        }

    }
    res.end('')
}).listen(3000)

console.log('server listen at ' + 3000);

router.js

var url = require('url')
const fs = require('fs');
var path = require('path');

var ROOT_PATH = path.resolve(__dirname);

module.exports = {
    setErrorPage(errorPage) { //设置错误页面
        this.errorPage = errorPage;
    },
    map: function(mapping, req, res) {
        var pathname = url.parse(req.url).pathname;
        if (/\.png$/.test(pathname)) { //处理图片
            res.writeHeader(200, {'content-Type': 'image/jpeg','charset': 'utf-8' });
            var img = ROOT_PATH + pathname;
            //If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.
            var data = fs.readFileSync(img); 
            res.write(data);
        } else { //处理页面
            res.writeHeader(200, {'content-Type': 'text/html','charset': 'utf-8' });

            var obj = mapping[pathname];

            var tpl = this.errorPage;

            var query = url.parse(req.url, true).query;

            var flag = (!obj.action) || obj.action(query); //回调函数

            if (obj && flag) {
                tpl = (flag === true ? obj.tpl : mapping[flag].tpl);
            }

            var html = fs.readFileSync(tpl, "utf-8");
            if (obj.data) { //动态网页
                for (var p in obj.data) {

                    var regExp = new RegExp("\\$\\{\\s*"+p+"\\s*\\}","gi");
                    html = html.replace(regExp,obj.data[p]);
                }    
            }
            res.write(html);
        }

    }
}

学习css中的宽度 px em rem

今天学习了css中的宽度，记录一下。
* px像素（Pixel）绝对长度单位。像素px是相对于显示器屏幕分辨率而言的；
* em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
* rem是CSS3中新添加的，相对于根的比例，但相对的只是HTML根元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html {
            /*1.  最小的字体大小是12px，默认的字体大小是16px*/
            font-size: 62.5%;  /*16px 62.5% = 10px */
        }

        #d { 
            font-size: 10em;  /*10 x 10px = 100px  */
            width: 100px;
            background-color: red;
        }
        #p1 {
            font-size: 2rem;
        }
        #p2 {
            font-size: 25px; /*固定宽度*/
        }
    </style>
</head>
<body>
    <div id="d">
        hello div
        <p id="p1">
            hello p1
        </p>
        <p id="p2">
            hello p2
        </p>
    </div>
    <script>
       var div = document.getElementById('d')
       var p1 = document.getElementById('p1')
       var p2 = document.getElementById('p2')
       alert(getComputedStyle(div,false).fontSize) //100px 相对于父元素的10倍
       alert(getComputedStyle(p1,false).fontSize)    //20px 相对于跟元素的2倍
       alert(getComputedStyle(p2,false).fontSize)    //固定宽度25px
    </script>
</body>
</html>

所以我们在写CSS的时候，需要注意两点：

1 . html选择器中声明Font-size=62.5%；
2 . 将你的原来的px数值除以10，然后换上em作为单位；

参考网站：http://www.cnblogs.com/leejersey/p/3662612.html

XHope

Stay hungry, stay foolish.