当前位置:Gxlcms > html代码 > Node.js切近实战(二)之图书管理系统_html/css_WEB-ITnose

Node.js切近实战(二)之图书管理系统_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:14人阅读

上一篇Node.Js切近实战讲述了如何在VS上搭建Node.Js开发环境,相信看过那篇博客的同学,你已经对Node.Js有了好感,多了解些技术还是很有必要的。所谓实战见真功,还是要实战才行。我看博客园上一些专家荣誉的人写的博客,全是理论,没有实战,没有实战就没有发言权。熟能生巧,实战出理论。

我们看一下项目结构

典型的NodeJs三层架构,controller,model,view,这里每个部分什么职能,我就不多说了。

首先我们看一下登录界面,先上图,我看博客的时候,会首先看博客中有没有图,比如一篇博客讲的是实时通讯或者自己包装了一个html5播放器,结果整篇博客全是代码和汉字,没有图片,这样的博客也没有什么吸引力。废话不多说,看看界面。

还是BootStrap布局,只是我将BootStrap的primary样式改了下,变成Telerik Kendo UI中的primary样式,因为后面的话我们是要使用Kendo UI去做前端UI的。Telerik Kendo UI for Html5是很不错的,样式美观大方,支持Jquey和Angualr JS。地址: http://www.telerik.com/kendo-ui

其实这个登录界面很简单,还是使用jade模板,代码如下

doctype htmlhtml  head    base(href='/')    title #{title}    link(rel='stylesheet', href='/stylesheets/style.css')    link(rel='stylesheet',href='/stylesheets/bootstrap/css/bootstrap.min.css')    link(rel='stylesheet',href='/stylesheets/bootstrap/css/bootstrap-theme.min.css')    link(rel='stylesheet',href='/stylesheets/kendo/kendo.common-material.min.css')    link(rel='stylesheet',href='/stylesheets/kendo/kendo.material.min.css')    script(src='/javascripts/thirdpart/angular.min.js',type="text/javascript")  body(style='background-color:#CCCCCC;')    #main_layout(ng-app='loginModule' ng-controller='loginController')     .panel.panel-primary       .panel-heading         h3.panel-title          img(src='/images/userlogin.png' style='width:25px;height:25px')          label.left-margin-10 User login       form(ng-submit='loginIn()' role='form')        div.panel-content          .center-align-text            h3 Please Enter your Information          .row            .col-md-12.row-margin              .input-group.row-margin                span.input-group-addon(style='background-color:#FF9900')                  img.input-group-img(src='/images/userno.png')                input.form-control(ng-model='Login.UserName' type='text' autofocus='autofocus' placeholder='Please input user name' maxlength=15 required title='User name can\'t be empty!')            .col-md-12.row-margin-large              .input-group                span.input-group-addon(style='background-color:#009966')                  img.input-group-img(src='/images/password.jpg')                input.form-control(ng-model='Login.Password' type='password' placeholder='Please input password' required maxlength='15' title='Password can\'t be empty!')            .col-md-12.row-margin-large(style='margin-bottom:10px')            .col-md-6              div.row-middle-height               input#chk_remember.k-checkbox(type='checkbox' ng-model='IsRemember' ng-true-value='true' ng-false-value='false')               label.k-checkbox-label(for='chk_remember') Remember me            .col-md-6              .right-align-text.row-middle-height                button.k-button.k-primary(type='submit') Login          .row.row-margin            .center-align-text              span(ng-show='IsLoading')               img(src='/stylesheets/images/loading_2x.gif')               span(style='color:#337ab7;font-weight:bold')  login,please wait......script(type='text/javascript' src='/javascripts/local/login.js')

大家看到了,使用angularJs做前端数据绑定,有些人说这是MVC模式,我看是MVVM模式还差不多,做过Silverlight和WPF的同学肯定会认为这是MVVM模式。OK,在这里我们使用Html5的验证,效果

人气教程排行