koa2系列教程:综合koa2搭建登录注册页面

Anything0 2019-06-29

koa2系列教程,持续更新

  • koa2系列教程:koa2应用初见
  • koa2系列教程:koa2处理静态文件
  • koa2系列教程:koa2使用模板引擎
  • koa2系列教程:koa2路由控制中间件
  • koa2系列教程:综合koa2搭建登录注册页面
  • koa2系列教程:koa2实现登录注册功能

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

这篇是将前几天的内容做个综合,运用koa静态文件处理,路由,模板引擎

我的版本:

koa2系列教程:综合koa2搭建登录注册页面

项目结构是这样子的:

koa2系列教程:综合koa2搭建登录注册页面

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

这个自个写就可以,随意,想看我写的,可以看开头的源码地址

koa2系列教程:综合koa2搭建登录注册页面

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

koa2系列教程:综合koa2搭建登录注册页面

localhost:3000/login

koa2系列教程:综合koa2搭建登录注册页面

localhost:3000/register

koa2系列教程:综合koa2搭建登录注册页面

这篇就结束了,下一篇文章,将利用MongoDB,综合起来,实现一个登陆注册功能


本文首发于微信公众号:node前端

不妨关注一下

相关推荐