菜单

至于Breeze.js+Angular.js+KendoUI+BootStrap+TypeScript+EF4.5的采纳体验记录有

2018年12月14日 - Bootstrap

先是章节:数据交互

开头化工程

vue init webpack simple

工程结构如下:

  • simple/

    • build/
      • webpack.base.conf.js
    • src/

      • components/
        • Hello.vue
        • Count.vue

      • App.vue
      • main.js

 

TypeScript 安装以及部署

npm i -g typescript

每当工程根目录simple/下,执行tsc --init生成tsconfig.json,更改配置如下:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "ESNext",                     /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
      "dom",
      "es5",
      "es2015.promise",
      "es2017",
      "esnext"
      ],                              /* Specify library files to be included in the compilation:  */
    "allowJs": true,                       /* Allow javascript files to be compiled. */

    /* Strict Type-Checking Options */
    "strict": true,                            /* Enable all strict type-checking options. */

    /* Module Resolution Options */
    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */

    /* Experimental Options */
    "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    "emitDecoratorMetadata": true         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

唤醒:博客开篇的作。望辅导。不希罕随便喷。

Webpack 配置调整

npm i --save-dev typescript ts-loader

打开simple/build/webpack.base.conf.js,修改配置如下:

module.exports = {
  entry: {
    app: './src/main.ts'  // 将 main.js 重名为 main.ts 后,这里也要改
  },
...
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],  // 添加 .ts
    ...
  },
  module: {
    rules: [
      // 添加 ts-loader
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      ...
    ]
  }
}

什么呢非说,先上图。

babel 配置

npm i --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

打开simple/.babelrc,添加配置:

"plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    ...
  ]

即kendoui官网有详实的API表达,不进行过多麻烦,以下图中因故到之控件为条例:

单文件组件(Single File Components)

声明.vue文件也单纯文件组件,从中提取代码。
创建simple/src/sfc.d.ts,并形容副如下内容:

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

 

零件配置

npm i --save-dev vue-class-component
npm i --save-dev vue-property-decorator

main.js

App.vue

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class App extends Vue {
  name: 'app'
}
</script>

Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ count }}</h2>
    <comm-count :msg="msg"></comm-count>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'Hello',
  components: {
    CommCount: () => import('./Count.vue')
  }
})
export default class Hello extends Vue {
  // initial data
  msg: string = 'Welcome to Your Vue.js App'

  // computed
  get count () {
    return new Date().getSeconds()
  }

  // lifecycle hook
  mounted () {
    this.msg = 'Jack Ma'
    setInterval(this.greet, 1000)
  }

  // method
  greet () {
    this.msg = 'Jack Ma' + new Date().getSeconds()
  }
}
</script>

Count.vue

<template>
  <div>Count {{ msg }} {{ count }}</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'Count'
})
export default class Count extends Vue {
  @Prop()
  msg: string

  count = 'sss, ' + this.msg
}
</script>

一.DropDownList,Grid

参考

Microsoft TypeScript Vue
Starter

Vue.js TypeScript
支持

Writing Class-Based Components with Vue.js and
TypeScript

vue-class-component
vue-property-decorator


图片 1

 
 页面简洁方便,是自个儿个人于溺爱的。紧要来谈说DropDownList和GridOnLineEdit结合Angular和BreezeJs的下。

 

   1.Breeze.js

     ☼效用:负责处理前端和后端程序的通讯。

     

     
  图片 2

  用法:到官网下载Breeze包。在页面引入上图中JS。

         
添加Breeze.WebApi2.dll引用。 在后端控制器添加BreezeController特性。 

              

图片 3图片 4

