mean技术栈 linux,“MEAN”技术栈开发web应用

48304ba5e6f9fe08f3fa1abda7d326ab.png

var express = require('express');

var app = express();

app.listen(3000);

var _rootDir = __dirname;

var protectDir = _rootDir + '/protect/';

app.use(express.static(_rootDir));

//注册路由

app.get('/', function(req, res){

res.sendFile(_rootDir+'/src/index.html');

});

app.use(function(req, res, next) {

res.status(404).sendFile(_rootDir+'/src/404.html');

});

app.use(function(err, req, res, next) {

console.error(err.stack);

res.status(500).send('500 Error');

});

48304ba5e6f9fe08f3fa1abda7d326ab.png

上述代码实现了这几个功能,首先创建了http服务器,监听在3000端口。

然后app.use(express.static(_rootDir));这一行是使用了静态文件服务的中间件,这样我们项目下的js、css以及图片等静态文件就都可以访问到了。

接下来是注册路由,此处只匹配一个路由规则,那就是"/"(网站的根目录),当匹配到此路由后把首页文件index.html直接用res.sendFile方法给发送到浏览器端。这样浏览器用http://127.0.0.1:3001就可以访问到index.html了。网站的其他页面也可以通过配置类似的路由进行返回。express还支持配置模板引擎,默认支持ejs,你也可以自己配置其他的比如handlebars。

但是在本项目中,我们用的是angular的前端模板,所以后端就不需要模板了,没有进行配置。我们的路由机制也是完全使用的ng的前端路由,所以在express中只配置一条就够了。

在最后还有两块代码,分别是404和500错误的捕获。你可能会疑惑为什么是这样写呢?从上到下排下来就能分别捕获404和500了吗?其实这就是express的中间件机制,在此机制下,对客户端请求的处理像是一个流水线,把所有中间件串联起来,只要某个中间件把请求返回了,就结束执行,否则就从上到下一直处理此请求。

上面代码的流程就是,先按路由规则来匹配路径,如果路由匹配不到,则认为是发生404。500的错误请注意一个细节,在回调函数的参数中,第一个会传入err,就是错误对象,以此来标记是一个500错误。

理解中间件

express的核心是中间件机制,通过使用各种中间件,能够实现灵活的组装我们所需的功能。中间件是在管道中执行的,所谓管道就是像流水线一样,每到达一个加工区,相应的中间件就可以处理request和response对象,处理完后再送往下一个加工区。如果某个加工区把请求终结了,比如调用send方法返回给了客户端,那么处理就终止了。大部分情况下,都有现成的中间件供我们使用,比如用body-parser解析请求实体,用路由(路由也是一种中间件)来正确的派发请求。

比如我们在server.js中添加如下的代码:

48304ba5e6f9fe08f3fa1abda7d326ab.png

app.use(function(req, res, next){

console.log('中间件1');

next();

});

app.use(function(req, res, next){

console.log('中间件2');

});

48304ba5e6f9fe08f3fa1abda7d326ab.png

我们添加了两个中间件,请求过来之后会先被第一个捕获,然后进行处理,输出“中间件1”。后面接着执行了next()方法,就会进入下一个中间件。一个中间件执行后只有两种选择,要么用next指向下一个中间件,要么将请求返回。如果什么都不做,请求将会被挂起,也就是说浏览器端将得不到返回,一直处于pendding状态。例如上面的中间件2,将会造成请求挂起,这是应该杜绝的。

路由设计

运行起了服务器,了解了中间件编程方式,接下来我们就该为前端提供api了。比如前端post一个请求到/api/submitQuestion来提交一份数据,我们该如何接收请求并做出处理呢,这就是路由的设计了。

给app.use的第一个参数传入路径可以匹配到对应的请求,例如:

app.use('/api/submitQuestion', function(){})

这样就可以捕获到刚刚的提交试题的请求,在第二个参数中可以进行相应的处理,比如把数据插入到数据库。

但是,要注意了,express路由的正确使用姿势并不是这样的。app.use是用来匹配中间件的路径的,而不是请求的路径。因为路由也是一种中间件,所以这样的用法也是能够完成功能的,但是我们还是应该按照官方标准的写法来写。

标准的写法是什么样子呢?代码如下:

var apiRouter = express.Router();

apiRouter.post('/submitQuestion', questionController.save);

app.use('/api', apiRouter);

我们利用的是express.Router这个对象,它同样有use、post、get等方法,用来匹配请求路径。然后我们再使用app.use把apiRouter作为第二个参数传进去。

要注意的是apiRouter.post和app.use的第一个参数。app.use匹配的是请求的“根路径”,这样可以把请求分为不同的类别,比如所有的异步接口我们都叫api,那么这类请求我们就都应该挂在“/api”下。按照这样的规则,我们整个项目的路由规则如下:

48304ba5e6f9fe08f3fa1abda7d326ab.png

//注册路由

app.get('/', function(req, res){

res.sendFile(_rootDir+'/src/index.html');

});

