Electronic Joint Business

Solution for E-Business

Web MVC Apps

基于 ASP.NET 开发多租户应用

在本文中,我们将创建一个多租户(multi-tenant)的 SaaS 应用,用到的技术包括:

  • 应用框架:ASP.NET Boilerplate
  • Web 框架:ASP.NET MVC 和 ASP.NET Web API
  • ORM : Entity Framework
  • SPA 框架:Angularjs
  • HTML/CSS 框架:Bootstrap

在阅读本文之前1,读者可以先试试在线演示

创建应用模板
ASP.NET Boilerplate 提供了许多模板可以更快地创建启动项目。利用 http://aspnetboilerplate.com/Templates 的模板,创建启动项目如下:

这里选择的是 “ABP + module zero” 模板 ( zero 模块为框架添加了用户、角色、租户…等等管理基础件),该模板为我们创建了一个“即用”的解决方案,包括登录页面、导航以及一个基于 bootstrap 的布局。下载之后,你就可以通过 Visual Studio 打开该解决方案,其层级结构(包括单元测试项目)如下:

First, we select EventCloud.Web as startup project. Solution comes with Entity Framework Code-First Migrations. So, (after restoring nuget packages) we open the Package Manager Console (PMC) and run Update-Database command to create the database:

 

, , , ,

用 vert.x 和 angular.js 构建基础 Axon 框架示例

在邮件列表上我常看到不断有人在问哪可以找到基础示例,最好用到了 vert.x 。由于本人对 Axon 和 vert.x 都略知一二,所以我想略尽薄力。这里我基于 vert.x 创建了个非常基础的 Axon 应用1。它用来维护个人的“待办事项”。这些事项可通过连接的网络浏览器间查阅,用户可以创建新的“待办事项”,也可以把某个事项标为“完成”。

我在浏览 Devoxx 站点时,正好学习了一个 javascript 前端框架 AngularJS 。这对 vert.x 技术栈来说是个很棒的补强。之前我一直使用 Bootstrap 来完成前端的工作,所以这个框架用起来很是顺手。图1-1 演示了本应用的最终效果。如果你想知道这个应用是怎么创建的,请继续阅读。

概述
我们创建的是个待办事项的演示。我们希望可以在网上创建待办事项。待办事项可被存储,当其他人连接到这个 Web 应用时也可以看到相同的待办事项。一旦待办事项被更新,或者将它们标为“完成”,这些变动会被推至其他连接的浏览器。图1-2 给出了示例的设计架构。你可以从 github 上检出这个示例。你可以查阅示例中的 readme 文件来运行本示例。

图1-2 中中包含了大量信息。首先客户端(在本例中是浏览器)通过 vert.x 事件总线与后端通讯。创建新事项或者或标记事项“已完成”都是在总线上发送给某个端点的一条消息。这些消息被侦听该端点的处理器( handler) 检出。接着,处理器通过 Axon 网关发出相应的命令(command) 让命令处理器(command handler)进行后续步骤,命令处理器使用 ToDo 聚合体 (aggregate) 来完成实际操作。Axon 用事件来改变状态。这些事件也为 ToDo 事件侦听器所使用,该组件会发送消息给 vert.x 事件总线以持久化待办事项,还会发送消息给客户端在侦听的主题。在客户端上,我们通过 AngularJS 控制器注册了个侦听器来侦听这些 vert.x 事件并更新数据模型。所有的更改会为视图自动拾取并更改。

听起来挺复杂的,下面我们逐一对某些片段进行讲解。

>>> 阅读全文

 

, , , , , ,

利用 ASP.NET MVC 4 开发 Web 应用 (一)

文章评价:
现在几乎所有的网站都不停地扩张,一旦它开始增长,你就会发现无论是编写、组织和维护一个站点都十分地困难。当我们往项目中添加新功能或添加新开发人员的时候,任何设计拙劣的大型的 Web 应用都可能会去控制。因此本文隐藏的设计思想是任何一个网站的设计,无论是对网页设计师(初级到中级)还是搜索引擎而言,其架构必须是简单、易于理解的。在这篇文章中,我想要设计一个用于维护个人联系方式的站点。任何一个大型社区都可以重用该程序及其附加功能和模块。因此,设计必须很容易适应未来的业务增长。

在这篇文章中,我将讨论如何创建和设计用户界面(UI)的方式,该方式将把 UI 将从业务逻辑分离,可以由独立的设计师/开发人员负责创建。我们将会用到的框架包括 ASP.NET MVC、Knockout、Jquery 和 Bootstrap。

在后续文章中,我们会更多地谈到有关数据库设计以及如何利用 SQL Server 2008 、Entity Framework 、Castle Windsor 依赖注入框架来实现商业逻辑。

