Skip to content

DEV

Jump to bottom
tengattack edited this page Feb 1, 2016 · 15 revisions

开发

Command Description
npm install Install dependencies
npm run dev Run webpack and server with hot-reload enabled
npm run dev:win Run dev server on Win32 platform
npm run build Build assets for production use, dumped in ./build

开发文档

Modal 框

通过发起 open-modal 事件来调出 Modal 框。

rin-modal全局监听open-modal事件。在各组件内可以使用形如 this.$dispatch("open-modal", opts) 的方式调用 Modal 框。

opts 参数如下：

{
  modalId:"modal-id" //要调起的模态框id（复杂逻辑必填，全局唯一）
  title: "标题",  //复杂逻辑可留空
  content: "内容",  //复杂逻辑可留空
  noCancel: false, //是否隐藏取消按钮
  danger: false //是否为紧急通知（红黑条）
}

要在模态框内实现复杂逻辑，请将 rin-modal 作为逻辑组件的子组件。在组件模板内采用 <rin-modal modal-id="some-id"></rin-modal> 包裹模板内容。 复杂逻辑调用示例请参考：/src/components/modal-demo.vue

开发阶段可点击 copyright 和 logo 调出 Modal 框示例。

事件

VueJS 用事件进行各个模块间通讯是非常方便，所以很多对象都可以通过模块进行通讯

事件列表

  • UserSignInOK 用户登录成功事件[接收]，参数为用户对象(转发服务器端返回参数)，页面启动的时候，如果Cookie保留了数据，也会发送一次
  • UserSignInFailed 用户登录失败事件[接收]，参数为失败消息（文本）
  • UserSignOutOK 用户注销成功事件[接收]，无参数
  • UserSignIn 用户登录事件[发送]，参数为 { username: XXX, email: XXX, password: XXX }
  • UserSignOut 用户注销事件[发送]，无参数
  • displaySigninForm 显示登录界面[发送]，无参数

日期格式化

  • 使用说明：
<p>{{data | date 'yyyy-MM-dd HH:mm'}}</p>     //2015-10-21 16:38
<p>{{data | date 'MM-dd'}}</p>   			 //10-21
<p>{{data | date 'w'}}</p>   				 //三    //星期三
<p>{{data | date 'eM d,yyyy'}}</p>   		 //Oct 10,2015

在 script 中引入：

export default {
	filters: {
		'date':require('../filters/dateFormat.js')
	}
}

i18n

  • 显示文本，使用 {{ 'Text Message'|locale }}，会自动根据已经选定的语言进行切换。
  • 显示对象，使用 {{ object1|locale }}, 会自动查找对象内 object1.locale[ 语言 ] 进行显示，详细例子请看 app.vue 的 locale filter

API

此处 API 是针对新 UI 使用的 API，与旧版 API 相比它减少了前端的 HTTP 请求次数。

Torrent APIv2

Torrent APIv2 主要变化是将用户、团队和 tag 信息在一次请求中返回结果。

/api/v2/torrent/page/:pageNum?limit=LIMIT

/api/v2/torrent/user/:user_id?p=PAGE&limit=LIMIT

/api/v2/torrent/team/:team_id?p=PAGE&limit=LIMIT

/api/v2/torrent/:torrent_id

/api/v2/torrent/search?limit=LIMIT&p=PAGE&query=QUERY

hybridSearch 支持同时搜索 tag 和关键字，支持 and / or / not 方式查询，QUERY 举例：

  • "WORST ONE"|Asterisk 同时查询两部类似的番，使用 | 操作符；

  • "\"庶民\"" '"庶民' 搜索字符串中第一个文字带引号，请将 \" 转义或者使用单引号；

  • `55c057b124180bc3647feb1d` `54992d1cc8b118cf40b274b3` 同时搜索含有这两个 tag 的资源；

  • WORST ONE -KNA 同时搜索标题中有 WORST 和 ONE 且不包含 KNA 的资源；

  • tag 和关键字无法放在同一个 | 操作下，但是可以在同一个 QUERY 中。

  • 执行优先顺序：or > not > and

Bangumi APIv2

Bangumi APIv2 将 tag 信息在一次请求中返回结果。

/api/v2/bangumi/current

/api/v2/bangumi/recent

User APIv2

User APIv2 的请求将用户的团队，等待加入的团队在一次请求中返回结果。

/api/v2/user/session

/api/v2/user/:user_id

Team APIv2

Team APIv2 的请求将团队 tag、团队成员，包含等待确认的团队成员在一次请求中返回结果。

/api/v2/team/:team_id

Bangumi APIv2

以下两个 API 是获取近期（3 个月内）用户新发布的种子所关联的番组，返回一个 JSON 数组。

/api/v2/bangumi/user/:user_id

/api/v2/bangumi/team/:team_id

其他可能需要用到的部分之后更新。

Clone this wiki locally