node.js入门学习（四）--Demo

其他 2019-07-05 23:48:16 阅读次数: 0

需求：图书的增删改查，图书数据保存在data.json文件中。

1、Demo结构：

　　

2、首先下载安装node.js，配置环境变量：参考博客

3、项目初始化

　　1）创建项目根目录node-hello，进入到根目录node-hello，右键/在此处打开PowerShell窗口。

　　2）创建app.js文件。

　　3）在控制台输入命令：npm init -y，会自动创建package.json文件。

　　4）在控制台输入命令：npm install mime，会自动创建node_modules文件夹，并下载mime模块到该文件夹，还会自动生成package-lock.json文件。

　　5）npm install underscore，下载underscore模块。underscore的使用参考博客。

4、入口文件app.js

// 加载http模块
var http = require("http");
var fs = require("fs");
var path = require("path");
var mime = require("mime");
var url = require("url");
var querystring = require("querystring");
var _ = require("underscore");

// 创建一个http服务对象
http.createServer(function(req, res) {

    req.url = req.url.toLowerCase();
    req.method = req.method.toLowerCase();
    if (req.method === 'get') { 
        // 通过url模块的parse方法获取用户get请求提交的数据
        // 第二个参数为true时，urlObj的query属性就是所有的请求参数，类型是json对象
        var urlObj = url.parse(req.url, true);
        // console.log(urlObj);
    } 

    // 封装fender函数，将render函数挂在到res对象上；第二个参数是模板数据
    res.render = function (filename, templateData) {
        fs.readFile(filename, function(err, data) {
            if(err) {
                res.writeHead(404, 'not found', {'Content-Type': 'text/html; charset=utf-8'});
                res.end("404, not found.");
                return;
            }

            if (templateData) {
                var fn = _.template(data.toString("utf-8"));
                data = fn(templateData);
            }
            
            res.setHeader('Content-Type', mime.getType(filename));
            res.end(data);
        });
    };

    if(req.url === '/' || req.url === '/index') {
        res.render(path.join(__dirname, 'pages/index.html'));
    } 
    else if(req.url === '/list') {
        // 第一步：读取data.json文件中的数据，转换为list数组
        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}
            console.log("data.json原来的内容：" + data); // [{"name":"xxx","price":"xxx"}]]
            var bookList = JSON.parse(data || '[]'); // json数组

            // 第二步：在服务器使用模版引擎，将bookList数据和list.html页面结合
            res.render(path.join(__dirname, 'pages/list.html'), {msg:'这是list页面', bookList:bookList});
        });
    } 
    else if(req.url.startsWith('/add')) {
        res.render(path.join(__dirname, 'pages/add.html'));
    } 
    else if(req.url.startsWith('/submit') && req.method === 'get') { // 如何获取get请求的参数
        // 用户表单提交get请求数据，保存到data/data.json文件中，新数据以追加的形式添加
        console.log(req.url); // /summit?name=xxx&price=xxx

        // 首先读取data.json文件的内容
        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}
            console.log("data.json原来的内容：" + data); // [{"name":"xxx","price":"xxx"}]]
            var list = JSON.parse(data || '[]'); // json数组

            // 获取get请求的参数，将用户提交的数据添加到json数组
            var book = urlObj.query;
            // book.id = list.length + 1;
            book.id = list[list.length - 1].id + 1;
            list.push(book);
            console.log("添加一条记录后，data.json的内容："  + JSON.stringify(list));
            
            // 将json数组写入data.json文件
            fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(list), function(err) {
                if(err) throw err;
                console.log('写入成功');
            });    
        });

        // 重定向
        res.statusCode = 302;
        res.statusMessage = 'Found';
        res.setHeader('Location', '/index');
        res.end();
    } 
    else if(req.url.startsWith('/submit') && req.method === 'post') { // 如何获取post请求的参数
        var array = []; // 用来保存用户post请求提交的数据
        var postBody;
        req.on('data', function(chunk) {
            // chunk就是浏览器本次data事件提交的一部分数据；chunk是Buffer类型
            console.log("data事件...");
            array.push(chunk);
        });

        req.on('end', function() {
            console.log("end事件...");
            // 把array中多个Buffer对象汇总到一个Buffer对象
            postBody = Buffer.concat(array);
            console.log("postBody: " + postBody); // postBody: name=1&price=1
        });

        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}
            console.log("data.json原来的内容：" + data); // [{"name":"xxx","price":"xxx"}]]
            var list = JSON.parse(data || '[]'); // json数组

            // 获取get请求的参数，将用户提交的数据添加到json数组
            // querystring对象可以把表单数据 name=xxx&price=xxx => {"name":"xxx","price":"xxx"}
            var book = querystring.parse(postBody.toString("utf-8"));
            // book.id = list.length + 1;
            book.id = list[list.length - 1].id + 1;
            list.push(book);
            console.log("添加一条记录后，data.json的内容："  + JSON.stringify(list));
            
            // 将json数组写入data.json文件
            fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(list), function(err) {
                if(err) throw err;
                console.log('写入成功');
            });    
        });

        /*
        // 首先读取data.json文件的内容
        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}
            console.log("data.json原来的内容：" + data); // [{"name":"xxx","price":"xxx"}]]
            var list = JSON.parse(data || '[]'); // json数组

            // 获取post请求的参数，将用户提交的数据添加到json数组
            // 因为post提交数据的时候，数据量可能比较大，所以可能分多次提交，每次添加一部分数据
            // 此时服务器要获取用户提交的所有数据，必须监听request对象的data事件
            // 什么时候表示浏览器把所有数据都提交到服务器了呢？当request对象的end事件触发
            var array = []; // 用来保存用户post请求提交的数据
            console.log("111...");
            req.on('data', function(chunk) {
                // chunk就是浏览器本次data事件提交的一部分数据；chunk是Buffer类型
                console.log("data事件...");
                array.push(chunk);
            });
            req.on('end', function() {
                console.log("end事件...");
                // 把array中多个Buffer对象汇总到一个Buffer对象
                var postBody = Buffer.concat(array);
                console.log("postBody: " + postBody);
                list.push(postBody);
                console.log("添加一条记录后，data.json的内容："  + JSON.stringify(list));

                // 将json数组写入data.json文件
                fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(list), function(err) {
                    if(err) throw err;
                    console.log('写入成功');
                });
            });
            
            console.log("222...");
        });*/

        // 重定向
        res.statusCode = 302;
        res.statusMessage = 'Found';
        res.setHeader('Location', '/index');
        res.end(); 
    } 
    else if(req.url.startsWith('/detail') && req.method === 'get') {
        var queryId = urlObj.query.id;

        // 第一步：读取data.json文件中的数据，转换为list数组
        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}
            console.log("data.json原来的内容：" + data); // [{"name":"xxx","price":"xxx"}]]
            var bookList = JSON.parse(data || '[]'); // json数组

            // 查询指定id的记录
            var book = {};
            for (var i = 0; i < bookList.length; i++) {
                if (bookList[i].id == queryId) { // 不能写“===”，因为queryId是字符串类型
                    book = bookList[i];
                }
            }

            // 第二步：在服务器使用模版引擎，将数据和detail.html页面结合
            res.render(path.join(__dirname, 'pages/detail.html'), {book:book});
        });
    }
    else if(req.url.startsWith('/delete') && req.method === 'get') {
        var queryId = urlObj.query.id;

        // 第一步：读取data.json文件中的数据，转换为list数组
        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}
            console.log("data.json原来的内容：" + data); // [{"name":"xxx","price":"xxx"}]]
            var bookList = JSON.parse(data || '[]'); // json数组
            
            // 删除指定id的记录
            for (var i = 0; i < bookList.length; i++) {
                if (bookList[i].id == queryId) {
                    bookList.splice(i, 1); // 删除起始下标为queryId-1,长度为1的元素
                }
            }

            // 将json数组重新写入data.json文件
            fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(bookList), function(err) {
                if(err) throw err;
                console.log('写入成功');
            });    


            // 第二步：在服务器使用模版引擎，将bookList数据和list.html页面结合
            res.render(path.join(__dirname, 'pages/list.html'), {msg:'这是list页面', bookList:bookList});
        });
    }
    else if(req.url.includes('static')){
        res.render(path.join(__dirname, req.url));
    }
    else if(req.url.startsWith('/edit') && req.method === 'post') {
        var array = []; // 用来保存用户post请求提交的数据
        var postBody;
        req.on('data', function(chunk) {
            // chunk就是浏览器本次data事件提交的一部分数据；chunk是Buffer类型
            console.log("data事件...");
            array.push(chunk);
        });

        req.on('end', function() {
            console.log("end事件...");
            // 把array中多个Buffer对象汇总到一个Buffer对象
            postBody = Buffer.concat(array);
        });

        fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf-8', function (err, data) {
            if(err && err.code !== 'ENOENT') {throw err;}

            var bookList = JSON.parse(data || '[]'); // json数组

            // 获取get请求的参数，将用户提交的数据添加到json数组
            // querystring对象可以把表单数据 name=xxx&price=xxx => {"name":"xxx","price":"xxx"}
            var book = querystring.parse(postBody.toString("utf-8"));
            console.log("=============book:" + book.id + book.name + book.price);
            for (var i = 0; i < bookList.length; i++) {
                // console.log("bookList[i].id=" + bookList[i].id);
                // console.log("book.id=" + book.id);
                // console.log(bookList[i].id == book.id);
                if(bookList[i].id == book.id) {
                    bookList[i].name = book.name;
                    bookList[i].price = book.price;
                }
            }
        
            // 将json数组重新写入data.json文件
            fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(bookList), function(err) {
                if(err) throw err;
                console.log('写入成功');
            });    

            // 重定向
            res.statusCode = 302;
            res.statusMessage = 'Found';
            res.setHeader('Location', '/list');
            res.end(); 
            });
    }
    else {
        res.writeHead(404, 'not found', {'Content-Type': 'text/html; charset=utf-8'});
        res.end("404,not found!");
    }
}).listen('8080', function() {
    console.log('服务器已经启动，请访问http://127.0.0.1:8080/');
});

