gcc-4.4.7升级至gcc-5.3.0 后编译安装node-v4.5.0
yum -y install gcc gcc-c++
ArtTemplate_List 实例
ArtTemplate_List 实例1
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>basic-demo</title>
- <script src="../dist/template.js"></script>
- </head>
- <body>
- <div id="content"></div>
- <script id="test" type="text/html">
- {{if isAdmin}}
- <h1>{{title}}</h1>
- <ul>
- {{each list as value i}}
- <li>索引 {{i + 1}} :{{value}}</li>
- {{/each}}
- </ul>
- {{/if}}
- </script>
- <script>
- var data = {
- title: '基本例子',
- isAdmin: true,
- list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
- };
- var html = template('test', data);
- document.getElementById('content').innerHTML = html;
- </script>
- </body>
- </html
ArtTemplate_List 实例2
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>compile-demo</title>
- <script src="../dist/template.js"></script>
- </head>
- <body>
- <h1>在javascript中存放模板</h1>
- <div id="content"></div>
- <script>
- var source = '<ul>'
- + '{{each list as value i}}'
- + '<li>索引 {{i + 1}} :{{value}}</li>'
- + '{{/each}}'
- + '</ul>';
- var render = template.compile(source);
- var html = render({
- list: ['摄影', '电影', '民谣', '旅行', '吉他']
- });
- document.getElementById('content').innerHTML = html;
- </script>
- </body>
- </html>
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>basic-demo</title>
- <script src="../dist/template.js"></script>
- </head>
- <body>
- <h1>在javascript中存放模板</h1>
- <div id="content"></div>
- <script>
- /***** 小模版 *****/
- var source=''
- +'<ul>'
- + '{{each list as value i}}'
- + '<li>索引 {{i+1}} :{{value}}</li>'
- + '{{/each}}'
- +'</ul>';
- /***** 定义变关联逻辑代码片段(小模版) *****/
- var connectJs=template.compile(source);
- /***** 最终的数据源等于==逻辑代码关联数据 *****/
- var htmlData=connectJs({
- list: ['摄影', '电影', '民谣', '旅行', '吉他']
- });
- /***** 把最终处理后的数据源插入到页面 *****/
- document.getElementById('content').innerHTML=htmlData;
- </script>
- </body>
- </html>
实例访问地址:http://code.liuxinxiu.com/jstpl/artTemplate/demo/best.html
include嵌入子模板:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>include-demo</title>
- <script src="../dist/template.js"></script>
- </head>
- <body>
- <div id="content"></div>
- <script id="test" type="text/html">
- <h1>{{title}}</h1>
- {{include 'list'}}
- </script>
- <script id="list" type="text/html">
- <ul>
- {{each list as value i}}
- <li>索引 {{i + 1}} :{{value}}</li>
- {{/each}}
- </ul>
- </script>
- <script>
- var data = {
- title: '嵌入子模板',
- list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
- };
- var html = template('test', data);
- document.getElementById('content').innerHTML = html;
- </script>
- </body>
- </html>
理解部分(使用普通for循环加声明语法,进行数组遍历)1:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>AtrTemplate</title>
- </head>
- <body>
- <div id="content"></div>
- <script src="js/template-native.js"></script>
- <script id="test" type="text/html">
- <%for( i = 0; i < content.length; i++) {%>
- <h1><%=content[i].title%></h1>
- <p>条目内容 : <%=content[i].list%></p>
- <%}%>
- // 等同于普通的for循环,在普通的for循环上给每一行语法声明加上<% xx %>
- // 等同于普通的for循环,在普通的for循环上取值部分加上类似jsp的变量声明 <%= xx %>
- //for(i=0;i<content.length;i++){
- // <h1><%=content[i].title%></h1>
- // <p>条目内容 : <%=content[i].list%></p>
- //}
- </script>
- <script>
- /***** 自造数据,content为数组List便于测试循环 *****/
- var data={
- content:[
- {
- title: "artTemplate",
- list: "新一代 javascript 模板引擎",
- },
- {
- title: "特性",
- list: "性能卓越,执行速度快"
- }
- ]
- };
- /***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
- var html=template('test',data);
- /***** 选择页面Dom元素,插入处理后的数据 *****/
- document.getElementById("content").innerHTML=html;
- </script>
- </body>
- </html>
理解部分(使用普通for循环加声明语法,进行双层嵌套数组遍历)2:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>AtrTemplate -- 简介</title>
- </head>
- <body>
- <div id="content"></div>
- <script src="js/template-native.js"></script>
- <script id="listtemp">
- </script>
- <script id="test" type="text/html">
- //循环嵌套,循环数组里的数组
- <%for(i=0;i<content.length;i++){%>
- <h1><%=content[i].title%></h1>
- <ul>
- <%for(j=0;j<content[i].list.length;j++){%>
- <li><%=content[i].list[j]%></li>
- <%}%>
- </ul>
- <%}%>
- </script>
- <script>
- var data={
- content:[
- {
- title: "artTemplate",
- list:["新一代 javascript 模板引擎"]
- },
- {
- title: "特性",
- list: [
- "性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍",
- "支持运行时调试,可精确定位异常模板所在语句",
- " 对 NodeJS Express 友好支持",
- "安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)",
- " 支持include语句",
- "可在浏览器端实现按路径加载模板",
- "支持预编译,可将模板转换成为非常精简的 js 文件",
- "模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选",
- "支持所有流行的浏览器"
- ]
- }
- ]
- };
- /***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
- var html=template('test',data);
- /***** 选择页面Dom元素,插入处理后的数据 *****/
- document.getElementById("content").innerHTML=html;
- </script>
- </body>
- </html>
- /***** 格式化日期 *****/
- function formatDate(_strTime,_format){
- var date=new Date(_strTime);
- var paddNum=function(num){
- num+="";
- return num.replace(/^(\d)$/,"0$1");
- }
- //指定格式字符
- var cfg={
- yyyy:date.getFullYear() //年:4位
- ,yy :date.getFullYear().toString().substring(2) //年:2位
- ,M :date.getMonth() + 1 //月:如果1位的时候不补0
- ,MM :paddNum(date.getMonth()+1) //月:如果1位的时候补0
- ,d :date.getDate() //日:如果1位的时候不补0
- ,dd :paddNum(date.getDate()) //日:如果1位的时候补0
- ,hh :date.getHours() //时
- ,mm :date.getMinutes() //分
- ,ss :date.getSeconds() //秒
- }
- _format||(_format="yyyy-MM-dd hh:mm:ss");
- return _format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
- }
- formatDate("Tue Jul 16 01:07:00 CST 2013","yyyy-MM-dd ");
前端开发工程化—— webpack 的搭建与配置
webpack 是一个npm包,所以我们通过 npm 命令来全局安装:
- var path=require("path");
- var webpack=require('webpack');
- var ExtractTextPlugin=require("extract-text-webpack-plugin");
- /**** webpack.config.js ****/
- module.exports={
- context:__dirname+'/assets', //requre('a.js')的时候从哪个路径查找
- entry:{
- main:__dirname+"/assets/js/public/main.js",
- index:__dirname+"/assets/js/public/index.js"
- },
- /**** 新添加的module属性 ****/
- output:{
- path:__dirname+'/build/js/',
- filename:'[name].bundle.js', //模版基于entry的key
- publicPath:"/xfile/" //引用你的文件时考虑使用的地址(可设成http地址, 如:http://cdn.my.com)
- },
- /**** 新添加的module属性 ****/
- module:{
- loaders:[
- {
- test:/\.(jpg|png|svg)$/i,
- loaders:[
- 'image?...',
- 'url?limit=10000&name=img/[name].[hash:8].[ext]',
- ]
- },
- {
- test:/\.js$/,
- exclude:/(node_modules|bower_components)/,
- loader:'babel',
- query:{
- presets:['es2015'],
- plugins:['transform-runtime']
- }
- },
- {test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")},
- {test: /\.(jpg|png|svg)$/,loader:"url?limit=8192"},
- {test: /\.scss$/, loader:"style!css!sass"}
- ]
- },
- plugins:[
- //new webpack.optimize.CommonsChunkPlugin('common.js'),
- new ExtractTextPlugin("[name].css"),
- new webpack.ProvidePlugin({
- "jQuery":path.resolve(
- __dirname,
- "js/lib/jquery/jquery-1.8.3.js"
- ),
- "$":path.resolve(
- __dirname,
- "js/lib/jquery/jquery-1.8.3.js"
- )
- }),
- ]
- }
requireJS在Node平台安装、创建build实例、JS模块化加载、打包
requireJS在Node平台安装、创建build实例、JS模块化加载、打包
requireJS在Node平台上安装(推荐使用NodeJs绿色版环境套件):
- npm install -g requirejs
- D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>npm install -g requirejs
- npm http GET https://registry.npmjs.org/requirejs
- npm http 200 https://registry.npmjs.org/requirejs
- npm http GET https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz
- npm http 200 https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz
- D:\wmnp3\nodeJs\r.js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js
- D:\wmnp3\nodeJs\r_js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js
- requirejs@2.2.0 D:\wmnp3\nodeJs\node_modules\requirejs
- D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>
创建build.js (对应wmnp环境套件:D:\wmnp3\nodeJs\build\test.build.js)
- ({
- appDir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js',
- baseUrl:'test',
- dir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js/test-built',
- paths:{
- jquery:'empty:'
- },
- modules:[
- {
- name:'b'
- },
- {
- name:'c'
- },
- ]
- })
- /**********************************************
- "appDir": "./", /**** 应用根路径 ****
- "dir": "dist", /**** 打包的文件生成到哪个目录
- "optimize": "none", /**** 是否压缩 ****
- ***********************************************/
实例1(对应wmnp环境套件:http://127.0.0.1:3000/test_page)::
- /***************************************************************
- require.config(); 等同于 requirejs.config();
- ***************************************************************/
- requirejs.config({
- baseUrl:'/js/test',
- paths:{
- jquery:'../lib/jquery.min',
- hello:'hello',
- afile:'a',
- bfile:'b',
- cfile:'c',
- },
- shim:{
- only:{exports:'only'},
- /***** shim中hello源对应paths模块hello.JS *****/
- hello:{
- /***** 用exports导入当函数,必须换成 init 函数导入多个函数的文件 *****/
- init:function(){
- return{
- uinfos:"liuxinxiu",
- hello1:hello1,
- hello2:hello2
- }
- }
- }
- }
- });
- /******************************************************************************************************
- require和define 都可以加载依赖元素(都是用于加载依赖)
- 1. require 要用于加载类相关JS文件,build后不参与代码合并,所用到的资源只进行压缩,http自动请求其他文件.
- 2. define 真正意义上的模块化处理,load本文件及外文件内的代码片段,build后参与代码合并,http自动请求其他文件.
- ******************************************************************************************************/
- /***********************************************************
- require(['afile','bfile','cfile'],function(a,b,c){
- var x1=require("afile");
- var x2=require("bfile");
- var x3=require("cfile");
- });
- ***************************************************************/
- /**************************************************************
- define(['bfile'],function(b){
- console.log('run c.js :'+b.color+','+b.width);
- });
- ***************************************************************/
- requirejs(["http://code.liuxinxiu.com/php/Interface/getUserInfo.php?Jsoncallback=define"],
- function(data){
- //The data object will be the API response for the
- //JSONP data call.
- console.log(data);
- }
- );
- require(['jquery'],function(){
- /***** 调用后写入你的jq代码 *****/
- $("body").attr("yy","111");
- });
- /******************************************************************************
- require.config();
- 1. shim中exports定义好的函数可以用 (requirejs+define)引入并使用
- 2. shim中init定义好的函数则必须以用 (define)引入并使用
- *************************************************************************/
- requirejs(['only'],function(only){
- only();
- });
- define(['hello'],function(data){
- /***** 定义值直接取,函数直接调用 *****/
- console.log(data.uinfos);
- data.hello2();
- });
实例2(对应wmnp环境套件:http://127.0.0.1:3000/test_load)::
- requirejs.config({
- baseUrl:'/js/test',
- paths:{
- "afile":'a?y=1',
- "bfile":'b',
- "cfile":'c',
- "core1":'cores/core1',
- "core2":'cores/core2',
- "util1":'utils/util1',
- "util2":'utils/util2',
- "service1":'services/service1',
- "service2":'services/service2',
- }
- });
- /***************************************
- ****************************************/
- require(['c'],function(){
- //a();
- })
执行(压缩/打包):D:\wmnp3\nodeJs>node node_modules\requirejs\bin\r.js -o build\test.build.js
Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]
Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]
ExpressJS在Node环境上安装( 绿色版Node运行环境套件下载 ):
app.js 代码如下:
- /******************************************************
- *************** global modules ******************
- ******************************************************/
- var express=require('express');
- var path=require('path');
- var favicon=require('serve-favicon');
- var logger=require('morgan');
- var cookieParser=require('cookie-parser');
- var bodyParser=require('body-parser');
- var routes=require('./routes/index');
- //var redis=require('./routes/redis');
- var app=express();
- /******************************************************
- *************** view engine setup ******************
- ******************************************************/
- /****************** jade模版 *********************/
- /*******************************************************
- app.set('views',path.join(__dirname,'views/jade/'));
- app.set('view engine','jade'); //jade or ejs
- ********************************************************/
- /****************** ejs模版 *********************/
- app.set('views',path.join(__dirname,'views/ejs/'));
- app.set('view engine','ejs'); //jade or ejs
- /****************** ejs模版 *********************/
- /******************************************************
- ****************** routes setup ********************
- ******************************************************/
- // uncomment after placing your favicon in /public
- //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
- app.use(logger('dev'));
- app.use(bodyParser.json());
- app.use(bodyParser.urlencoded({extended:false}));
- app.use(cookieParser());
- app.use(express.static(path.join(__dirname,'public')));
- app.use('/',routes);
- /****************** routes setup *********************/
- /*******************************************************
- app.use('/redis',redis);
- app.use('/jsonp',routes);
- app.use('/login',routes);
- *************************************************/
- /******************************************************
- ****************** 服务错误处理 ********************
- ******************************************************/
- /***** catch 404 and forward to error handler *****/
- app.use(function(req,res,next){
- var err=new Error('404 Not Found');
- err.status=404;
- next(err);
- });
- // error handlers
- // development error handler
- /***** 通用错误处理程序 *****/
- if(app.get('env')==='development'){
- app.use(function(err,req,res,next){
- res.status(err.status||500);
- res.render('sys/error',{
- message:err.message,
- error:err,
- version:process.version
- });
- });
- }
- // production error handler
- // no stacktraces leaked to user
- app.use(function(err,req,res,next){
- res.status(err.status||500);
- res.render('sys/error',{
- message:err.message,
- error:{}
- });
- });
- /***** 通用错误处理程序 *****/
- module.exports=app;
routes/index.js 代码如下:
- /******************************************************
- *************** router *************************
- ******************************************************/
- var express=require('express');
- var router=express.Router();
- var url=require("url"); //解析GET请求
- var query=require("querystring"); //解析POST请求
- /************* GET home page demo *************/
- router.get('/',function(req,res,next){
- res.render('sys/index',{title:'Express'});
- });
- router.get('/jsonp',function(req,res,next){
- res.render('main/jsonp',{
- title:'jsonp'
- });
- });
- router.get('/login',function(req,res,next){
- res.render('main/login',{
- title:'The Entrar-shadow Website',
- fonts:'Member Login',
- username:'Liuxinxiu',
- });
- });
- router.get('/test_load',function(req,res,next){
- var build=req.query.build;
- res.render('test/test_load',{
- title:'build',
- build:build
- });
- });
- router.get('/test_page',function(req,res,next){
- var build=req.query.build;
- res.render('test/test_page',{
- title:'test_page',
- build:build
- });
- });
- /*
- app.get('/jsonp',function(req,res,next){
- res.jsonp({status:'jsonp'});
- });
- */
- /************* 自造Json数据 *************/
- var userData='PHN0eWxlPip7bWFyZ2luOjA7cGFkZGluZzowO31oMXtmb250LXNpemU6MTZweDt0ZXh0LWFsaWduOmNlbnRlcjsgbGluZS1oZWlnaHQ6NDVweDt9Ym9keXtjb2xvcjojMzMzO2ZvbnQtc2l6ZToxNHB4O2ZvbnQtZmFtaWx5OiJNaWNyb3NvZnRZYWhlaSI7YmFja2dyb3VuZDojQjdDQUNDO31kaXZ7Ym9yZGVyOjFweCBzb2xpZCAjNDA1RTdCOyBib3JkZXItYm90dG9tOjA7IHdpZHRoOjk1JTsgbWFyZ2luOjAgYXV0bztiYWNrZ3JvdW5kOiNmZmY7Y29udGVudDoiIjtkaXNwbGF5OnRhYmxlO2NsZWFyOmJvdGh9bGl7bGluZS1oZWlnaHQ6MzVweDtsaXN0LXN0eWxlOm5vbmU7d2lkdGg6MjUlO3RleHQtYWxpZ246Y2VudGVyO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICM0MDVFN0I7ZmxvYXQ6bGVmdDt9PC9zdHlsZT48aDE+5pyA6L+R6aOO5LqR5Lq65ZGY5ZCN5Y2VPC9oMT48ZGl2Pg0KCTx1bD4NCgkJPGxpPumjjua4heaJrDwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuiuuOW/l+mjnjwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7pOeLkOWGsjwvbGk+DQoJCTxsaT4xMTAyPC9saT4NCgkJPGxpPjIxPC9saT4NCgkJPGxpPjUyODE5OTAxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+aIkeihjDwvbGk+DQoJCTxsaT4xMTAzPC9saT4NCgkJPGxpPjIyPC9saT4NCgkJPGxpPjUyODE5OTkxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+ebiOebiDwvbGk+DQoJCTxsaT4xMTA0PC9saT4NCgkJPGxpPjI0PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS4nOaWueS4jei0pTwvbGk+DQoJCTxsaT4xMTA1PC9saT4NCgkJPGxpPjI2PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCTwvZGl2Pg==';
- var dataJson={status:1,message:"这是一个JSONP接口,success!",dataList:userData,JsonArray:[0,1,2,3,4,5]};
- /************* 处理GET请求(jsonp需判断参数单独处理) *************/
- router.get('/API/sendGet/jsonpInfo.do',function(req,res){
- //res.contentType('json');//返回的数据类型
- //res.writeHead(200,{"Content-Type":"text/json"});
- res.setHeader('Content-Type','text/json;charset=UTF-8');
- var params=url.parse(req.url,true).query; //解释url参数部分name=zzl&email=zzl@sina.com
- /**** 获取请求过来的跨域回调函数名称 ****/
- var reqQuery=req.query,Jsoncallback=req.query.Jsoncallback;
- /**** 如果有Jsoncallback的情况 ****/
- if(reqQuery&&Jsoncallback){
- //console.log(params.query.Jsoncallback);
- //res.jsonp({status:200,message:"这是一个JSONP接口",data:[]});
- //res.send(JSON.stringify({status:200,message:"success!这是一个JSONP接口",data:[]}));
- /**** 拼成一个JS字符串 ****/
- var str=Jsoncallback+'('+JSON.stringify(dataJson)+')';
- //res.json(str);
- //res.write(str);
- res.end(str);
- }
- /**** 没有Jsoncallback的情况 ****/
- else{
- res.json({status:200,message:"这是一个JSON接口",data:[]});
- }
- });
- /************* 处理POST请求(Body/x-www-form-urlencoded) **************/
- router.post('/API/sendPost/loginSubmit.do',function(req,res){
- var username=req.body.username;
- var password=req.body.password;
- //console.log(username!='');
- if((username&&password!='')){
- console.log("Username="+username+",password="+password);
- /**********************************************************************************
- /************** JSON.stringify(v) 和 res.json 都是格式数据 ********************/
- /*********************************************************************************
- res.json({status:1,info:"数据提交成功!",username:JSON.stringify(username)});
- /*********************************************************************************/
- res.json({status:1,info:"数据提交成功!",username:username});
- }else{
- res.end("0");
- }
- });
- module.exports=router;
ejs 模版:
- <!DOCTYPE html>
- <html>
- <head>
- <title>test</title>
- <meta charset="utf-8">
- <link type='text/css' href="/css/login/home.css" rel='stylesheet' />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- </head>
- <body>
- <h1>test/build=</h1>
- <%if(1+1===2){%>
- <h1><%= build %></h1>
- <%}%>
- </body>
- <%if(build==null){%>
- <!-- 引入require.js和入口文件||默认开放环境 -->
- <script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test/app_page.js"></script>
- <!--<script src="http://localhost:3000/js/test/yy.js"></script>-->
- <%}%>
- <%if(build!=null&&build==1){%>
- <!-- 引入require.js和入口文件||判断参数用于测试build后生产环境版本js -->
- <script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test-built/test/app_page.js"></script>
- <%}%>
- </html>
wmnp -- 相关描述、下载地址、更新日志
wmnp是Windows下Mysql+nginx+php+nodeJs 环境套件,具有绿色、快速、无需安装、等特点,适用于个人站长、中小企业、WEB程序开发人员,且压缩包体积很小。
[软件作者: 刘新修 最新版本: 1.0 最后修改: 2016.05.24 转载请注明原文链接:http://liuxinxiu.com/wmnp/]
=====================================================================
软件名称:wmnp
软件作者:刘新修
授权方式:免费软件
发布日期:2011年1月1日
更新日期:2016年5月24日
运行环境:WinNT/Win7/WinXP/Win2003
文件大小:30MB
github: https://github.com/liuxinxiu/wmnp/
=====================================================================
============================================================================
2016-05-24 【wmnp-1.0】适用服务器标准生产环境的环境套件!
mysql--nginx--php--nodeJs 相关版本如下:
谷歌Code历史版本:http://code.google.com/p/wmnp/downloads/list
================= wnmp-1.0 ========================
Mysql-5.1.48
Nginx-0.8.50
PHP-5.2.10
nodeJs-4.4.4
=================================================
JS FormData对象
通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台。这用jQuery的方法来说,就是serialize。但当我们使用Ajax提交时,这过程就要变成人工的了。因此,FormData对象的出现可以减少我们一些工作量。
想得到一个FormData对象:
var formdata = new FormData(); |
W3c草案提供了三种方案来获取或修改FormData。
方案1:创建一个空的FormData对象,然后再用append方法逐个添加键值对:
var formdata = new FormData(); |
formdata.append( "name" , "呵呵" ); |
formdata.append( "url" , "http://www.baidu.com/" ); |
方案2:取得form元素对象,将它作为参数传入FormData对象中!
var formobj = document.getElementById( "form" ); |
var formdata = new FormData(formobj); |
方案3:利用form元素对象的getFormData方法生成它!
var formobj = document.getElementById( "form" ); |
var formdata = formobj.getFormData() |
利用Formdata对象,我们可以使用原生js通过ajax实现异步上传图片,当然,现在已经有jquery的批量上传插件了,实现原理就是利用了Formdata。
php [urlencode urldecode] 函数
urlencode()编码:对字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+)。
shell截取字符串的方法
shell中截取字符串的方法有很多中,
${expression}一共有9种使用方法。
${parameter:-word}
${parameter:=word}
${parameter:?word}
${parameter:+word}
上面4种可以用来进行缺省值的替换。
${#parameter}
上面这种可以获得字符串的长度。
${parameter%word} 最小限度从后面截取word
${parameter%%word} 最大限度从后面截取word
${parameter#word} 最小限度从前面截取word
${parameter##word} 最大限度从前面截取word
上面4个就是用来截取字符串的方法了。
有了着四种用法就不必使用cut命令来截取字符串了
第一种又可以分为四种情况,下面一一介绍。
1、使用 # 号操作符。用途是从左边开始删除第一次出现子字符串即其左边字符,保留右边字符。用法为#*substr,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${str#*//}
得到的结果为www.你的域名.com/cut-string.html,即删除从左边开始到第一个"//"及其左边所有字符2、使用 ## 号操作符。用途是从左边开始删除最后一次出现子字符串即其左边字符,保留右边字符。用法为##*substr,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${str##*/}
得到的结果为cut-string.html,即删除最后出现的"/"及其左边所有字符
3、使用 % 号操作符。用途是从右边开始删除第一次出现子字符串即其右边字符,保留左边字符。用法为%substr*,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${str%/*}
得到的结果为http://www.你的域名.com,即删除从右边开始到第一个"/"及其右边所有字符
4、使用 %% 号操作符。用途是从右边开始删除最后一次出现子字符串即其右边字符,保留左边字符。用法为%%substr*,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${str%%/*}
得到的结果为http://www.你的域名.com,即删除从右边开始到最后一个"/"及其右边所有字符
第二种也分为四种,分别介绍如下:
1、从左边第几个字符开始以及字符的个数,用法为:start:len,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${var:0:5}
其中的 0 表示左边第一个字符开始,5 表示字符的总个数。
结果是:http:
2、从左边第几个字符开始一直到结束,用法为:start,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${var:7}
其中的 7 表示左边第8个字符开始
结果是:www.你的域名.com/cut-string.html
3、从右边第几个字符开始以及字符的个数,用法:0-start:len,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${str:0-15:10}
其中的 0-6 表示右边算起第6个字符开始,10 表示字符的个数。
结果是:cut-string
3、从右边第几个字符开始一直到结束,用法:0-start,例如:
str='http://www.你的域名.com/cut-string.html'
echo ${str:0-4}
其中的 0-6 表示右边算起第6个字符开始,10 表示字符的个数。
结果是:html
注:(左边的第一个字符是用 0 表示,右边的第一个字符用 0-1 表示)