@node.js學(xué)習(xí)心得TOC

#node.js是構(gòu)建在Chrome v8 引擎上的一個(gè)javascript 運(yùn)行環(huán)境

說到node.js首先是學(xué)會(huì)安裝鹦付，win+r cmd進(jìn)入dos命令窗口

//1初始化環(huán)境目錄

npm init

//2確認(rèn)版本信息點(diǎn)擊enter確認(rèn)直到is this ok 出現(xiàn)

npm init -y//默認(rèn)配置信息

npm install

//引用時(shí)

var fs=require('fs‘);

var http=require('require);

//創(chuàng)建服務(wù)器

http.creatSevers(function(req,res){

})

//讀取文件

fs.readFile('文件名','utf-8',function(err,data){

if(!err){

}

else{

}

})

//寫入信息

fs.writeFile('路徑',寫入數(shù)據(jù),回調(diào)函數(shù))厕氨；//在文件不存在時(shí)可以創(chuàng)建文件

//若想追加而不是覆蓋,加入?yún)?shù){flag:'a'}

//安裝淘寶鏡像

npm install -g cnpm -- registry=http://registry.npm .taobao.org

//安裝nodejs提示工具

npm install --save -dev@types/node

//解決跨域

res.writeHead(200,{'Content-Type':'text-html;charset=utf-8'})\

//向服務(wù)器發(fā)起請(qǐng)求

fetch(路徑汪诉，方法)//fetch()的返回值為promise對(duì)象所以經(jīng)常采用

fetch().then().then();

Express框架

//首先我們要安裝express

npm init

cnpm install express --save

用 get接受get請(qǐng)求post接受post請(qǐng)求鳄橘，res.send();//向客戶端返回?cái)?shù)據(jù)并結(jié)束

//express框架里采用路由分發(fā)機(jī)制,在一個(gè)js文件可以存在多個(gè)錄由

var express=require(‘express’);var app=express();

app.get(’/’,function(req,res){req.query能拿到get請(qǐng)求傳來的參數(shù)});app.post(’/’,function(req,res){req.body能接受post請(qǐng)求傳來的的參數(shù)});

POST請(qǐng)求在客戶端一定要帶上請(qǐng)求頭headers:{‘content-Type’:‘a(chǎn)pplication/x-www-form-url.encoded’}

統(tǒng)一目錄開發(fā) ，協(xié)同開發(fā)要使用腳手架組件工具express-generator；

安裝，npm install express-generator -g

使用,express -h（打出常見命令）-v(模板引擎) -c(設(shè)置CSS) dir查看當(dāng)前目錄所有文件

所有包 cnpm install

express --view =pug 文件名

bin目錄為啟動(dòng)目錄 node-modules為所有包，public里放前端靜態(tài)資源routes目錄存放錄由文件

var express=require(‘express’);

var router=express.Router();

//在錄由寫完后要導(dǎo)出module.exports=router;

下面就是我寫的登陸錄由

let express=require('express');

let router=express.Router();

let fs=require('fs');

let Person=require('../moudel/person');

router.post('/',function(req,res,next){

let loginer=req.body;

console.log(loginer.username+"第一次");

let obj1={};

fs.readFile('./data/myData.txt','utf-8',(err,data)=>{

? ? if(!err){

? ? ? ? console.log('讀取本地注冊(cè)信息成功第二次');

? ? ? ? let dat=JSON.parse(data);

? ? ? ? for(let i in dat){

? ? ? ? if(dat[i].username==loginer.username&&dat[i].pwd==loginer.pwd){

? ? ? ? ? ? obj1.msg='登陸成功';

? ? ? ? ? ? obj1.code = 204;

? ? ? ? }else if(dat[i].username!=loginer.username&&dat[i].pwd==loginer.pwd){

? ? ? ? ? ? obj1.msg = '該用戶不存在仅叫！';

? ? ? ? ? ? ? obj1.code = 204;

? ? ? ? }

? ? ? ? else if(dat[i].username==loginer.username&&dat[i].pwd!=loginer.pwd){

? ? ? ? ? ? obj1.msg = '密碼錯(cuò)誤帜篇！';

? ? ? ? ? ? obj1.code = 206;

? ? ? ? }

? ? }

? ? }

? else{

? ? console.log('讀取本地注冊(cè)信息失敗。诫咱。笙隙。。坎缭。竟痰。第三次');

? }

? console.log(obj1.code+"第三次");

? res.write(JSON.stringify(obj1.msg));

? res.end();

});

});

router.post('/regist',function(req,res,next){

let parmes=req.body;

console.log(parmes);

// fs.readFile('./data/myData.txt','utf-8',(err,data)=>{

//? ? req.body

// })

// console.log(parmes+"測(cè)試");

saveData(parmes,function(obj){

? ? res.write(JSON.stringify(obj.msg));//將數(shù)據(jù)反應(yīng)給前端

? ? res.end();

});

});

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

? ? let obj={};

? ? let obj1={};

? ? fs.readFile('./data/books.json','utf-8',(err,data)=>{

? ? ? ? if(!err){

? ? ? ? ? ? obj.data=JSON.parse(data);

? ? ? ? ? ? obj1.resultcode=obj.data.resultcode;

? ? ? ? ? ? obj1.reason=obj.data.reason;

? ? ? ? ? ? obj1.result=obj.data.result;

? ? ? ? ? ? res.write(JSON.stringify(obj1));

? ? ? ? ? ? res.end();

? ? ? ? }else{

? ? ? ? ? ? obj1.resultcode=0;

? ? ? ? ? ? obj1.reason="err";

? ? ? ? ? ? obj1.result="";

? ? ? ? ? ? res.write(JSON.stringify(obj1));

? ? ? ? ? ? res.end();

? ? ? ? }

? ? });

})

