koa.js - 登录注册验证添加删除数据总例 - 《Linux》

模块
config index.js
models index.js
index.js
routers
Pages

总共有一个数据库两个表一个user表是用户的登录注册数据表单验证用
另一个表是小组成员表C8205 增加删除使用

模块

config index.js

const Router = require("koa-router")
const requireDir = require("require-directory")
const render = require("koa-art-template")
const koaBody = require("koa-body")
const static = require("koa-static")
const path = require("path")
function initProject(app) {
    app.use(koaBody({
        multipart: true,
        formidable: {
            maxFileSize: 200 * 1024 * 1024,
            keepExtensions: true
        }
    }))
    app.use(async (ctx, next) => {
        ctx.set("Access-Control-Allow-Origin", "*");
        await next();
    })
    app.use(async (ctx, next) => {
        if (ctx.path == "/login" || ctx.path == "/doLogin" || ctx.path == "/registered" || ctx.path == "/doregistered") {
            await next()
        } else {
            if (ctx.cookies.get("login")) {
                await next()
            } else {
                await ctx.redirect("/login")
            }
        }
    })
    requireDir(module, "../routers", { visit: loadRouters })
    function loadRouters(obj) {
        if (obj instanceof Router) {
            app.use(obj.routes())
        }
    }
    render(app, {
        root: path.join(process.cwd(), "pages"),
        extname: '.html',
        debug: process.env.NODE_ENV !== 'production'
    })
    app.use(static(path.join(process.cwd(), "static")))
}
module.exports = initProject

models index.js

const { MongoClient } = require('mongodb')
const url = 'mongodb://121.36.222.9:12021' 
const client = new MongoClient(url)
const dbName = 'Student';
async function main(table) {
  await client.connect();
  console.log('Connected successfully to server');
  const db = client.db(dbName);
  const collection = db.collection(table);
  return collection;
}
module.exports = main;

index.js

const koa = require("koa")
const app = new koa()
const initProject = require("./config")
initProject(app)
app.listen(1000)

routers

data.js

小程序拿接口用

const router = require("koa-router")()
const  main=require("../models")
router.get("/data", async ctx => {
    var table = await main("C8205")
    var res=await table.find().toArray()
    ctx.body=res
})
module.exports=router

delete.js

const router = require("koa-router")()
const main = require("../models")
const { ObjectId}=require("mongodb")
router.get("/delete/:id", async ctx => {
    console.log(ctx.params);
    var { id } = ctx.params
    var table = await main("C8205")
    var res = await table.deleteOne({ _id: ObjectId(id) })
    await ctx.redirect("/home")
})
module.exports=router

detail.js

const router = require("koa-router")()
const main = require("../models")
const { ObjectId}=require("mongodb")
router.get("/detail/:id", async ctx => {
    var { id } = ctx.params
    var table = await main("C8205")
    var res = await table.find({ _id: ObjectId(id) }).toArray()
    ctx.body=res
})
module.exports = router

doForm.js

const router = require("koa-router")()
const fs = require("fs")
const path = require("path")
const main = require("../models");
router.post("/doForm", async ctx => {
    var { name, age, like } = ctx.request.body
    age = Number(age)
    console.log(name);
    var filename=ctx.request.files.logo.path
    var reader = fs.createReadStream(filename);
    var uploadFile = `./static/${path.basename(filename)}`;
    var writer = fs.createWriteStream(uploadFile);
    reader.pipe(writer);
    var logo = ctx.origin + "/" + path.basename(filename);
    const collection = await main("C8205");
    await collection.insertOne({ name, age, like, logo });    
    await ctx.redirect("/home")
})
module.exports=router

doLogin.js

const router = require("koa-router")()
const main = require("../models")
router.post("/doLogin", async ctx => {
    console.log(ctx.request.body);
    var { username,pwd}=ctx.request.body
    var table = await main("user")
    var res = await table.find({ username, pwd }).toArray()
    if (res.length) {
        ctx.cookies.set("login", "success")
        await ctx.redirect("/form")
    } else {
        ctx.body="<script>alert('用户名或密码错误');location.href='/login'</script>"
    }


})
module.exports = router

