首先起一个node 服务 serve.js
http.createServer(function (req, res) {
// 将来做一些后台逻辑处理
}).listen(3000, () => {
console.log('listening 3000')
});
然后新建基本页面前端页面用于交互 index.html 这里使用了 bootstrap的样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//此处路径将css文件放于相同文件下 不然会找不到文件
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 row" style="margin-top: 30px;margin-bottom: 30px;">
<div class="col-md-5 ">
<label for="username">用户名</label>
<label>
<input type="text" id="username"/>
</label>
</div>
<div class="col-md-5">
<label for="password">密码</label>
<label>
<input type="password" id="password"/>
</label>
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-sm add">添加</button>
</div>
</div>
<ul class="list-group col-md-8">
</ul>
</div>
</div>
</body>
</html>
接着需要在serve.js中添加静态页面的访问逻辑
http.createServer(function (req, res) {
// 将来做一些后台逻辑处理
//处理静态页面
fs.stat('.' + pathname, function (err, stats) {
if (err) {
res.statusCode = 404;
res.end(`${pathname} not fount`)
} else if (stats.isFile()) {
res.setHeader('Content-Type', mime.getType() + ';charset=utf8');
fs.createReadStream('.' + pathname).pipe(res)
} else if (stats.isDirectory()) {
res.setHeader('Content-Type', 'text/html;charset=utf8');
let p = path.join('.' + pathname, './index.html');
fs.createReadStream(p).pipe(res)
}
})
}).listen(3000, () => {
console.log('listening 3000')
});
接着需要在serve.js中添加按符合resful的风格添加相应的接口
let http = require('http');
let fs = require('fs');
let url = require('url');
let path = require('path');
let mime = require('mime');
let user = [
{
id: 1, username: 'ywh', password: '你好123124'
}, {
id: 2, username: 'ywh2', password: '123456'
}];
http.createServer(function (req, res) {
let {pathname, query} = url.parse(req.url, true);
//处理后台
if (pathname === '/user') {
let id = query.id;
switch (req.method) {
case 'GET':
if (!id) {
res.setHeader("Content-Type", 'application/json;charset=utf-8');
res.end(JSON.stringify(user))
}
break;
case 'POST':
let str = '';
req.on('data', function (chunk) {
str += chunk
});
req.on('end', function () {
let user1 = JSON.parse(str);
user1.id = user.length ? user[user.length - 1].id + 1 : 1;
user.push(user1);
res.end(JSON.stringify(user1));
});
break;
case 'DELETE':
if (id) {
// 这里使用!=是由于前端传过来的数据是一个json
user = user.filter(item => item.id != id
)
;
res.end(JSON.stringify({}));
}
break;
case 'PUT':
break;
}
return
}
//处理静态页面
fs.stat('.' + pathname, function (err, stats) {
if (err) {
res.statusCode = 404;
res.end(`${pathname} not fount`)
} else if (stats.isFile()) {
res.setHeader('Content-Type', mime.getType() + ';charset=utf8');
fs.createReadStream('.' + pathname).pipe(res)
} else if (stats.isDirectory()) {
res.setHeader('Content-Type', 'text/html;charset=utf8');
let p = path.join('.' + pathname, './index.html');
fs.createReadStream(p).pipe(res)
}
})
}).listen(3000, () => {
console.log('listening 3000')
});
前端发起相应请求的方法(fetch)
<script>
(function () {
let oul = document.querySelector('.list-group');
let username = document.getElementById('username');
let password = document.getElementById('password');
let add = document.querySelector('.add');
let template = function (username, password, id) {
return `<li class="list-group-item">用户名：${username} 密码：${password}
<button class ='btn-danger btn-sm delete' style="float: right" data-id="${id}">
删除</button>
</li>`;
};
function render(data) {
let str = '';
data.forEach(item => {
str += template(item.username, item.password, item.id);
});
oul.innerHTML = str;
}
// 查询
fetch('/user').then(res => {
return res.json()
}).then(data => {
render(data)
}).catch(err => {
console.log(err)
});
// 添加用户
add.addEventListener('click', () => {
fetch('/user', {
method: "POST",
body: JSON.stringify({username: username.value, password: password.value})
}).then(res => {
return res.json()
}).then(data => {
let oDiv = document.createElement('div');
oDiv.innerHTML = template(data.username, data.password, data.id);
oul.appendChild(oDiv.firstElementChild);
}).catch(err => {
console.log(err)
})
}, false);
// 删除
oul.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
let id = e.target.dataset.id;
fetch(`/user?id=${id}`, {
method: "DELETE",
}).then(res => {
return res.json()
}).then(data => {
oul.removeChild(e.target.parentNode)
}).catch(err => {
console.log(err)
})
}
}, false)
})()
</script>
demo git地址
