|
|
|
|
# 插件模板
|
|
|
|
|
|
|
|
|
|
## 环境搭建
|
|
|
|
|
|
|
|
|
|
### 安装[svrx](https://docs.svrx.io/zh/quick-start.html)
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install -g @svrx/cli
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 运行
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm run dev
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## mock
|
|
|
|
|
|
|
|
|
|
修改route.js里的文件, 范例:
|
|
|
|
|
```js
|
|
|
|
|
get('/handle(.*)').to.handle((ctx) => { ctx.body = 'handle'; });
|
|
|
|
|
get('/blog(.*)').to.json({ code: 200 });
|
|
|
|
|
get('/code(.*)').to.send('code', 201);
|
|
|
|
|
get('/json(.*)').to.send({ json: true });
|
|
|
|
|
get('/text(.*)').to.send('haha');
|
|
|
|
|
get('/html(.*)').to.send('<html>haha</html>');
|
|
|
|
|
get('/rewrite:path(.*)').to.rewrite('/query{path}');
|
|
|
|
|
get('/redirect:path(.*)').to.redirect('localhost:9002/proxy{path}');
|
|
|
|
|
get('/api(.*)').to.proxy('http://mock.server.com/')
|
|
|
|
|
get('/test(.*)').to.proxy('http://mock.server.com/', {
|
|
|
|
|
secure: false,
|
|
|
|
|
})
|
|
|
|
|
get('/test/:id').to.proxy('http://{id}.dynamic.server.com/')
|
|
|
|
|
get('/query(.*)').to.handle((ctx) => {
|
|
|
|
|
ctx.body = ctx.query;
|
|
|
|
|
});
|
|
|
|
|
get('/header(.*)')
|
|
|
|
|
.to.header({ 'X-From': 'svrx' })
|
|
|
|
|
.json({ user: 'svrx' });
|
|
|
|
|
get('/user').to.json({ user: 'svrx' });
|
|
|
|
|
|
|
|
|
|
get('/sendFile/:path(.*)').to.sendFile('./{path}');
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
参考文档:
|
|
|
|
|
|
|
|
|
|
+ [route使用](https://docs.svrx.io/zh/guide/route.html)
|
|
|
|
|
+ [mock](https://docs.svrx.io/zh/blog/mock.html#%E4%BD%BF%E7%94%A8-mock-%E6%8F%92%E4%BB%B6%E6%9D%A5%E5%BF%AB%E9%80%9F%E6%A8%A1%E6%8B%9F%E6%8E%A5%E5%8F%A3)
|
|
|
|
|
+ [mock.js语法](http://mockjs.com/0.1/)
|
|
|
|
|
|
|
|
|
|
## 开发注意事项
|
|
|
|
|
|
|
|
|
|
+ 请求推荐使用[fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)
|
|
|
|
|
+ 内置插件要求有唯一的根元素, 添加data-root属性, 以此来进行DOM操作，data-root的值, 会再插件绑定时动态替换为全局唯一的id. data-root属性在代码片段中, 只允许在根元素上出现
|
|
|
|
|
+ TALL传递的数据从根元素的父级元素上通过data-[xxx]的方式获取
|
|
|
|
|
+ 代码片段中不允许添加id等属性（TALL页面中会出现多个同样的插件）
|
|
|
|
|
+ 插件的script里要添加全局的命名空间, 命名格式为p[id], 如插件id为100, namespace为p100
|
|
|
|
|
+ js获取根元素, 通过data-root='xxx', 其余元素通过根元素进行获取, 保证插入TALL后获取到的元素是正确的
|
