基於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、顯示效果