深易通BES网站前端开发说明

一、准备工作

1、引入js

系统使用了jquery和vue，需要先引入jquery.js和vue.js文件。

<script src="http://bes.zji.cn/Public/js/bes_jquery.js"></script>
<script src="http://bes.zji.cn/Public/js/bes_vue.js"></script>

2、配置基本参数

（1）建立配置文章bes_cfg.js并在页面进行引入；

（2）在配置文件中设置全局变量xlp_token并赋值，token的值可从http://bes.zji.cn注册申请

bes_cfg.js例：

// JavaScript Document
xlp_token='ucdbad1510312421';

3、引入核心js文件

bes_xlp.js是深易通BES前端开发所用的核心js文件，需要在页面进行引入。

<script src="http://bes.zji.cn/Public/js/bes_xlp.js"></script>

二、html页面配置

在页面中设置一个ID名称为xlp_vmm_list的DIV标签（如<div id="xlp_vmm_list"></div>），所有需要动态刷新的内容都放到这个div里面。

例1：

<div id="xlp_vmm_list">
    {{info1.title}}
</div>

例2：

<div id="xlp_vmm_list">
    <ul>
<li v-for="info in list1">
   <a v-bind:href="'new.html?id='+info.id">{{info.title}}</a>
</li>
    </ul>
</div>

三、通过vue进行页面数据渲染

直接通过函数即可为页面渲染数据（如：get_article(xlp_token,'1189','0','0',info1)）；

<div id="xlp_vmm_list">
    {{info1.title}}
</div>
<script language="javascript" type=text/javascript>
    get_article(xlp_token,'1189','0','0',info1);
</script>

四、直接通过js进行页面数据赋值

可以通过自定义函数实现更灵活的页面赋值，参见5.1的例2。

五、相关函数说明

1、获取单篇文章内容

get_article(xlp_token,aid,cat_id,is_title,func)

参数：

token:深易通BES平台申请的令牌号

aid:想要获取的文章的ID

cat_id:文章分类的类别ID

is_title：在获取文章后是否改变浏览器的标题为文章标题

func：获取文章后需要执行的函数，已内置info1-info5用于vue数据渲染，也可以是自定义函数

例1（使用vue渲染页面）：

<div id="xlp_vmm_list">
    <h2>{{info1.title}}</h2><br>
    <p>{{info1.info}}</p>
</div>
<script language="javascript" type=text/javascript>
    get_article(xlp_token,'1189','0','0',info1);
</script>

例2（使用自定义函数）：

<div id="test">
    正在加载。。。
</div>
<script language="javascript" type=text/javascript>
    function test(data){
        $("#test").text(data.title);
    }
    get_article(xlp_token,'1189','0','0',test);
</script>

5.2、获取文章列表

get_article_list(token,cat_id,num,storde,lift,func)

参数：

token:深易通BES平台申请的令牌号

cat_id:要获取的文章列表的分类，如果为0则表示所有分类

num:要获取的文章数量

storde:通过什么字段进行排序，如id

lift:排序方向，asc升序，desc降序

func:获取文章列表后需要执行的函数，已内置list1-list5用于vue数据渲染，也可以是自定义函数

例1（使用vue渲染页面）：

<div id="xlp_vmm_list">
    <ul>
<li v-for="info in list1">
   <a v-bind:href="'new.html?id='+info.id">{{info.title}}</a>
</li>
    </ul>
</div>
<script language="javascript" type=text/javascript>
    get_article_list(xlp_token,'1190','8','id','desc',list1);
</script>

例2（使用自定义函数）：

<div id="test">
    正在加载。。。
</div>
<script language="javascript" type=text/javascript>
    function test(data){    
        var html="";
        for(var i= 0;i<list.length;i++){  
                     html = html + list['title'] + '<br>';
                }
        $("#test").html(html);
    }
    var list = get_article(xlp_token,'1189','0','0',test);
</script>

5.3、获取单张图片

get_img(token,img_id,group_id,func)

参数：

token:深易通BES平台申请的令牌号

img_id:想要获取的图片的ID，如果为0则返回找到的***张图片

group_id:相册集ID，如果为0则返回整个相库中的***张图片

func：获取文章后需要执行的函数，已内置info1-info5用于vue数据渲染，也可以是自定义函数

5.4、获取图片集

get_img_list(token,group_id,num,storde,lift,func)

参数：

token:深易通BES平台申请的令牌号

group_id:要获取的相册集ID，如果为0则表示所有相册集

num:要获取的图片数量

storde:通过什么字段进行排序，如id

lift:排序方向，asc升序，desc降序

func:获取文章列表后需要执行的函数，已内置list1-list5用于vue数据渲染，也可以是自定义函数

5.5、获取主体（公司）信息

get_cinfo(token,cid,func)

参数：

token:深易通BES平台申请的令牌号

cid:主体ID，没有cid则获取总部主体信息，有cid则返回***cid的分支主体信息

func:获取文章列表后需要执行的函数，已内置list1-list5用于vue数据渲染，也可以是自定义函数

5.6、获取网站信息

get_home(token,func)

5.7、获取PC导航栏

get_pcnav(token,pid,func)

参数：

token:深易通BES平台申请的令牌号

pid:栏目ID，没有pid则获取所有栏目及子栏目，有pid则返回***栏目下的子栏目

func:获取文章列表后需要执行的函数，已内置list1-list5用于vue数据渲染，也可以是自定义函数

5.7、获取WAP导航栏

get_wapnav(token,pid,func)

参数：

token:深易通BES平台申请的令牌号

pid:栏目ID，没有pid则获取所有栏目及子栏目，有pid则返回***栏目下的子栏目

func:获取文章列表后需要执行的函数，已内置list1-list5用于vue数据渲染，也可以是自定义函数

5.8、提交表单数据

form_submit(setid,formid,func)

参数：

token：深易通BES平台申请的令牌号

setid：在bes后台表单系统中创建的表单ID

formid：前端页面中要提交的表单的表单ID

func：获取文章列表后需要执行的函数