文章目录
- 一、框架简介
- 1.框架：是半成品，对响应底层技术的封装，可以提高开发效率
- 2.MVC：model-view-control，称为模型-视图-控制器
- 3.常用框架：
- 二、Express框架
- 1.特点：
- 2.安装：全局安装
- 3.创建项目：命令行创建
- 4.在集成开发环境创建项目
- 5.express项目的目录结构：
- 6.express页面：
- 7.请求对象：request，客户端向服务器发送的请求
- 8.响应对象：response
- 9.页面跳转的方式
- 三、express中解决跨域问题
一、框架简介
1.框架：是半成品，对响应底层技术的封装，可以提高开发效率
2.MVC：model-view-control，称为模型-视图-控制器
（1）M：数据模型（MySQL的是sequelize定义，MongoDB是mongoose定义）
（2）V：视图（HTML页面），将数据以网页的形式展示出来
（3）C：控制器（Node服务器）
3.常用框架：
（1）express框架
（2）Koa框架：对JavaScript的promise和async异步编程比较熟悉
（3）Egg框架：企业级的开发框架。由阿里开发的，国内用户较多
二、Express框架
1.特点：
（1）中间件：响应http请求，是请求处理的函数的模块
（2）路由表：响应用户的不同请求
（3）根据参数动态的渲染页面
2.安装：全局安装
npm install -g express-generator
3.创建项目：命令行创建
（1）创建项目：进入相应的文件夹，在cmd窗口中输入 express 项目名
（2）进入项目： cd 项目文件名
（3）初始化项目： npm install
（4）启动项目： npm start
（5）验证项目是否创建成功：浏览器中输入http://localhost:3000
4.在集成开发环境创建项目
直接使用WebStorm创建express项目
5.express项目的目录结构：
（1）bin目录：启动配置文件，可以修改运行端口号
（2）node_modules： 存放的是项目依赖模块
（3）public：存放静态资源文件
（4）routers目录：路由文件
（5）views目录：页面文件（网页）
（6）app.js：项目的入口文件（项目配置）
（7）package.json：项目依赖配置及开发者信息
6.express页面：
6.1更改express页面的默认模板引擎为art-template:
（1）安装两个模块：npm install -S art-template npm install -S express-art-template
（2）在app.js文件中设置页面引擎
6.2渲染页面：
（1）在服务器端通过response对象的render方法将数据渲染到页面
（2）在页面中使用{{变量名}}来得到服务器端的数据
6.3 art-template页面引擎中页面的渲染方式
（1）条件渲染
{{if 条件}}
html代码
{{/if}}（2）嵌套的条件渲染
{{ if 条件 }}
{{ if 条件 }}
html代码
{{ /if }}
{{ /if }}（3）循环渲染
{{each arr as item}}
<tr align="center">
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
{{/each}}7.请求对象：request，客户端向服务器发送的请求
（1）request.params：获取路由参数
示例：
前端页面：
<a href="http://localhost:3000/test/11/lisi">params参数测试</a>后台的接口：
router.get('/test/:id/:user',function (req,res,next) {
res.send(req.params); //将用户的请求参数响应回去
});id接收的是11，user接收的是lisi
（2）request.query ：获取get请求的查询字符串参数
url传值：
url?参数名1=参数值&参数名2=参数值2
？是url地址和参数之间的分隔符
&是参数之间的分隔符
（3）request.body：获取post的请求体内容
8.响应对象：response
（1）response.render（视图名，数据）：页面的文件名（不带扩展名），‘数据’是向页面发送的数据
（2）response.send(options)：向客户端发送响应数据，可以是一个对象
（3）response.redirect([status],url)：重定向浏览器，默认状态码：302
9.页面跳转的方式
（1）请求转发：请求对象只有一个。在服务器端进行（render进行了请求转发）
（2）页面重定向：发送两次请求，产生两个请求对象。在客户端进行的（redirect页面重定向）
三、express中解决跨域问题
1.跨域：客户端和服务器在协议，地址，端口号，任意一个不同就是跨域
2.安装跨域模块cors ： npm install cors
3.在app.js文件中引入跨域模块
var cors = require('cors');4.使用跨域模块
app.use(cors());有了跨域模块可以实现前后端分离，前端可以通过后台给定的接口地址来获取数据。
