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

koa2系列教程,持续更新前端


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

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

个人版本:github

image.png

项目结构是这样子的:segmentfault

image.png

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

这个自个写就能够,随意,想看我写的,能够看开头的源码地址浏览器

image.png

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微信

image.png

localhost:3000/login

localhost:3000/register

image.png

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


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

不妨关注一下koa

相关文章
相关标签/搜索