1. 首先进行模块划分
模块化
2. node_modules模块里面放的东西是此次项目需要用到的第三方插件，是通过npm下载的文件，在这里需要下载的有
//首先进行npm的初始化
npm init -y
//下载bootstrap，进行页面的布局美化
npm install bootstrap --save
//下载art-template，进行后台收到数据返回给浏览器进行渲染
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");
//创建服务器
var server = http.createServer();
//开启服务器
server.on("request",function(req,res){
var url = req.url;
//得到当前请求的请求方式
var method = req.method;
//当读取根目录时，我们需要返回首页
if(url == "/" && method == "GET") {
fs.readFile("./views/index.html",function(err,data){
if(err) {
return res.end("失败");
}
//上面已经将首页的html结构读取出来的，但是没有数据，我们需要将data.json中的数据得到，并且通过模板引擎渲染到首页上
//得到data.json中的数据
fs.readFile("./data.json",function(err,herosData){
if(err) {
return res.end("失败");
}
var heros = JSON.parse(herosData.toString());
//将数据添加到模板中
var render = template.compile(data.toString());
var html = render(heros);
res.end(html);
});
});
} else if( url == "/add" && method == "GET") {
//得到新增页面，并且将内容响应到浏览器
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"
});
//接收用户提交过来的参数
//如果服务器要接收用户提交过来 的参数，需要使用两个事件
// data：浏览器提交参数到服务器时会触发这个事件
// 在它的回调函数中有一个参数chunck：是每次接收到的参数
// end：浏览器提交完参数以后会触发这个事件
var str = "";
req.on("data",function(chunck){
str += chunck;
});
req.on("end",function(){
// console.log(str);
//由于服务器将汉字进行了转码的处理，所以我们需要将转码后的结果重新转为字符串
// encodeURI:将路径进行转码（转为我们不认识的玩意）
// decodeURI：将路径进行解码（转为我们认识的中文）
//创建一个对象，用来接收参数
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属性
//先将原来所有的数据得到
fs.readFile("./data.json",function(err,herosData){
var heros = JSON.parse(herosData.toString());
//得到heros中最后一条数据的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);
});
}
})
//开启监听
server.listen(3000,function(){
console.log("running");
});
6. 为了让node操作更加灵活方便，在全局下应该下载一个nodemon
npm install nodemon -g
7. 开启node服务(在相关目录的cmd下)
nodemon app.js
data.json 是模拟存放的数据，内容如下：
{
"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"
}
}
