Node.js用户信息管理列表

准备工作 

创建文件工作区user

创建MongoDB文件夹

将MongoDB里面的文件复制进去

D:\MongoDB目录下：

创建data

创建log

---

下载MongoDB

下载地址：

https://fastdl.mongodb.org/win32/mongodb-win32-i386-2.6.9.zip

我的压缩包是mongodb-win32-i386-2.6.9.zip，解压并放到 D:\MongoDB（手动创建）

安装

1.手动新建数据库文件夹 D:\MongoDB\data

2.在C:\Windows\System32下的cmd.exe，鼠标右键，以管理员身份打开（这一步很重要）

3.把路径跳转到MongoDB/bin目录

4.输入mongod -dbpath "d:\mongodb\data"，自动建立数据库文件

最后一行：waiting for connections on port 27017，表示配置成功

5.此时在浏览器地址栏输入：

http://localhost:27017/

如果配置成功，会显示以下页面：

到这里，MongoDB已经成功安装了。

---

配置日志文件

配置环境变量和系统变量

切记，全部都要保证路径后面有        ;        半角符号的分号         不然之后终端指令报错无法识别

都是Path里面配置以下路径：

d:\mongodb\bin

---

如下图切换到D:\mongodb\bin

输入命令：

mongod --dbpath "d:\mongodb\data" --logpath "d:\mongodb\log\MongoDB.log" --install --serviceName "MongoDB"  --journal

输入下面命令就能启动服务了

net start MongoDB

打开“服务"可见：

工作需要，我把他设置为手动启动的，一般设置为自动就可以了 

---

项目开始 

进入user工作区，创建01.js文件

终端配置如下

终端输入：

npm i mongoose@5.0.0

全局安装：

npm i nodemon -g

终端报错之后下面指令复制到终端：

set-ExecutionPolicy RemoteSigned

01.js代码如下：

//nodejs访问MongDB数据库
// 引入moongoose第三方模块
const moongoose = require('mongoose')
//连接数据库
moongoose.connect('mongodb://localhost/playground')
.then(()=>{
    console.log('连接数据库成功');
})
.catch((err)=>{
    console.log('连接数据库失败');
    console.log(err);
})
// mongdb:// 是固定写法
// localhost. 指定要连接服务器的地址
// playground. 指定数据库名，不存在会自动创建

运行测试文件跑起来：

nodemon .\01.js

---

设置数据库集合规定

03.js

// 搭建网站服务器，实现客户端与服务器端的通信。
// 连接数据库，创建用户集合，向集合中插入文档。
// 查询用户信息：当用户访问“/list”路由时，将所有用户信息查询出来。
// 将用户信息和表格HTML进行拼接并将拼接结果响应回客户端。
// 添加用户信息：当用户访问“/add”路由时，呈现表单页面，并实现添加用户信息功能。
// 修改用户信息：当用户访问“/modify”路由时，呈现修改页面，并实现修改用户信息功能。
// 删除用户信息：当用户访问“/delete”路由时，实现用户删除功能。
const http = require('http');
const mongoose = require('mongoose');
//连接数据库
mongoose.connect('mongodb://localhost:27017/playground')
    .then(()=>{console.log('数据库连接成功');})
    .catch((err)=>{console.log('数据库连接失败',err);})
// 创建用户集合
const userSchema = new mongoose.Schema({
    name:{
        type:String,
        requrired:true,
        minlength:1,
        maxlength:20
    },
    age:{
        type:Number,
        min:0,
        max:120
    },
    password:String,
    email:String,
    hobbies:[String]    //hobbies是数组，且数组里面的每个值都是字符串类型
})
const User = mongoose.model('User',userSchema); //创建用户集合
// 向集合里面插入文档：引入外部文件user.json

开启数据库

cd mongodb\bin

net start mongodb

 

 另外开一个控制台小黑窗输入如下指令：

mongoimport -d playground -c users -file ./user.json --jsonArray

 

---

项目文件如下

app.js

// 搭建网站服务器，实现客户端与服务器端的通信。
// 连接数据库，创建用户集合，向集合中插入文档。
// 查询用户信息：当用户访问“/list”路由时，将所有用户信息查询出来。
// 将用户信息和表格HTML进行拼接并将拼接结果响应回客户端。
// 添加用户信息：当用户访问“/add”路由时，呈现表单页面，并实现添加用户信息功能。
// 修改用户信息：当用户访问“/modify”路由时，呈现修改页面，并实现修改用户信息功能。
// 删除用户信息：当用户访问“/delete”路由时，实现用户删除功能。
const http = require('http'); //引入http模块
const url = require('url');   //引入url系统模块,使用parse()方法让服务器以对象形式输出
const querystring = require('querystring');
const mongoose = require('mongoose');   //需要引入第三方模块mongoose
// 连接数据库
mongoose.connect('mongodb://localhost:27017/playground')    //默认端口号 新建playground数据库
        .then(()=>{console.log('数据库连接成功');})         //异步函数可以使用then()和catch()方法尝试
        .catch((err)=>{console.log('数据库连接失败',err)})
