node使用express搭建服务web前端(服务数据)。

做前端时,在后台接口没有开发完毕时,总是需要模拟各种数据。现在就用node搭建一个模拟接口数据方案。
用的express,当然如果会mongodb配合着会更好。
首先:执行安装插件依赖:yarn add express 或者npm install --save express
其次:进入项目目录,在根目录创建一个服务端的文件夹,比如:server,在文件夹内再 创建一个server.js的文档。
写入如下代码:

const express = require('express')
// express 需要全局安装一下.可以在git here 和cmd 下执行。
// npm install -g express nodemon
// nodemon 是执行热加载更新的。
// 新建app
const app = express()
// app.get是执行get 请求。app.post是执行post请求
// app.use 使用模块
// res.send(返回的是文本) res.json(返回的是json)   res.sendfile(返回的是文件) 响应不同的内容。

app.get('/',function(req,res){
    res.send('<h1>hello express!</h1>')
})
app.get('/data',function(req,res){
    res.json({type:"json",name:"well"})
})

app.listen(9090,function(){
    console.log('node app start at port 9090')
})

接着:启动。通过命令行工具在项目目录下执行node server.js
就启动了这个服务,然后在浏览器输入端口9090就可以看到对应的页面数据了。
最后:完善一下,毕竟修改后都是需要重新启动node服务,这样会毕竟麻烦。为了完美,我们再安装一个插件实现热加载npm install -g express nodemon
记得再次重新执行的时候,把node修改位nodemon即可。

如果遇到跨域访问不到的问题,就使用proxy做代理转发即可。
在package.json 里面的配置的最下面添加这行代码

"proxy":"http://localhost:9090"

其实后面的就是你的服务器路径。
这里写图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js可以用于搭建前后端分离的应用。前后端分离是一种架构模式,前端负责展示视图,后端负责提供数据,两者通过接口进行交互。 在使用Node.js搭建前后端分离应用时,可以采用以下步骤: 1. 确定前端和后端的职责:前端负责页面展示和用户交互,后端负责数据处理和业务逻辑。前端和后端的职责划分清楚可以提高开发效率和代码的可维护性。 2. 设计接口:前后端之间需要约定数据交互的接口,包括请求的URL、请求方法、请求参数和响应数据格式等。可以使用RESTful API设计原则进行接口设计。 3. 实现前端页面:使用前端框架(如React、Vue等)进行页面开发,根据接口文档调用后端接口获取数据并展示在页面上。 4. 实现后端接口:使用Node.js的框架(如Express、Koa等)搭建后端服务器,根据接口文档编写接口的处理逻辑,包括数据的查询、修改、删除等操作。 5. 进行接口联调:前端在开发过程中可以使用Mock数据或者本地的JSON文件进行开发和调试,后端可以使用Postman等工具测试接口的正确性。在接口联调阶段,前后端进行接口的对接和测试。 6. 部署应用:前端和后端分别打包部署,前端将打包后的静态文件部署到Web服务器上,后端将后台代码部署到应用服务器上。 总结:使用Node.js可以搭建前后端分离的应用,通过约定接口进行数据交互,前端负责页面展示,后端负责数据处理和业务逻辑。在实际开发中,需要明确前后端的职责,设计接口,实现前端页面和后端接口,并进行接口联调和应用部署。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值