基于ko-easyui实现的PC前端模板功能完善

      上一篇博客我向你们介绍了基于ko-easyui实现的开发模板，博客地址：http://www.javashuo.com/article/p-pzlgnmdt-hn.html。但在还遗留三个问题。本篇幅文章就以解决这三问题展开。

1、代理

     先后端分离的开发模式，必定会存在前端开发工程，与后端工程不在面一个项目。那就必定须要引用代理来进行统一。不然就会遇到跨域的问题。这个问题使用的webpack的反射代理模块解决，配置代码以下：

devServer:{
        contentBase: './dist',
        port: 9001,
        proxy:{
            '/api/*':{
                target: 'http://localhost:80/', //代理的目标服务器
                //pathRewrite: {"^/api": ""}, //重写向地址，这里是去年/api前缀，若是没有，则/api/a访问的地址是：http://192.168.0.13:1991/api/a
                secure: false //是否须要ssl的验证
            }
        }
    }

上述配置在webpack4.x这后的版本能够正常运行。

2、Mock

        Mock咱们能够用mockjs来解决，Mockjs的使用仍是至关简单。首先使用npm安装mockjs包，而后进行你的数据mockjs便可。简单mockjs代码以下：

import * as mockjs from 'mockjs';

export function deviceMock(){
    mockjs.mock('/api/device/index', 'get', ()=>{
        let devs = [];
        devs.push({ShortDevLabel: '001R101', addrName: '入井'});
        devs.push({ShortDevLabel: '001R102', addrName: '出井'});
        return {
            IsSuccess: true,
            Data: devs
        };
    });
}

上述代码Mock了一个/api/device/index的get请求返回数据。但须要注意的是，mockjs的代码须要在整个项目的代码入口处引用。

3、路由

      路由咱们选择了page.js，由于他更为灵活和方便，且依赖性低。对路由咱们要作到路由的变化要更改相应的动态组件变量，不然路由怎么生效呢。因此咱们实现的步骤以下：

3.1 入口处调用路由管理模块建立Page对象，并返回关联的ko监控对象

import 'html5-history-api';
import * as page from 'page';
import {RouteManage} from './routeManage';

export class Route{
    routeManage:RouteManage;
    component:KnockoutObservable<any>;
    page:any;
    constructor(){
        this.component = ko.observable();
        this.page = page;
    }
    start(){
        this.routeManage = new RouteManage(this.page, this.component);
        page({
            hashbang:true
        });
        return this.component;
    }
}

入口处调用代码

//路由
let route = new Route();
let component = route.start();

//测试组件
let rootVm={
    $services: createServices(),
    $route: route,
    $component: component,
    /**
     * 获取全局的弹出窗口
     */
    getDialogs: function(){
        //@ts-ignore
        let $dialogs = koeasyui.getContextFor(document.getElementById('dialogs'));
        return $dialogs;
    }
}
ko.applyBindings(rootVm, document.getElementById('app'));

从上述代码能够看出引用处，调用了路由管理类的start方法，并返回component这个ko监控对象；而后将处变量注入到app根对象。

3.2 将返回的Ko监控对象与视图中的component指令进行绑定，实现数据与视图的关联

接受上app根对象上的$component这个ko监控对象，而后将此对象与dom进行绑定

html:

<!-- ko if:component() -->
    <div data-bind="component:component"></div>
    <!-- /ko—>

javascript:

export class ViewModel{
    public component:KnockoutObservable<any>;
    public routes:any;
    constructor(params, componentDef, $root){
        this.component = $root.$component;
    }
}

 

3.3 注册路由，并跳转到自定义的默认路由

通过前面一连续的操做，咱们的路由与视图已经作好了绑定，如今就须要添加路由和绑定到默认路由了，代码以下：

let $route = <RouteManage>$root.$route.routeManage;
        $route.addRoute(new RouteInfo('/test', 'test', 'easyui', 'test'));
        $route.addRoute(new RouteInfo('/bind', 'bind', '列表', 'bind'));
        this.routes($route.routes);
        $root.$route.page.redirect('/test');

 

4、显示效果