心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

基于 Express 写接口

发布时间：2022-07-03 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了基于 Express 写接口，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.创建基本的服务器

创建一个index.js文件

const exPress=require('exPRess')
const app=express()

app.listen(3000,()=>{
console.LOG('running......')
})

2.创建API路由模块

新建一个router.js文件

const express = require('express')
const router=express.router()
//在这里挂载路由

module.exports=router

3.在 index.js中导入router模块

const router=require('./router.js')
//把路由模块,注册到app上
app.use('./api',router)

4.编写 get 请求

const express = require('express')
const router=express.router()
//在这里挂载路由
router.get('/',(req,res)=>{
//通过req.query获取客户端通过查询字符串发送到服务器的数据
const query=req.query;
//调用res.send()方法,向客户端响应处理的结果
res.send({
status:0,
msg:'GET 请求成功',
data:query
})
})


module.exports=router

5. 编写 post 请求

注意F1a;如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))

router.post('/',(req,res)=>{
// 通过 req.body 获取请求题中包含的 url-encoded 格式的数据
const query=req.query;
//调用res.send()方法,向客户端响应处理的结果
res.send({
status:0,
msg:'POST 请求成功',
data:query
})
})

6. 创建一个index.htML文件

用来测试接口

<!DOCTYPE html>
<html lang="en">

<head>
  <;meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, inITial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>

<body>
  <button class="BTn1">get</button>
  <button class="btn2">post</button>

  <script>
    $(function () {
      $('.btn1').click(function () {
        $.ajax({
          url: 'http://127.0.0.1:3000/api/Book?name=tom&amp;age=10',
          success: function (data) {
            console.log(data)
          }
        })
      })

      $('.btn2').click(function () {
        $.ajax({
          url: 'http://127.0.0.1:3000/api/book',
          method: 'post',
          data: {
            name: '雪中悍刀行',
            author: '烽火戏诸侯'
          },
          success: function (data) {
            console.log(data)
          }
        })
      })
    })
  </script>
</body>

</html>

我们在浏览器中打开或看到报错:

基于 Express 写接口

这是接口的跨域问题

  1. 到目前为止，我们编写的 GET 和 POST 接口，存在一个很严重的问题：不支持跨域请求

  2. 解决接口跨域问题的方案主要有两种

  • CORS (主流的解决方案，推荐使用)
  • JSONP (有缺陷的解决方案：只支持 GET 请求)

7. 使用 cors 中间件解决跨域问题

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题

使用步骤:

安装中间件： npm install cors

导入中间件： const cors = require('cors')

配置中间件： 在路由之前调用app.use(cors())

// 导入中间件
const cors = require('cors')
// 配置中间件
app.use(cors())

配置 cors 插件后:

基于 Express 写接口

 

脚本宝典总结

以上是脚本宝典为你收集整理的基于 Express 写接口全部内容，希望文章能够帮你解决基于 Express 写接口所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javajavascriptlistphppython安装安装程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程