5、common.css

h2 {
    background-color: #ccc;
}

6、html页面

　　add.html

<!DOCTYPE html>
<html>
<head>
    <title>add页面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
</head>
<body>
    <h2>add页面</h2>
    <form method="get" action="/submit">
    <!-- <form method="post" action="/submit"> -->
        书名: <input type="text" name="name">
        价格: <input type="text" name="price">
        <input type="submit" value="添加">
    </form>
</body>
</html>

　　detail.html

<!DOCTYPE html>
<html>
<head>
    <title>detail页面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
</head>
<body>
    <h2>detail页面</h2>
    <form method="post" action="/edit">
        <input type="hidden" name="id" value="<%= book.id %>">
        书名：<input type="text" name="name" value="<%= book.name %>"><br/>
        价格：<input type="text" name="price" value="<%= book.price %>"><br/>
        <input type="submit" value="修改">
    </form>
</body>
</html>

　　index.html

<!DOCTYPE html>
<html>
<head>
    <title>index页面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
</head>
<body>
    <h2>index页面</h2>
    <!-- <img src="/static/images/1.jpg">
    <img src="/static/images/2.png"> -->
    <a href="/list">图书列表</a>
</body>
</html>

 　　list.html

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <title>list页面</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
</head>
<body>
    <h2>list页面</h2>
    <%= msg %>!</h2><br/>
    <!-- <img src="/static/images/1.jpg">
    <img src="/static/images/2.png"> -->
    <a href="/add">添加</a>

    <table border="1" cellpadding="0">
        <tr>
            <td>ID</td>
            <td>书名</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        <% for(var i = 0; i < bookList.length; i++) { %>
        <tr>
            <td><%= bookList[i].id %></td>
            <td><%= bookList[i].name %></td>
            <td><%= bookList[i].price %></td>
            <td>
                <a href="/detail?id=<%= bookList[i].id %>">查看</a>
                <a href="/delete?id=<%= bookList[i].id %>">删除</a>
            </td>
        </tr>
        <% } %>
    </table>
    
</body>
</html>

 7、node app.js启动项目，浏览器访问主页 ：http://127.0.0.1:8080/

　　

　　

　　

　　测试完后data.json文件的数据：

[{"id":1,"name":"射雕英雄传","price":"45.00"},{"id":2,"name":"天龙八部2","price":"66.00"},
{"id":3,"name":"倚天屠龙记","price":"50.00"},{"id":4,"name":"Java编程思想2","price":"40.00"},
{"name":"Java从入门到精通","price":"30.00","id":6},{"name":"ggf","price":"fff","id":8},
{"name":"af","price":"ff","id":9}]

　

猜你喜欢

转载自www.cnblogs.com/xy-ouyang/p/11141206.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022