koa+mongDb+arttemplat 实现一个增删改查

添加用户：跳转到添加页面（一个添加的表单）

编辑用户：跳转到编辑页面（跳转过去要携带所编辑用户的id，查询到所编辑的该用户信息，获取编辑后传过来的值修改数据库中的数据）

删除用户：获取所要删除的用户的 id，执行数据库的删除操作

添加页面：

编辑页面：

路由配置：

首页，需要查询数据库中的用户信息并渲染到页面上：

添加用户：直接获取添加的页面：

提交添加表单后，执行添加用户逻辑：获取添加表单传过来的值，再执行数据库添加操作，并判断是否添加成功，添加失败的错误处理等

编辑用户：先拿到所编辑的用户的id，查询到该用户的信息，将查询到的信息渲染到编辑页面上

需要注意的是，

① 获取用户的id，需要编辑页面中表单能传过来这个id，所以在编辑页面隐藏了一个用户ID的输入框，

② 传id时，通过 @ 将数据库中的 id 直接解析，否则传递过来的 id 会出现引号

③ 获取到传递过来的用户id，在数据库中不能直接通过这个id查询，查询会为空，因为数据库中的 id 的存储是 ObjectID，所以在 数据库操作的库中定义了一个 getObjectId( ) 的方法，用来将我们获取到的 id 转换为数据中的 ObjectID，再进行数据库查询操作

编辑表单提交后，获取编辑表单提交的修改后的用户信息，再执行数据库的编辑操作：

删除操作，在删除连接点击是将所要删除用户的 id 传过来，然后直接从数据库中删除：

最后，一个简单的对用户信息的增删改查就实现了，测试过程中也可以去查看数据中的信息是否有修改。

 app.js

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const render = require('koa-art-template')
const Db = require('./db/db')
const path = require('path')
const bodyParser = require('koa-bodyparser')

//配置art-template
render(app,{
    root: path.join(__dirname, 'views'),
    extname: '.html',
    debug: process.env.NODE_ENV !== 'production'
})

//配置bodyParse获取提交数据
app.use(bodyParser());

//配置路由
router.get('/',async (ctx)=>{
    let userInfo=await Db.find('user',{})
    ctx.render('index',{userInfo})
})

//添加用户页面
router.get('/add', async (ctx) => {
    await ctx.render('add')
})
//添加逻辑
router.post('/doAdd', async (ctx) => {
    //console.log("提交数据是：", ctx.request.body) //{ name: '武松', age: '123', sex: '男' }
    let res = await Db.insert('user', ctx.request.body)
    //console.log(newUser)
    try {
        if (res.result.ok) { //添加用户成功，重定向到首页
            console.log("数据库添加用户成功")
            ctx.redirect('/')
        }
    } catch (error) { //添加用户失败，没有result，重定向到添加页面
        console.log("数据库添加用户失败")
        ctx.redirect('/add')
    }
    
})
//编辑用户页面
router.get('/edit', async (ctx) => {
    //通过get传过来的id来获取用户信息
    //console.log("编辑用户id:",ctx.query.id) //获取get传值
    /**
     * let res = await Db.find('user', { "_id": ctx.query.id })
     * console.log("所编辑的用户信息:", res) //[]
     */
    let res = await Db.find('user', { "_id": Db.getObjectId(ctx.query.id) })
    //console.log("所编辑的用户信息:", editUser) //[{ _id: 5eec5070b23b0bc30e706782, name: 'jack11', age: 16, sex: '女' }]
    await ctx.render('edit',{ //查询到所编辑用户的信息后渲染到页面上
        editUser:res[0]
    })
})
//编辑逻辑
router.post('/doEdit', async (ctx) => {
    //通过get传过来的用户id获取所编辑用户的信息
    //console.log("执行编辑操作获取所编辑用户信息：",ctx.request.body)
    let {id,name,age,sex} = ctx.request.body //获取到编辑后的信息，修改数据库中的信息
    let res = await Db.update('user',{"_id":Db.getObjectId(ctx.request.body.id)},{
        name,age,sex
    })
    try {
        if(res.result.ok){ //编辑用户成功，重定向到首页
            console.log("数据库编辑用户成功")
            ctx.redirect('/')
        }
    } catch (error) { //编辑用户失败
        console.log("数据库编辑用户失败")
        ctx.redirect('/edit')
    }
})
//执行删除逻辑
router.get('/doDelete', async (ctx) => {
    //console.log("所删除用户的id：",ctx.query.id)
    let res = await Db.delete('user',{"_id":Db.getObjectId(ctx.query.id)})
    try {
        if(res.result.ok){
            console.log("数据库删除数据成功")
            ctx.redirect('/')
        }
    } catch (error) {
        console.log("数据库删除数据失败")
    }
})


