More Related Content
Similar to 美团点评技术沙龙13-前端工程化开发方案app-proto介绍 (20)
美团点评技术沙龙13-前端工程化开发方案app-proto介绍
- 10. • 新技术和工具 不断涌现 & 迭代
• Vue/Vuex
• Angular2
• React/Redux
•Grunt/gulp
•webpack
•babel
- 17. .
| |____config.js # 配置⽂文件(对接后端各种测试环境)
| |____contexts # ⾃自定义 Koa 上下⽂文环境
| | |____http.js
| |____datasources # datasources
| | |____pms
| | | |____guest.js # 获取数据(RESTful API HTTP请求)
| | | |____guest.json # Mock 数据
| | | |____inn
| | | | |____create.js
| | | | |____create.json
| | | |____login.js
| | | |____login.json
| |____main.js
| |____middlewares # Koa 中间件
| | |____$global.js
| |____pages # ⻚页⾯面(Web端路路由、渲染HTML)
| |____proxies # 代理理(输出JSON)
| | |____index.js
| | |____mock # http-proxy 请求代理理Mock⽬目录
| | | |____pms
| | | | |____guest.json
| | | | |____login.GET.json
| |____templates # Node端渲染模板
|____server.js
- 19. 按照约定写代码
── datasources
├── pms
│ ├── login.js
│ ├── login.json
│ └── inn
│ ├── create.js
│ └── get.js
└── upm
├── menu.js
└── menu.json
pms/api/v2.01/login
pms/api/v2.01/inn/create
pms/api/v2.01/inn/get
upm/api/v3.15/menu
{ PmsLogin: [Function: bound method],
PmsInnCreate: [Function: bound method],
PmsInnGet: [Function: bound method],
UpmMenu: [Function: bound method] }
server/datasources/{后端系统}/{接口目录}后端接口(RESTful API)
datasources/pms/inn/create.js PmsInnCreate(params={}, mock=false)
- 20. 1 /**
2 * ⽤用户登录
3 **/
4 export default function async (params) {
5 const http = this.http;
6 const pms = this.config.api.pms;
7 try {
8 const apiUri = `${pms.prefix}/login`;
9 const result = await http.post(apiUri, params);
10
11 // 简单的数据格式检查
12 if (Number(result.status) === 0 &&
13 ('data' in result) &&
14 ('bid' in result.data)) {
15 // 将bid值记录⾄至session
16 this.session.bid = result.data.bid;
17 }
18 return result;
19 } catch (e) {
20 // 后端API出现异常 (实时通知 or 记录⽇日志)
21 }
22
23 return null;
24 }
datasources/pms/login.js
没有跨域困扰(联调方便)
接口校验 & 二次加工
(多后端服务,API格式不一定一致)
合并请求(避免前端同时发送多个Ajax请求)
缓存数据
(如请求的城市字典、用户信息,短期内不会变动)
HTTP Basic Authentication
- 22. 如何调用datasources函数?
1 // Koa Middlewares
2 app.use(async (ctx, next) => {
3 // ...
4 const loginData = await this.ds.PmsLogin(params, false);
5 // ...
6 });
1 // Web (Browser)
2 ds('PmsLogin', { username, password }, true)
3 .then(success)
4 .catch(error);
Koa 中间件中通过 this.ds 对象调⽤
Web端统⼀封装ds() ⽅法,无需关注Headers等细节
- 26. export default {
urls: ['/pms'], // 多种正则如:['/pms', ['/pms/v1'], ['/pms/v**']]
methods: ['GET'], // 多种method:['GET', 'POST']
js: ['/assets/pms.js', 'http://code.jquery.com/jquery-1.12.0.min.js'],
css: ['/assets/style.css'],
template: 'default',
middlewares: [],
controller: function async(next) {
return {foo: '来⾃自服务端数据'};
}
}
server/pages/index.js
export default {
urls: ['/pms'],
controller: function async(next) {
return {foo: '来⾃自服务端数据'};
}
}
更简洁的写法
- 27. 服务端渲染 (Vue.js 示例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>app-proto</title>
<script>window.serveData={}</script>
</head>
<body>
<div id="app"></div>
<script src="//cdn/file-5917b08e4c7569d461b1.js"></script>
</body>
</html>
{
"status":0,"message":"成功(POST)",
"data":{"bid":"KsnL@^O5Qnw1C6p3#Z3sWCdty#bC^RE#","innCount":1}
}