learn Nodejs & Express & MongoDB

Ref: http://lonka.github.io/blog/2016/08/18/ng2/ng2-cli-quickstart/
  http://www.imooc.com/article/6179


remove Nodejs
del %USERPROFILE%\.npmrc
rmdir /s/q "c:\Program Files\nodejs"
rmdir /s/q "%APPDATA%\npm"
rmdir /s/q "%APPDATA%\npm-cache"

安装Nodejs v6.2.2(npm3) & Visual Studio Code

安装
npm install -g gulp yo webpack rimraf
npm install -g typescript typings angular-cli
npm install -g eslint tslint

npm install -g angular-cli gulp yo webpack rimraf typescript typings eslint tslint

ng new demo1
cd demo1
npm install
 --- Error: Cannot find module ‘exists-sync' 这是1.0.0-beta8的issue
ng build
ng serve  (-prod 同时关闭live Reload)
 -- http://localhost:4200
 -- http://localhost:49152(live Reload）
ng generate component header  //直接在「\app\」下加入一個 Component 名為 header
ng generate service search



ng build   //以下命令可以將專案發行至 「\dist」 中
Ref: http://lonka.github.io/blog/2016/08/18/ng2/ng2-cli-quickstart/
 REF: http://www.imooc.com/article/6179

npm init --yes //create package.json in the current fold.
npm i md5-node  --save //write into the dependencies of package.json
npm i silly-datetime --save-dev  //write into the devDependencies of package.json

npm install

用 npm scripts 来构建前端项目的尝试

REF: http://www.imooc.com/article/6179
什么是 npm Scripts
Node.js 项目下一般都有一个 package.json 文件，文件的内容类似这样：
{
  "name": "node-js-sample",
  "version": "0.2.0",
  "description": "A sample Node.js app using Express 4",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.13.3"
  },
  "engines": {
    "node": "4.0.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/heroku/node-js-sample"
  },
  "keywords": [
    "node",
    "heroku",
    "express"
  ],
  "author": "Mark Pundsack",
  "contributors": [
    "Zeke Sikelianos <zeke@sikelianos.com> (http://zeke.sikelianos.com)"
  ],
  "license": "MIT"
}
其中，
"scripts": {
  "start": "node index.js"
}
即为 npm Scripts。
npm Scripts 是用定义来一些任务的。我们在命令行中执行 npm run 任务名，即可执行这个命令。如，在上面的例子中，如果在命令行中执行
npm run start
即会执行 start 对应的 node index.js.
用 npm Scripts 的优势 npm Scripts 中的任务可以调用命令行中的 API。换种说法，所有能在命令行中用的命令都可以在 npm Scripts 中用。是不是有点小激动~
例如，删除某个文件夹下的所有文件，可以这么写
"scripts": {
  "remove": "rm -rf 文件夹路径"
}
其中， rm -rf 文件夹路径 为 Unix/linux 下命令行中删除文件夹的命令。当然 Windows 并不支持该命令。要做到跨平台。可以用第三包rimraf。在你全局安装了 rimraf（npm -g i rimraf）后，配置
"scripts": {
  "remove": "rm -rf 文件夹路径"
}
执行 npm run remove 就能做到在不同平台都能删除文件夹。
如用用 Gulp 来做同样的事，就只能找 Gulp 的插件来做了（Grunt 也一样）。
进入正题 我做了一个前端脚手架项目:front-end-scaffold(还处于 Alpha 状态)。下面具体介绍，用 npm Scripts 来构建该项目。
开发阶段 主要做这几件事：
  • 启动静态服务器来查看做好的页面。用 Nodejs 的包 anywhere。之所以用静态服务器而不是直接在文件中打开 .html 文件的原因是：在文件中打开，页面的协议是 file://，如果该页面会在 JS 中加载一些资源或模拟 aJax 接口，其协议是 http:// ，因为协议不同（跨域）而加载失败。用静态服务器不会产生这个问题。
  • 监视 Sass 文件的变化。变化时，编译生成 CSS 以及 sourcemap。用 Compass。
  • 监视 ES6 文件的变化。变化时，编译生成 ES5 的 JS 以及 sourcemap。用 Webpack 和 Babel。
