Fox-Wikis

§ FOX前端介绍

fox前端开发框架是基于Vue2.x为基础搭建，采用javascript/Typescript,H5,css3语言开发，PC端页面组件是基于ElementUI扩展而来，利用webpack编译工程代码。可以在多个平台上面运行。

其中包含主要模块： 路由 、 通讯 、 组件、 数据、外设 、校验器 、挡板。

§ 路由

Fox Router提供了⻚⾯局部刷新的能⼒， 可以动态的把vue component嵌入指定的router view范围内进⾏渲染， 是SPA应⽤的基础。通过Fox Router + Vue的组合， 能够快速构建SPA(单⻚⾯)应⽤。

§ 通讯

Fox前端框架的通讯服务主要是前后端的交易请求以及页面之间的消息接收。

服务请求主要的实现方式：

  1. 异步请求(回调函数)

    fox.service.request

    § 例子

    /**
  * 异步请求
  *
  * @param json对象， 参数如下：
  * id: 请求的唯⼀ID， ⽤于防⽌重复提交。如果两个请求的ID设置⼀致，
  * 那么这两个请求是不能同时提交的， 其中⼀个回给服务端拒绝(resubmit)
  * name: 服务请求路径
  * data: 请求数据
  * callback: 回调函数， 回调函数参数说明：
  * --- code 请求状态代码 0为正常， 1为取消， 2为错误， 3为进程， 4为超时， 其它错
  误
  * --- message 错误消息
  * --- data 响应数据
  *
  * @return Void
  */
  fox.service.request({
       id:"1",
       name:"demo/login/login",
       data:reqData,
       callback:function(code, message, data){
            if(code == 0){
                 if(fox.type(data)=="object"){
                      data=JSON.stringify(data);
                 }
                 //信息框
                 fox.layer.open("登录成功"+data);
            }else if(code == 1){
                 console.info("服务取消")
            }else if(code == 4){
                 console.info("服务超时")
            }else{
                 fox.layer.open("登录失败:"+message);
            }
       }
  });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

  2. 异步请求(Promise)

    fox.service.request

    参数aync设置为true， 并且不能设置callback函数

    § 例子

    /**
  * 异步请求
  *
  * @param json对象， 参数如下：
  * id: 请求的唯⼀ID， ⽤于防⽌重复提交。如果两个请求的ID设置⼀致，
  * 那么这两个请求是不能同时提交的， 其中⼀个回给服务端拒绝(resubmit)
  * name: 服务请求路径
  * data: 请求数据
  *
  * @return Promise
  */
  this.request({
       id:"1",
       name:"demo/login/login",
       data:reqData
       }).then((response)=>{
            if(response.code == 0){
                 let data;
                 if(fox.type(response.data)=="object"){
                      data=JSON.stringify(response.data);
                 }
                 //信息框
                 fox.layer.open(`登录成功:${data}`);
            }else{
                 fox.layer.open(`登录失败:${response.message}`);
            }
            },(error)=>{
            if(error.code == 1){
                 console.info("服务取消")
                 //信息框
                 fox.layer.open(`服务取消`);
            }else if(error.code == 4){
                 console.info("服务超时")
                 //信息框
                 fox.layer.open(`服务超时`);
            }else{
                 fox.layer.open(`请求异常:${error.message}`);
            }
  })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39

  3. sync/await请求

    fox.service.request

    参数aync设置为true， 并且不能设置callback函数,使⽤async函数函数要求ES7语法⽀持

    § 例子

      async loginByAsync_await(reqData) {
       /**
       * 请求
       *
       * @param json对象， 参数如下：
       * id: 请求的唯⼀ID， ⽤于防⽌重复提交。如果两个请求的ID设置⼀致，
       * 那么这两个请求是不能同时提交的， 其中⼀个回给服务端拒绝(resubmit)
       * name: 服务请求路径
       * data: 请求数据
       *
       * @return Promise
       */
       let res = await this.request({
            id:"1",
            name:"demo/login/login",
            data:reqData
       });
       if(res.code == 0){
            let data;
            if(fox.type(res.data)=="object"){
                 data=JSON.stringify(res.data);
            }
            fox.logger.info(`sync/await请求返回${data}`);
            //信息框
            fox.layer.open(`登录成功:${data}`);
       else if(res.code == 1){
            console.info("服务取消")
            //信息框
            fox.layer.open(`服务取消`);}else if(res.code == 4){
            console.info("服务超时")
            //信息框
            fox.layer.open(`服务超时`);
       }else{
            fox.layer.open(`登录失败:${res.message}`);
       }
  }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

  4. 同步通信(不推荐)

    fox.service.request

    必须设置async属性为false， Fox框架提供了同步请求服务的⽅法， 该在PC上调试的时候由于受限浏览器， ⽆法正常打开cover， 但是在Fox外壳中运⾏时是有loading界⾯得。

    § 例子

    /**
  * 异步请求
  *
  * @param json对象， 参数如下：
  * id: 请求的唯⼀ID， ⽤于防⽌重复提交。如果两个请求的ID设置⼀致，
  * 那么这两个请求是不能同时提交的， 其中⼀个回给服务端拒绝(resubmit)
  * name: 服务请求路径
  * async: 是否异步请求
  * data: 请求数据
  *
  * @return Promise
  */
  let res = this.request({
       id:"1",
       name:"demo/login/login",
       async:false,
       data:reqData
  });
  if(res.code == 0){
       let data;
       if(fox.type(res.data)=="object"){
            data=JSON.stringify(res.data);
       }
       fox.logger.info(`同步请求返回${data}`);
       //信息框
       fox.layer.open(`登录成功:${data}`);
  }else if(res.code == 1){
       console.info("服务取消")
       //信息框
       fox.layer.open(`服务取消`);
  }else if(res.code == 4){
       console.info("服务超时")
       //信息框
       fox.layer.open(`服务超时`);
  }else{
       fox.layer.open(`登录失败:${res.message}`);
  }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

§ 组件

Fox前端框架提供了一系列的页面UI构造组件，可参考 FOX3.0演示环境系统 (opens new window) 进行详细了解。

布局组件，用于页面构造,能够根据设备的宽高自动设置width和height，通过fox-page、 fox-header-bar、fox-conten、fox-group和fox-footer-bar构造一个页面结构，其中foxpage和fox-content是否必须的，fox-group根据内容需要构建，而fox-header-bar和foxfooter-bar根据需要采用。

层次结构：

fox-page
--fox-header-bar
--fox-footer-bar
--fox-content
--fox-group +

§ 数据

Fox框架提供了一个全局的数据存储，分别提供数据存储、数据获取、数据修改和数据删除的接口。

Bus的数据结构为树状结构，可在树任何一个节点存储数据，而不限于树叶节点。

§ Bus的增删改查用法

     //加入数据
     fox.bus.put("name","江成")
     //获取数据
     let name = fox.bus.get("name")
     //清理数据
     fox.bus.remove("name")
1
2
3
4
5
6

通用方式：fox.bus

Vue对象中：this.$bus

§ 外设

Fox框架提供了native外设服务平台，可对接用户自定义开发PC、Android、IOS 设备的外设服务，并提供配置文件来开启关闭相应的外设服务。

§ 校验器

§ 校验规则

  • require:true 必须输入的字段
  • email:true 必须输入正确格式的电子邮件
  • url:true 必须输入正确格式的网址
  • date:true 必须输入正确格式的日期。
  • dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性
  • number:true 必须输入合法的数字（负数，小数）
  • digits:true 必须输入整数
  • creditcard:true 必须输入合法的信用卡号
  • equalTo:"field" 输入值必须和 field 相同
  • maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）
  • minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）
  • rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）
  • range:[5,10] 输入值必须介于 5 和 10 之间
  • max:5 输入值不能大于 5
  • min:10 输入值不能小于 10

§ 将校验规则写到控件中

     <fox-text v-verify="['require']" tag="必须输入信息" v-model="name" class="my-text">客户姓名</fox-text>

     上述控件中 v-verify为设置校验规则的指令，而校验规则可以通过数组形式指定多个校验规则，另外tag属性可以为该控件指定特定的错误提示，否则使用默认的提示。

     <fox-idcard v-verify="['require','number']" v-model="idNumber" v-on:show="showIdImage" class="my-text">身份证号码</fox-idcard>

     上述控件中体现多校验规则的写法

     <fox-select v-verify="'require'" v-model="sex" vbind:datasoruce="m_dataSource.sex" class="my-text">性别</fox-select>

     上述控件中体现一个校验规则的简要写法
1
2
3
4
5
6
7
8
9
10
11

§ 挡板

Fox框架提供Mock数据挡板模块，模拟真实的网络请求，这种数据虽然是编写出来的，但是符合真实环境中的数据格式。

/train/hello 为 fox.service.request 中的 name

挡板信息在目录 mock 中。

§ 例子

Mock.mock(/\/train\/hello/, {
    header: {
        code: '200',
    },
    data: {
        name: '法外狂徒',
        money: 100,
        name2: '张三',
        sex2: '01',
        phone2: '18899998888',
        date2: '1990-02-12',
        test: '我不在data里，但是我背还原了',
        m_test: '我要被过滤',
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
最后更新于: 4/22/2022, 3:31:12 PM

Node环境 →