doregistered.js

const router = require("koa-router")()
const main=require("../models")
router.post('/doregistered', async ctx => {
    var { username, pwd } = ctx.request.body
    var table = await main("user")
    var res = await table.find({ username }).toArray()
    if (res.length) {
        ctx.body ="<script>alert('用户名已经被注册');location.href='/registered'</script>"
    } else {
        var res = await table.insertOne({ username, pwd })
        ctx.body="<script>alert('注册成功');location.href='/login'</script>"
    }
})
module.exports=router

form.js

const router = require("koa-router")()
router.get("/form", async ctx => {
  await ctx.render("form")
})
module.exports=router

home.js

const router = require("koa-router")()
const main=require("../models")
router.get("/home", async ctx => {
    var table = await main("C8205")
    var C8205 = await table.find().toArray()
    await ctx.render("home",{C8205})
})
module.exports=router

login.js

const router = require("koa-router")()
router.get('/login', async ctx => {
    await ctx.render("login")
})
module.exports=router

registered.js

const router = require("koa-router")()
router.get('/registered', async ctx => {
    await ctx.render("registered")
})
module.exports=router

Pages

form.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <title>Document</title>
</head>

<body>
    <div class="container">
        <form action="http://localhost:1000/doForm" enctype="multipart/form-data" method="post" role="form">
            <legend>添加小组成员</legend>
            <div class="form-group">
                <label for="">名字</label>
                <input type="text" class="form-control" name="name" placeholder="请输入组员的名字">
            </div>
            <div class="form-group">
                <label for="">年龄</label>
                <input type="text" class="form-control" name="age" placeholder="请输入组员的年龄">
            </div>
            <div class="form-group">
                <label for="">爱好</label>
                <input type="text" class="form-control" name="like" placeholder="请输入组员的性别">
            </div>
            <div class="form-group">
                <label for="">上传头像</label>
                <input type="file" class="form-control" name="logo">
            </div>
            <button type="submit" class="btn btn-primary">添加</button><a href="/home" class="btn btn-primary">查看成员</a>
        </form>

    </div>
</body>

</html>

home.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
        img {
            width: 40px;
        }
    </style>
</head>

<body>
    <div class="container">

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>爱好</th>
                    <th>logo</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                {{each C8205}}
                <tr>
                    <td>{{$index+1}}</td>
                    <td> <a href="/detail/{{@$value._id}}"> {{$value.name}}</a>  </td>
                    <td>{{$value.age}}</td>
                    <td>{{$value.like}}</td>
                    <td><img src="{{@ $value.logo}}" alt=""></td>
                    <td><a href="/delete/{{@$value._id}}"class="btn btn-danger" >删除</a></td>
                </tr>
                {{/each}}
            </tbody>
        </table>
        <a href="/form" class="btn btn-primary ">去添加</a>

    </div>
</body>

</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <form action="/doLogin" method="post" role="form">
            <legend>登录/注册页面</legend>

            <div class="form-group">
                <label for="">用户名</label>
                <input type="text" class="form-control" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <input type="password" class="form-control" name="pwd" placeholder="请输入密码">
            </div>
            <button type="submit" class="btn btn-success">登录</button> 
            <a class="btn btn-primary" href="/registered">快速注册</a>
        </form>

    </div>
</body>
</html>

registered.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <form action="/doregistered" method="post" role="form">
            <legend>登录/注册页面</legend>

            <div class="form-group">
                <label for="">用户名</label>
                <input type="text" class="form-control" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <input type="password" class="form-control" name="pwd" placeholder="请输入密码">
            </div>
            <button type="submit" class="btn btn-success">注册</button> 
        </form>

    </div>
</body>
</html>