nodejs 筆記
06-10
nodejs 筆記(1)nodejs定義運行在伺服器端軟體(2)作用<1>解析和執行JavaScript代碼<2>搭建http伺服器(3)特點<1>單線程多線程:php apache ,客戶端每發一個請求,apache就會創建一個進程去處理,優點:穩定性高,缺點:單兵作戰能力不強單線程: node ,客戶端發送的所有請求都交給服務端創建的同一個進程處理,優點:單兵作戰能力強,缺點:穩定性較差<2>非同步非阻塞I/O 同步: php: mysqli_query("select * from stu where name like "%ss%""); echo "1111"; 非同步: $.get("01.php",{name:sss},function(data){}); alert("ssss"); I/O:對數據的輸入和輸出 I inputO output<3>事件驅動:事件:當滑鼠或者鍵盤操作文本檔的時候,就會產生事件 onclick ondblclick onmouseover onmouseout ....事件驅動:當產生事件的時候,就會調用程序去處理事件,達到效果,處理的過程叫做事件驅動<4>穩定性較差<5>npm包管理工具npm包:a.定義通俗:類似於qq管家,360管家,appstore....專業:類似於linux下的yum和composerb.作用可以快速的安裝軟體(4)安裝windowslinuxconsole.log 伺服器輸出(5)http協議//1.引入node的內置 http模塊var http=require("http");//2.創建服務var server=http.createServer(function(req,res){// req=>請求報文(請求對象)-》request//res=>響應報文=》response//返迴響應數據res.end("ok");});//3.監聽埠server.listen(8080);//1.引入httpvar http=require("http");//2.創建服務var server=http.createServer(function(req,res){//獲取請求方法// var method=req.method;//獲取請求路徑// var url=req.url;//協議版本// var httpVersion=req.httpVersion;//獲取請求頭var headers=req.headers;//獲取主機// var host=headers.host;//獲取用戶表頭信息// var useragent=headers["user-agent"];console.log(useragent);res.end("ok");});//3.監聽埠server.listen(8090);1.響應(重點)2.靜態資源請求處理(重點)3.頁面處理(重點)4.表單處理(重點)5.npm 使用(重點)出現錯誤:防火牆關閉檢查網路請求(1)使用<1>初始化npmnpm init --yespackage.json用來記錄安裝信息1.url 模塊提供url的一些函數,解析和處理url引入url模塊url=require("url");url.parse()->解析url參數2.響應數據返回的類型(1)字元串(2)頁面res.write(`<!doctype html><html><head><meta charset="utf-8"><title>父窗口</title></head><body><div style="width:100%;height:200px;background-color:red"></div></body></html>`);注意:返回的頁面都是以反引號包含(3)json字元串在node js里對象是不能直接輸出的第一種:`{}`第二種:JSON.stringify 把對象轉換為字元串 輸出3.靜態資源jscss img 插件4.fs (文件系統模塊) 操作文件讀取靜態資源wamp php 可以自動讀取到靜態資源node 讀取靜態資源的時候 用fs模塊讀取(1)導入fsfs=require("fs");fs.readFile("靜態資源所在路徑",function(err,data){if(err) throw error;res.end(data);})5.查詢字元串模塊qs=》獲取url查詢的參數qs=require("querystring");qs.parse()->解析url查詢的字元串-》把參數轉換為json----------nodejs_03-------------1.npm 介紹和使用(重點)npm 類似於composer(操作wamp)安裝laravel:composer create-project laravel/laravel your-project-name --prefer-dist "5.1.*"安裝TP5:composer create-project topthink/think tp5--prefer-dist(2)mysql使用2.模塊化 (重點)3.node jsexpress 框架(重點)(1)安裝(2)使用4.模板引擎(ejs)(重點)node js 代碼和html代碼分離---------------------------------1.mysql 模塊的使用連接資料庫var connection = mysql.createConnection({host: "localhost",user: "root",password : "123",database : "o2o_15"});connection.connect();執行sql語句results 查詢的結果connection.query("select * from stu", function (error, results, fields) {if (error) throw error;console.log("result: ", results);res.end("ok");});關閉資料庫connection.end();預處理:sql="delete from table where id=?";綁定值deletes=[綁定值];返回預處理mysql.format(sql,deletes);2.npm 模塊化為什麼要使用模塊化:可以實現吧js代碼分配到不同的js里exports 把相對應得功能開放出去 例如:函數 json...3.模塊化引入文件夾默認訪問當前文件夾下的index.js4.框架: 能夠快速的實現項目需求phpThinkPHPLaravel ciyiizendframework wordpress..JS Jquerybootstrapnodeexpress5.路由其實就是指導工具,TP5 請求控制器下的方法時候,路由可以給規定請求方式和請求路徑使用路由:簡化url路徑,有利於網站收錄排名使用一旦匹配到路由規則 自動調用匿名函數 做處理app.get("路由規則",function(req,res){res.end();})6.響應數據返回的類型 :字元串頁面跳轉res.redirect();7.express模板引擎ejs 把html和nodejs代碼分離 (jade)smarty(1)安裝ejsnpm install ejs --save(2)導入ejsapp.use(express.static("node_modules"));(3)設置模板引擎類型app.set("view engine","ejs");(4)設置模板存放路徑app.set("views","./views");(5)載入模板res.render("模板的名字");nodejs_042.學生信息管理模塊(重點)//引入expressvar express=require("express");//表單處理工具var formidable=require("formidable");//導入mysqlvar mysql=require("mysql");//引入urlvar urlTool=require("url");//引入cookie-parservar cookieParser=require("cookie-parser");//創建應用var app=express();//讀取靜態資源app.use(express.static("node_modules"));//設置模板引擎類型app.set("view engine","ejs");//設置模板路徑app.set("views","./view");//使用cookie-parserapp.use(cookieParser());//配置資料庫var connection = mysql.createConnection({host: "localhost",user: "root",password : "123",database : "o2o_19"});//連接資料庫connection.connect();//設置路由app.get("/login",function(req,res){// res.end("ok");//載入模板res.render("login");});//設置路由app.post("/dologin",function(req,res){//實例化var form = new formidable.IncomingForm();//解析參數form.parse(req, function(err, fields, files) {//獲取 name 和passvar name=fields.name;var pass=fields.pass;//檢測用戶名connection.query("select * from stu where name=""+name+""", function (error, results, fields) {if (error) throw error;// console.log("The solution is: ", results[0].solution);if(results.length<=0){//設置字符集{charset:utf8}res.setHeader("content-//type","text/html;charset=utf-8");res.end("用戶名有誤");res.redirect("/login");}else{// res.end("ok");//對密碼做檢測// console.log(results[0].pass);if(pass==results[0].pass){//cookie設置//name cookie名maxAge 最大生存時間(單位為毫秒) httpOnly(使用http協議設置cookie)res.cookie("name", name, { maxAge: 900000, httpOnly: true })//跳轉到後台界面res.redirect("/index");}else{//跳轉到登錄界面res.redirect("/login");}}});});});//後台首頁app.get("/index",function(req,res){//對cookie 做檢測// cookie-parserif(!req.cookies.name){//跳轉到登錄界面res.redirect("/login");}res.end("this is admin");});//user 列表app.get("/user",function(req,res){//獲取信息connection.query("select * from stu", function (error, results, fields) {if (error) throw error;//載入模板 分配數據res.render("user",{users:results});});});//添加//載入添加模板app.get("/add",function(req,res){res.render("add");});//執行添加app.post("/insert",function(req,res){// res.end("ok");//獲取需要添加的信息var form = new formidable.IncomingForm();form.parse(req, function(err, fields, files) {var name=fields.name;var pass=fields.pass;//預處理sql="insert into stu (name,pass) values(?,?)";inserts=[name,pass];sql=mysql.format(sql,inserts);//執行sql語句 做數據插入connection.query(sql, function (error, results, fields) {if (error) throw error;// console.log(results);// res.end("ok");if(results.affectedRows>0){//跳轉到列表res.redirect("/user");}});});});//執行刪除app.get("/delete/:id.html",function(req,res){//獲取參數var id=req.params.id;// console.log(id);// res.end("ok");//預處理sql="delete from stu where id=?";deletes=[id];//返回預處理sql=mysql.format(sql,deletes);//執行sqlconnection.query(sql, function (error, results, fields) {if (error) throw error;//判斷受影響行數if(results.affectedRows>0){res.redirect("/user");}});});//執行修改app.get("/update",function(req,res){//獲取路徑var url=req.url;//解析url //獲取參數 id newVvar params=urlTool.parse(url,true).query;// console.log(params);//執行sql語句 update stu set name=newV where id=idconnection.query("update stu set name=""+params.newV+"" where id=""+params.id+""", function (error, results, fields) {if (error) throw error;if(results.affectedRows>0){//以json格式返回res.json({"msg":"ok","status":1});}else{res.json({"msg":"error","status":0});}});});//監聽的埠app.listen(8080);<!doctype html><html><head><meta charset="utf-8"><title>列表</title><link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.min.css"><script type="text/javascript" src="/jquery/dist/jquery.min.js"></script></head><body><a href="" class="btn btn-success">查看信息</a>|<a href="/add" class="btn btn-success">添加信息</a><hr><table class="table table-bordered table-hover"><tr><th>ID</th><th>用戶名</th><th>密碼</th><th>操作</th></tr><%for(var i=0;i<users.length;i++){%><tr><td><%=users[i].id%></td><td class="username"><%=users[i].name%></td><td><%=users[i].pass%></td><td><a href="/delete/<%=users[i].id%>.html" class="btn btn-info">刪除</a></td></tr><%}%></table></body><script type="text/javascript">var flag=false;// alert($);$(".username").dblclick(function(){if(flag) return ;flag=true;//獲取需要修改的值p=$(this).html();// alert(p);//插入inputinput=$("<input type="text"class="form-control"/>");//設置value值input.val(p);$(this).empty();//== innerHTML=null//內部插入$(this).append(input);var td=$(this);//失去焦點input.blur(function(){//獲取修改以後的值newV=$(this).val();//獲取idid=$(this).parents("tr").find("td:first").html();// alert(newV+":"+id);//Ajax$.get("/update",{newV:newV,id:id},function(data){// alert(data.msg);if(data.status==1){alert("修改成功");td.html(newV);}else{alert("修改失敗");}},"json");flag=false;});})</script></html><!doctype html><html><head><meta charset="utf-8"><title>添加</title><link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.min.css"></head><body><button class="btn btn-success">用戶添加</button><form action="/insert" method="post"><div class="form-group"><label>用戶名:</label><input type="text" name="name" class="form-control"></div><div class="form-group"><label>密碼:</label><input type="text" name="pass" class="form-control"></div><input type="submit" value="提交" class="btn btn-info"></form></body><script type="text/javascript"></script></html>3.socketio 介紹-------------------1.express 設置cookieres.cookie("cookie名字", "值", { maxAge: 900000, httpOnly: true })maxAge 過期時間(單位為毫秒)httpOnly 只能在請求頭裡設置cookie2.cookie 檢測(1)安裝cookie-parser(2)引入cookie-parservar cookieParser=require("cookie-parser");(3)app.use(cookieParser())(4) req.cookies.cookie的名字3.遍曆數據載入模板和分配數據res.render("模板",{user:數據值})數據的遍歷<%for(var i=0;i<user.length;i++){%><%=user[i].name%><%}%>4.sql預處理(1)準備sqlsql="insert into stu values(?????)";(2)綁定值inserts=[值];(3)返回預處理mysql.format(sql,inserts);5.node js 返回的json格式的響應數據res.json({msg:"ok"});
推薦閱讀:
推薦閱讀:
※林文采《愛的智慧》講座筆記
※前15筆記
※莫煩老師,DQN代碼學習筆記
※風水筆記(十三)
※事實真相!學好記好的一個訣竅:上課不記筆記,縮小複習範圍!