在 package.json 的配置如下
"scripts": {
  // 开发时所有要做的
  "start": "node_modules/.bin/npm-run-all --parallel start:server watch:sass watch:es6",
  "watch:sass": "compass watch",// 监视 Sass 文件的变化
  "watch:es6": "node_modules/.bin/webpack --watch -d",// 监视 ES6 文件的变化
  "start:server": "node_modules/.bin/anywhere 1520 -d src"// 启动静态服务器
}
开发时只需执行
npm run start
其中 Compass 需要先安装。其他即几个在安装该项目的依赖时被安装
"devDependencies": {
    "npm-run-all": "1.6.0",
    "webpack": "1.12.14",
    "anywhere": "1.2.0"
}
发布时 主要做这几件事：
  • 删除发布文件目录。用 Nodejs 的包 rimraf。
  • 将 ES6 代码编译成 ES5 代码，合并（如果有需要的话），并压缩。用 Webpack + Babel。
  • 将 Sass 代码编译成 CSS 代码，并压缩。用 Compass。
  • 将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。用 Gulp。用 Gulp 是为了跨平台，如果不要跨平台，可以用当前平台的命令行的命令来做移动目录会更简单。
在 package.json 的配置如下
"scripts": {
  "prebuild": "npm run remove-dist", // 执行 npm run build 前会自动执行的任务
  // 发布时所有要做的
  "build": "npm run build:css && npm run build:js && npm run moveAssets",
  "build:js": "node_modules/.bin/webpack -p", // 将 ES6 代码编译成 ES5 代码，合并（如果有需要的话），并压缩。
  "build:css": "compass compile",
  "moveAssets": "node_modules/.bin/gulp",// 将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。
  "remove-dist": "node_modules/.bin/rimraf ./dist"// 删除发布文件目录。
}
发布时只需执行
npm run build


--------------
node js https://nodejs.org/download/release/v12.6.0/

npm install

npm run dev


---------------------------------------------------

create a project
1. cd to go to the project folder.
2. npm init -yes // npm init  to create the package.json file.
3. npm install express --save
  cnpm instal express --save
4. var express = require('express');
   //var app = new express();
   const app = express();
   
audio communication  www.rongcloud.cn 

runkit
https://runkit.com/jin/5d4053532c229e001367f457
   
https://www.npmjs.com/package/ejs

Events
var events = require('events');
var EventEmitter = new events.EventEmitter();
EventEmitter.on('to_mime', function(data){console.log(data);}); //get and handle an event 
EventEmitter.emit('to_mime','this is data'); //send an event.

fs
var fs = request('fs');
fs.readFile('tex.txt',function(err,data){
  EventEmitter.emit('fs-data',data);
});
fs.appendFile('log.txt',data +"\n",function(err){
  if(err){console.log(err);return;}
  console.log("OK");
});


res.params  //{aa:1} for  app.get('/news/:aa',funciton(){});

app.get('/user/:id', function(req, res){
    res.send('user' + req.params.id);
});


app.get('/people.json', function(request, response) {
  // We want to set the content-type header so that the browser understands
  //  the content of the response.
  response.contentType('application/json');

  // Normally, the data is fetched from a database, but we can cheat:
  var people = [
    { name: 'Dave', location: 'Atlanta' },
    { name: 'Santa Claus', location: 'North Pole' },
    { name: 'Man in the Moon', location: 'The Moon' }
  ];

  // Since the request is for a JSON representation of the people, we
  //  should JSON serialize them. The built-in JSON.stringify() function
  //  does that.
  var peopleJSON = JSON.stringify(people);

  // Now, we can use the response object's send method to push that string
  //  of people JSON back to the browser in response to this request:
  response.send(peopleJSON);
});

res.writeHead(200,{"Content-Type:text/html;charset='utf-8'"});
//res.write(data);
res.end();
//or
res.end(data);

ejs
//設置模板的位置，默認是views目錄
app.set('views',__dirname + '/statics');
<%- include public/header.ejs%>  /views/public/header.ejs 
app.locals['useinfo']=''; //全局變量
<%=useinfo%>
//靜態資源，靜態路由
const dist = path.resolve(__dirname, 'ui/www');
app.use(express.static(dist));
<img src="images/a.png"> // ui/www/images/a.png
app.use('/static',express.static('public')); //http://localhost/static/images/a.png

