san框架官方文档:https://baidu.github.io/san/tutorial/start/

配置路由

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
define("router", ['appmanage'], function (appmanage) {
    var router = {};
    router.routes = {
        "default": "login",
        "centerlog": [{ appid: "center-log", name: "页面名称", el: "mainapp", meta: { openAccess: true } }],
     //meta可以用来配置是否能直接进入页面   
    router.beforeEach = function (from, to, next) {
        return next();
    }

    router.afterEach = function (from, to) {        
    }

    return appmanage.init(router);
});

页面

index.html
js
1
2
3
4
5
6
7
<div id="aaa"></div>
<script>
    require(['./index'], function (module) {
        var myApp = new module();
        myApp.attach(document.getElementById('aaa'));
    });
</script>
index-tpl.html
js
1
2
3
<div>
...
</div>
index.js
js
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
40
41
42
43
44
define(['san', 'api', 'router', 'EPStore', 'tpl!./index-tpl.html', 'laydate', '../../../../appframe/component/open/san-mui/lib/Pagination/Pagination'], function (san, $apiEP, $router, EPStore, template, laydate, Pagination) {

    return san.defineComponent({
        //模板内容
        template: template,

        //挂载控件
        components: {
            'san-pagination': Pagination.default
        },

        //初始化数据
        initData: function () {
            return {
                //参数初始化
                num:"",              
            };
        },

        // 组件生命周期
        attached: function () {
            //引用自身
            let self = this;
          //方法调用
            self.queryList();           
        },
        
         //下载文件
         downloadFile: function (url) {
            var form = $("<form>");
            form.attr("style", "display:none");
            form.attr("target", "");
            form.attr("method", "post");
            form.attr("action", url);
            $("body").append(form);
            form.submit();//表单提交
        },
        //方法
        queryList: function () {
            
        },
    });
});

接口调用

api.js
js
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
define("api", ['api_base', 'pops'], function (EPajax, pops) {
    var httpCore = {};
    var base = '/api';

    var urls = {
        getPending: base + '/a/b',
    }
    httpCore.getPending = function (params, fn) {
        EPajax.c(urls.getPending, 'post', params, fn);
    };
  //  公共拦截区域
    //  add request interceptors
    EPajax.interceptors.request = function (config, next) {
        config.contentType = "application/json;charset=UTF-8";
        config.data = JSON.stringify(config.data);
        pops.loading(true);
        return next(config);
    };

    //  add response interceptors
    EPajax.interceptors.response = function (data, next) {
        pops.loading(false);
        // 请求响应后做的公共处理，例如对session失效的情况处理
        if (data.resCode == '111111') {
            // 重新登录
        }
        return next(true); //true or false
    };
  return httpCore;
}
页面使用
js
1
2
3
4
5
6
7
8
9
10
11
 var params ={};
$apiEP.getPending(params, function (res) {
    if (res.resCode == '000000') {         
        Pops.success('成功',function(){
            
        });
    } else {
        //TODO:失败逻辑
        Pops.error(res.resMsg);
    }
});

工程目录

湖北电商前端工程目录图1