Node.js与Express框架入门-优快云博客

继续上篇博客的内容，今天继续介绍Node相关的知识

1.服务器相关知识

1.1什么是服务器

服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。
在网络环境下，根据服务器提供的服务类型不同，分为文件服务器、数据库服务器、应用程序服务器、WEB服务器等。

1.2前后端分离与耦合架构的概念

前后端分离

前端HTML页面通过Ajax调用后端的RestFul API并使用Json数据进行交互

在这里插入图片描述
前后端耦合—传统的系统

架构

前端写完的HTML页面交给后端，后端负责渲染数据，前后端相互调整方式

2. Express基础

2.1 express介绍

Express基于 Node.js 平台，快速、开放、极简的 Web 开发框架

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能

2.1.1 使用express创建服务器

a).安装express

	npm install express --save 
	npm install express -S  //简写
	npm i express -S

可以使用淘宝镜像cnpm代替npm

在控制台中输入如下指令，以后即可使用cnpm代替npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

b). 创建一个express服务器

创建一个文件夹expressserver，进入文件夹并且安装express

mkdir expressserver cd expressserver cnpm i express -S

创建index.js

  const express = require('express'); // 第三方模块
   // 实例化一个express对象
  const app = express();
  
  app.get('/', (req, res) => { 
    res.send('hello 1902');
  }) 
  
  app.get('/login', (req, res) => { 
    res.send('登录')
  }) 
  app.get('/test', (req, res) => {
    res.send('测试') }) app.listen(3000, () => {
      console.log('your server is running at http://localhost:3000'); 						    
  })

假设浏览器地址栏中地址为
http://localhost:3000/login?username=wudaxun&password=123

匹配的是/login这个路由
nodejs原生: url.parse(req.url, true).query
express: req.query

app.get('/login', (req, res) => { 
  console.log(req.query);
  res.send('登录');
})

2.1.2 express生成器直接生成项目 — 脚手架

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架
express-generator 包含了 express 命令行工具

a). 安装express项目生成器

cnpm i express-generator -g

b).使用命令创建项目

–view=ejs 并不是必须得加的，如果不加，最终默认的模板是jade语法，相比ejs语法，jade语法的学习成本更高

npm/cnpm start可以启动服务器，是因为package.json文件中scripts选项做了配置

express proname --view=ejs
cd proname 
cnpm i 
cnpm start （node ./bin/www）

c).了解项目目录结构

bin
www // 服务器运行的入口文件 npm start – node ./bin/www
node_modules // 在项目中需要使用到的第三方模块
public // 静态的资源文件夹
images
javascripts
stylesheets
routes // 路由或者是接口的定义
index.js
users.js
views // 路由所对应的页面
error.ejs
index.ejs
app.js // 应用各种中间件，设置静态资源文件夹，注册各个路由或者接口
package.json // 描述文件，列举了项目需要使用到的依赖以及运行命令、版本号等

2.1.3 静态文件资源托管( static )

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，请使用 Express 中的 express.static 内置中间件函数。

在本项目中app.js处有这样一句话

app.use(express.static(path.join(__dirname, 'public')));

就可以在views/index.ejs中使用了

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

2.1.4 路由

路由是指确定应用程序如何响应对特定端点的客户端请求，该请求是URI（或路径）和特定HTTP请求方法（GET，POST等）。每个路由都可以有一个或多个处理函数，这些函数在路由匹配时执行。

app.METHOD(PATH, HANDLER)

app是一个实例express。
METHOD是一个HTTP请求方法，小写。
PATH 是服务器上的路径。
HANDLER 是路由匹配时执行的功能。

2.1.5 中间件

中间件函数是可以访问请求对象（req），响应对象（res）以及next应用程序请求 - 响应周期中的函数的函数。该next功能是Express路由器中的一个功能，当被调用时，它将执行当前中间件之后的中间件。
可以使用 app.use() 调用中间件

3. ejs模板的用法

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

routes/index.js

router.get('/', function(req, res, next) {
  res.render('index', {
    title: '<mark>Express</mark>',
    list: [ 'a', 'b', 'c', 'd'],
     flag: true
  });
 });

前端ejs模板中使用变量

<%- title %> // 解析
<%= title %> // 转义 --- 原样输出

给一个页面导入一个代码片段（首页中导入共同头部）— 包含语法

<%- include('./header.ejs') %>

条件判断

<% if (!flag) { %>
  <ul> 
    <li>week1</li> 
  </ul>
<% } %>

循环语句

<% for (var i = 0; i < list.length; i++) { %>
  <p><%- list[i] %></p>
<% } %>

今天就到这了，请多指教