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端口号')
})
