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

上一篇博客我向大家介绍了基于ko-easyui实现的开发模板,博客地址:https://cloud.tencent.com/developer/article/1361378

但在还遗留三个问题。本篇幅文章就以解决这三问题展开。

一、代理

     前后端分离的开发模式,一定会存在前端开发工程,与后端工程不在面一个项目。那就一定需要引用代理来进行统一。否则就会遇到跨域的问题。这个问题使用的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这后的版本可以正常运行。

二、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的代码需要在整个项目的代码入口处引用。

三、路由

      路由我们选择了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');

四、显示效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JadePeng的技术博客

Docker+Jenkins持续集成环境(4):使用etcd+confd实现容器服务注册与发现

前面我们已经通过jenkins+docker搭建了基本的持续集成环境,实现了服务的自动构建和部署,但是,我们遇到一个问题,jenkins构建出来的镜像部署后,需...

41980
来自专栏开源优测

SQL注入测试神器sqlmap

SQL注入测试神器sqlmap 介绍 sqlmap 是一个开源的渗透测试工具,可以用来自动化的检测,利用SQL注入漏洞,获取数据库服务器的权限。 它具有功能强大...

47980
来自专栏java一日一条

Java 多线程处理任务的封装

最近公司项目很多地方使用多线程处理一些任务,逻辑代码和java多线程处理代码混合在一起,造成代码的可读性超级差,现在把Java多线程相关的处理抽出来,方面代码中...

16740
来自专栏cvm功能

通过控制台vnc方式登录云主机

1)打开控制台,点击到云服务器的实例一栏,找到要登录的云主机,点击最右侧的操作栏的登录按钮。

6.9K110
来自专栏吴伟祥

系统服务管理工具 systemd 原

在RHEL 7.x/CentOS 7.x版本中,一个重要的改变就是 使用systemd 管理机制,

13130
来自专栏bboysoul

windows server 2012 安装gooderp

这是我安装的第一个erp系统,为什么选择gooderp,因为它是开源的,个人认为还是不错的一个erp系统,windows上安装完全是傻瓜式的安装。

13620
来自专栏wannshan(javaer,RPC)

git 项目分支管理

2010年人家写的,(2010年我还不认识git)。原文在这http://nvie.com/posts/a-successful-git-branching-m...

308100
来自专栏猿人谷

CentOS7安装GitLab、汉化、邮箱配置及使用

一.GitLab简介 GitLab是利用Ruby On Rails开发的一个开源版本管理系统,实现了一个自托管的Git项目仓库,是集代码托管,测试,部署...

33970
来自专栏玩转JavaEE

Redis快照持久化

redis的基础知识我们已经准备的差不多了,接下来两篇文章,我想和大家聊聊redis持久化这个话题。

17400
来自专栏猿人谷

CentOS7安装GitLab、汉化、邮箱配置及使用

GitLab是利用Ruby On Rails开发的一个开源版本管理系统,实现了一个自托管的Git项目仓库,是集代码托管,测试,部署于一体的开源git仓库管理...

43800

扫码关注云+社区

领取腾讯云代金券