Node.js(9)-webStorm中创建Express项目

本文介绍了如何在WebStorm中创建Node.js的Express项目,包括修改默认端口号、安装第三方模块如nodemon,自定义路由中间件,实现前后端交互,处理跨域问题使用cors模块,以及服务器响应JSON数据的实践操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

var port = normalizePort(process.env.PORT || '9080');

2、安装第三方模块

(1)安装nodemon模块:监视服务器端程序是否修改,若修改了会自动重启

        a、安装指令:npm install nodemon

        b、在package.json修改以下配置:

"scripts": {
    "start": "nodemon ./bin/www"
  }

(2)使用nodemon模块运行项目:npm start

3、自定义路由中间件

(1)路由中间件:是用来响应客户端的http请求

(2)创建步骤:

第一步:导入express模块

const express = require('express')

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

const router = express.Router()

第三步:创建响应模块

router.请求方式(get/post)('客户端请求时的地址',(req,res)=>{})

第四步:导出路由器router

module.exports = router

(3)响应客户端请求的业务模块

        get(path,callback)

                参数path:是字符串,代表客户端请求时的地址

                参数callback:回调函数

(4)响应对象res的常用方法

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

        res.json({}):参数是json格式的对象

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

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

var employeeRouter = require('./routes/employee'); //导入自定义的路由文件

第二步:配置自定义的路由路径

app.use('/employee',employeeRouter); //配置自定义的路由路径

强调:路由路径的拼接:

http://127.0.0.1:8089/employee/all

路由路径拼接时注意的问题

(1)’/‘:表示服务器的根目录。当前服务器的根是http://127.0.0.1:8089

(2)拼接:http://127.0.0.1:8089 + app.js文件中配置的路径 + 路由文件中的路径

4、前后端交互

(1)客户端向服务器发送get请求同时向服务器传递参数

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

req.query.参数名

(3)服务器端接收客户端用post方式发送的参数:

req.body.参数名

5、Express项目中的跨域设置:在服务器端进行跨域设置——cors方式

(1)在服务器端安装cors模块

npm install cors

(2)在app.js文件中进行跨域配置

//导入cors模块
var cors = require('cors');
//在app中应用cors模块
app.use(cors())

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

课堂练习:

服务器端:用数组保存了5个学生的信息,将保存学生信息的数组响应给客户端

客户端:使用jquery的ajax方法获取服务器响应的数据后显示在页面表格中

问题:

(1)路由地址的拼接:

http://localhost:8089/students/students

(2)跨域模块cors的配置顺序:必须是路由路径设置之前进行配置

(3)模块化:导出、导入时要注意命名

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值