1-7 登录/注册 - 代码 - 《Linux》

动图.gif

//app.js
const koa=require("koa");
const app=new koa();
const initProject=require("./config")
initProject(app);
app.listen(4000);

//package.json
{
  "name": "1116project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "art-template": "^4.13.2",
    "koa": "^2.13.4",
    "koa-art-template": "^1.1.1",
    "koa-body": "^4.2.0",
    "koa-router": "^10.1.1",
    "koa-static": "^5.0.0",
    "mongodb": "^4.1.4"
  }
}

//routers-index.js
const router=require("koa-router")();
const main=require("../models")
router.get("/login", async ctx=>{
    await ctx.render("login")
})
router.get("/register", async ctx=>{
    await ctx.render("register")
})
router.get("/home", async ctx=>{
    ctx.body="home"
})
router.post("/doRegister",async ctx=>{
    var {username,pwd}=ctx.request.body;
    var userCollection=await main("user");
    /* 对user查询，没有username才添加 */
    var res=await userCollection.find({username}).toArray();
    /* 1.用户名存在，停留在注册页面 */
    if(res.length){
        ctx.body="<script>alert('用户名已存在');location.href='/register'</script>"
    }else{
        /* 2. 用户名不存在，注册-进入首页 */
        var res=await userCollection.insertOne({username,pwd});
        ctx.body="<script>alert('注册成功');location.href='/home'</script>"
    }
})
router.post("/doLogin",async ctx=>{
    var {username,pwd}=ctx.request.body;
    var userCollection=await main("user")
    var res=await userCollection.find({username,pwd}).toArray()
    /* if(res.length){
        await ctx.redirect("/home")
    }else{
        ctx.body="<script>alert('用户名或密码错误');location.href='/login'</script>"
    } */
    if(username=="lss"&&pwd=="123456"){
        ctx.cookies.set("login","success");
        await ctx.redirect("/home")
    }
    else{
        ctx.body="<script>alert('用户名或密码错误');location.href='/login'</script>"
    }
})
module.exports=router;

//modules-index.js

const { MongoClient} = require('mongodb');
// Connection URL
const url = 'mongodb://123.60.82.25: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;

//config-index.js

const router=require("../routers");
const koaBody=require("koa-body");
const static=require("koa-static");
const render=require("koa-art-template")
const path=require("path");

// const fs=require("fs")
function initProject(app){
  app.use(async (ctx,next)=>{
    if(ctx.path=="/login"||ctx.path=="/doLogin"){
      await next();
    }else{
      /* 如果cookies存在代码正常执行，如果不存在需要停在/login */
      if(ctx.cookies.get("login")){
        await next();
      }else{
        await ctx.redirect("/login")
      }
    }
  })
    app.use(koaBody());
    app.use(router.routes());
    var res=path.join(process.cwd(),'static')
    // console.log(res);
    app.use(static(path.join(process.cwd(),"static")));
    render(app, {
        root: path.join(process.cwd(), 'pages'),
        extname: '.html',
        debug: process.env.NODE_ENV !== 'production'
      });
}
module.exports=initProject;

//pagse-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">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
</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 href="/register" class="btn btn-warning">快速注册</a>
        </form>
    </div>
</body>
</html>

//pagse-register.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">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
</head>
<body>
    <div class="container">
        <form action="/doRegister" 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-danger">注册</button>   
        </form>   
    </div>
</body>
</html>