【原生node http模块写接口】前后端交互

最新推荐文章于 2024-08-08 10:15:42 发布

Justkang前端

最新推荐文章于 2024-08-08 10:15:42 发布

阅读量259

点赞数

分类专栏：前端 vue 文章标签： node.js vue.js javascript

本文链接：https://blog.csdn.net/CSDNJXZK/article/details/123658266

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

项目环境

Node.js v14.19.0.

代码部分

// 引入模块
var HTTP = require('http')

// 创建一个服务  
var server = HTTP.createServer(function(req,res){
  // 响应头解决跨域
  res.setHeader("Access-Control-Allow-Origin", "*"); 
  var navData = [
    {
      title:'首页',
      id:001
    },
    {
      title:'历史',
      id:002
    },
    {
      title:'我的',
      id:003
    }
  ]
  var data = JSON.stringify(navData)
  if(req.url == '/api/navdata') {
    // console.log(req)
    res.end(data)  
  }
  // res.end('hhh')
})

// 开启端口
server.listen(8001,function(){
  console.log('8001端口开启成功')
})

前端请求

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p v-for="item in navList">{{item.title}}</p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
 var vm= new Vue({
    el: '#app',
    data() {
      return {
        navList: [],
      }
    },
    mounted() {
      // 创建对象
      var xmlhttp = new XMLHttpRequest()
      // 将当前this赋值给that
      var that = this
      // 发送请求
      xmlhttp.open("GET","http://127.0.0.1:8001/api/navdata", true);
      xmlhttp.send();
      // 响应
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          console.log(JSON.parse(xmlhttp.responseText))
          // 此处的this是指向xml对象 所以用之前赋值过来的that
          that.navList = JSON.parse(xmlhttp.responseText)
        }
      }
    }
  })
</script>
</html>

页面渲染呈现

在这里插入图片描述

Justkang前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原生node http模块写接口】前后端交互

项目环境Node.js v14.19.0.代码部分// 引入模块var HTTP = require('http')// 创建一个服务 var server = HTTP.createServer(function(req,res){ // 响应头解决跨域 res.setHeader("Access-Control-Allow-Origin", "*"); var navData = [ { title:'首页', id:001 },
复制链接

扫一扫

专栏目录