// 创建用户集合规则
const userSchema = new mongoose.Schema({
    name:{
        type:String,
        required:true,
        minlength:1,
        maxlength:20
    },
    age:{
        type:Number,
        min:0,
        max:120
    },
    password:String,
    email:String,
    hobbies:[String]  //hobbies是数组，且数组中的每个值都是字符串类型
})
const User = mongoose.model('User',userSchema);     //创建一个集合User,一定要大写，但是接收的是Users

// 向集合中插入文档:引入外部文件user.json
const app = http.createServer(); //创建服务器
// 为服务器添加请求事件
app.on('request',async(req,res)=>{
    //获取请求方式
    const method = req.method;
    console.log(method);
    //获取请求地址
    const {pathname,query} = url.parse(req.url,true);   //浏览器输入http://localhost:3000/list?name=zhangsan$id=0123
    if(method == 'GET'){
        if(pathname == '/list'){
            //查询用户信息  37行将普通函数前添加async改为异步函数
            let users =  await User.find();
            console.log(users);
            // 呈现用户信息列表
            let list = `<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <title>用户列表</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
            </head>
            
            <body>
                <div class="container">
                    <h6>
                        <a href="/add" class="btn btn-primary">添加用户</a>
                    </h6>
                    <table class="table table-striped table-bordered">
                        <tr>
                            <td>用户名</td>
                            <td>年龄</td>
                            <td>爱好</td>
                            <td>邮箱</td>
                            <td>操作</td>
                        </tr>`;
            users.forEach(item => {
                list +=`<tr>
				<td>${item.name}</td>
				<td>${item.age}</td>
				<td>`
                    item.hobbies.forEach(item=>{    //item是当前循环的爱好
                        list +=`<span>${item}</span>`
                    })
				list +=`</td>
				<td>${item.email}</td>
				<td>
					<a href="" class="btn btn-danger btn-xs">删除</a>
					<a href="" class="btn btn-success btn-xs">修改</a>
				</td> 
			</tr>`
            });
            list += `</table>
            </div>
        </body>
        </html>`;
            res.end(list);
        }else if(pathname == '/add'){
            // 呈现添加用户的页面
            let add =`<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <title>用户列表</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
            </head>
            
            <body>
                <div class="container">
                    <h3>添加用户</h3>
                    <form method="post" action="/add">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="name" name="name" class="form-control" placeholder="请填写用户名">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" name="password" class="form-control" placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <label>年龄</label>
                            <input type="age" name="age" class="form-control" placeholder="请填写年龄">
                        </div>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input type="email" name="email" class="form-control" placeholder="请填写邮箱">
                        </div>
                        <div class="form-group">
                            <label>请选择爱好</label>
                            <div>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="足球" name="hobbies"> 足球
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="篮球" name="hobbies"> 篮球
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="橄榄球" name="hobbies"> 橄榄球
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="敲代码" name="hobbies"> 敲代码
                                </label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">添加用户</button>
                    </form>
                </div>
            </body>
            
            </html>`;
            res.end(add);
        }else if(pathname == '/modify'){
            //呈现用户修改页面
        }else if(pathname == '/remove'){
            // 对指定的用户进行删除操作
        }
    }else if(method == 'POST'){
        if(pathname=='/add'){
            // 接收用户提交的信息name=&password=&age=&email=
            let formDate =``;
            // 接收post参数时的事件
            req.on('data',(param=>{
               formDate += param
            }))
            // 接收post参数完毕的事件
            req.on('end',async()=>{
                //字符串类型的数据，转化为对象类型
                let user = querystring.parse(formDate);
                // console.log(user);
                //将用户提交的信息添加到数据库中
                await User.create(user);
                //
            res.writeHead(301 ,{    //301代表重定向(跳转)
                location:'/list'    //location:跳转地址
            });
            res.end();   //如果不调用就会一直重定向
            })
            

        }
    }
    // res.end('ok')
})
app.listen(3000);
console.log(('服务器已启用成功，localhost:3000'));

user.json

{
  "_id": {
    "$oid": "5c09f1e5aeb04b22f8460965"
  },
  "name": "张三",
  "age": 20,
  "hobbies": [
    "足球",
    "篮球",
    "橄榄球"
  ],
  "email": "zhangsan@itcast.cn",
  "password": "123456"
}
{
  "_id": {
    "$oid": "5c09f236aeb04b22f8460967"
  },
  "name": "李四",
  "age": 10,
  "hobbies": [
    "足球",
    "篮球"
  ],
  "email": "lisi@itcast.cn",
  "password": "654321"
}
{
  "_id": {
    "$oid": "5c09f267aeb04b22f8460968"
  },
  "name": "王五",
  "age": 25,
  "hobbies": [
    "敲代码"
  ],
  "email": "wangwu@itcast.cn",
  "password": "123456"
}
{
  "_id": {
    "$oid": "5c09f294aeb04b22f8460969"
  },
  "name": "赵六",
  "age": 50,
  "hobbies": [
    "足球",
    "篮球",
    "橄榄球"
  ],
  "email": "zhaoliu@itcast.cn",
  "password": "123456"
}
{
  "_id": {
    "$oid": "5c09f2b6aeb04b22f846096a"
  },
  "name": "大神",
  "age": 32,
  "hobbies": [
    "足球"
  ],
  "email": "dashen@itcast.cn",
  "password": "123456"
}
{
  "_id": {
    "$oid": "5c09f2d9aeb04b22f846096b"
  },
  "name": "小白",
  "age": 14,
  "hobbies": [
    "橄榄球"
  ],
  "email": "xiaobai@163.com",
  "password": "123456"
}

