koa.js - 5-登录注册逻辑 - 《Linux》

node.js模板引擎
- art-template的配置
config index.js
models index.js
routers index.js
app.js
html
- login
- Register

node.js模板引擎

art-template
ejs
jade

为了让路由直接跳到显示页面（render）
并且可以在里面使用for循环（这样可以直接渲染到页面不用再ajax请求了）
Y%))UAXHDLCUC6$FNSCJ`~S.png
这里的reander就是利用了art-template
![]ZSAWGJIBQNQGJSGAZVJ35.png![KGFS}DNUWWMD@%G{LV[A{J.png

art-template的配置

yarn add  koa-art-template art-template
const render = require('koa-art-template');
render(app, {
        root: path.join(process.cwd(), 'pages'),
         //process.cwd()拿到根目录 然后+pages 跳转到这个目录
        extname: '.html',
        debug: process.env.NODE_ENV !== 'production'
      });

拆分出来放文件
![IYT(9_0UAAP[6`[J3U}1V4.png](https://cdn.nlark.com/yuque/0/2021/png/22614917/1637070518050-4f6ba7c3-ab83-440d-92db-a36e3cb6e5a2.png#clientId=u4820b52a-07f0-4&from=paste&height=365&id=ue299d8b1&margin=%5Bobject%20Object%5D&name=IYT%289_0UAAP%5B6%60%5BJ3U%7D1V4.png&originHeight=432&originWidth=376&originalType=binary&ratio=1&size=28972&status=done&style=none&taskId=u42f41281-9083-45d7-b2dd-bf6ed722e22&width=318)
配置

config index.js

![]ZSAWGJIBQNQGJSGAZVJ35.png![KGFS}DNUWWMD@%G{LV[A{J.png

//配置文件 之后的中间件需要在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")  //拼串模块
function initProject(app) {
    app.use(koaBody())
    app.use(router.routes())  //配置路由
    app.use(static(path.join(process.cwd(), 'static'))) //拿到静态资源目录
    //path.join()   将两个评串在一起 //G:\H5\日常\work3-linux\day44\homework\static
    //process.cwd() 获取当前页面的根目录 //G:\H5\日常\work3-linux\day44\homework
    render(app, {
        root: path.join(process.cwd(), 'pages'),
         //process.cwd()拿到根目录 然后+pages 跳转到这个目录
        extname: '.html',
        debug: process.env.NODE_ENV !== 'production'
      });
}
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;

routers index.js

![]ZSAWGJIBQNQGJSGAZVJ35.png![KGFS}DNUWWMD@%G{LV[A{J.png

//路由模块
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 => {   //注册接口
    console.log(ctx.request.body); //可以拿到用户输入的用户名和密码  { username: '姚佳楠', pwd: '111' }
    var { username, pwd } = ctx.request.body
    var userCollection = await main("user")
    var res = await userCollection.find({ username, pwd }).toArray()
    //find方法找数组是否存在用户输入的name 如果有会返回有数据的数组 没有就会返回空数组
      /* 对user查询,没有username才添加 */
    if (res.length) {  /* 1、用户名存在,还在注册界面呆着 */
        ctx.body = "<script>alert('用户名已经被注册');location.href='/register'</script>"
    } else {  /* 2、用户名不存在,注册-进入首页 */
        var res = await userCollection.insertOne({ username, pwd })
        ctx.body = "<script>alert('注册成功');location.href='/login'</script>"
    }

    console.log(res);
})
router.post("/doLogin",async ctx=>{   //登录页面接口
    var {username,pwd} = ctx.request.body  //拿到name pwd
    var userCollection = await main("user");  //拿到user这个表
    var res = await userCollection.find({ username, pwd }).toArray();  
    //查询表里有没有这个name pwd 如果数组有长度就是有 返回空数组就是输入错误
    console.log(res)
    if(res.length){
        await ctx.redirect("/home")  //如果是对的就到home页面
    }else{
        ctx.body = "<script>alert('用户名或密码错误');location.href='/login'</script>"
    }
})
module.exports = router

app.js

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

html

login

<head>
    <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>

Register


<head>
    <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>