中間layer,相當java中的filter 或攔截器
1.把中間件放到所有的所有路由語句之前，就是像攔截器了， next參數，表示下傳。
2.把中間件放到所有的所有路由語句之之後，表示所有的路由都不匹配之後，如何處理。

//中間件， 表示匹配任何路由， 也是應用及中間件
app.use(funciton(req,res,next){ console.log(new Date()); next();});
app.use(funciton(req,res,next){ 
console.log(new Date()); 
  if(req.url=='/login'|| req.url=='/doLogin'){next();}
  else{
     if(session.userinfo&&session.userinfo.username!=''){
app.locals['useinfo']=session.userinfo; //全局變量
next();}
  else{res.redirect('/login');}
  }

});

app.get('/news', function(req,res,next){ next();} // 匹配多個路由

//放在app.js的最後
    //匹配所有路由之後，
    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
     //res.status(404).send('404 error.');
        let err = new Error('Not Found: ' + req.url);
        err.status = 404;
        next(err);
    });

Cookie 
cookie-parser 
npm install cookie-parser --save
app.use(cookieParser);
res.cookie('usename','cookie value',{maxAge:60000}); //third param 過期時長。60section
req.cookies.usename;
res.cookie{'rememberme','1',{expires:new Date(Date.now()+900000),httpOnly:true}};
多個域名共享
res.cookie{'usename','cookie value',{domain:'.aa.com',maxAge:60000}}
{path：'/news'，domain:'.aa.com',maxAge:60000} //指定路由
httpOnly：true,只能在服務端操作此cookie。

singed:true 加密  //cookie-parser中間件。 
app.use(cookieParser('密碼字符'));
req.signedCookies;

secure: 只支持https。

drivers/etc/hosts

session
  express-session:'1.15.5'
npm install express-session --save
var session = require("express-session");

app.use(session({
  secret:'keyboard cat', //加密的字符串，可以隨意設。
  resave:false, //default true.
  saveUninitialized:true, // default true
  name:"ss00" // defaul value is "connect.sid"
  //,
  //cookie:{maxAge:5000,secure:true} /* secure https才可以訪問這個cookie*/
  rolling：true// 每次請求后，從新計算cookie的過去時間。
}));

req.session.userinfo="testname";//set session
var name = req.session.userinfo; //get session

req.session.cookie.maxage=0;//change time period 
req.session.destroy(funciton(err){console.log(err);});


connect-mongo:1.3.2
npm install connect-mongo --save
var MonogoStore = require("connect-mongo")(session);
app.use(session({
  secret:'keyboard cat', 
  resave:false, 
  saveUninitialized:true, 
  store: new MogoStore({
    url:'mongodb://127.0.0.1:2717/student,
    touchAfter: 24*3600   //time period in seconds
 }
  )
  }));

>mongod --dbpath  F:\mongodb

>mongo
>show dbs
>use students
>show collections
>db.sessions.find()
>use shop
>show collections
sessions     //create a sessions table/document
user

>db.sessions.find()
>db.user.find()
>db.user.update({"username":"zhangsan"},{$set:{"password":"dafdafdda"}})

var DB = require('./modules/db.js');
in /modules/db.js
var MongoClient=require('mongodb').MongoClient;
var DbUrl='mongodb://localhost:27017/productmanage';
var ObjectID=require('mongodb').ObjectID;
 