[BreezeController(MaxAnyAllExpressionDepth = 2)]
    public class AppointmentsController : BaseController
    {
        readonly EFContextProvider<AppointmentContext> _contextProvider = new EFContextProvider<AppointmentContext>();
        readonly EFContextProvider<LookupContext> _lookupContextProvider = new EFContextProvider<LookupContext>();
        readonly EFContextProvider<SetupScreeningSiteContext> _siteContextProvider = new EFContextProvider<SetupScreeningSiteContext>();
        readonly EFContextProvider<LookupScreeningParameterContext> _screenCentreContextProvider = new EFContextProvider<LookupScreeningParameterContext>();
        TransactionSettings transactionSettings = null;

        /// <summary>
        /// Gets the context provider.
        /// </summary>
        /// <value>
        /// The context provider.
        /// </value>
        public EFContextProvider<AppointmentContext> ContextProvider
        {
            get { return _contextProvider; }
        }

        /// <summary>
        /// Gets or sets the transaction settings.
        /// </summary>
        /// <value>
        /// The transaction settings.
        /// </value>
        public TransactionSettings TransactionSettings
        {
            get { return transactionSettings; }
            set { transactionSettings = value; }
        }

        /// <summary>
        /// Returns metadata string serialized from data context.
        /// </summary>
        /// <returns>string</returns>
        [AccessRightAuthorize(AccessRight.DEFAULT_SITE)]
        //[AccessRightAuthorize(AccessRight.APPOINT_READ)]
        [HttpGet]
        public string Metadata()
        {
            string metadata = string.Empty;
            try
            {
                metadata = _contextProvider.Metadata();
                return ControllerHelper.attachDisplayNameToMetadata(metadata);
            }
            catch (Exception ex)
            {
                if (this.HandleException(ex))
                {
                    throw ex;
                }
            }
            return metadata;
        }

breeze 后台代码示例

 

图片 5图片 6

   public getScreeningCentreById(centreId: number, forceRemote: boolean): breeze.promises.IPromise<App.DataAccess.Setups.ScreeningParameterModel.IEntityCentre> {
            var query = this.entityQuery
                .from("GetScreeningCentreParametersById")
                .withParameters({ centreId: centreId });

            return this.manager.executeQuery(query)
                .then((data) => {
                return data.results[0];
            });
        }

JS 数据查询

 

breaze.js的语法类似LINQ。

历数简单例子:

this.entityQuery.from(“数据集合/后台方法名”).withParameters(“参数1,参数2,······”).

                       
where(“查询条件”).orderByDesc(“排序属性”).inlineCount();

this.manager.executeQueryLocally(query)

this.manager.executeQuery(query)

 

凡不是挺精晓。当尽就段代码的时刻。才会错过数将多少。manager是breeze在JS中定义的Entity。类似EF的概念。

executeQueryLocally是询问在缓存中的数量。默认只要查了之数都相会设有manager缓存中。executeQuery不会合取缓

怀着多少。每一遍都相会失去履行后台代码,从数据库拿。

 

干活规律:

  当用户发起数据要,系统会活动去找到改页面对应的控制器。通过Metadata()方法,得到所用之装有数据结构并且

回到给前端。

   
(注意:假使第一不善是翻新操作,没有用数据结构,则必须先行实施查询操作,否则会报错。)

   
 页面所有操作的多少会缓存浏览器然后经SaveChanges方法立异到数据库。参数”JObject
saveBundle” 是JSON对象

   
 。此前经过Metadata()获得之兼具结构以及数量都会见在中。(优点:收缩代码量,缺点:性能是只question.),当然,你为

     可以挑选仓储过程。至于Breeze.WebApi2.dll
之内贯彻,这节大家后的章节会详细表明。

通过这无异于多重之预备工作。就足以展开数量交互了。

 

2.多少显示。Grid

    拿到多少后绑定到Kendo
Ui就是几乎单参数配置的事务。不过,由于应用了Breeze,得到的多寡时beeze
Entity的数据结构

   
形式之JSON,不让KendoUI Grid的schema所认识,我得及公搞好关系,你才会辅助自己工作。怎么收拾,重写Schema,先成为

    你认识的指南再说。于是就暴发了下就段:

  图片 7图片 8

 //#region Breeze kendo grid extention Methods  
        public createSchema = (resourceName: string): any => {
            var schema: App.Shared.IBreezeKendoGridSchema = {
                total: function (data) {
                    return data.total;
                },
                model: {}
            };
            try {
                var typeObj = this.service.domainManager.getTypeByResourceName(resourceName);
            } catch (ex) {
                return schema;
            }
            var model: App.Shared.IBreezeKendoGridModel = {
                fields: {},
                id: {}
            };
            if (typeObj.keyProperties) {
                if (typeObj.keyProperties.length == 1) {
                    model.id = typeObj.keyProperties[0].name;
                } else if (typeObj.keyProperties.length > 1) {
                    var msg = "Multiple-key ID not supported";
                    this.logError(msg, "createSchema");
                    //typeObj.keyProperties.forEach(function (keyProp) {
                    //    model.id[keyProp.name] = keyProp.name;
                    //});
                }
            }
            typeObj.dataProperties.forEach(function (prop) {
                var type = "string";
                if (prop.dataType.isNumeric) {
                    type = "number";
                }
                else if (prop.dataType.isDate) {
                    type = "date";
                }
                else if (prop.dataType.getName() == "Boolean") {
                    type = "boolean";
                }
                model.fields[prop.name] = {
                    type: type,
                    defaultValue: prop.defaultValue,
                    nullable: prop.isNullable
                };
            });
            schema.model = model;
            return schema;
        }
//#endregion

createSchema

开了整容之后,遵照Kendo UI官网配置来,就生出矣下的图片。 

图片 9

备考:个人觉得就套架构最特其它长就是是不管需业务层的别数据操作代码。大大的压缩代码量。提高了付出功能。与此同时,由于

       
数据操作代码和出示层仍旧TypeScript实现。几乎全站所有的代码,可以轻易的Copy。辛劳苦苦多少只昼夜,一建

        Copy全带走。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图