var apiRouter = express.Router();

apiRouter.post('/getQuestion', questionController.getQuestion);

apiRouter.post('/getQuestions', questionController.getQuestions);

apiRouter.post('/submitQuestion', questionController.save);

apiRouter.post('/updateQuestion', questionController.update);

apiRouter.post('/removeQuestion', questionController.remove);

apiRouter.post('/getPapers', paperController.getPapers);

apiRouter.post('/getPaper', paperController.getPaper);

apiRouter.post('/getPaperQuestions', paperController.getPaperQuestions);

apiRouter.post('/submitPaper', paperController.save);

apiRouter.post('/updatePaper', paperController.update);

apiRouter.post('/removePaper', paperController.remove);

app.use('/api', apiRouter);

48304ba5e6f9fe08f3fa1abda7d326ab.png

在router的第二个参数中,我们传入了questionController.save这样的方法,这是什么东西呢?怎么有点MVC的味道呢?没错,我们已经能够匹配到路由了,那服务端的业务逻辑以及数据库访问等该如何组织代码呢?

用“MVC”组织代码

用MVC的结构组织代码当然是黄金法则了。express可以用模板引擎来渲染view层,路由机制来组织controller层,但是express并没有明确规定MVC结构应该怎样写,而是把自由选择交给你,自己来组织MVC结构。当然你也可以组织别的形式,比如像Java中的“n层架构”。

在本项目中,我们就以文件夹的形式来简单组织一下。因为我们使用了前端模板,所以后端的view层就不存在了,只有controller和model。看一下项目的目录:

a5f691a8ef3db20943e7a2f032390493.png

在protect下有两个文件夹controllers和models分别放C和M。我们路由中使用的questionController对象就定义在questionController.js中,来看一下用于保存试题的save方法是如何定义的:

48304ba5e6f9fe08f3fa1abda7d326ab.png

var Question = require('../models/question');