add.html

// 搭建网站服务器，实现客户端与服务器端的通信。
// 连接数据库，创建用户集合，向集合中插入文档。
// 查询用户信息：当用户访问“/list”路由时，将所有用户信息查询出来。
// 将用户信息和表格HTML进行拼接并将拼接结果响应回客户端。
// 添加用户信息：当用户访问“/add”路由时，呈现表单页面，并实现添加用户信息功能。
// 修改用户信息：当用户访问“/modify”路由时，呈现修改页面，并实现修改用户信息功能。
// 删除用户信息：当用户访问“/delete”路由时，实现用户删除功能。
const http = require('http'); //引入http模块
const url = require('url');   //引入url系统模块,使用parse()方法让服务器以对象形式输出
const mongoose = require('mongoose');   //需要引入第三方模块mongoose
// 连接数据库
mongoose.connect('mongodb://localhost:27017/playground')    //默认端口号 新建playground数据库
        .then(()=>{console.log('数据库连接成功');})         //异步函数可以使用then()和catch()方法尝试
        .catch((err)=>{console.log('数据库连接失败',err)})
// 创建用户集合规则
const userSchema = new mongoose.Schema({
    name:{
        type:String,
        required:true,
        minlength:1,
        maxlength:20
    },
    age:{
        type:Number,
        min:0,
        max:120
    },
    password:String,
    email:String,
    hobbies:[String]  //hobbies是数组，且数组中的每个值都是字符串类型
})
const User = mongoose.model('User',userSchema);     //创建一个集合User,一定要大写，但是接收的是Users

// 向集合中插入文档:引入外部文件user.json
const app = http.createServer(); //创建服务器
// 为服务器添加请求事件
app.on('request',async(req,res)=>{
    //获取请求方式
    const method = req.method;
    console.log(method);
    //获取请求地址
    const {pathname,query} = url.parse(req.url,true);   //浏览器输入http://localhost:3000/list?name=zhangsan$id=0123
    if(method == 'GET'){
        if(pathname == '/list'){
            //查询用户信息  37行将普通函数前添加async改为异步函数
            let users =  await User.find();
            console.log(users);
            // 呈现用户信息列表
            let list = `<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <title>用户列表</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
            </head>
            
            <body>
                <div class="container">
                    <h6>
                        <a href="add.html" class="btn btn-primary">添加用户</a>
                    </h6>
                    <table class="table table-striped table-bordered">
                        <tr>
                            <td>用户名</td>
                            <td>年龄</td>
                            <td>爱好</td>
                            <td>邮箱</td>
                            <td>操作</td>
                        </tr>`;
            users.forEach(item => {
                list +=`<tr>
				<td>${item.name}</td>
				<td>${item.age}</td>
				<td>
					<span>足球</span>
					<span>篮球</span>
					<span>橄榄球</span>
				</td>
				<td>${item.email}</td>
				<td>
					<a href="" class="btn btn-danger btn-xs">删除</a>
					<a href="" class="btn btn-success btn-xs">修改</a>
				</td>
			</tr>`
            });
            list += `</table>
            </div>
        </body>
        </html>`;
            res.end(list);
        }else if(pathname == '/add'){
            // 呈现添加用户的页面

        }else if(pathname == '/modify'){
            //呈现用户修改页面
        }else if(pathname == '/remove'){
            // 对指定的用户进行删除操作
        }
    }else if(method == 'POST'){

    }
    res.end('ok')
})
app.listen(3000);
console.log(('服务器已启用成功，localhost:3000'));

list.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
	<div class="container">
		<h6>
			<a href="add.html" class="btn btn-primary">添加用户</a>
		</h6>
		<table class="table table-striped table-bordered">
			<tr>
				<td>用户名</td>
				<td>年龄</td>
				<td>爱好</td>
				<td>邮箱</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>20</td>
				<td>
					<span>足球</span>
					<span>篮球</span>
					<span>橄榄球</span>
				</td>
				<td>zhangsan@itcast.cn</td>
				<td>
					<a href="" class="btn btn-danger btn-xs">删除</a>
					<a href="" class="btn btn-success btn-xs">修改</a>
				</td>
			</tr>
		</table>
	</div>
</body>

</html>

---

注意事项

1.  let list = `此处放入list.html静态页面的所有内容` 
2. 每次更新-保存代码之后，需要先刷新浏览器之后再看服务器

3. <td>${item.email}</td> 此处是单对花括号