function saveData(parm,fn){

? ? let obj={};

? ? let username=parm.username;

? ? let pwd=parm.pwd;

? ? let tel=parm.tel;

? ? let sex=parm.sex;

? ? let person=new Person(username,pwd,tel,sex);

? ? getData(function(dataArr){

? ? ? ? dataArr.push(person);

? ? ? ? console.log(JSON.stringify(dataArr));

? ? ? ? console.log('------------------------------------');

? ? fs.writeFile('./data/myData.txt',JSON.stringify(dataArr),err=>{

? ? ? ? if(!err){

? ? ? ? ? ? obj.code=202;

? ? ? ? ? ? obj.msg="注冊(cè)成功";

? ? ? ? }

? ? ? ? else{

? ? ? ? ? ? obj.code=502;

? ? ? ? ? ? obj.msg="注冊(cè)失斍┕场！";

? ? ? ? }

? ? ? ? fn(obj);

? ? })

? ? });

}

function getData(fn){

? ? let arr=[];

? ? fs.readFile('./data/myData.txt','utf-8',(err,data)=>{

? ? ? ? if(!err){

? ? ? ? ? ? console.log('本地注冊(cè)信息',data);

? ? ? ? ? ? arr=JSON.parse(data);

? ? ? ? }

? ? ? ? else{

? ? ? ? ? ? console.log('讀取本地注冊(cè)信息失敗');

? ? ? ? }

? ? ? ? fn(arr);

? ? });

}

module.exports = router;

件

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

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">

? ? <link rel="stylesheet" >

? ? <title>書城</title>

? ? <style>

? ? *{padding:0;margin:0;}

? ? #box{

? ? ? ? box-sizing: border-box;

? ? ? ? width:300px;

? ? ? ? height:330px;

? ? ? ? border: 1px solid #cccccc;

? ? ? ? margin-left:50px;

? ? ? ? margin-top: 50px;

? ? ? ? list-style: none;

? ? ? position: relative;

? ? }

? ? #box li{

? ? ? ? box-sizing: border-box;

? ? ? ? width:300px;

? ? ? ? height:100px;

? ? ? ? line-height: 100px;

? ? ? ? padding-left: 20px;

? ? ? ? background-color: rgba(243, 52, 19, 0.8);

? ? ? ? border-bottom: 1px solid white;

? ? }

? ? #box li input{

? ? height:30px;? width:200px;

? ? border: 1px solid transparent;

? margin-left: 20px;}

? ? #box li label i{

? ? ? ? font-size: 30px;

? ? }

? ? #bt{

? ? ? ? width: 250px;

? ? ? ? height:35px;

? ? ? ? border: 1px solid transparent;

? ? ? ? margin-left:50%;

? ? ? ? margin-top:50px;

? ? ? ? transform: translate(-50%,-50%);

? ? ? ? background-color: rgb(247, 80, 14);

? ? ? ? color: white;

? ? ? ? font-size: 20px;

? ? }

? ? #box a{

? ? ? ? text-decoration: none;position: absolute;

? ? ? ? }

? ? .lose a{

? ? ? ? ? ? margin-top:20px;left: 20px;

? ? ? ? }

? ? ? ? .regist a{

? ? ? ? ? ? right: 20px; margin-top:20px;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <ul id="box">

? ? ? ? <li> <label for=""><i class="iconfont icon-denglu2"></i></label><input type="text" placeholder="用戶名" class="uname"></li>

? ? ? ? <li><label for=""><i class="iconfont icon-mima"></i></label><input type="password" placeholder="密碼" class="upwd"></li>

? ? ? ? <button id="bt"> 登錄</button>

? ? ? ? ? <div class="lose">

? ? ? ? ? ? ? ? <a href="">忘記密碼</a>

? ? ? ? ? ? </div>

? ? ? ? <div class="regist">

? ? ? ? ? ? <a href="./regist.html">注冊(cè)新用戶</a>

? ? ? ? </div>

? </ul>

? <script>

? document.querySelector('#bt').onclick=function(){

let username=document.querySelector('.uname').value.trim();

let pwd=document.querySelector('.upwd').value.trim();

let url='http://127.0.0.1:3000';

let myUrl=`${url}/login`;

// 判斷輸入框的值

if(username===""||pwd===""){

? ? alert('輸入框不能為空');

}

fetch(myUrl,{

? ? method:"POST",

? ? body:`username=${username}&pwd=${pwd}`,

? ? headers:{

? ? ? ? ? ? ? 'Content-Type':"application/x-www-form-urlencoded"

? ? ? ? ? ? ? ? ? ? }

}).then(data=>data.json()).then(res=>{

? ? console.log(res);

? ? if(res=='登陸成功'){

? ? ? ? window.location.;

? ? }

})

}

? ? </script>

</body>

</html>