module.exports = {

//添加试题

save: function(req, res){

var data = req.body.question;

Question.save(data, function(err, data){

if(err){

res.send({success: false, error: err});

}

else{

res.send({success: true, data: data});

}

});

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

questionController作为一个模块,使用标准的commonjs语法,我们定义了save方法,通过req.body.question,可以拿到前台传过来的数据。在这个模块中,我们require了位于model层的Question模型,没错,它就是用来操作数据库的,调用Question.save方法,这份数据就存入了数据库,然后在回调函数中,我们用res.send将json数据返回给前端。

定义好questionController后,我们就可以在server.js中把它给require进去了,然后就有了之前我们在路由中使用的

apiRouter.post('/submitQuestion', questionController.save);

整个流程就串通起来了。

models文件夹中放的就是模型了,用来管理与数据库的映射和交互,这里使用了mongoose作为数据库的操作工具,model层如何来编写,本篇就不做介绍了,在下一篇中我们再详细讲解。

最后再声明一下,本篇文章的代码是基于一个练习项目QuestionMaker,为了更好理解文章中的叙述,请查看项目的源码:https://github.com/Double-Lv/QuestionMaker

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363774.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VS2005 VS2008新建网站和新建项目里选Web应用程序区别

WebApplication编程模型的优点:●网站编译速度快,使用了增量编译模式,仅仅只有文件被修改后,这部分才会被增量编译进去。●生成的程序集WebSite:生成随机的程序集名,需要通过插件WebDeployment才可以生成单…

Perl线程池

Thread::Pool模块提供了Perl解释器线程的线程池,手册:https://metacpan.org/pod/Thread::Pool。 转载于:https://www.cnblogs.com/f-ck-need-u/p/10422449.html

编写干净的测试–分而治之

好的单元测试应该仅出于一个原因而失败。 这意味着适当的单元测试仅测试一个逻辑概念。 如果我们要编写干净的测试,则必须识别这些逻辑概念,并且每个逻辑概念仅编写一个测试用例。 这篇博客文章描述了我们如何识别从测试中发现的逻辑概念,以…

初学servlet之使用web.xml配置

先写两个servlet,之后展示web.xml配置 package app01c;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.Htt…

根本不存在 DIV + CSS 布局这回事

实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在divCSS布局这回事。反过来,table布局的时候经常依赖于CSS定义一个单元格的布局属性,所以可以…

c语言空格键 key,c语言获得键盘的按键

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼TC 2.0版#include#includeint main(){int key;while(1){keygetch();/*用于去掉第一个字节*/if(key27) break; /*如果是ESC退出*/if(key>31 && key<127) /*如果不是特殊键*/{printf("You have pressed %c Press …

仔细研究Java Identity API

在深入探讨之前&#xff0c;让我们看一下有关Java Identity API JSR 351的一些快速事实。 这仍在进行中。 。 。 JSR是什么时候发起的&#xff1f; 该JSR在2011年10月通过了批准投票&#xff0c;随后在2011年11月成立了专家组。 谁负责此规范&#xff1f; Java Identity AP…

WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

简言 理解WEB页面的生命周期&#xff0c;文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解&#xff0c;在元素未加载就提前操作元素&#xff0c;则得不到想要的结果。而如果页面完全加载完成后&#xff0c;再进行操作&#xff0c;则又会影响用户体验。 一般来说&…

WinAPI: SetLayeredWindowAttributes - 设置窗口的透明

这是来宾 Dolby 在 http://www.cnblogs.com/del/archive/2008/03/08/1081295.html#1096814 询问的问题. //声明: SetLayeredWindowAttributes(Hwnd: THandle; {窗口句柄}crKey: COLORREF; {透明色}bAlpha: Byte; {Alpha 值}dwFlags: DWORD {LWA_COLORKEY(1)表示使用透明…

动态规划-线性dp-hdu-4055

https://www.cnblogs.com/31415926535x/p/10423047.html 这道题是大连的某一年的现场赛的题hdu-4055 &#xff0c;&#xff0c;&#xff0c;刚开始做线性dp的题&#xff0c;&#xff0c;看了好半天才看懂解法&#xff0c;&#xff0c; 分析 参考1参考2 题目的意思就是给出一个仅…

JQuery .net WebService 参数必须一致

$.ajax({type: "POST",contentType:"application/json; charsetutf-8",url: "/LearnJQuery/ajax1.asmx/response1",data:"{username:\""$("#inputName").val()"\"}",上面的username必须和webservice中的…

c语言按shift用户随时退出,2014年云南省“三校生”高考计算机第三次模拟试卷...

密班级&#xff1a; 姓名&#xff1a; 学号&#xff1a;密 封 线 内 不 得 答 题玉龙职高2012年高考第三次模拟试卷计算机基础总分&#xff1a;150分&#xff0c;考试时间&#xff1a;120分钟。一、单项选择题(在每小题给出的四个选项中&#xff0c;只有一个是符合题目要求的&a…

无状态EJB:池化和生命周期

无状态EJB池和生命周期的摘要视图&#xff08;注释&#xff09;。 对新手有用。 。 。 。 。 EJB池&#xff1a;快速概述 EJB实例存储在称为EJB池的位置–这不过是内存中的缓存 。 无状态EJB通常按需实例化&#xff0c;即&#xff0c;当客户端调用Bean上的方法时。 但是&…

有意思的批处理

echo off setlocal enabledelayedexpansion set b/-\ /-\ ** set 速度1 set 退格 :b for /l %%i in (0,1,200) do call :a %%i goto :b :a set/a a%1%%10 set/a c%a%%%4 if %a% EQU 0 set/p▌<nul if %c% EQU 3 (set/p^|<nul) else (set/p!b:~%a%,1!<nul) ping/n %速度…

1.原生js封装的获取某一天是当年的第几周方法

function getWeek(str){//str格式为yyy-mm-dd//周日归到了本周var dnew Date(str);var dayd.getDay();var originDated.getFullYear() - "01" - "01" 00:00:00;var nowDated.getFullYear() - ((d.getMonth() 1)>9?(d.getMonth() 1):0 (d.getMonth() 1…

代码整洁之道——有意义的命名(持续更新中)

我们给变量、参数、类、包&#xff0c;源代码和源代码所在目录命名&#xff0c;也给jar文件、war文件和ear文件命名。 We name variables, parameters, classes, packages, source code, and the directory where the source code resides, as well as jar files, war files, a…

json - json对象和json字符串直接的相互转换

一、json字符串转json对象 1.json字符串转json对象 var obj JSON.parse(str); //由json字符串转换为json对象 2.获取对象的value console.log(obj.attr); console.log(obj["attr"]); 二、json对象转json字符串 var jsonstr JSON.stringify(obj); / 转载于:https://…

android根据拍摄url获取格式,Android如何通过URI获取文件路径示例代码

前言最近在工作的过程中&#xff0c;遇到不同 Android 版本下 URI 采用不同方式来获取文件路径的问题。因为需求的原因&#xff0c;要求拍照上传或者从相册中选择图片上传&#xff0c;而且图片是需要经过压缩的&#xff0c;大小不能超过2M。很快&#xff0c;拍照的这部分就搞定…

休眠类型初学者指南

基本映射概念 学习Hibernate时&#xff0c;许多人喜欢跳到父子关联&#xff0c;而无需掌握对象关系映射的基础知识。 在开始对实体关联进行建模之前&#xff0c;了解各个实体的基本映射规则非常重要。 休眠类型 休眠类型是SQL类型和Java原语/对象类型之间的桥梁。 这些是Hibe…

fixed 语句(C# 参考)

fixed 语句禁止垃圾回收器重定位可移动的变量。fixed 语句只能出现在不安全的上下文中。Fixed 还可用于创建固定大小的缓冲区。 备注 fixed 语句设置指向托管变量的指针并在 statement 执行期间“钉住”该变量。如果没有 fixed 语句&#xff0c;则指向可移动托管变量的指针的作…