koa2系列教程：綜合koa2搭建登錄註冊頁面

koa2系列教程，持續更新

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

---

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

這篇是將前幾天的內容做個綜合，運用koa靜態文件處理，路由，模板引擎

我的版本：

項目結構是這樣子的：

1.寫路由控制

// router/index.js

const Router = require('koa-router')


// 子路由1
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
    })
})

const register = new Router()

register.get('/', async (ctx) => {
    let title = "註冊"
    await ctx.render('register', {
        title
    })
})

// 裝載所有子路由
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

2.寫ejs

這個自個寫就可以，隨意，想看我寫的，可以看開頭的源碼地址

3.index.js編寫

// index.js

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

const staticPath = './static'

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

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

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



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

4.啓動服務

node index.js

打開瀏覽器：localhost:3000

localhost:3000/login

localhost:3000/register

這篇就結束了，下一篇文章，將利用MongoDB，綜合起來，實現一個登陸註冊功能

---

本文首發於微信公衆號：node前端

不妨關注一下