function __connectDb(callback){
   MongoClient.connect(DbUrl,funciton(err,db){
     if(err){ console.log('database connect error');
    return;
  }
  callback(db);
   }
}
exports.ObjectID=ObjectID;

exports.find=function(collectionname,json,callback){
  __connectDb(function(db){
    var re=db.collection(collectionname).find(json);
 re.toArray(function(err,data){
    db.close();
    callback(err,data);
 });
  }
}
exports.update=function(collectionname,json1,json2,callback){
  __connectDb(function(db){
    db.collection(collectionname).updateOne(json1,{$set:json2},
 function(error,data){
   callback(error,data);
 }
 );
 
  }
}
exports.deleteOne=function(collectionname,json,callback){
  __connectDb(function(db){
    db.collection(collectionname).deleteOne(json,
 function(error,data){
   callback(error,data);
 }
 );
  }
}

var DB = require('./modules/db.js');
DB.find('user',{},function(err,data){});
app.get('/productedit',function(req,res){
 var id = req.query.id;
 DB.find('product',{"_id":new DB.ObjectID(id)},function(err,data){
   res.render('productedit',{ list:data[0] });
 });
});
  

md5-node:1.0.1 
https://www.npmjs.com/package/md5-node
npm install md5-node --save
var md5 = require('md5-node');
console.log(md5(123456));
 
nginx 負載均衡 

multiparty 
www.npmjs.com/package/multiparty
npm install multiparty
var multipart = require('multiparty');

var http = require('http');
var util = require('util');
 if (req.url === '/upload' && req.method === 'POST') {
    // parse a file upload
    var form = new multiparty.Form();
    form.uploadDir='upload'; //upload must be here.
    form.parse(req, function(err, fields, files){
      console.log(fields);
   console.log(files);
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
 
    return;
  }



{pic:[{fieldName:'pic',
     originalFilename:'5.jpg',//有上传图片， originalFilename:''//没有上传图片
  path:'upload\\ss.jpg',   //有上传图片， path：'upload\\sdfcamX'//没有上传图片
  headers:[Object],
  size:35848 //有上传图片， size：0//没有上传图片
   }
]}
//delete a file
fs.unlink(pic);


模块化
in ./routes/index.js



const express = require('express');



const router = express.Router();



router.get('/', function(req,res){



res.send('index');



});



module.exports = router;






in app.js
const index = require('./routes/index');
app.use('/test/index', index);

评论

发表评论

此博客中的热门博文

XML, XSL, HTML

The code in this section is that an XSLT transform is used to translate XML input data to HTML output. Ref: https://docs.oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html Note - The article1a.xsl , which is from in XSLT examples . The following code is for joy.  import java.awt.Desktop; import java.io.*; import java.net.URISyntaxException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import javax.xml.transform.Transformer; import javax.xml.transform.TransformerConfigurationException; import javax.xml.transform.TransformerException; import javax.xml.transform.TransformerFactory; import javax.xml.transform.dom.DOMSource; import javax.xml.transform.stream.StreamResult; import javax.xml.transform.stream.StreamSource; // For write operation import org.w3c.dom.Document; import org.w3c.dom.Element; import org.xml.sax.SAXException; public class Stylizer { ...
阅读全文

Input in element.eleme.io

Input Input data using mouse or keyboard. Input is a controlled component, it always shows Vue binding value . Under normal circumstances, input event should be handled. Its handler should update component's binding value (or use v-model ). Otherwise, input box's value will not change. Do not support v-model modifiers. ¶ Basic usage < el-input placeholder = "Please input" v-model = "input" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > Hide ¶ Disabled Disable the Input with the disabled attribute. < el-input placeholder = "Please input" v-model = "input" :disabled = "true" > </ el-input > < script > export default { data() { return { input : '' } } } </ script > ¶ Clearable Make the Input clearable with the...
阅读全文

Data URI是由RFC 2397 ACE

https://www.rfc-editor.org/rfc/rfc2397 http://codingpy.com/article/how-to-turn-your-browser-into-code-editor/ https://ace.c9.io/build/kitchen-sink.html https://c9.io/ https://angular-ui.github.io/ The "data" URL scheme Status of this Memo This document specifies an Internet standards track protocol for the Internet community, and requests discussion and suggestions for improvements. Please refer to the current edition of the "Internet Official Protocol Standards" (STD 1) for the standardization state and status of this protocol. Distribution of this memo is unlimited. Copyright Notice Copyright (C) The Internet Society (1998). All Rights Reserved. 1 . Abstract A new URL scheme, "data", is defined. It allows inclusion of small data items as "immediate" data, as if it had been included externally. 2 . Description Some applications that use URLs also have a need to embed (small...
阅读全文