nodejs+express Mvc站点

时间:2022-09-20 19:49:58

nodejs+express Mvc站点

像asp.net Mvc一样开发nodejs+express Mvc站点

首先,我是个c#码农。从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风学了一些,对前端的框架也了解一些,angularJs,requirejs,commonJs,backbone等等前端的mvc框架也异常流行,与这些前端的流行框架一同火起来的还有node.js. Node.js将javascript作为服务器端的代码开发,由其语言特性(单线程,异步)等以高效率高吞吐著称。这里不会去讨论node.js的好的坏的。有兴趣的自行google。

随着node.js流行,一个些快速开发 的框架也出现了,express算是一个web开始开发的框架。关于express的更多知识呢,同志们自行google吧(哎,篇幅太有限,水太深,不敢深趟,T.T).

前面说了几个基础框架,那么我们就要用这些框架做什么呢?我想从事过Asp.Net Mvc开发的同学们都清楚.Net Mvc框架的站点结构,这里我也给大伙截个图,

nodejs+express Mvc站点

简单说下这个目录结构:

app_start:文件下一般放置应用程序启动时的执行代码如路由注册,bundle注册,ViewEngine,ValueProvider等通用功能的注册

Content:一般放置css,image等静态资源

Controller:这是控制器代码放置的位置

Models:实体代码问题

Views:视图模板位置

其实还有个Area的目录,Area目录则是放置区域代码内含有controller,views目录

对于习惯了这个目录结构的同学们,对每个目录的功能都很清楚了吧,这里就不多说了。

那么在Nodejs+expressjs的情况下是什么样的目录呢?

nodejs+express Mvc站点

也简单的说说这个目录吧,

Bin目录其实是express框架启动的脚本所在,

Node_modules则是express核心代码所有目录

Public是公共资源的所在目录,类似与.netMvc中的content目录,不过脚本资源也会在这个目录下,这个目录下的文件是静态匹配的,不经过路由的,当然你也可以通过配置改为其它的目录。

Routes:是路由注册的地方,其实也可以认为是代码所在的地方,从命令行生成项目后,routes目录下有index.js和user.js两个文件,可以看出这里应该就是业务逻辑处理的地方

Views和.netMvc一样,是视图模板所在的地方。

App.js则是整个站点的入口,事实上是在bin目录下名为www的文件启动的

哎呀呀,前面讲了这么多,还没入主题呢,这结构真够拖沓的。

Ok ,我们尽快进入主题。

前面讲了目录结构上的差异,现在讲讲开发模式上的差异。

打开express站点的routes目录下index.js代码:

nodejs+express Mvc站点
var express  = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function (req, res) { // 注册默认路由/,的处理器

    res.render('index', { title: 'Express' });  // 输出views

});

module.exports = router
nodejs+express Mvc站点

从代码上解读,我们很容易知道,以上代码的意思(见上面的注释 //后面的内容)。如果您还不能理解上面的代码,您可以去google下nodejs和express吧,那样会帮助你理解。

在express中router提供了get,post,all等模式的注册。Get即处理get请求,post即处理post的请求,all则接受所有的请求。而对于.NetMvc则是将路由注册和相应处理逻辑分离。在.netMvc中的实现是这样的

Globel.asmx

 RouteConfig.RegisterRoutes(RouteTable.Routes);

App_start\RouteConfig.cs中

nodejs+express Mvc站点
  public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(

                name: "Default",

                url: "{controller}/{action}/{id}",

                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

            );

        }
nodejs+express Mvc站点

最后在controller\HomeController中实现业务逻辑

nodejs+express Mvc站点
 public ActionResult Index()

        {

            return View();

        }
nodejs+express Mvc站点

在.NetMVC中,路由注册时会在请求时自动映射到处理器上。事实上,在NetMvc是和express一样的实现逻辑,只不过,NetMvc提供了自动映射的封装。

