koa2系列教程：koa2實現登錄註冊功能

koa2系列教程，持續更新

• koa2系列教程：koa2應用初見
• koa2系列教程：koa2處理靜態文件
• koa2系列教程：koa2使用模板引擎
• koa2系列教程：koa2路由控制中間件
• koa2系列教程：綜合koa2搭建登錄註冊頁面
• koa2系列教程：koa2實現登錄註冊功能

---

這個主要結合前幾天的內容，做個實際案例的效果

版本：

項目結構：

前幾天，我們把註冊和登錄的頁面demo實現了，今天我們主要實現這麼幾個內容

• 註冊新用戶
• 判斷該郵箱是否註冊過
• 登錄判斷是否註冊過
• 登錄時的密碼的正確

本文代碼地址：https://github.com/xiaqijian/...

明天，我們將利用session實現登錄狀態判斷

今天的這篇是在之前的代碼基礎上添加的，我們就曬主要的代碼

1.編輯user.js

// db/user.js
const mongoose = require('./db')
const Schema = mongoose.Schema;

const ceshiSchema = new Schema({
  email: String,
  name: String,
  password: String
});

const MyModel = mongoose.model('User', ceshiSchema);


class Userdb {
  constructor () {

  }
// 查詢
  query (obj = {}) {
     return new Promise((resolve, reject) => {
       MyModel.find(obj, (err, res) => {
         if(err) {
           reject(err)
         }
         resolve(res)
       })
     })
  }
queryEmail (em) {
   return new Promise((resolve, reject) => {
     MyModel.find({email: em}, (err, res) => {
       if(err) {
         reject(err)
       }
       const len = res.length
       if(len >= 1){
         // 存在
         resolve(res)
       }else {
         // 不存在
         resolve(null)
       }
     })
   })
}
// 保存
  save (obj) {
     const m = new MyModel(obj)
     return new Promise((resolve, reject)=> {
       m.save((err, res) => {
         if (err) {
           reject(err)
         }
         resolve(res)
         console.log(res)
       })
     })
     
  }
}
module.exports = new Userdb()

上面主要查詢用戶，和保存用戶

2.編輯 登錄註冊路由

// router/index.js

const Router = require('koa-router')


// 
const User = require('../db/user')
const home = new Router()

home.get('/', async (ctx) => {
    let title = '首頁'
    await ctx.render('index', {
        title
    })
})


// 子路由2
const page = new Router()

page.get('/404', async (ctx) => {
    let title = "404"
    await ctx.render('err', {
        title
    })
})


const login = new Router()

login.get('/', async (ctx) => {
    let title = "登錄"
    await ctx.render('login', {
        title
    })
}).post('/', async (ctx) => {
    const data = ctx.request.body
    let queryres = await User.queryEmail(data.email)
    console.log(queryres)
    if (queryres) {
        if(queryres[0].password === data.password) {
            ctx.body = {
                'code': 1,
                'data': queryres[0],
                'mesg': '登錄成功'
            }
        }else {
            ctx.body = {
                'code': 0,
                'data': {},
                'mesg': '密碼錯誤'
            }
        }
        
    }else {
        ctx.body = {
            'code': 0,
            'data': {},
            'mesg': '沒有該用戶，去註冊吧'
        }
    }
})

const register = new Router()

register.get('/', async (ctx) => {
    let title = "註冊"
    await ctx.render('register', {
        title
    })
}).post('/', async (ctx) => {
    const data = ctx.request.body
    let queryres = await User.queryEmail(data.email)
    if (queryres) {
        ctx.body = {
            'code': 0,
            'data': {},
            'mesg': '該郵箱已經存在哦'
        }
    }else {
        await User.save(data)
        ctx.body = {
            'code': 1,
            'data': {},
            'mesg': '保存成功'
        }
    }
   
})

// 裝載所有子路由
let router = new Router()
router.use('/', home.routes(), home.allowedMethods())
router.use('/page', page.routes(), page.allowedMethods())
router.use('/login', login.routes(), login.allowedMethods())
router.use('/register', register.routes(), register.allowedMethods())


module.exports = router

3.編輯index.js

const Koa = require('koa')
const views = require('koa-views')
const statics =  require('koa-static')
const bodyparser = require('koa-bodyparser')
const path = require('path')
const router =  require('./router')
const app = new Koa()

const staticPath = './static'

app.use(statics(
  path.join(__dirname, staticPath)
))
app.use(bodyparser())

// 加載模板引擎
app.use(views(path.join(__dirname, './views'), {
    extension: 'ejs'
  }))

// 加載路由中間件
app.use(router.routes()).use(router.allowedMethods())

app.listen(3000, () => {
    console.log('localhost:3000')
})

這個和之前的內容增加了koa-bodyparser對post數據的解析，利用ctx.request.body獲取

4.啓動服務

node index.js

打開瀏覽器localhost:3000

嘗試去登錄註冊一下，打開控制檯，就可以看得到相關後臺返回的數據

本文結束，下次文章利用session對登錄狀態的判斷

本文代碼地址：https://github.com/xiaqijian/...

---

本文首發於：node前端

不妨關注一下