koa2初探之访问静态资源 | 获取get参数 | post参数 | responseText响应字符串 | 渲染json数据

访问静态资源

静态资源都放在public里面

我们在public/images里面放一张图片odst.jpg

就可以在浏览器通过http://localhost:3000/images/odst.jpg访问到这章图片

获取get参数

// public/sports.html
var xhr = new XMLHttpRequest()
        xhr.onload = () => {
            console.log('response arrived')
        }
        // get请求参数放在url?后面，通过查询字符串参数形式发送
        xhr.open('get','/list?type=login&vip=false&level=1')
        xhr.send()
        console.log('xxxxx')

// router/index.js
const router = require('koa-router')()
router.get('/list', async (ctx, next) => {
  console.log(ctx.request.query)
  ctx.body = 'list data'
})

通过ctx.request.query获取get参数

获取post参数

post请求默认通过纯文本的方式把请求体内容传给后端，通过send()方法参数进行传输

post请求可以把"key/value"，文件，Json类型的数据通过请求体传给后端，需要通过设置setRequestHeader()方法进行设置

// public/sports.html
var xhr = new XMLHttpRequest()
xhr.onload = () => {
  console.log('response arrived')
}
xhr.open('post', '/list2')
// setRequestHeader必须写在open()和send()中间才生效
// 向服务端发送什么格式的数据就配置什么类型的Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('type=login&vip=true&level=10')

// router/index.js
router.post('/list2', async (ctx, next) => {
  console.log(ctx.request.body)
  ctx.body = 'list data'
})

通过ctx.request.body获取get参数

responseText响应字符串

返回从服务端接收到的字符串，该属性为只读。

渲染json数据

1.通过操作dom拼接json数据

// router/index.js
router.get('/list3', async (ctx, next) => {
  ctx.body = {
    errcode: 0,
    errmsg: 'ok',
    list: [
      {"username" : "Dean", "age" : 28, "gender" : "male"},
      {"username" : "Amy", "age" : 30, "gender" : "female"},
      {"username" : "Rebbeca", "age" : 32, "gender" : "female"}
    ]
  }
})

<table border="1">
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
        </tr>
    </thead>
	<tbody>
    </tbody>
</table>

// 通过操作dom拼接json数据
var tbody = document.querySelector('tbody')
var xhr = new XMLHttpRequest()
xhr.onload = () => {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText)
        for (var i = 0; i < data.list.length; i++) {
            var tr = document.createElement('tr')
            for (var attr in data.list[i]) {
                var td = document.createElement('td')
                td.innerHTML = data.list[i][attr]
                tr.append(td)
            }
            tbody.append(tr)
        }
    }
}
xhr.open('get', '/list3')
xhr.send()

这种方式操作太麻烦了

2.通过模板字符串拼接json数据：

var tbody = document.querySelector('tbody')
var xhr = new XMLHttpRequest()
xhr.onload = () => {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText)
        tbody.innerHTML = data.list.map((v, i) => {
            return `
                <tr>
                    <td>${v.username}</td>
                    <td>${v.age}</td>
                    <td>${v.gender}</td>
                </tr>
            `
        }).join('')
    }
}
xhr.open('get', '/list3')
xhr.send()

这种方式简单一些，但是逻辑和视图层混在一起了，更好的方式是把视图抽离出来

3.所以引出第三种方式：模板引擎

先引入art-template:

// sports.html
<script src="javascripts/template-web.js"></script>

再写入模板内容（视图层）：

// sports.html
// 这里指定了模板的filename为tpl-tbody, 类型是text.html,这样在js中也能正常显示html高亮提示不会报错
<script id="tpl-tbody" type="text/html">
    {{ each list }}
    <tr>
    	// 默认通过$value指代被遍历的每一项
        <td>{{ $value.username }}</td>
        <td>{{ $value.age }}</td>
        <td>{{ $value.gender }}</td>
    </tr>
    {{ / each}}
</script>

接着写拼接逻辑：

// sports.html
<script>
	var tbody = document.querySelector('tbody')
	var xhr = new XMLHttpRequest()
	xhr.onload = () => {
	    if (xhr.status === 200) {
	        var data = JSON.parse(xhr.responseText)
	        // tempalte方法第一个参数就是定义的模板的filename,第二个参数是传入的data
	        // 这样就可以把生成的内容写入tbody里面了
	        tbody.innerHTML = template('tpl-tbody', data)
	    }
	}
	xhr.open('get', '/list3')
	xhr.send()
</script>