继续上篇博客的内容,今天继续介绍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>
<% } %>
今天就到这了,请多指教