好了。今天的重点就是这个了。对于Asp.Net Mvc的开发人员而言这个逻辑清晰(其实是用久了理解一点都不费力,不得不说,如果第一次接触,还是蛮不好理解的,没有express那么直观),所以现在就对express进行二次开发,让它也能支持这种统一路由并自动映射到处理器的功能,同时将.NetMvc提供的一些功能加上,,例如Area,webconfig,能够实现配置在业务请求添加拦截器(httpHandler,httpModule)的功能等,让express的开发过程和开发模式尽可能的和Asp.Net一致。

nodejs+express Mvc站点

目前已改造的功能有:

1、路由配置和处理器分离,自动映射

RouteConfig.js

nodejs+express Mvc站点
1 this.registerRoute = function (route) {
2 route.mapRoute({
3 name: "defaults",
4 url: "/:area?/:controller/:action/:id?",
5 defaults: { controller: "home", action: "index" },
6 namespace: ""
7 });
8 };
nodejs+express Mvc站点

SSOContoller.js

nodejs+express Mvc站点
module.exports = function () {

    this.login = function (model) {

        console.log("ssoController:login:start");

        console.log(model);

        if (model.userUid == "admin" && model.password == "111111") {

            this.context.response.cookie("ticket", "djaskdfjskjdfjsd");

            return this.redirectToAction("index", "home");

        }

        this.ViewBag.returnUrl = model.ReturnUrl

        return this.view({title:"单点登陆",name:""});

    }

}
nodejs+express Mvc站点

2、支持webconfig配置,添加自定义HttpHanlder,目前只是简单的Handler的配置,后面会添加url匹配

Webconfig.js

nodejs+express Mvc站点
module.exports = {

    "server.web": {

        modules: {

            handlers: [

                { name: "sso", handler: "./SSOHandler.js",rules=”*” },

                { name: "default", handler: "./DefaultHandler.js" rules=”*” },

                { name: "AttachmentDownloadHandler", handler: "./DownLoadHandler.js" rules=”*/AttachmentDownload.handler” }

            ]

        }

    },

    appsetings: {

        ssoLogin: "/sso/login?ReturnUrl=",

        ssoLogout: "/sso/logout"

        ,controllerFix:"controller"

    }

}
nodejs+express Mvc站点

3、实现BaseController中提供ViewResult,RedirectResult等ActionResult的实现

4、在Views中使用Model,ViewBag,HtmlHelper等,模板采用ejs

由于javascript没有强类型概念,所以无法获取元数据,于是ModelBinder中数据验证,htmlhelper中被阉割了许多功能,后面将进一步考虑如何实现。

nodejs+express Mvc站点
<!DOCTYPE html>

<html>

  <head>

    <title><%= model.title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <h1><%= model.title %></h1>

    <p>Welcome, <%= model.name %></p>

<p>今年<%=viewbag.age %>岁</p>

<p><%-html.textBoxFor(model.name) %></p>

</form>

  </body>

</html>
nodejs+express Mvc站点

改造还会继续,欢迎大家提供意见,以上讲的有什么不对的地方还请不吝指出。

附上源码,供大家参考(代码还未做整理,目录结构有些不合理,先这样吧,过两天把结构整整了,大神不要吐槽~)。

如果您觉得还有什么地方可以添加的功能实现,也欢迎给我留言。

如果您觉得不错,欢迎点下推荐,支持一下,您的鼓励是我写博的动力,感谢。

源码

 
 

