koa2路由和ejs模板

Koa2路由和模板的使用

1.路由的使用

// 先安装路由
npm i koa-router --save


// 引入路由，并且实例化路由
const router = require('koa-router')()

// 使用路由：第一个参数是路由路径，第二个参数是一个函数，函数有俩个参数，第一个参数是设置响应的内容和查看请求参数以及url的使用。第二个参数是可以指定next()函数放行，继续往下执行

router.get('/', async (ctx, next) => {
        
    // 请求的信息和响应的内容都封装在了ctx中

    // 设置响应的内容
    ctx.body = '这是一个get请求'


    // 获取请求的url
    console.log(ctx.url)

    // 获取地址后面拼接的参数，是对象类型的

    console.log(ctx.query)

    // 获取url后面拼接的参数是字符串类型的
    
    console.log(ctx.querystring)
    
    // 或者提供ctx.request.xxx也能获取到拼接的参数和url等信息
        
    console.log(ctx.request.url, ctx.request.query)

})


// 动态路由的使用：可以在地址后面加上动态的地址，跟vue动态路由一样

router.get('/detail/:id', async cxt => {

    // params：获取动态路由的参数
    console.log(cxt.params)

    cxt.body = `拿到动态路由的参数${cxt.params.id}`
})

// 在使用路由的最下面配置路由,才能使用
app.use(router.routes()).use(router.allowedMethods())

2.完整路由使用的代码

const router = require('koa-router')()

const app = new koa()


router.get('/', async cxt => {

    cxt.body = '这是一个get请求'

}).get('/news', async cxt => {


    // 获取url中的参数
    console.log(cxt.query.id);

    console.log(cxt.querystring);

    console.log(cxt.url)

    console.log(cxt.request)

    cxt.body = '这是新闻信息'
})



// 动态路由
router.get('/detail/:id', async cxt => {

    console.log(cxt.params)
    cxt.body = `拿到动态路由的参数${cxt.params.id}`
})




// router.routes()：是启动路由。router.allowedMethods()：如果我们没有设置响应头的话，他会帮我们自动设置

app.use(router.routes()).use(router.allowedMethods())

app.listen(3000, () => {
    console.log('3000端口启动')
})

4.ejs模板的使用

// 1.跟目录下创建要放置els模板的文件夹，文件夹名一般是views


// 2.安装ejs模板和ejs

npm i koa-views --save

npm i ejs --save


// 引入koa-views并且配置

const views = require('koa-views')

// 配置ejs
app.use(views('views', {

    extension: 'ejs'    // 应用ejs模块
}))


// 3.在views下面创建ejs文件，内容就是html模板


// 4.在路由中使用

router.get('/get', async (ctx) => {

    let title = '你好模板引擎，我是一个标题'

    // 需要给模板引擎传递变量参数，指定第二个参数是一个对象，index是views下面的ejs文件的前缀

    await ctx.render('index', {
        title
    })
})

// 5.在模板中使用：注意模板结构还是html文件结构，注意如果是带有html元素的字符串，不能解析标签

<h2><%=title%></h2>


// 使用如下方法解析标签

<h2><%-title%></h2>


// for循环的语法使用

<ul>
      <%for(var i = 0;i < newsArr.length; i++) {%>
           <li><%=newsArr[i]%></li>
      <%}%>
</ul>


// if语法的使用

<%if(flag){%>
        
     您做的是对的

<%}else{%>
        
     您做的是错的
<%}%>


// 定义所有模板公用的数据，这样在所有的中间件路由中都可以使用

app.use(async (ctx, next) => {
    ctx.state = {
        name: '小美',
        sex: '女'
    }
    await next()
})




// 还有一种配置ejs模板的方法：但是这样配置的话，就不能以ejs后缀名结尾了，必须以.html结尾

app.use(views('views', {
   map: {
        html: 'ejs'
    }
}))

4.ejs模板的完整使用

const koa = require('koa'),
    router = require('koa-router')(),
    views = require('koa-views')

const app = new koa()


// 使用模板引擎：如果这样配置的话，那么模板的后缀名是.ejs
app.use(views('views', {

    extension: 'ejs'    // 应用ejs模块
}))


router.get('/get', async (ctx) => {

    let title = '你好模板引擎，我是一个标题'

    // 需要给模板引擎传递变量参数，指定第二个参数是一个对象
    await ctx.render('index', {
        title
    })
})


router.get('/news', async (ctx) => {

    let newsArr = ['推荐', '军事', '科学', '科技']
    
    let sex = '<h4>我是一个男孩</h4>'

    let flag = true

    await ctx.render('news', {
        newsArr,
        sex,
        flag
    })
})



// 定义模板的公共数据
app.use(async (ctx, next) => {
    ctx.state = {
        name: '小美',
        sex: '女'
    }
    await next()
})



// 开启使用路由
app.use(router.routes()).use(router.allowedMethods())
    


app.listen(3000, () => {
    console.log('3000端口号')
})