一、跨域问题与解决
- 在前后端分离开发中，前端页面运行在某个域名（如 `http://localhost:8080`），后端服务运行在另一个域名（如 `http://localhost:3000`）。当前端页面通过 js（如 `axios`）向后端发送请求时，浏览器会执行同源策略，限制跨域请求，从而导致请求失败。
- 使用 `koa-cors` 解决跨域问题
```js
app.use(cors());
```
二、前端页面数据加载与渲染
- 页面加载事件：绑定 `load`，渲染
```js
window.addEventListener('load', function () {
});
```
（二）请求后端接口
- 使用 `axios` 向后端接口发送请求，获取数据库中的数据。
```js
// `url` 是后端服务的地址，例如 `http://localhost:3000`。
axios.get(`${url}/blogs`).then(res => {
// 处理响应数据
});
```
- 数据渲染到页面
```js
this.document.querySelector('tbody').innerHTML = arr.map(item => `
<tr>
<td>${item.id}</td>
<td>${item.title}</td>
<td>${item.author}</td>
<td>
<input type="button" value="编辑" οnclick="btnEdit(${item.id})">
<input type="button" value="删除" οnclick="btnDel(${item.id})">
</td>
</tr>
`).join('');
```