nodejs+express Mvc站点的更多相关文章

  1. 像asp&period;net Mvc一样开发nodejs&plus;express Mvc站点

    像asp.net Mvc一样开发nodejs+express Mvc站点 首先,我是个c#码农.从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风学了一些,对前端的框架也了解一些,angu ...

  2. 安装nodeJs静态服务器(NodeJs Express MVC 框架)

    安装 NodeJs Express MVC 框架   新建项目文件夹   打开cmd 执行以下操作:   一.使用Express框架 1)安装express3 $: npm install -g ex ...

  3. 【安装Express】CentOS7 下安装NodeJs&plus;Express&plus;MongoDB&plus;Redis

    上一篇介绍了一下怎么安装Nodejs,那么这一篇就说说怎么安装express,express有个中文站点非常非常方便,http://www.expressjs.com.cn/创建express框架的站 ...

  4. NodeJS&plus;Express&plus;MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】

    近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...

  5. node&period;js express mvc轻量级框架实践

    本文记录的是笔者最近抽私下时间给朋友做的一个时时彩自动下注系统,比较简单,主要也是为了学习一下node.js. 其实逻辑没什么可以深谈的,主要是想说说这套代码结构.结构如下图: js的代码比较难以维护 ...

  6. Nodejs express、html5实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs ...

  7. nodejs&plus;express&plus;mysql 增删改查

    之前,一直使用的是nodejs+thinkjs来完成自己所需的项目需求,而对于nodejs中另外一中应用框架express却了解的少之又少,这两天就简单的了解了一下如何使用express来做一些数据库 ...

  8. nodejs学习篇 &lpar;1&rpar;webstorm创建nodejs &plus; express &plus; jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

  9. 使用nodejs&plus;express&plus;socketio&plus;mysql搭建聊天室

    使用nodejs+express+socketio+mysql搭建聊天室 nodejs相关的资料已经很多了,我也是学习中吧,于是把socket的教程看了下,学着做了个聊天室,然后加入简单的操作mysq ...

随机推荐

  1. MATLAB plot 绘图的一些经验,记下来,facilitate future work

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2016/03/28 % 调整figure的位置scrsz = get(0,'ScreenSize'); % 这个命令是 ...

  2. ext4&period;0绘制chart(柱状图,条形图)

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  3. &lbrack;转&rsqb; windows 上用程序putty使用 ssh自动登录Linux(Ubuntu)

    需求: 在Win7电脑上使用putty(一种ssh客户端)连接Ubuntu 工具: puttygen.exe 和 putty.exe 第一步:生成密匙 运行puttygen.exe,选择需要的密匙类型 ...

  4. 计算pi的位数

    from random import random from math import sqrt from time import clock DARTS=1000000 hits=0.0 clock( ...

  5. mqtt mosquitto 源码安装

    下载地址 ububtu  : wget https://codeload.github.com/eclipse/mosquitto/zip/master 安装依赖 sudo apt-get insta ...

  6. ubuntu下如何设置中文输入法

    许多朋友在用ubuntu操作系统时,因没有中文输入法而苦恼!今天我就和大家分享一下如何在ubuntu下设置如输入法的简单方法: 1 在任务栏的右上角设置选项-——>system settings ...

  7. 苹果电脑快速安装双系统 Winclone镜像包 Winclone安装Win7&sol;Win8&period;1&sol;Win10镜像

    原文:https://bbs.feng.com/read-htm-tid-9940193.html by:旋律 2015年及以后的安装win8.1及win10(不支持win7) 请根据自己的机型安装合 ...

  8. Linux应用开发入门&lpar;转&rpar;

    今天偶然看到这篇文章,做个入门了解还是不错的. 前一阵子在QQ上和朋友聊天的时候,总会看到有人说Linux上的应用程序开发是高手才可以完成的,而且这种“迷信”在目前似乎还很普遍.然而,情况并不是这样的 ...

  9. 【CTF MISC】pyc文件反编译到Python源码-2017世安杯CTF writeup详解

    1.题目 Create-By-SimpleLab 适合作为桌面的图片 首先是一张图片,然后用StegSolve进行分析,发现二维码 扫码得到一串字符 03F30D0A79CB0558630000000 ...

  10. &period;net通过代码发送邮件

    关键代码: 需要引用命名空间: using System.Net.Mail;using System.Net; MailMessage mailObj = new MailMessage(); mai ...