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

koa2系列教程,持续更新


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

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

我的版本:

image.png

项目结构是这样子的:

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,综合起来,实现一个登陆注册功能


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

不妨关注一下

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值