js+node+mongoDB实现用户的增删改查

208 阅读2分钟

引入http模块,连接服务器,创建服务,监听3000端口

const http=require('http');
const app=http.createServer();

app.on('request',(req,res)=>{
  res.end('ok')
})

app.listen(3000);

连接数据库,引入mongoose模块

mongoose.connect('mongodb://localhost/app',{ useUnifiedTopology: true } )
  .then(()=>console.log('数据库连接成功'))
  .catch(()=>console.log('数据库连接失败'))

创建集合规则

const UserSchema=new mongoose.Schema({
  name:{
    type:String,
    required:true,
    minlength:2,
    maxlength:20
  }

从外部引入数据,将users.json文件放入同一文件夹中,powershell中使用mongoimport命令

  mongoimport -d app -c users --file ./user.json
2020-12-06T20:28:35.007+0800    connected to: localhost
2020-12-06T20:28:35.078+0800    imported 6 documents

页面展示

可以把写好的静态页面用 直接展示在js文件中;res.end(list)响应

let users=await User.find()//find查询所有数据

循环users,展示其中的数据,进行字符串的拼接

完成页面的数据展示

增加用户

增加add路由,复制add.html页面进行展示。 增加用户是post方式,因为涉及到与数据库的交互。在add.html中添加用户标签中加入method="post" action="/add"(跳转路由)

if(pathname=='/add'){//添加用户
      //接受用户请求的信息
      let formData='';
      //接受post参数,req.on 接受客户端的参数
      req.on('data',param=>{
        formData+=param;
      })
      req.on('end',async()=>{
        let user=querystring.parse(formData);//parse方法,把字符串转成对象
        await User.create(user);
        res.writeHead(301,{
          Location:'/list'
        });
        res.end();

直接输出formData的话,是字符串格式,引入querystring模块,parse方法可以将字符串转换成对象格式 设置301重定向,当点击后跳转到list页面。

修改用户

添加modify路由为修改信息页面;用同样的方式展示修改信息的页面,还是add的页面,知识把添加用户改为修改用户;在get请求中展示;但是要显示原有的选项,所以在每一项中添加一个value="${user.name}";通过id查询到这个人的信息,就是url中的参数(id)

//通过id查询到这个人的信息  findOne把数组变成对象
      let user=await User.findOne({_id:query.id}); 
      <label>用户名</label>
              <input value="${user.name}" name="name" type="text" class="form-control" placeholder="请填写用户名">

其中的爱好是数组,所以还是采用遍历的方式,已经存在的checkbox勾选,不存在的不勾选

let hobbies=['足球','篮球','橄榄球','敲代码','抽烟','喝酒','喝酒','烫头'];
//展示爱好        
      hobbies.forEach(item=>{
        let isHobby=user.hobbies.includes(item);
        if(isHobby){
          modify+=`<label class="checkbox-inline">
                  <input type="checkbox" value="${item}" name="hobbies" checked="checked"> ${item}
                </label>`
        }else{
          modify+=`<label class="checkbox-inline">
                  <input type="checkbox" value="${item}" name="hobbies"> ${item}
                </label>`
        }
      })

post请求中修改用户信息,同add中相同,User.create方法改为User.updataOne

删除用户

添加删除用户按键的路由

<a href="/remove?id=${item._id}" class="btn btn-danger btn-xs">删除</a>

根据id查找数据并删除,然后重定向回list页面。

else if(pathname=='/remove'){
      await User.findOneAndDelete({_id:query.id});
      res.writeHead(301,{
        Location:'/list'
      });
      res.end();
    }