Express之初体验

最新推荐文章于 2024-08-20 06:14:33 发布

shellJ

最新推荐文章于 2024-08-20 06:14:33 发布

阅读量2.4k

点赞数

文章标签： express node.js MVC

本文链接：https://blog.csdn.net/jiangcs520/article/details/9798947

版权

express是node.js的框架，node.js的好坏就不多说，到处都有的看，更何况像我如今此等入门级，就简单分享一下初次体验express的一些心得体会，仅仅是一些基础知识，希望大神指点，菜鸟则希望有所帮助，共同进步啊。

node.js的简单配置已经在前面的node.js+socket.io配置这篇博文中提到，就不多说了，其实配置express也是十分简单，这里推荐一个比较好的IDE，webStorm，下载完毕后新建一个express工程即可，对于初学者或者对于html有所接触的同学来说，可以选择ejs模板，一般默认会选择jade，生成工程之前会提示选择，不用担心，这还是很简单的。工程建好之后，整体框架也帮我们建好了，程序的入口是app.js，routes目录下是页面逻辑,views目录下是模板文件,等等。

接下来介绍一下这些文件的具体用处吧，

一、app.js:

app.js中首先var express = require("express")等与node.js相同的方式引入一系列的文件，这里是由express创建服务器，因为express封装了node.js中的http协议，创建的方式与node.js是一致的，express.createServer(),再在express.configure()中配置中间件，express的中间件很多，其实在我的理解就是第三方包，不明白的可以去请示google大神或者百度。配置中间件有三种环境，通用环境，开发环境以及生成环境，我们这里当然还都是通用环境，现在讲讲不知所云，建立了项目就一目了然了，其实很清晰的。接下来就是路由了，express中的路由方式遵循了REST（表征状态转移）风格的路由方式，并定义了8种标准的方法，常用的有get,post,put,delete等等，以get方式举例，app.get("/",funName);将路径‘/’映射到相应的函数，并且该路径指定了只能接受get方式的请求。其中还值得一提的是all方式，这种方式能够接受该路径所有方式的请求，all请求方式有利于实现中间件，实现路由控制权的转移，

app.js
var express = require("express")

,routers = require("./routers");//默认加载routers目录下的index.js文件
...
app.configure(function(){
    app.use(...)
    ...
})
app.all('/comment',routers .commentByVistor);
app.get('/comment/user',routers .commentByUser);
......
routers/index.js如下：
exports.commentByVistor = function(req,res,next){
    if(!req.params.user){
    res.send("游客评论");
}else{
    next();
}
}
exports.commentByUser = function(req,res){
    var user = req.params.user;
    res.send("user:"+user+"评论");
}

以上是一个简单的游客或者用户评论的例子，注意app.all中的路径与get中的路径，当用户评论时首先都会进all这种方式的路由，该方法中判断是否已经登录，若未登录则直接处理，否则以next（）方法转移路由到下一个。例如url是/comment/user1，则先进入all路由，由于user不为空，执行next()进入下一个路由中，即执行commentByUser方法。

二、index.js

如上代码所示，index.js定义了一系列路由代码，可以接收用户请求后渲染模板页面返回给客户端，代码如下：

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

这段代码表示渲染index.ejs模板，并传入title变量，以下是index.ejs模板内容

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <p>welcome to <%= title %></p>
  </body>
</html>

页面中的title被传入的title变量替换，那接下来就简单介绍一下ejs文件了

三、index.ejs

ejs文件全称embedded javascript，是一种模板文件，可以直接在html文件中嵌入代码，例如上面的title，

ejs文件默认继承一个layout.ejs文件，该文件可以是这种形式：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%-body%>
  </body>
</html>

继承了layout.ejs的文件就可以这样写了，index.js

<h1><%= name %>发布的心情</h1>
  <p><%= message %></p>

实现过程中将其中的<%-body%>替换为我们的目标文件中index.js内容，我们的很多页面样式都是大同小异，那么我们可以定义一个样式框架，然后让内容继承这个整体样式框架，方便我们开发风格统一的界面。

当我们需要禁用页面继承机制的时候，可以再app.configure中显式禁用，app.set('view options',{"layout":false});我们可以继承默认的layout.ejs文件，也可以自定义父类模板样式文件例如base.ejs,然后在res.render('index',{title:"",layout:"base"});即可实现页面继承自base.ejs这个框架页面。

有时候我们会发现这个继承机制不成功，当我们的继承没有效果的时候，检查一下当前express的版本，在cmd命令框中输入express -V,若express版本是3.x，那么默认是不支持这个功能的，我们需要加载partials组件，这是帮助我们实现这个机制的第三方包，进入当前工程目录，npm install express-partials，加载成功后node_module目录下会新增一个express-partials文件夹，接下来我们通过partials = require(‘express-partials’)引入文件，并在configure中添加app.use(partials());

express入门级分享就到这里了，继续研究，继续分享，欢迎大神指点。

shellJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Express之初体验

express是node.js的框架，node.js的好坏就不多说，到处都有的看，更何况像我如今此等入门级，就简单分享一下初次体验express的一些心得体会，仅仅是一些基础知识，希望大神指点，菜鸟则希望有所帮助，共同进步啊。node.js的简单配置已经在前面的
复制链接

扫一扫