Skip to content

PengXing/gmtc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GMTC

GMTC 前后端分离培训

此 repo 为《GMTC 深入理解前后端分离》培训的实践内容

此 repo 里面包含 SPA/MPA 三种模式的示例代码,需要大家挑选其中一个来体验前后端分离完整的开发流程

文件目录介绍

  • docs - 文档目录,包含代码规范,接口文档
  • mock_server - 前端开发人员本地开发调试服务器
  • mpa - 基于 Node.js 的 MVC 项目
  • spa - 基于 Vue 的单页项目

任务

需要完成一个简单的需求,需求如下:

在首页上显示当前所处地址和现在的天气,样式不限

所处地址和天气信息由后端返回,并且已经制定好了接口文档,参见 docs/api/api-weather.md 文件

开发者根据上述任务描述需要完成的事情有如下:

  1. 挑选你的方案,这里只有 mpa 和 spa 的脚手架,ssr 暂无
  2. 根据接口文档编写前端开发者用于调试的 mock 接口,参见 mock_server
  3. 在 mpa/spa 项目里通过调用请求,获取 mock server 里的测试数据
  4. 将数据显示在页面上
  5. 编写 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 可查看测试用例运行的结果

About

gmtc 前后端分离培训

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published