分离关注点:主要目标
关键概念是如何剥离大部分或全部商业逻辑。商业逻辑不应和页面捆绑,否则在需要重用另一个页面里的逻辑就会难以处理。很多人会忍不住对代码进行复制粘贴。一旦这样做了,项目就变得难以维护。另一个重要概念是将业务逻辑从数据存取层剥离出来,由于我们将考虑使用 Entity Framework ,这应该不成为问题。我们可以轻松地将所有 EF 的文件放到另一个 Assembly 中,然后添加该 Assembly 的引用即可。顶层设计概念如下所示:

将这一概念贯彻到 Visual Studio 开发工具中,我们得到了最后的解决方案:

>>> 阅读全文

 

, , , , , , , ,

WebGL 教程(三)动起来!

欢迎来到Lesson 3!在这一课中我们将开始尝试让物体运动起来。本节课的内容是基于 NeHe 的 OpenGL 教程的第四课改写的。

Here’s what the lesson looks like when run on a browser that supports WebGL:

Click here and you’ll see the live WebGL version, if you’ve got a browser that supports it; here’s how to get one if you don’t.

More on how it all works below…

The usual warning: these lessons are targeted at people with a reasonable amount of programming knowledge, but no real experience in 3D graphics; the aim is to get you up and running, with a good understanding of what’s going on in the code, so that you can start producing your own 3D Web pages as quickly as possible. If you haven’t read the first and second tutorials already, you should probably do so before reading this one — here I will only explain the differences between the code for lesson 2 and the new code.

>>> 阅读全文

 

, , , ,

WebGL 教程 (二) 添加颜色

文章评价:
英文原文
欢迎来到 WebGL 教程的第二篇。在本文中我们将会研究一下如何给场景中的物体上色。本文的内容是基于 NeHe 的 OpenGL 教程的第三章改写的。

如果你的浏览器支持 WebGL 的话,你可以点击这里 来浏览线上版本。

事先声明,本系列的教程是面向那些具备相应编程知识,但没有实际 3D 图形经验的人群;目标是让学习者创建并运行代码,并且明白代码其中的含义,从而可以快速地创建自己的 3D Web 页面。如果你还没有阅读第一课,请先看一下第一课的内容吧。因为本课中我只会讲解那些与第一课中不同的新知识。

和上一篇文章一样,本教程应该有不少错误和混淆,如果你发现了哪些毗漏,请不吝留言斧正。

有两种方法可以获得上面实例的代码:在浏览线上版本时在页面中选择“查看源代码”;你也可以从 Github 中克隆源代码的压缩包。

>>> 阅读全文

 

, , , , , ,

WebGL 教程 (一)三角形和正方形

文章评价:

欢迎来到我的第一篇 WebGL 教程 !本文借鉴了 NeHe 的 OpenGL 教程第二章,它是学习游戏开发的 3D 图形中好文章。本文将带你学习如何在网页上绘制三角形和正方形。也许这不够酷,但很好地阐述了如何用 WebGL 编程;如果你明白了这部分是如何工作,那么剩下的就相当简单了。

我们先看一下本文在支持 WebGL 的浏览器中的运行效果:

要继续本教程,你需要安装支持 WebGL 的浏览器,比如 IE11、 FireFox、Chrome 或者 Safari 等。 下面我们将继续了解如何用 WebGL 绘制三角形和正方形。

注意: 本教程是面向那些具有一定的编程知识,但没有体验过 3D 图形编程的人群,目标是让你从零开始,透过运行代码深入了解其工作原理,以便能尽快地开始编写自己的 3D 网页。我在自学 WebGL 的时候顺便写了这些教程,难免会有毗漏,欢迎大家斧正。如果您发现哪里存在谬误,请麻烦给我留言并加以指正。

>>> 阅读全文

 

, , , , , , ,

初识 Sinatra (四)

文章评价:

这是本系列文章的最后一部分。本教程的目标是带领从未用过 Sinatra 的用户从头开始创建一个应用,并将之最后发布。

到前三部分结束时,我们已经完成了 To Do List 应用的大部分功能。在本系列的最后一部分,我们将先看看如何用 Sass 来编写 CSS ,之后将本应用发布到 Heroku 云服务上。

Logo
每个上点档次的应用都应有一个 logo,所以我创建了一个简单的“tick” logo,你可以在 Github 上找到。我们用它来作为本应用的头条的背景图片。打开 Styles.css 并添加下列 CSS:

h1.logo{
  font-family: helvetica,arial,sans-serif;
  font-size: 24px;
  color: white;
  padding: 64px 0 0;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.3em;
  background: transparent url(/logo.png) 50% 0 no-repeat;
  }

(注意 – 也许你还发现,你需要为 layout.slim 的 h1 元素添加一个 ‘logo’ 类,这段 CSS 才会起作用。)

