Node.js学习笔记(三)——Node.js开发Web后台服务
<div style="font-family: microsoft yahei"><h1>一、Express</h1>
<div class="line number7 index6 alt2">
<p>Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。<br>使用 Express 可以快速地搭建一个完整功能的网站。使用Node.js作为AngularJS开发Web服务器的最佳方式是使用Express模块。</p>
<p>Express官网: http://expressjs.com/</p>
<p>Express4.x API:http://expressjs.com/zh-cn/4x/api.html</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222113905667-121619780.png" alt=""></p>
<h2><strong>1.2、Express框架核心特性</strong></h2>
<p>可以设置中间件来响应 HTTP 请求。</p>
<p>定义了路由表用于执行不同的 HTTP 请求动作。</p>
<p>可以通过向模板传递参数来动态渲染 HTML 页面。</p>
<p>丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。</p>
<p>Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能。</p>
<h2><strong>1.3、安装 Express</strong></h2>
<p>安装 Express 并将其保存到依赖列表中:</p>
<p>npm install express --save</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222093851261-1136882037.png" alt=""></p>
<p>以上命令全局安装express。也可安装时指定安装中间件。</p>
<p>body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。</p>
<p>cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。</p>
<p>multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。</p>
<p>$ npm install body-parser --save<br>$ npm install cookie-parser --save<br>$ npm install multer --save</p>
<p>默认这些模块都已经添加。</p>
<h2>1.4、第一个Express框架实例</h2>
<p>接下来我们使用 Express 框架来输出 "Hello World"。<br>以下实例中我们引入了 express 模块,并在客户端发起请求后,响应 "Hello World" 字符串。</p>
<p>创建一个目录,如Project,进入命令行:</p>
<p>使用npm install express 导入express模块。</p>
<p>在目录下创建hello.js文件,如下所示:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">引入express模块</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建一个app对象,类似一个web 应用(网站)</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">接受指定路径的请求,指定回调函数</span>
app.get('/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res){
res.send(</span>'Hello World'<span style="color: rgba(0, 0, 0, 1)">);
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建一个web服务器,可以认为就是web服务器对象</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">监听8081端口,当监听成功时回调</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> server = app.listen(8081, <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> host = server.address().address;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">地址</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> port = server.address().port;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">端口</span>
console.log("应用实例,访问地址为 http://%s:%s"<span style="color: rgba(0, 0, 0, 1)">, host, port);
});
})</span></pre>
</div>
<p>使用node执行js:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222095627698-863156491.png" alt=""></p>
<p>运行结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222095652042-170402518.png" alt=""></p>
<h2>1.5、Express中use挂载中间件的方法</h2>
<h3>1.5.1、为什么需要中间件</h3>
<p>一个请求发送到服务器后,它的生命周期是 先收到request(请求),然后服务端处理,处理完了以后发送response(响应)回去,而这个服务端处理的过程就有文章可做了,想象一下当业务逻辑复杂的时候,为了明确和便于维护,需要把处理的事情分一下,分配成几个部分来做,而每个部分就是一个中间件。</p>
<h3>1.5.2、use方法</h3>
<p>1.app.use(, function [, function…]) 挂载中间件方法到路径上。如果路径未指定,那么默认为”/”</p>
<div class="cnblogs_code">
<pre>app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {<br><br></span><span style="color: rgba(0, 0, 0, 1)">
});</span></pre>
</div>
<p>中间件其是一个函数,在响应发送之前对请求进行一些操作,这个函数有些不太一样,它还有一个next参数,而这个next也是一个函数,它表示函数数组中的下一个函数,如果当前中间件函数没有结束请求/响应循环,那么它必须调用 next(),以将控制权传递给下一个中间件函数。否则,请求将保持挂起状态。</p>
<h3> 1.5.3、路径匹配</h3>
<p>一个路由将匹配任何路径如果这个路径以这个路由设置路径后紧跟着”/”。比如:app.use(‘/apple’, …)将匹配”/apple”,”/apple/images”,”/apple/images/news”等</p>
<p>在一个路径上挂载一个中间件之后,每当请求的路径的前缀部分匹配了这个路由路径,那么这个中间件就会被执行。 由于默认的路径为/,中间件挂载没有指定路径,那么对于每个请求,这个中间件都会被执行</p>
<div class="cnblogs_code">
<pre>app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res, next) {
console.log(</span>'Time: %d'<span style="color: rgba(0, 0, 0, 1)">, Date.now())
next()
})</span></pre>
</div>
<p>中间件方法是顺序处理的,所以中间件包含的顺序是很重要的,第二个中间件将不会到执行到</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this middleware will not allow the request to go beyond it</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res, next) {
res.send(</span>'Hello World'<span style="color: rgba(0, 0, 0, 1)">)
})
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> requests will never reach this route</span>
app.get('/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res) {
res.send(</span>'Welcome'<span style="color: rgba(0, 0, 0, 1)">)
})</span></pre>
</div>
<p>对于相同的挂载路径可以挂载多个中间件,因为路径的相同,调用next的时候会自动执行下一个匹配相同路径的中间件</p>
<div class="cnblogs_code">
<pre>You can define and mount a middleware <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> locally.
app.use(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res, next) {
next()
})
A router is valid middleware.
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router()
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res, next) {
next()
})
app.use(router)
An Express app is valid middleware.
</span><span style="color: rgba(0, 0, 255, 1)">var</span> subApp =<span style="color: rgba(0, 0, 0, 1)"> express()
subApp.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res, next) {
next()
})
app.use(subApp)</span></pre>
</div>
<h3> 1.5.4、挂载静态资源</h3>
<p>下面是一些例子,在Express程序中使用express.static中间件。 为程序托管位于程序目录下的public目录下的静态资源</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> GET /style.css etc</span>
app.use(express.static(path.join(__dirname, 'public')))</pre>
</div>
<p>在/static路径下挂载中间件来提供静态资源托管服务,只当请求是以/static为前缀的时候</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> GET /static/style.css etc.</span>
app.use('/static', express.static(path.join(__dirname, 'public')))</pre>
</div>
<p>通过在设置静态资源中间件之后加载日志中间件来关闭静态资源请求的日志</p>
<div class="cnblogs_code">
<pre>app.use(express.static(path.join(__dirname, 'public'<span style="color: rgba(0, 0, 0, 1)">)))
app.use(logger())</span></pre>
</div>
<h3>1.5.5、路由</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router()
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req, res, next) {
next()
})
app.use(router)
An Express app is valid middleware.</span></pre>
</div>
<h3>1.5.6、morgan日志</h3>
<p data-spm-anchor-id="a2c6h.24755359.0.i1.56255773RR1YUd">预定义格式</p>
<p>morgan预定义了多种格式:</p>
<h5>combined</h5>
<p>Standard Apache combined log output. 标准的Apache结合日志输出格式</p>
<pre class="prettyprint prettyprinted"><code><span class="pun">:<span class="pln">remote<span class="pun">-<span class="pln">addr <span class="pun">-<span class="pln"> <span class="pun">:<span class="pln">remote<span class="pun">-<span class="pln">user <span class="pun">[:<span class="pln">date<span class="pun">[<span class="pln">clf<span class="pun">]]<span class="pln"> <span class="str">":method :url HTTP/:http-version"<span class="pln"> <span class="pun">:<span class="pln">status <span class="pun">:<span class="pln">res<span class="pun">[<span class="pln">content<span class="pun">-<span class="pln">length<span class="pun">]<span class="pln"> <span class="str">":referrer"<span class="pln"> <span class="str">":user-agent"</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>common</h5>
<p>Standard Apache common log output.标准的Apache通用日志输出格式</p>
<pre class="prettyprint prettyprinted"><code><span class="pun">:<span class="pln">remote<span class="pun">-<span class="pln">addr <span class="pun">-<span class="pln"> <span class="pun">:<span class="pln">remote<span class="pun">-<span class="pln">user <span class="pun">[:<span class="pln">date<span class="pun">[<span class="pln">clf<span class="pun">]]<span class="pln"> <span class="str">":method :url HTTP/:http-version"<span class="pln"> <span class="pun">:<span class="pln">status <span class="pun">:<span class="pln">res<span class="pun">[<span class="pln">content<span class="pun">-<span class="pln">length<span class="pun">]</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>dev</h5>
<p>Concise output colored by response status for development use. The <code>:status</code> token will be colored green for success codes, red for server error codes, yellow for client error codes, cyan for redirection codes, and uncolored for information codes.</p>
<p>为开发者使用的彩色输出状态,如果成功则状态标记为绿色,红色为服务器端错误代码,黄色为客户端错误代码,青色为重定向代码,没有使用彩色的表示普通信息。</p>
<pre class="prettyprint prettyprinted"><code><span class="pun">:<span class="pln">method <span class="pun">:<span class="pln">url <span class="pun">:<span class="pln">status <span class="pun">:<span class="pln">response<span class="pun">-<span class="pln">time ms <span class="pun">-<span class="pln"> <span class="pun">:<span class="pln">res<span class="pun">[<span class="pln">content<span class="pun">-<span class="pln">length<span class="pun">]</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>short</h5>
<p>Shorter than default, also including response time. 比默认更短且包含响应时间的日志格式</p>
<pre class="prettyprint prettyprinted"><code><span class="pun">:<span class="pln">remote<span class="pun">-<span class="pln">addr <span class="pun">:<span class="pln">remote<span class="pun">-<span class="pln">user <span class="pun">:<span class="pln">method <span class="pun">:<span class="pln">url HTTP<span class="pun">/:<span class="pln">http<span class="pun">-<span class="pln">version <span class="pun">:<span class="pln">status <span class="pun">:<span class="pln">res<span class="pun">[<span class="pln">content<span class="pun">-<span class="pln">length<span class="pun">]<span class="pln"> <span class="pun">-<span class="pln"> <span class="pun">:<span class="pln">response<span class="pun">-<span class="pln">time ms</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>tiny</h5>
<p>The minimal output. 最小的日志输出格式</p>
<pre class="prettyprint prettyprinted" data-spm-anchor-id="a2c6h.24755359.0.i0.56255773RR1YUd"><code><span class="pun">:<span class="pln">method <span class="pun">:<span class="pln">url <span class="pun">:<span class="pln">status <span class="pun">:<span class="pln">res<span class="pun">[<span class="pln">content<span class="pun">-<span class="pln">length<span class="pun">]<span class="pln"> <span class="pun">-<span class="pln"> <span class="pun">:<span class="pln">response<span class="pun">-<span class="pln">time ms</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h2>1.6、生成项目</h2>
<h3>1.6.1、Express 应用程序生成器</h3>
<p>通过应用生成器工具 <code>express-generator</code> 可以快速创建一个应用的骨架。</p>
<p>你可以通过 <code>npx</code> (包含在 Node.js 8.2.0 及更高版本中)命令来运行 Express 应用程序生成器。</p>
<pre><code class="language-console">$ npx express-generator
</code></pre>
<p>对于较老的 Node 版本,请通过 npm 将 Express 应用程序生成器安装到全局环境中并使用:</p>
<pre><code class="language-console">$ npm install -g express-generator
$ express
</code></pre>
<p><code>-h</code> 参数可以列出所有可用的命令行参数:</p>
<pre><code class="language-console">$ express -h
Usage: express
Options:
-h, --help 输出使用方法
--version 输出版本号
-e, --ejs 添加对 ejs 模板引擎的支持
--hbs 添加对 handlebars 模板引擎的支持
--pug 添加对 pug 模板引擎的支持
-H, --hogan 添加对 hogan.js 模板引擎的支持
--no-view 创建不带视图引擎的项目
-v, --view <engine> 添加对视图引擎(view) <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认是 jade 模板引擎)
-c, --css <engine>添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) (默认是普通的 css 文件)
--git 添加 .gitignore
-f, --force 强制在非空目录下创建
</code></pre>
<p>例如,如下命令创建了一个名称为 <em>myapp</em> 的 Express 应用。此应用将在当前目录下的 <em>myapp</em> 目录中创建,并且设置为使用 Pug 模板引擎(view engine):</p>
<pre><code class="language-console">$ express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
</code></pre>
<p>然后安装所有依赖包:</p>
<pre><code class="language-console">$ cd myapp
$ npm install
</code></pre>
<p>在 MacOS 或 Linux 中,通过如下命令启动此应用:</p>
<pre><code class="language-console">$ DEBUG=myapp:* npm start
</code></pre>
<p>在 Windows 命令行中,使用如下命令:</p>
<pre><code class="language-console">> set DEBUG=myapp:* & npm start
</code></pre>
<p>在 Windows 的 PowerShell 中,使用如下命令:</p>
<pre><code class="language-console">PS> $env:DEBUG='myapp:*'; npm start
</code></pre>
<p>然后在浏览器中打开 <code>http://localhost:3000/</code> 网址就可以看到这个应用了。</p>
<p>通过生成器创建的应用一般都有如下目录结构:</p>
<pre><code class="language-console">.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
7 directories, 9 files
</code></pre>
<div class="doc-box doc-info">
<p>通过 Express 应用生成器创建应用只是众多方法中的一种。你可以不使用它,也可以修改它让它符合你的需求。</p>
<h3>1.6.2、使用nodeclipse插件插件</h3>
</div>
<p>如果直接使用记事本效率会不高,nodeclipse插件可以方便的创建一个Express项目,步骤如下:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222095037417-402222278.png" alt=""></p>
<p>创建好的项目如下:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222101411276-1040342301.png" alt=""></p>
<p>app.js是网站:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> favicon = require('serve-favicon'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> logger = require('morgan'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cookieParser = require('cookie-parser'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> bodyParser = require('body-parser'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> index = require('./routes/index'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> users = require('./routes/users'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定视图引擎为ejs</span>
app.set('views', path.join(__dirname, 'views'<span style="color: rgba(0, 0, 0, 1)">));
app.set(</span>'view engine', 'ejs'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> uncomment after placing your favicon in /public</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));</span>
app.use(logger('dev'<span style="color: rgba(0, 0, 0, 1)">));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)"> }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, </span>'public'<span style="color: rgba(0, 0, 0, 1)">)));
app.use(</span>'/'<span style="color: rgba(0, 0, 0, 1)">, index);
app.use(</span>'/users'<span style="color: rgba(0, 0, 0, 1)">, users);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> catch 404 and forward to error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> err = <span style="color: rgba(0, 0, 255, 1)">new</span> Error('Not Found'<span style="color: rgba(0, 0, 0, 1)">);
err.status </span>= 404<span style="color: rgba(0, 0, 0, 1)">;
next(err);
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err, req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> set locals, only providing error in development</span>
res.locals.message =<span style="color: rgba(0, 0, 0, 1)"> err.message;
res.locals.error </span>= req.app.get('env') === 'development' ?<span style="color: rgba(0, 0, 0, 1)"> err : {};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> render the error page</span>
res.status(err.status || 500<span style="color: rgba(0, 0, 0, 1)">);
res.render(</span>'error'<span style="color: rgba(0, 0, 0, 1)">);
});
module.exports </span>= app;</pre>
</div>
<p>bin\www是web服务器:</p>
<div class="cnblogs_code">
<pre>#!/usr/bin/env node
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* 依赖模块,导入
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> app = require('../app'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> debug = require('debug')('nodejsexpress:server'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> http = require('http'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* 从上下文环境中获得监听端口,如果空则3000
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> port = normalizePort(process.env.PORT || '3000'<span style="color: rgba(0, 0, 0, 1)">);
app.set(</span>'port'<span style="color: rgba(0, 0, 0, 1)">, port);
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* 创建Web服务器
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> server =<span style="color: rgba(0, 0, 0, 1)"> http.createServer(app);
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* 开始监听
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
server.listen(port);
server.on(</span>'error', onError);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定发生错误时的事件</span>
server.on('listening', onListening);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">当监听成功时的回调</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* 规范化端口
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> normalizePort(val) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> port = parseInt(val, 10<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isNaN(port)) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> named pipe</span>
<span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> val;
}
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (port >= 0<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> port number</span>
<span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> port;
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
}
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
*错误事件监听
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> onError(error) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (error.syscall !== 'listen'<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> error;
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> bind = <span style="color: rgba(0, 0, 255, 1)">typeof</span> port === 'string'
? 'Pipe ' +<span style="color: rgba(0, 0, 0, 1)"> port
: </span>'Port ' +<span style="color: rgba(0, 0, 0, 1)"> port;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">错误处理</span>
<span style="color: rgba(0, 0, 255, 1)">switch</span><span style="color: rgba(0, 0, 0, 1)"> (error.code) {
</span><span style="color: rgba(0, 0, 255, 1)">case</span> 'EACCES'<span style="color: rgba(0, 0, 0, 1)">:
console.error(bind </span>+ ' requires elevated privileges'<span style="color: rgba(0, 0, 0, 1)">);
process.exit(</span>1);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">结束程序</span>
<span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">case</span> 'EADDRINUSE'<span style="color: rgba(0, 0, 0, 1)">:
console.error(bind </span>+ ' is already in use'<span style="color: rgba(0, 0, 0, 1)">);
process.exit(</span>1<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)">:
</span><span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> error;
}
}
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* 当用户访问服务器成功时的回调
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> onListening() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> addr =<span style="color: rgba(0, 0, 0, 1)"> server.address();
</span><span style="color: rgba(0, 0, 255, 1)">var</span> bind = <span style="color: rgba(0, 0, 255, 1)">typeof</span> addr === 'string'
? 'pipe ' +<span style="color: rgba(0, 0, 0, 1)"> addr
: </span>'port ' +<span style="color: rgba(0, 0, 0, 1)"> addr.port;
debug(</span>'Listening on ' +<span style="color: rgba(0, 0, 0, 1)"> bind);
}</span></pre>
</div>
<p>routers/index.js路由,有点类似控制器或Servlet:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 获得首页 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
res.render(</span>'index', { title: 'Express'<span style="color: rgba(0, 0, 0, 1)"> });
});
module.exports </span>= router;</pre>
</div>
<p>views/index.ejs首页视图:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">='stylesheet' </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">='/stylesheets/style.css' </span><span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>Welcome to <span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>在www上右键选择“运行方式”->“Node Application”运行结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222102937776-605885718.png" alt=""></p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222103103417-546409240.png" alt=""></p>
<h3>1.6.3、request对象</h3>
<p>Request 对象 - request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性。常见属性有:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">req.app:当callback为外部文件时,用req.app访问express的实例
req.baseUrl:获取路由当前安装的URL路径
req.body </span>/ req.cookies:获得「请求主体」/<span style="color: rgba(0, 0, 0, 1)"> Cookies
req.fresh </span>/<span style="color: rgba(0, 0, 0, 1)"> req.stale:判断请求是否还「新鲜」
req.hostname </span>/<span style="color: rgba(0, 0, 0, 1)"> req.ip:获取主机名和IP地址
req.originalUrl:获取原始请求URL
req.params:获取路由的parameters
req.path:获取请求路径
req.protocol:获取协议类型
req.query:获取URL的查询参数串
req.route:获取当前匹配的路由
req.subdomains:获取子域名
req.accepts():检查可接受的请求的文档类型
req.acceptsCharsets </span>/ req.acceptsEncodings /<span style="color: rgba(0, 0, 0, 1)"> req.acceptsLanguages:返回指定字符集的第一个可接受字符编码
req.get():获取指定的HTTP请求头
req.is():判断请求头Content</span>-Type的MIME类型</pre>
</div>
<h3>1.6.4、response对象</h3>
<p>Response 对象 - response 对象表示 HTTP 响应,即在接收到请求时向客户端发送的 HTTP 响应数据。常见属性有:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">res.app:同req.app一样
res.append():追加指定HTTP头
res.set()在res.append()后将重置之前设置的头
res.cookie(name,value [,option]):设置Cookie
opition: domain </span>/ expires / httpOnly / maxAge / path / secure /<span style="color: rgba(0, 0, 0, 1)"> signed
res.clearCookie():清除Cookie
res.download():传送指定路径的文件
res.get():返回指定的HTTP头
res.json():传送JSON响应
res.jsonp():传送JSONP响应
res.location():只设置响应的Location HTTP头,不设置状态码或者close response
res.redirect():设置响应的Location HTTP头,并且设置状态码302
res.render(view,,callback):渲染一个view,同时向callback传递渲染后的字符串,如果在渲染过程中有错误发生next(err)将会被自动调用。callback将会被传入一个可能发生的错误以及渲染后的页面,这样就不会自动输出了。
res.send():传送HTTP响应
res.sendFile(path [,options] [,fn]):传送指定路径的文件 </span>-会自动根据文件extension设定Content-<span style="color: rgba(0, 0, 0, 1)">Type
res.set():设置HTTP头,传入object可以一次设置多个头
res.status():设置HTTP状态码
res.type():设置Content</span>-Type的MIME类型</pre>
</div>
<h3>1.6.5、express获取参数有三种方法</h3>
<p>req.query 适合 http://localhost:3000/form?num=8888<br>req.body 适合http://localhost:3000/form,Post请求中的参数<br>req.params适合获取form后的num:http://localhost:3000/form/num<br> </p>
<p>(一)、GET</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> num =<span style="color: rgba(0, 0, 0, 1)"> req.query.num;
res.send(</span>"你获取的get数据为:" + num); </pre>
</div>
<p>(二)、POST</p>
<p>解析post数据需要用到body-parser</p>
<div class="cnblogs_code">
<pre>npm install body-parser --save</pre>
</div>
<p>app.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">引入body-parser</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> bodyParser = require('body-parser'<span style="color: rgba(0, 0, 0, 1)">);
app.use(express.static(</span>'public'<span style="color: rgba(0, 0, 0, 1)">));
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">需要use的</span>
app.use(bodyParser.json()); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> for parsing application/json</span>
<span style="color: rgba(0, 0, 0, 1)">app.use(bodyParser.urlencoded({
extended: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
})); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> for parsing application/x-www-form-urlencoded</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取数据</span>
app.post('/form', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> num =<span style="color: rgba(0, 0, 0, 1)"> req.body.num;
res.send(</span>"你获取的post数据为:" +<span style="color: rgba(0, 0, 0, 1)"> num);
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置监听端口</span>
app.listen(3000);</pre>
</div>
<p>public/test.html</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html </span><span style="color: rgba(255, 0, 0, 1)">lang</span><span style="color: rgba(0, 0, 255, 1)">="en"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="UTF-8"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>Document<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="box"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">form </span><span style="color: rgba(255, 0, 0, 1)">action</span><span style="color: rgba(0, 0, 255, 1)">="/form"</span><span style="color: rgba(255, 0, 0, 1)"> method</span><span style="color: rgba(0, 0, 255, 1)">="post"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="num"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="tinyphp"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="submit"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="提交"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>(三)、获取路径参数</p>
<p>app.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取数据</span>
app.get('/form/:num', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> num =<span style="color: rgba(0, 0, 0, 1)"> req.params.num;
res.send(</span>"你获取到form/后的参数:" +<span style="color: rgba(0, 0, 0, 1)"> num);
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置监听端口</span>
app.listen(3000);</pre>
</div>
<h2>1.7、ejs基础</h2>
<p>ejs是一个Express Web应用的模板引擎,在NodeJS开发中可以选择的模板引擎可能是所有Web应用开发中范围最广的,如jade、ejs、htmljs、swig、hogan.js,但ejs是最容易上手的,与jsp,asp,php的原始模板引擎风格很像。</p>
<p>官网:https://ejs.bootcss.com/</p>
<p>添加一个product.js路由:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 产品 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> products=<span style="color: rgba(0, 0, 0, 1)">[];
products.push({name:</span>"ZTE U880",price:899.8<span style="color: rgba(0, 0, 0, 1)">});
products.push({name:</span>"HuWei 荣耀8",price:1899.8<span style="color: rgba(0, 0, 0, 1)">});
products.push({name:</span>"iPhone 7 Plus 128G",price:5899.8<span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将product视图与指定的对象渲染后输出到客户端</span>
res.render('product', { title: '天狗商城'<span style="color: rgba(0, 0, 0, 1)">, pdts:products});
});
module.exports </span>= router;</pre>
</div>
<p>在views目录下添加product.ejs视图,这里是一个简单的MVC:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">='stylesheet' </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">='/stylesheets/style.css' </span><span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span> - 产品列表<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">border</span><span style="color: rgba(0, 0, 255, 1)">="1"</span><span style="color: rgba(255, 0, 0, 1)"> width</span><span style="color: rgba(0, 0, 255, 1)">="80%"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>序号<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>名称<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>价格<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdts.forEach(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(pdt,index){</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">index</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 128, 1)">1</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdt.name</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdt.price</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">});</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">for</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(var i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 128, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">; i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"><</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdts.length; i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">++</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">) {</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdts.name</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> } </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>修改app,注册定义好的模块product:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> index = require('./routes/index'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> users = require('./routes/users'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(255, 0, 0, 1)">var pdts = require('./routes/product');
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定视图引擎为ejs</span>
app.set('views', path.join(__dirname, 'views'<span style="color: rgba(0, 0, 0, 1)">));
app.set(</span>'view engine', 'ejs'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> uncomment after placing your favicon in /public</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));</span>
app.use(logger('dev'<span style="color: rgba(0, 0, 0, 1)">));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)"> }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, </span>'public'<span style="color: rgba(0, 0, 0, 1)">)));
app.use(</span>'/'<span style="color: rgba(0, 0, 0, 1)">, index);
app.use(</span>'/users'<span style="color: rgba(0, 0, 0, 1)">, users);
<span style="color: rgba(255, 0, 0, 1)">app.use(</span></span><span style="color: rgba(255, 0, 0, 1)">'/pdt', pdts);</span></pre>
</div>
<p>运行结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222111322307-1520056404.png" alt=""></p>
<h2>1.8、lodash</h2>
<p>这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。可以非常方便的操作json。</p>
<p>官网:http://lodashjs.com/</p>
<p>安装:</p>
<p>npm i -g npm</p>
<p>npm i --save lodash</p>
<p>安装时先用cd切换到当前项目下。</p>
<p>如果浏览器使用可以直接引入:</p>
<p><script src="lodash.js"></script></p>
<p>添加lodash依赖:</p>
<p><img src="https://images2017.cnblogs.com/blog/63651/201801/63651-20180108095145269-2008121533.png" alt=""></p>
<p>依赖成功后会在package.json中添加引用:</p>
<p><img src="https://images2017.cnblogs.com/blog/63651/201801/63651-20180108095316347-2135414031.png" alt=""></p>
<p>后台Node.js使用,可以引入模块:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">导入lodash模块</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> _= require('lodash'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> products=<span style="color: rgba(0, 0, 0, 1)">[];
products.push({name:</span>"ZTE U880",price:899.8<span style="color: rgba(0, 0, 0, 1)">});
products.push({name:</span>"HuWei 荣耀8",price:1899.8<span style="color: rgba(0, 0, 0, 1)">});
products.push({name:</span>"iPhone 7 Plus 128G",price:5899.8<span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">1、取出第一个元素</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> obj1=<span style="color: rgba(0, 0, 0, 1)">_.first(products);
console.log(obj1.name);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">ZTE U880</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2、取出最后一个元素</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> obj2=<span style="color: rgba(0, 0, 0, 1)">_.last(products);
console.log(obj2.name);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">iPhone 7 Plus 128G</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">3、指定查找条件返回符合条件的索引</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> obj3=_.findIndex(products,<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(obj){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> obj.price>=1000&&obj.name.indexOf("7")>0<span style="color: rgba(0, 0, 0, 1)">;
});
console.log(obj3);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">4、指定查找条件返回查找到的对象</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> obj4=_.find(products,<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(obj){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> obj.price>=1000&&obj.name.indexOf("7")>0<span style="color: rgba(0, 0, 0, 1)">;
});
console.log(obj4);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">{ name: 'iPhone 7 Plus 128G', price: 5899.8 }</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">5、排序</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> obj5=_.orderBy(products,["price","name"],["desc","asc"<span style="color: rgba(0, 0, 0, 1)">]);
console.log(obj5);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">[ { name: 'iPhone 7 Plus 128G', price: 5899.8 },</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">{ name: 'HuWei 荣耀8', price: 1899.8 },</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">{ name: 'ZTE U880', price: 899.8 } ]</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">6、查找价格为1899.8的产品的key</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> obj6=_.findKey(products,{price:1899.8<span style="color: rgba(0, 0, 0, 1)">});
console.log(obj6); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">1</span></pre>
</div>
<p>API的使用非常简单,但需要注意版本,可以现查现用,API地址:https://lodash.com/docs/4.17.2 </p>
<h2>1.9、参数</h2>
<h3>1.9.1、URL中的参数占位</h3>
<p>Checks route params (req.params), ex: /user/:id</p>
<p>127.0.0.1:3000/index,这种情况下,我们为了得到index,我们可以通过使用req.params得到,通过这种方法我们就可以很好的处理Node中的路由处理问题,同时利用这点可以非常方便的实现MVC模式;</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获得产品根据Id</span>
router.get('/:id/:category',<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(request,res,next){
res.send(request.params.id</span>+","+<span style="color: rgba(0, 0, 0, 1)">request.params.category);
});</span></pre>
</div>
<p>运行结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222144548511-613760100.png" alt=""></p>
<h3>1.9.2、URL中的QueryString</h3>
<p>Checks query string params (req.query), ex: ?id=12</p>
<p>127.0.0.1:3000/index?id=12,这种情况下,这种方式是获取客户端get方式传递过来的值,通过使用req.query.id就可以获得,类似于PHP的get方法;</p>
<div class="cnblogs_code">
<pre>router.get('/:id',<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(request,res,next){
res.send(</span>"name:"+<span style="color: rgba(0, 0, 0, 1)">request.query.name);
});</span></pre>
</div>
<p>运行结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222150043479-170783647.png" alt=""></p>
<h3>1.9.3、HTTP正文中的参数</h3>
<p> 在post请求中获得表单中的数据。</p>
<p>Checks urlencoded body params (req.body), ex: id=</p>
<p>127.0.0.1:300/index,然后post了一个id=2的值,这种方式是获取客户端post过来的数据,可以通过req.body.id获取,类似于PHP的post方法;</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222150412682-243382356.png" alt=""></p>
<p>页面:</p>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt="" id="code_img_closed_9e924e00-cb29-4697-b406-3b48d6af0125" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="" id="code_img_opened_9e924e00-cb29-4697-b406-3b48d6af0125" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_9e924e00-cb29-4697-b406-3b48d6af0125" class="cnblogs_code_hide">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">='stylesheet' </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">='/stylesheets/style.css' </span><span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> title </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span> - 产品列表<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">border</span><span style="color: rgba(0, 0, 255, 1)">="1"</span><span style="color: rgba(255, 0, 0, 1)"> width</span><span style="color: rgba(0, 0, 255, 1)">="80%"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>序号<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>名称<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>价格<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdts.forEach(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(pdt,index){</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">index</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 128, 1)">1</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdt.name</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdt.price</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">});</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">for</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(var i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 128, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">; i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"><</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdts.length; i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">++</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">) {</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">pdts.name</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> } </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(typeof msg!</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">undefined</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">){</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">msg</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">form </span><span style="color: rgba(255, 0, 0, 1)">action</span><span style="color: rgba(0, 0, 255, 1)">="pdt/add"</span><span style="color: rgba(255, 0, 0, 1)"> method</span><span style="color: rgba(0, 0, 255, 1)">="post"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
名称:</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="name"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
价格:</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="price"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>添加<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>代码:</p>
<div class="cnblogs_code">
<pre>router.post('/add',<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(request,res,next){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> entity=<span style="color: rgba(0, 0, 0, 1)">{name:request.body.name,price:request.body.price};
products.push(entity);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将product视图与指定的对象渲染后输出到客户端</span>
res.render('product', { title: '天狗商城', pdts:products,msg:"添加成功"<span style="color: rgba(0, 0, 0, 1)">});
});</span></pre>
</div>
<p>结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222151340745-1374859267.png" alt=""></p>
<h2>1.10、JSON</h2>
<p>如果需要Node.js向外提供返回JSON的接口,Express也是非常方便的,可以使用原来在浏览器中使用到的JSON对象,这是一个浏览器内置对象在服务可以直接使用:</p>
<p>将对象序列化成字符:</p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">对象</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> rose={"name":"Rose","weight":"65"<span style="color: rgba(0, 0, 0, 1)">};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">序列化成字符串</span>
<span style="color: rgba(255, 0, 0, 1)">var str=</span><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(255, 0, 0, 1)">JSON.stringify(rose);</span>
alert(str);</span></pre>
</div>
<p>结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222151858839-27300214.png" alt=""></p>
<p>反序列化,将字符转换成对象:</p>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将字符串转换成JavaScript对象</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> markStr='{"name":"mark","weight":"188"}'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> mark=<span style="color: rgba(0, 0, 0, 1)">JSON.parse(markStr);
alert(mark.name</span>+","+mark.weight);</pre>
</div>
<p>结果:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222152634417-1260078212.png" alt=""></p>
<p>Express已经封装了一个json方法,直接调用该方法就可以序列化对象:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 产品 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/rest', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
res.json(products);
});</span></pre>
</div>
<p>运行结果:</p>
<p> <img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161222152914276-1587553101.png" alt=""></p>
<h1>二、RESTful(表述性状态转移)</h1>
<p>REST是英文Representational State Transfer的缩写,中文称之为“表述性状态转移”<br>基于HTTP协议<br>是另一种服务架构<br>传递是JSON、POX(Plain Old XML)而不是SOAP格式的数据<br>充分利用HTTP谓词(Verb)<br>侧重数据的传输,业务逻辑交给客户端自行处理</p>
<p>REST是一种分布式服务架构的风格约束,像Java、.Net(WCF、WebAPI)都有对该约束的实现,使URL变得更加有意义,更加简洁明了,如:</p>
<p>http://www.zhangguo.com/products/1 get请求 表示获得所有产品的第1个</p>
<p>http://www.zhangguo.com/products/product post请求 表示添加一个产品</p>
<p>http://www.zhangguo.com/products/1/price get请求 表示获得第1个产品的价格</p>
<p>http://www.zhangguo.com/products/1 delete请求 删除编号为1的产品</p>
<p>REST设计需要遵循的原则<br>网络上的所有事物都被抽象为资源(resource);<br>每个资源对应一个唯一的资源标识符(resource identifier);<br>通过通用的连接器接口(generic connector interface)对资源进行操作;<br>对资源的各种操作不会改变资源标识符;<br>所有的操作都是无状态的(stateless)</p>
<p>谓词<br>GET<br>表示查询操作,相当于Retrieve、Select操作<br>POST<br>表示插入操作,相当于Create,Insert操作<br>PUT<br>表示修改操作,相当于Update操作<br>DELETE<br>表示删除操作,相当于Delete操作</p>
<p>其它还有:</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223101344557-1727952968.png" alt=""></p>
<p>NodeJS+Express可以很容易的实现REST</p>
<p>application/x-www-form-urlencoded</p>
<p>multipart/form-data</p>
<p>application/json</p>
<p>res.setHeader('Content-Type', 'application/json;charset=utf-8'); </p>
<p>示例代码cars.js:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();
</span><span style="color: rgba(0, 0, 255, 1)">var</span> _= require('lodash'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cars=<span style="color: rgba(0, 0, 0, 1)">[];
cars.push({id:</span>201701,name:"BMW",price:190,speed:"210km/h",color:"白色"<span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span>201702,name:"BYD",price:25,speed:"160km/h",color:"红色"<span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span>201703,name:"Benz",price:300,speed:"215km/h",color:"蓝色"<span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span>201704,name:"Honda",price:190,speed:"170km/h",color:"黑色"<span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span>201705,name:"QQ",price:130,speed:"210km/h",color:"白色"<span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> Get </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">获得所有汽车</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">url /cars/</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
res.json(cars);
});
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">Get</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">获得汽车通过id</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">url:/cars/:id</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/:id', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">从路径中映射参数,转换成数字</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> id=<span style="color: rgba(0, 0, 0, 1)">parseInt(req.params.id);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> car=<span style="color: rgba(0, 0, 0, 1)">_.find(cars,{id:id});
res.json(car);
});
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">Post</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">添加汽车</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">url:/cars/car</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.post(</span>'/car', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> car=req.body;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">从请求正文中获得json对象</span>
car.id=_.last(cars).id+1;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将编号修改为最后一辆车的编号+1</span>
cars.push(car);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将汽车对象添加到集合中</span>
res.json(car);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将添加成功的车以json的形式返回</span>
<span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">Put</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">修改汽车</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">url:/cars/car</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.put(</span>'/car', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> car=req.body;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">从请求正文中获得json对象</span>
<span style="color: rgba(0, 0, 0, 1)"> console.log(req.body);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> index=_.findIndex(cars,{id:parseInt(car.id)});<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">根据id获得车在集合中的下标</span>
<span style="color: rgba(0, 0, 0, 1)">
cars</span>=car;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">替换原对象</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">res.json(car);//将修改后的车以json的形式返回</span>
res.send({status:"success", message:"更新成功!"<span style="color: rgba(0, 0, 0, 1)">});
});
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">Delete</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">删除汽车</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">url:/cars/:id</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.</span><span style="color: rgba(0, 0, 255, 1)">delete</span>('/id/:id', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获得url中的编号参数</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> id=<span style="color: rgba(0, 0, 0, 1)">parseInt(req.params.id);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> index=_.findIndex(cars,{id:id});<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">根据id获得车在集合中的下标</span>
cars.splice(index,1); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在cars数组中删除下标从index开始的1条数据</span>
res.send({status:"success", message:"删除成功!"<span style="color: rgba(0, 0, 0, 1)">});
});
module.exports </span>= router;</pre>
</div>
<p>示例代码app.js:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> favicon = require('serve-favicon'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> logger = require('morgan'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cookieParser = require('cookie-parser'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> bodyParser = require('body-parser'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> index = require('./routes/index'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> users = require('./routes/users'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> pdts = require('./routes/product'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> task = require('./routes/task'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cars = require('./routes/cars'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">指定视图引擎为ejs</span>
app.set('views', path.join(__dirname, 'views'<span style="color: rgba(0, 0, 0, 1)">));
app.set(</span>'view engine', 'ejs'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> uncomment after placing your favicon in /public</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));</span>
app.use(logger('dev'<span style="color: rgba(0, 0, 0, 1)">));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)"> }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, </span>'public'<span style="color: rgba(0, 0, 0, 1)">)));
app.use(</span>'/'<span style="color: rgba(0, 0, 0, 1)">, index);
app.use(</span>'/users'<span style="color: rgba(0, 0, 0, 1)">, users);
app.use(</span>'/pdt'<span style="color: rgba(0, 0, 0, 1)">, pdts);
app.use(</span>"/task"<span style="color: rgba(0, 0, 0, 1)">,task);
app.use(</span>"/cars"<span style="color: rgba(0, 0, 0, 1)">,cars);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> catch 404 and forward to error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> err = <span style="color: rgba(0, 0, 255, 1)">new</span> Error('Not Found'<span style="color: rgba(0, 0, 0, 1)">);
err.status </span>= 404<span style="color: rgba(0, 0, 0, 1)">;
next(err);
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err, req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> set locals, only providing error in development</span>
res.locals.message =<span style="color: rgba(0, 0, 0, 1)"> err.message;
res.locals.error </span>= req.app.get('env') === 'development' ?<span style="color: rgba(0, 0, 0, 1)"> err : {};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> render the error page</span>
res.status(err.status || 500<span style="color: rgba(0, 0, 0, 1)">);
res.render(</span>'error'<span style="color: rgba(0, 0, 0, 1)">);
});
module.exports </span>= app;</pre>
</div>
<p>/* Get */<br>/*获得所有汽车*/<br>/*url /cars/*/</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223100830448-2076876806.png" alt=""></p>
<p>/*Get*/<br>/*获得汽车通过id*/<br>/*url:/cars/:id*/</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223101030042-1011736087.png" alt=""></p>
<p>/*Post*/<br>/*添加汽车*/<br>/*url:/cars/car*/</p>
<p> <img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223103714276-2008195573.png" alt=""></p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223103745714-149868509.png" alt=""></p>
<p><span style="color: rgba(255, 0, 0, 1)">参数中的json格式一定要使用标准格式,注意引号,注意Content-Type,默认的Content-Type类型是:application/x-www-form-urlencoded</span></p>
<p>/*Put*/<br>/*修改汽车*/<br>/*url:/cars/car*/</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223104653026-375693413.png" alt=""></p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223104632151-1638726484.png" alt=""></p>
<p>/*Delete*/<br>/*删除汽车*/<br>/*url:/cars/:id*/</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223105104432-1823460558.png" alt=""></p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161223105030745-492987203.png" alt=""></p>
<p><strong>node.js跨域</strong></p>
<p>修改app.js文件拦截所有的请求,修改头部</p>
<div class="cnblogs_code">
<pre>app.use(logger('dev'<span style="color: rgba(0, 0, 0, 1)">));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)"> }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, </span>'public'<span style="color: rgba(0, 0, 0, 1)">)));
<span style="color: rgba(255, 0, 0, 1)">app.all(</span></span><span style="color: rgba(255, 0, 0, 1)">'*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "content-type");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method == "OPTIONS") {
res.send("200");
} else {
next();
}
});</span></pre>
</div>
<p>结果:</p>
<p><img src="https://images2017.cnblogs.com/blog/63651/201801/63651-20180108142729785-1121920664.png" alt=""></p>
<h1>三、学生管理系统(ejs版)</h1>
<p>运行效果:</p>
<p><img src="https://img2022.cnblogs.com/blog/63651/202209/63651-20220914111202976-1509744800.png" alt="" loading="lazy"></p>
<p> routers/student.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
const { parseInt } </span>= require('lodash'<span style="color: rgba(0, 0, 0, 1)">);
const _</span>=require("lodash"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">模拟数据库数据</span>
let stus=<span style="color: rgba(0, 0, 0, 1)">[
{id:</span>202201,name:"tom",age:18<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202202,name:"rose",age:16<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202203,name:"jack",age:20<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202204,name:"lili",age:15<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202205,name:"lucy",age:15<span style="color: rgba(0, 0, 0, 1)">}
];
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> GET home page. </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
res.render(</span>'student', {stus,msg:"",stu:{id:"",name:"",age:""<span style="color: rgba(0, 0, 0, 1)">}});
});
router.get(</span>'/delete/:id', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在stus中查找编号为id的元素索引</span>
let index=<span style="color: rgba(0, 0, 0, 1)">_.findIndex(stus,{id:req.params.id});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">删除索引为index的元素</span>
stus.splice(index,1<span style="color: rgba(0, 0, 0, 1)">);
res.render(</span>'student', {stus,msg:"删除成功!",stu:{id:"",name:"",age:""<span style="color: rgba(0, 0, 0, 1)">}});
});
router.get(</span>'/edit/:id', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在stus中查找编号为id的元素</span>
let stu=<span style="color: rgba(0, 0, 0, 1)">_.find(stus,{id:parseInt(req.params.id)});
res.render(</span>'student', {stus,stu,msg:""<span style="color: rgba(0, 0, 0, 1)">});
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">添加</span>
router.post('/add', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
let stu</span>=<span style="color: rgba(0, 0, 0, 1)">req.body;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">根据编号排序</span>
let stus2=_.orderBy(stus,["id"<span style="color: rgba(0, 0, 0, 1)">]);
stu.id</span>=_.last(stus2).id+1;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">取最后一个元素的编号加1</span>
<span style="color: rgba(0, 0, 0, 1)">
stus.push(stu);
res.render(</span>'student', {stus,msg:"添加成功!",stu:{id:"",name:"",age:""<span style="color: rgba(0, 0, 0, 1)">}});
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">更新</span>
router.post('/update', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取提交的数据对象</span>
let stuSubmit=<span style="color: rgba(0, 0, 0, 1)">req.body;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在集合中查找要更新的元素</span>
let stu=<span style="color: rgba(0, 0, 0, 1)">_.find(stus,{id:parseInt(stuSubmit.id)});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">更新名字与年龄</span>
stu.name=<span style="color: rgba(0, 0, 0, 1)">stuSubmit.name;
stu.age</span>=<span style="color: rgba(0, 0, 0, 1)">stuSubmit.age;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">重新渲染页面,指定学生列表数据,学生数据,与提示消息</span>
res.render('student', {stus,msg:"更新成功!",stu:{id:"",name:"",age:""<span style="color: rgba(0, 0, 0, 1)">}});
});
module.exports </span>= router;</pre>
</div>
<p>views/student.ejs</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html </span><span style="color: rgba(255, 0, 0, 1)">lang</span><span style="color: rgba(0, 0, 255, 1)">="en"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="UTF-8"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">http-equiv</span><span style="color: rgba(0, 0, 255, 1)">="X-UA-Compatible"</span><span style="color: rgba(255, 0, 0, 1)"> content</span><span style="color: rgba(0, 0, 255, 1)">="IE=edge"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="viewport"</span><span style="color: rgba(255, 0, 0, 1)"> content</span><span style="color: rgba(0, 0, 255, 1)">="width=device-width, initial-scale=1.0"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>学生管理系统<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h2</span><span style="color: rgba(0, 0, 255, 1)">></span>学生管理系统<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h2</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">border</span><span style="color: rgba(0, 0, 255, 1)">="1"</span><span style="color: rgba(255, 0, 0, 1)"> width</span><span style="color: rgba(0, 0, 255, 1)">="100%"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>编号<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>姓名<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>年龄<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>操作<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">th</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">for</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">let</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(128, 0, 128, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"><</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">stus.length;i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">++</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">){ </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">stus.id</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">stus.name</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">stus.age</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">="/delete/<%=stus.id%>"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="del"</span><span style="color: rgba(0, 0, 255, 1)">></span>删除<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"> |
</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">a </span><span style="color: rgba(255, 0, 0, 1)">href</span><span style="color: rgba(0, 0, 255, 1)">="/edit/<%=stus.id%>"</span><span style="color: rgba(0, 0, 255, 1)">></span>编辑<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">a</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">td</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">tr</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> } </span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">fieldset</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">legend</span><span style="color: rgba(0, 0, 255, 1)">></span>学生<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">legend</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">form </span><span style="color: rgba(255, 0, 0, 1)">method</span><span style="color: rgba(0, 0, 255, 1)">="post"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">></span>姓名:<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="name"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="<%=stu.name%>"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">></span>年龄:<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="age"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="<%=stu.age%>"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="hidden"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="id"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="studentId"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="<%=stu.id%>"</span> <span style="color: rgba(0, 0, 255, 1)">/></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">formaction</span><span style="color: rgba(0, 0, 255, 1)">="/add"</span><span style="color: rgba(0, 0, 255, 1)">></span>添加<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(255, 0, 0, 1)">formaction</span><span style="color: rgba(0, 0, 255, 1)">="/update"</span><span style="color: rgba(0, 0, 255, 1)">></span>更新<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">fieldset</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h4</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)"><%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">msg</span><span style="background-color: rgba(255, 255, 0, 1); color: rgba(0, 0, 0, 1)">%></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h4</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
let dels</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">document.querySelectorAll(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">.del</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">for</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(let i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"><</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">dels.length;i</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">++</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">){
dels.onclick</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(){
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">return</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> confirm(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">您确定要删除吗?</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
}
}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>app.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> createError = require('http-errors'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cookieParser = require('cookie-parser'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> logger = require('morgan'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> indexRouter = require('./routes/index'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> usersRouter = require('./routes/users'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> studentRouter = require('./routes/student'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> view engine setup</span>
app.set('views', path.join(__dirname, 'views'<span style="color: rgba(0, 0, 0, 1)">));
app.set(</span>'view engine', 'ejs'<span style="color: rgba(0, 0, 0, 1)">);
app.use(logger(</span>'dev'<span style="color: rgba(0, 0, 0, 1)">));
app.use(express.json());
app.use(express.urlencoded({ extended: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)"> }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, </span>'public'<span style="color: rgba(0, 0, 0, 1)">)));
app.use(</span>'/index'<span style="color: rgba(0, 0, 0, 1)">, indexRouter);
app.use(</span>'/users'<span style="color: rgba(0, 0, 0, 1)">, usersRouter);
app.use(</span>'/'<span style="color: rgba(0, 0, 0, 1)">, studentRouter);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> catch 404 and forward to error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
next(createError(</span>404<span style="color: rgba(0, 0, 0, 1)">));
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err, req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> set locals, only providing error in development</span>
res.locals.message =<span style="color: rgba(0, 0, 0, 1)"> err.message;
res.locals.error </span>= req.app.get('env') === 'development' ?<span style="color: rgba(0, 0, 0, 1)"> err : {};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> render the error page</span>
res.status(err.status || 500<span style="color: rgba(0, 0, 0, 1)">);
res.render(</span>'error'<span style="color: rgba(0, 0, 0, 1)">);
});
module.exports </span>= app;</pre>
</div>
<h1>四、学生管理系统(REST版)</h1>
<p> 运行效果:</p>
<p><img src="https://img2022.cnblogs.com/blog/63651/202209/63651-20220915110121423-754094627.png" alt="" loading="lazy"></p>
<p> routers/carsApi.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> express=require(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">express</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">const</span> _=require(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">lodash</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
let router</span>=<span style="color: rgba(0, 0, 0, 1)">express.Router();
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cars=<span style="color: rgba(0, 0, 0, 1)">[];
cars.push({id:</span><span style="color: rgba(128, 0, 128, 1)">201701</span>,name:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">BMW</span><span style="color: rgba(128, 0, 0, 1)">"</span>,price:<span style="color: rgba(128, 0, 128, 1)">190</span>,speed:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">210km/h</span><span style="color: rgba(128, 0, 0, 1)">"</span>,color:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">白色</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span><span style="color: rgba(128, 0, 128, 1)">201702</span>,name:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">BYD</span><span style="color: rgba(128, 0, 0, 1)">"</span>,price:<span style="color: rgba(128, 0, 128, 1)">25</span>,speed:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">160km/h</span><span style="color: rgba(128, 0, 0, 1)">"</span>,color:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">红色</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span><span style="color: rgba(128, 0, 128, 1)">201703</span>,name:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Benz</span><span style="color: rgba(128, 0, 0, 1)">"</span>,price:<span style="color: rgba(128, 0, 128, 1)">300</span>,speed:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">215km/h</span><span style="color: rgba(128, 0, 0, 1)">"</span>,color:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">蓝色</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span><span style="color: rgba(128, 0, 128, 1)">201704</span>,name:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Honda</span><span style="color: rgba(128, 0, 0, 1)">"</span>,price:<span style="color: rgba(128, 0, 128, 1)">190</span>,speed:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">170km/h</span><span style="color: rgba(128, 0, 0, 1)">"</span>,color:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">黑色</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">});
cars.push({id:</span><span style="color: rgba(128, 0, 128, 1)">201705</span>,name:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">QQ</span><span style="color: rgba(128, 0, 0, 1)">"</span>,price:<span style="color: rgba(128, 0, 128, 1)">130</span>,speed:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">210km/h</span><span style="color: rgba(128, 0, 0, 1)">"</span>,color:<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">白色</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Get请求,获取所有汽车</span>
router.<span style="color: rgba(0, 0, 255, 1)">get</span>(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/</span><span style="color: rgba(128, 0, 0, 1)">"</span>,(req,res,next)=><span style="color: rgba(0, 0, 0, 1)">{
res.json({status:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ok</span><span style="color: rgba(128, 0, 0, 1)">"</span>,<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">data</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">:cars});
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Get请求,获取汽车通过编号</span>
router.<span style="color: rgba(0, 0, 255, 1)">get</span>(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/:id</span><span style="color: rgba(128, 0, 0, 1)">"</span>,(req,res,next)=><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">查找编号为id的汽车</span>
let car=_.find(cars,{id:parseInt(req.<span style="color: rgba(0, 0, 255, 1)">params</span><span style="color: rgba(0, 0, 0, 1)">.id)});
res.json({status:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ok</span><span style="color: rgba(128, 0, 0, 1)">"</span>,<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">data</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">:car});
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Post,添加汽车</span>
router.post(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/</span><span style="color: rgba(128, 0, 0, 1)">"</span>,(req,res,next)=><span style="color: rgba(0, 0, 0, 1)">{
let car</span>=<span style="color: rgba(0, 0, 0, 1)">req.body;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取编号最大的汽车</span>
let obj=_.last(_.sortBy(cars,[<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">id</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">]));
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最大的编号加1</span>
car.id=obj.id+<span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">;
cars.push(car);
res.json({status:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ok</span><span style="color: rgba(128, 0, 0, 1)">"</span>,<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">data</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">:car});
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Put请求,修改汽车</span>
router.put(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/</span><span style="color: rgba(128, 0, 0, 1)">"</span>,(req,res,next)=><span style="color: rgba(0, 0, 0, 1)">{
let srcCar</span>=<span style="color: rgba(0, 0, 0, 1)">req.body;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">查找编号为id的汽车</span>
let car=<span style="color: rgba(0, 0, 0, 1)">_.find(cars,{id:parseInt(srcCar.id)});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">修改</span>
car.name=<span style="color: rgba(0, 0, 0, 1)">srcCar.name;
car.speed</span>=<span style="color: rgba(0, 0, 0, 1)">srcCar.speed;
car.price</span>=<span style="color: rgba(0, 0, 0, 1)">srcCar.price;
car.color</span>=<span style="color: rgba(0, 0, 0, 1)">srcCar.color;
res.json({status:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ok</span><span style="color: rgba(128, 0, 0, 1)">"</span>,<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">data</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">:cars});
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Delete请求,删除汽车</span>
router.delete(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/:id</span><span style="color: rgba(128, 0, 0, 1)">"</span>,(req,res,next)=><span style="color: rgba(0, 0, 0, 1)">{
let srcCar</span>=<span style="color: rgba(0, 0, 0, 1)">req.body;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">查找编号为id的汽车索引号</span>
let index=_.findIndex(cars,{id:parseInt(req.<span style="color: rgba(0, 0, 255, 1)">params</span><span style="color: rgba(0, 0, 0, 1)">.id)});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">从cars数组中删除指定编号的元素</span>
cars.splice(index,<span style="color: rgba(128, 0, 128, 1)">1</span><span style="color: rgba(0, 0, 0, 1)">);
res.json({status:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ok</span><span style="color: rgba(128, 0, 0, 1)">"</span>,<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">data</span><span style="color: rgba(128, 0, 0, 1)">"</span>:req.<span style="color: rgba(0, 0, 255, 1)">params</span><span style="color: rgba(0, 0, 0, 1)">.id});
});
module.exports</span>=router;</pre>
</div>
<p>routers/cars.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> GET home page. </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
router.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
res.render(</span>'cars'<span style="color: rgba(0, 0, 0, 1)">, { });
});
module.exports </span>= router;</pre>
</div>
<p>views/cars.ejs</p>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>汽车管理系统</title>
</head>
<body>
<div id="app">
<h2>汽车管理系统</h2>
<table border="1" width="100%">
<tr>
<th>编号</th>
<th>车名</th>
<th>价格</th>
<th>车速</th>
<th>颜色</th>
<th>操作</th>
</tr>
<tr v-<span style="color: rgba(0, 0, 255, 1)">for</span>="(obj,index) in cars">
<td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.price }}</td>
<td>{{ obj.speed }}</td>
<td>{{ obj.color }}</td>
<td>
<a href="" @click.stop.prevent="del(obj,index)">删除</a> |
<a href="" @click.stop.prevent="edit(obj,index)">编辑</a>
</td>
</tr>
</table>
<fieldset>
<legend>汽车</legend>
<p>
<label> 名称: </label>
<input type="text" v-model="car.name" />
</p>
<p>
<label> 价格: </label>
<input type="text" v-model="car.price" />
</p>
<p>
<label> 速度: </label>
<input type="text" v-model="car.speed" />
</p>
<p>
<label> 颜色: </label>
<input type="text" v-model="car.color" />
</p>
<p>
<button @click="save" type="button">保存</button>
</p>
</fieldset>
</div>
<script src="javascripts/vue/vue.js"></script>
<script src="javascripts/axios/axios.min.js"></script>
<script><span style="color: rgba(0, 0, 0, 1)">
let app </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
el: </span>"#app"<span style="color: rgba(0, 0, 0, 1)">,
data: {
cars: [],
car: { id: </span>0, name: "", price: "", speed: "", color: ""<span style="color: rgba(0, 0, 0, 1)"> },
},
created() {
axios
.get(</span>"http://127.0.0.1:3000/api/cars"<span style="color: rgba(0, 0, 0, 1)">)
.then((data) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.cars =<span style="color: rgba(0, 0, 0, 1)"> data.data.data;
})
.</span><span style="color: rgba(0, 0, 255, 1)">catch</span>((err) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err;
});
},
methods: {
del(obj, index) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (confirm("您确定要删除吗?"<span style="color: rgba(0, 0, 0, 1)">)) {
let url </span>= "http://127.0.0.1:3000/api/cars/" +<span style="color: rgba(0, 0, 0, 1)"> obj.id;
axios
.</span><span style="color: rgba(0, 0, 255, 1)">delete</span><span style="color: rgba(0, 0, 0, 1)">(url)
.then((data) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (data.data.status === "ok"<span style="color: rgba(0, 0, 0, 1)">) {
alert(</span>"删除成功"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.cars.splice(index, 1<span style="color: rgba(0, 0, 0, 1)">);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
alert(</span>"删除失败"<span style="color: rgba(0, 0, 0, 1)">);
}
})
.</span><span style="color: rgba(0, 0, 255, 1)">catch</span>((err) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err;
});
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
},
edit(obj, index) {
let url </span>= "http://127.0.0.1:3000/api/cars/" +<span style="color: rgba(0, 0, 0, 1)"> obj.id;
axios
.get(url)
.then((data) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.car =<span style="color: rgba(0, 0, 0, 1)"> data.data.data;
})
.</span><span style="color: rgba(0, 0, 255, 1)">catch</span>((err) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err;
});
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
},
save() {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">有id为修改</span>
<span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.car.id) {
axios
.put(</span>"http://127.0.0.1:3000/api/cars", <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.car)
.then((data) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (data.data.status === "ok"<span style="color: rgba(0, 0, 0, 1)">) {
alert(</span>"修改成功!"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.car =<span style="color: rgba(0, 0, 0, 1)"> {
id: </span>0<span style="color: rgba(0, 0, 0, 1)">,
name: </span>""<span style="color: rgba(0, 0, 0, 1)">,
price: </span>""<span style="color: rgba(0, 0, 0, 1)">,
speed: </span>""<span style="color: rgba(0, 0, 0, 1)">,
color: </span>""<span style="color: rgba(0, 0, 0, 1)">,
};
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.cars =<span style="color: rgba(0, 0, 0, 1)"> data.data.data;
}
});
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">没id为添加</span>
<span style="color: rgba(0, 0, 0, 1)"> axios
.post(</span>"http://127.0.0.1:3000/api/cars", <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.car)
.then((data) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (data.data.status === "ok"<span style="color: rgba(0, 0, 0, 1)">) {
alert(</span>"新增成功!"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.cars.push(data.data.data);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.car.id = 0<span style="color: rgba(0, 0, 0, 1)">;
}
})
.</span><span style="color: rgba(0, 0, 255, 1)">catch</span>((err) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err;
});
}
},
},
});
</span></script>
</body>
</html></pre>
</div>
<p>app.js</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> createError = require('http-errors'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> express = require('express'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cookieParser = require('cookie-parser'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> logger = require('morgan'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> indexRouter = require('./routes/index'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> usersRouter = require('./routes/users'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> carsApiRouter = require('./routes/carsApi'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> carsRouter = require('./routes/cars'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> view engine setup</span>
app.set('views', path.join(__dirname, 'views'<span style="color: rgba(0, 0, 0, 1)">));
app.set(</span>'view engine', 'ejs'<span style="color: rgba(0, 0, 0, 1)">);
app.use(logger(</span>'dev'<span style="color: rgba(0, 0, 0, 1)">));
app.use(express.json());
app.use(express.urlencoded({ extended: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)"> }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, </span>'public'<span style="color: rgba(0, 0, 0, 1)">)));
app.use(</span>'/index'<span style="color: rgba(0, 0, 0, 1)">, indexRouter);
app.use(</span>'/users'<span style="color: rgba(0, 0, 0, 1)">, usersRouter);
app.use(</span>'/api/cars', carsApiRouter);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">服务接口</span>
app.use('/', carsRouter);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">汽车管理首页</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> catch 404 and forward to error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res, next) {
next(createError(</span>404<span style="color: rgba(0, 0, 0, 1)">));
});
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> error handler</span>
app.use(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err, req, res, next) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> set locals, only providing error in development</span>
res.locals.message =<span style="color: rgba(0, 0, 0, 1)"> err.message;
res.locals.error </span>= req.app.get('env') === 'development' ?<span style="color: rgba(0, 0, 0, 1)"> err : {};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> render the error page</span>
res.status(err.status || 500<span style="color: rgba(0, 0, 0, 1)">);
res.render(</span>'error'<span style="color: rgba(0, 0, 0, 1)">);
});
module.exports </span>= app;</pre>
</div>
<h1>五、作业</h1>
<p>6.1、请安装好node.js环境,测试版本,在控制台写一个方法用于计算1-100间的所有能被3整除的数,并调用。</p>
<p>6.2、请将8.1中的方法单独存放到一个math.js文件中,同时在math.html页面与node的控制台中调用</p>
<p>6.3、在开发工具IDE中集成node.js开发环境,创建一个node.js项目,向控制台输出“Hello World!”</p>
<p>6.4、使用记事本在c:\根目录下写一个server.js文件实现一个最简单的web服务器,请求时响应当前系统时间。</p>
<p>6.5、将6.4的功能在IDE中完成,请注意端口号不能被占用,如果提示占用错误可以修改端口号为1025-65535之间</p>
<p>6.6、完成一个图书管理的功能,图书包含(编号,名称,作者,图片,价格),实现:</p>
<p>a)、非AJAX的CRUD,使用Node.js+Express+ejs的动态技术。</p>
<p>b)、使用Node.js+Express+Axios+Rest+Vue技术实现,要求增加搜索,排序与分页功能。</p>
<p><img src="https://images2015.cnblogs.com/blog/63651/201612/63651-20161230140932101-1105720214.png" alt=""></p>
<p>6.7、在lodash的官方文档中找出5个未学习过的方法,对如下集合进行操作:</p>
<div class="cnblogs_code">
<pre>let stus=<span style="color: rgba(0, 0, 0, 1)">[
{id:</span>202201,name:"tom",age:18<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202202,name:"rose",age:16<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202203,name:"jack",age:20<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202204,name:"lili",age:15<span style="color: rgba(0, 0, 0, 1)">},
{id:</span>202205,name:"lucy",age:15<span style="color: rgba(0, 0, 0, 1)">}
];</span></pre>
</div>
<h1>六、视频</h1>
<p>https://www.bilibili.com/video/av17977069/</p>
<h1>七、示例代码</h1>
<p>https://gitee.com/zhangguo5/nodejs_demo11.git<span style="font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px"><br></span></p>
<p>https://gitee.com/zhangguo5/nodejs_demo13.git</p>
<p>https://gitee.com/zhangguo5/nodejs_demo15.git</p>
</div>
</div><br><br>
来源:https://www.cnblogs.com/best/p/16422402.html
頁:
[1]