app.use(router.routes());   
app.use(router.allowedMethods());
app.listen(3000);

db.js

const {MongoClient} = require('mongodb')
const MongoDb = require('mongodb')
const Config = require('./config')

class Db{
    static getInstance(){
        if(!Db.instance){
            Db.instance=new Db()
        }
        return Db.instance
    }
    constructor(){
        this.dbClient=""
        this.connect()
    }
    //连接数据库
    connect(){
        return new  Promise((resolve,reject)=>{
            if(!this.dbClient){
                MongoClient.connect(Config.dbUrl, { useUnifiedTopology: true },(err,client)=>{
                    if(err){
                        console.log("连接数据库失败")
                        reject(err)
                    }
                    else{
                        console.log("连接数据库成功")
                        this.dbClient=client.db(Config.dbName)
                        resolve(this.dbClient)
                    }
                })
            }
            else{
                resolve(this.dbClient)
            }
        })
    }
    //查询数据
    find(collectionName,findData){
        return new Promise((resolve,reject)=>{
            this.connect().then(db=>{
               db.collection(collectionName).find(findData).toArray((err,result)=>{
                   if(err){
                       console.log("查询数据失败")
                       reject(err)
                   }
                   else{
                       console.log("查询数据成功")
                       resolve(result)
                   }
               })
            })
        })
    }
    //添加数据
    insert(collectionName,addData){
        return new Promise((resolve,reject)=>{
            this.connect().then(db=>{
                db.collection(collectionName).insertOne(addData, (err, result) => {
                    if (err) {
                        console.log("添加数据失败")
                        reject(err)
                    }
                    else {
                        console.log("添加数据成功")
                        resolve(result)
                    }
                })
            })
        })
    }
    //修改数据
    update(collecitonName, oldData,newData) {
        return new Promise((resolve, reject) => {
            this.connect().then(db => {
                db.collection(collecitonName).update(oldData,{$set:newData},(err,result)=>{
                    if(err){
                        console.log("修改数据失败")
                        reject(err)
                    }
                    else{
                        console.log("修改数据成功")
                        resolve(result)
                    }
                })
            })
        })
    }
    //删除数据
    delete(collecitonName,deleteData){
        return new Promise ((resolve,reject)=>{
            this.connect().then(db=>{
                db.collection(collecitonName).deleteOne(deleteData,(err,result)=>{
                    if(err){
                        console.log("删除数据失败")
                        reject(err)
                    }
                    else{
                        console.log("删除数据成功")
                        resolve(result)
                    }
                })
            })
        })
    }
    //将id装换为数据库中的ObjectID进行查询操作
    getObjectId(id){
        return new MongoDb.ObjectID(id)
    }
}

module.exports=Db.getInstance()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table {
            width: 80%;
            border-collapse: collapse;
            margin-top:20px;
        }   
        .table td,
        .table th {
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>index.html页面</h3>
    <a href="/add">添加用户</a>
    <table class="table">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        {{each userInfo}}
        <tr>
            <td>{{$value.name}}</td>
            <td>{{$value.age}}</td>
            <td>{{$value.sex}}</td>
            <td>
                <a href="/edit?id={{@$value._id}}">编辑</a> 　
                <a href="/doDelete?id={{@$value._id}}">删除</a>
            </td>
        </tr>
        {{/each}}
    </table>
</body>
</html>

add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>add.html页面</h3>
    <h3>添加用户</h3>
    <form action="/doAdd" method="post">
        用户名：<input type="text" name="name"> <br>
        年龄：<input type="text" name="age"><br>
        性别：<input type="text" name="sex"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>edit.html页面</h3>
    <h3>编辑用户</h3>
    <form action="/doEdit" method="post">
        用户ID：<input type="hidden" name="id" value={{@editUser._id}}>
        用户名：<input type="text" name="name" value={{editUser.name}}> <br>
        年龄：<input type="text" name="age" value={{editUser.age}}><br>
        性别：<input type="text" name="sex" value={{editUser.sex}}><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>