GMTC 前后端分离培训
此 repo 为《GMTC 深入理解前后端分离》培训的实践内容
此 repo 里面包含 SPA/MPA 三种模式的示例代码，需要大家挑选其中一个来体验前后端分离完整的开发流程
文件目录介绍
- docs - 文档目录，包含代码规范，接口文档
- mock_server - 前端开发人员本地开发调试服务器
- mpa - 基于 Node.js 的 MVC 项目
- spa - 基于 Vue 的单页项目
需要完成一个简单的需求，需求如下：
在首页上显示当前所处地址和现在的天气，样式不限
所处地址和天气信息由后端返回，并且已经制定好了接口文档，参见 docs/api/api-weather.md 文件
开发者根据上述任务描述需要完成的事情有如下：
- 挑选你的方案，这里只有 mpa 和 spa 的脚手架，ssr 暂无
- 根据接口文档编写前端开发者用于调试的 mock 接口，参见
mock_server - 在 mpa/spa 项目里通过调用请求，获取 mock server 里的测试数据
- 将数据显示在页面上
- 编写 testcase，测试获取天气接口是否正确
可以采用 axios 来实现，兼容 Node.js 和浏览器端
如下示例：
const axios = require('axios');
axios.get('http://localhoust:8079/api/user')
.then(function (data) {
console.log(data)
})
.catch(function (err) {
console.error(err)
})上面发送请求的代码在 spa 和 mpa 项目中都有对应的例子，可以参阅
在 test 目录中增加一个文件，如 example.test.js
describe('weather', function () {
const request = supertest('http://127.0.0.1:8079')
// 测试 API weather 是否正确
it('get weather', function (done) {
request.get('/api/user')
.expect('Content-Type', 'text/javascript; charset=UTF-8')
.expect('Access-Control-Allow-Origin', '*')
.expect(200)
.end(function (err, res) {
assert.ifError(err)
let text = res.text
let data = JSON.parse(text)
assert.equal(0, data.status)
assert.equal('sekiyika', data.data.name)
done()
})
})
})编写完成后，在根目录运行 npm run test 可查看测试用例运行的结果
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent