WebStrom

一、WebStrom中创建Express项目

1、修改项目的默认端口号：bin/www文件

2、安装第三方模块

（1）安装nodemon模块：监视服务器端的程序是否修改，若修改了则会自动重启

a、安装指令：npm install nodemon     npm uninstall nodemon（卸载指定模块）

b、在package.json：修改以下配置，将node 改为nodemon

（2）使用nodemon模块来运行项目：npm start

3、自定义路由中间件

（1）路由中间件：是用来响应客户端的http请求的

（2）创建的步骤：

第一步：导入express模块

第二步：使用express模块创建路由器router

第三步：创建路由响应模块

第四步：导出路由器router

（3）响应客户端请求的业务模块：

get（path、callback）

参数path：是一个字符串，代表客户端请求时的地址

参数callback：回调函数，有三个参数（req、res、next）

（4）响应对象res的方法：

a、res.send(参数)：参数可以是字符串也可以是json格式的对象。参数值会被发送给客户端

b、res.json({参数})：参数是json格式的对象，也是给客户端发送响应信息，使用时，与send方法二选一。

（5）在app.js文件中对自定义的路由中间件进行配置

第一步：导入自定义的路由文件

第二步：配置自定义的路由路径，还是在app.js文件中往下翻。

可以用这一句省略导入上面的自定义路由文件，直接在后面使用app.use("/students", require("./routes/student"));

强调：路由路径的拼接：将下面地址输入在浏览器中即可显示employee.js中的结果。

http://127.0.0.1:9000/employee/all

employee是在app.js的app.use方法中自己定义的路径 。这里的all是在employee文件中get请求中的path路径。

路由路径拼接时出现的问题：

（1）'/'：表示服务器的根目录，当前服务器的根（根目录）是http://127.0.0.1:9000

（2）拼接：http://127.0.0.1:9000+app.js文件中配置的路径+路由文件中的路径

4、前后端交互

（1）客户端向服务器发送get请求，同时向服务器传递参数，

（2）在服务器端接收客户端用get方式发送的参数

req.query.参数名   参数名与客户端的name名一致

（3）服务器端接收客户端用post方式发送的数据

req.body.参数名

5、express项目中的跨域设置：在服务器端进行跨域设置----cors方式

（1）在服务器端安装cors模块

npm install cors

（2）在app.js文件中进行跨域的配置

以上跨域设置已完成。

jQuery中的ajax：

前端：

服务器端：

6、服务器向客户端响应json格式的数据

res.json({ })

res.send(JSON.stringfry( ))

练习：服务器端通数组保存五个学生的信息，将保存学生信息的数组响应给客户端，

客户端：用jQuery的ajax的封装获取服务器响应的数据后，将其显示在表格中。

客户端不需要向服务器传递信息，所以不用post，使用get。

思路：

（1）在webStorm中新建项目文件夹，flie--->new--->project--->express--->location选择存放地址以及文件夹名称

（2）安装nodemon模块，在终端输入npm install nodemon  ----> 在packjson文件的start一行，将node改为nodemon。

（3）安装cors跨域模块  npm install cors  ---> 在app.js文件中导入cors -->var cors = require（'cors'）  在app.js文件中使用cors --->app.use(cors( )) ，跨域使用必须写在路由配置之前。

（4）新建js文件写一个Student类，可以不用写方法（按需求来），写完之后通过module.exports = Student导出。

（5）写后端页面（新建一个js文件）：

导入express模块  const express = require('express')

创建路由器 const router = express.Router()

导入类的js文件 const Student = require（'文件名'） 这里导入的名与导出的名必须一致

创建服务器响应  router.get(path，（req,res,next）=>{  //path指自己定义的一个路径：/路径名

处理想要给客户端发送的信息

服务器响应给客户端的信息：res.send(JSON.stringify（arr）)

})

导出路由文件 module.exports = router

（6）在app.js文件中定义路由器 var studentRouter = require('后端文件名')

在app.js文件中使用路由文件 app.use('path'，studentRouter)  path指自己定义的一个路径：/路径名

（7）在html中写利用jQuery的ajax写前端，url属性的地址是'http://127.0.0.1:端口号/app.js中使用express的path/express文件中router.get中的path'   或者： http://localhost:8089/students/all 根地址可以是http;//localhost

需要注意的问题：

（1）路由地址的拼接

（2）跨域模块的配置顺序必须在路由配置之前

（3）模块化：导入的名字和创建对象的名字必须一致，导出的名字可以和导入名字不一样。