>>> 阅读全文

 

, , , , , , , ,

SASS 使用介绍

简单地说: Sass 就是程序化的 CSS。 Sass (即 Syntactically Awesome StyleSheets 的缩写,意思是“相当迷人的样式表”) 是一种动态样式语言,它受到 Haml 的简洁精炼的语法的启发,提供了 变量、操作、嵌套选择器(selector)和 Mixin 等等功能来增强样式表,因此和单纯使用 CSS 语法相比,Sass 更容易编写,也更容易阅读。现在 Sass 是 Ruby 上的 Haml 插件的组件之一,我们可以用 Haml 来处理 HTML 标记,而用 Sass 来处理 CSS 标记。 其作者是这样介绍 Sass 的优点的:

“ Sass 是 CSS 之上的一种元语言 (meta-language),用于简洁、结构化地描述文档的样式,和普通 CSS 相比功能更强大。Sass 提供的更简洁、更优雅的 CSS 语法,同时还实现了许多特性,可以帮助创建更易于管理的样式表。”

Sass 的发展有两种语法规则( syntaxes )。。原先 Sass 采用了 Haml 的缩排语法,没有括号,分号,它使用行缩进的方式来指定 CSS 块,这对于习惯了 CSS 语法的页面设计师来说很不习惯,同时也不能兼容既有的 CSS,因此 Sass 3 就演变成了 Scss (Sassy CSS),它是 CSS3 语法的的拓展升级,摒弃了原来的缩进语法,而采用了 CSS 设计师的惯用的花括号 {}。 Scss 100% 兼容了CSS3, 因此在一个有效的 CSS3 文件同时可以被 Scss 所识别。除此之外,它还支持我们能够找到的所有扩展,甚至包括一些非标准语法,例如微软的 expression() 函数和 filter 属性。

为了加以区别, 使用缩进语法的文件以 .sass 为扩展名,而采用 Scss 语法的文件则以 .scss 作为扩展名

参考:
http://sass-lang.com/tutorial.html

 

, , ,

Rails3 技术手册 (一) 概述

英文原文
Ruby on Rails 是用于快速简洁地开发 Web 应用框架。它被 37signal 公司的项目管理工具 Basecamp 中剥离出来,其作者 David Heinemeier Hansson 率先用 Rails 着手解决手边的现实问题。 我们会发现用 Rails 进行开发时充满乐趣, Rails 负担起了开发中那些无聊的琐事,因此开发者能专注于所要解决的问题本身。

你如果不理解这些开发中的琐事,可以看一下下面的例子:编写过 Web 应用的开发者都不可避免地会用到字典结构、缓存、数据持久化、模板系统、测试框架、路由等等组件。Rails 自身就带了这堆让应用上线运行所必需的组件,而且作者在编写它们时充分考虑了彼此的适配问题。以往希望模板语言能和复杂的 ORM 层能在一起工作的麻烦现在再也没有了。一切将是如此简单。

现在开发者无需再为数据库等的组件编写大量繁琐的 XML 配置。Rails 基于约定而非配置,配置因而精简到最少。假如 Animal 类就是关联到数据库的 animals 数据表,为什么还要让开发者花时间写配置文件来链接它们? 这一切就让 Rails 来帮你吧。

简而言之,Rails 让 Web 开发充满乐趣。

架构
Rails 应用开发是基于模型-视图-控制器模式的 (MVC) 的。想了解 Rails 是如何使用 MVC 的, 最简单的办法是透过了解 Rails 请求的生命周期。如图1-1所示:

>>> 阅读全文

 

, , , , , , ,

初识 Sinatra (三)

文章评分:
在本教程的第二部分,我们利用 DataMapper 将任务保存到后台数据库,同时我们还用 Sinatra 创建了 web 前端以便显示、添加、删除和结束任务。现在这个 Just do it 应用功能齐备,但是样子还有点丑陋。

在本章中,我们继续对这个应用做些美化修饰,并增加一些功能,让你能够创建多个任务列表。

添加样式
现在我们用样式表来对应用进行美化修饰。在你的 “layout.slim” 中添加下面这行代码:

<link rel="stylesheet" media="screen, projection" href="/styles.css">

现在创建一个名为” styles.css”的文件,并保存在”public”文件夹中,将下面 CSS 内容添加到该文件中:

.completed{
  text-decoration: line-through;
  }
.tasks{
  padding:0;
  list-style:none;
  width:400px;
  }
.task{
  position:relative;
  padding:2px 0 2px 28px;
  border-bottom: dotted 1px #ccc;
}
form.update{
  position:absolute;
  bottom:2px;
  left:0;
  }
