1. 首先進行模塊劃分
模塊化
2. node_modules模塊里面放的東西是此次項目需要用到的第三方插件，是通過npm下載的文件佑淀，在這里需要下載的有
//首先進行npm的初始化
npm init -y
//下載bootstrap耗拓，進行頁面的布局美化
npm install bootstrap --save
//下載art-template拇颅，進行后臺收到數(shù)據(jù)返回給瀏覽器進行渲染
npm install art-template --save
3. views模塊下index的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hero - Admin</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
<style>
.hero-list img {
width: 50px;
}
</style>
</head>
<body>
<header>
<div class="page-header container">
<h1>王者榮耀 <small>英雄管理器</small></h1>
</div>
</header>
<div class="container hero-list">
<a class="btn btn-success pull-right" href="/add">添加英雄</a>
<table class="table table-hover">
<thead>
<th>編號</th>
<th>名稱</th>
<th>性別</th>
<th>頭像</th>
<th>操作</th>
</thead>
<tbody id="tbody">
{{each heros}}
<tr>
<td>{{$value.id}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender}}</td>
<td></td>
<td><a href="#">查看</a> <a href="#">修改</a> <a href="#">刪除</a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
</html>
4. views模塊下add的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
margin: 0 auto;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<form action="/add" method="POST">
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性別</td>
<td><input id="man" type="radio" name="gender" value="男"><label for="man">男</label> <input type="radio" name="gender" id="woman" value="女"><label for="woman">女</label></td>
</tr>
<tr>
<td>圖片</td>
<td><input type="file" name="img"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="新增"></td>
</tr>
</table>
</form>
</body>
</html>
5. app.js的代碼如下：
//引用http核心模塊
var http = require("http");
var fs = require("fs");
var template = require("art-template");
//創(chuàng)建服務(wù)器
var server = http.createServer();
//開啟服務(wù)器
server.on("request",function(req,res){
var url = req.url;
//得到當(dāng)前請求的請求方式
var method = req.method;
//當(dāng)讀取根目錄時，我們需要返回首頁
if(url == "/" && method == "GET") {
fs.readFile("./views/index.html",function(err,data){
if(err) {
return res.end("失敗");
}
//上面已經(jīng)將首頁的html結(jié)構(gòu)讀取出來的乔询，但是沒有數(shù)據(jù)樟插，我們需要將data.json中的數(shù)據(jù)得到，并且通過模板引擎渲染到首頁上
//得到data.json中的數(shù)據(jù)
fs.readFile("./data.json",function(err,herosData){
if(err) {
return res.end("失敗");
}
var heros = JSON.parse(herosData.toString());
//將數(shù)據(jù)添加到模板中
var render = template.compile(data.toString());
var html = render(heros);
res.end(html);
});
});
} else if( url == "/add" && method == "GET") {
//得到新增頁面竿刁，并且將內(nèi)容響應(yīng)到瀏覽器
fs.readFile("./views/add.html",function(err,data){
if(err) {
return res.end("失敗");
}
res.end(data);
});
} else if( url == "/add" && method == "POST"){
res.writeHead(200,{
"content-type": "text/html;charset=utf-8"
});
//接收用戶提交過來的參數(shù)
//如果服務(wù)器要接收用戶提交過來 的參數(shù)黄锤，需要使用兩個事件
// data：瀏覽器提交參數(shù)到服務(wù)器時會觸發(fā)這個事件
// 在它的回調(diào)函數(shù)中有一個參數(shù)chunck：是每次接收到的參數(shù)
// end：瀏覽器提交完參數(shù)以后會觸發(fā)這個事件
var str = "";
req.on("data",function(chunck){
str += chunck;
});
req.on("end",function(){
// console.log(str);
//由于服務(wù)器將漢字進行了轉(zhuǎn)碼的處理，所以我們需要將轉(zhuǎn)碼后的結(jié)果重新轉(zhuǎn)為字符串
// encodeURI:將路徑進行轉(zhuǎn)碼（轉(zhuǎn)為我們不認識的玩意）
// decodeURI：將路徑進行解碼（轉(zhuǎn)為我們認識的中文）
//創(chuàng)建一個對象食拜，用來接收參數(shù)
var obj = {};
str = decodeURI(str)
var keyValues = str.split("&");
for(var i = 0 ; i < keyValues.length; i ++) {
var pro = keyValues[i].split("=");
obj[pro[0]] = pro[1];
}
//給對象添加一個id屬性
//先將原來所有的數(shù)據(jù)得到
fs.readFile("./data.json",function(err,herosData){
var heros = JSON.parse(herosData.toString());
//得到heros中最后一條數(shù)據(jù)的id
// console.log(heros);
var id = heros.heros[heros.heros.length - 1].id + 1;
obj.id = id;
//將對象添加到heros中
heros.heros.push(obj);
//將新的對象寫入到data.json中
fs.writeFile("./data.json",JSON.stringify(heros,null," "),function(err){
if(err) {
return res.end("新增失敗");
}
res.end("<script>alert('新增成功');window.location='/'</script>");
});
});
});
} else if (url.indexOf("/node_modules") == 0 || url.indexOf("/img") == 0) {
var path = "." + url;
fs.readFile(path,function(err,data){
if(err) {
return res.end("失敗");
}
res.end(data);
});
}
})
//開啟監(jiān)聽
server.listen(3000,function(){
console.log("running");
});
6. 為了讓node操作更加靈活方便鸵熟，在全局下應(yīng)該下載一個nodemon
npm install nodemon -g
7. 開啟node服務(wù)(在相關(guān)目錄的cmd下)
nodemon app.js
data.json 是模擬存放的數(shù)據(jù)，內(nèi)容如下：
{
"heros": [
{
"id": 1,
"name": "亞瑟",
"gender": "男",
"img": "/img/1.jpg"
},
{
"id": 2,
"name": "李白",
"gender": "男",
"img": "/img/2.jpg"
},
{
"id": 3,
"name": "安奇拉",
"gender": "女",
"img": "/img/3.jpg"
},
{
"id": 4,
"name": "虞姬",
"gender": "女",
"img": "/img/4.jpg"
},
{
"name": "李白",
"gender": "男",
"img": "wj.jpg",
"id": 5
}
]
}
package.json 是在一開始npm init -y 之后自動生成的一個文件负甸，主要是放的一些依賴項
{
"name": "05hero",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "itcast_heima_zm",
"license": "ISC",
"dependencies": {
"art-template": "^4.12.2",
"bootstrap": "^3.3.7"
}
}