form.update input{
  background:white;
  color:white;
  padding:0 2px;
  border:solid 1px gray;
  cursor:pointer;
}
.tasks li.completed form.update input{
  color:#47FD6B;
  }
form.delete{
  display:inline;
  }
form.delete input{
  background:none;
  cursor:pointer;
  border:none;
  }

刷新页面,现在页面是不是看起来好多了,也更像一个真正的任务列表了。你也许注意到,该样式表中有个 ‘completed’ 类。 到目前为止,我们显示已完成的任务的方法是为它添加完成的时间,这样看起来不怎么样。我们来修改一下 task 视图,添加 ‘completed’ 类。这样利用样式表,已完成的任务看起来就是完全不同的风格。打开 “task.slim” 做如下修改:

>>> 阅读全文

 

, , , , , ,

初识 Sinatra (二)

文章评价:
在本文的第一部分,我们演示如何配置 Sinatra 并显示了几个页面。现在是真正有趣的部分,在本节中,我们将演示如何用数据库来保存任务。

这里我们会使用 SQLite 作为本地数据库,正如它的名字说表述的,这是一个轻量级的文件数据库,无需任何配置。如果你没有安装过这个数据库,可以参考本页的一些简单介绍。

为了和数据库交互,我们会使用 DataMapper。这个 ORM 的工作方式和 Active Record 类似,但在方法和语法上略有不同。

为了配合 SQLite 使用 DataMapper,下面的 Gem包需要被安装:

gem install data_mapper dm-sqlite-adapter sqlite3

我们需在 main.rb 文件的头部添加 DataMapper的请求:

>>> 阅读全文

 

, , , , ,

初识 Sinatra (一)

文章评价:

Sinatra 是一个基于 Ruby 语言,以最小精力为代价快速创建 web 应用为目的的 DSL。如果您对日渐庞大的 Rails,感到厌倦,不如通过本教程来学习一下轻盈的 Sinatra。本系列教程有四个部分,它将带着你一步一步用 Sinatra 和 DataMap 创建一个功能齐备的线上代办事项的应用,我们称它为“Just Do It”。希望读者能通过本文了解到利用 Sinatra 创建应用是多么的简单而快速。

首先我们先进行开发 Sinatra 应用的准备工作。

安装 Sinatra
要让 Sinatra 能工作,你首先必须安装 Ruby。这里我建议您使用 RVM 来安装。( 你可以参考 Glenn Goodrich 的教程)。一旦你安装好了 Ruby 和 Rubygems,你就可以安装 Sinatra 了。用 Rubygems 来安装 Sinatra 不过是小菜一碟,你只需要打开命令行并输入:

gem install sinatra

如此简单,你就可以做好一切准备工作了。

>>> 阅读全文

 

, , , ,

浅析HTA技术

文章评价:
近几年来,XUL 技术方兴未艾, XAML(WPF),Mozilla XUL 等新技术代表着一种以标记语言和脚本构造桌面应用程序的潮流,但是其实早在 1999 年,就有一项 Microsoft 的技术实现了这种想法,这就是 HTA 技术,它的功能十分强大,甚至有时候,它也背上了“木马”的恶名,但是 HTA 却是一切 XUL 技术的鼻祖,它影响深远,包括苹果公司后面推出的 PastryKit 技术,不过就是 HTA 技术在手机上的迁移而已。

MS HTA 技术起源时间不详,早在 1999 年 3 月发布的ie 5.0就带有 mshta.exe 运行时,(Win98SE),远远早于 XUL 和 XAML。与这两种 XUL 技术不同的是,HTA 技术并没有产生新的标记,而只是利用现成的 HTML 标记,这虽然在流媒体、动画技术等等方便表现力较弱,却带来一个很大的好处,即我们利用现成的网页来构造桌面应用程序。

随着 HTML5.0 的兴起,RIA 技术从 Flash,Silverlight 再次转向了 HTML 标记,HTA 技术必然焕发出新的光彩。

Microsoft 对 HTA 技术下的定义是 HTML Application(HTML应用程序),它通过 MSHTA 运行时,可以直接将 HTML 保存成 HTA 为后缀的程序,该程序就是一个独立的应用软件,与VB、C++等程序语言所设计的软件没什么差别。也有人把 HTA 称为 Javascript/vbscript的 GUI. 无疑,现成的 javascript 框架、ActiveX 和 AJAX 等技术手段都能为 HTA 所用。甚至我们可以在 WinPE 环境中运行 HTA 程序,为 WinPE 定制出漂亮的界面来。

下面我们来看一下 HTA 技术的具体应用。最简单的 HTA 程序,可以不需要任何脚本,而只是一段纯的 html,只需要将其后缀名改为 .hta,双击即可运行。

>>> 阅读全文

 

, , , , , ,