在前端开发中,如何mock数据

最新推荐文章于 2024-09-18 18:57:22 发布

龟霸也是高达

最新推荐文章于 2024-09-18 18:57:22 发布

阅读量553

点赞数

分类专栏： JavaScript 文章标签： javascript nodejs

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/108487175

版权

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

如何mock数据

在前端开发中,前端和后端是同时进行的,因此不可能等后端开发完成后再拿他的api进行工作.
所以在日常开发中,要学会自己mock数据就很重要

mock的方法

自己使用node.js做个服务器
node.js是个后端语言,但是他使用js写的
用mock.js平台
比如淘宝 rap平台

简单的使用node.js写一个接口

const http  = require('http') //把http变成对象

const url = require('url') //把url变成对象

const server = http.createServer((req,res)=> {

let urlObj = url.parse(req.url)

  console.log(url.parse(req.url))//看看url对象里是什么
  
})

server.listen(8888)

console.log('open http://localhost:8888')

这个时候,浏览器输入http://localhost:8888,就会向服务器发送请求
注意,http://localhost:8888/1.html中的’1.html’就是url.parse(res.url)的pathname
url.parse()可以将一个完整的URL地址以JSON对象返回，里面都是get请求方式的相关信息

实现一个简单的mock数据server

以下是代码

具体实现的思路是这样的

第一步,让浏览器打开http://localhost:8888,服务器响应,服务器向浏览器发送index.html
第二步,浏览器加载index.html,html中写了ajax,发送ajax请求http://localhost:8888/getWeather到服务器
第三步,收到浏览器发送的ajax请求带上的’/getWeather’接口,于是向浏览器返回JSON的字符串
第四部,浏览器收到服务器返回的JSON字符串传,将其转换成对象,添加到span标签中

node.js部分

const http  = require('http') //把http变成对象

const fs = require('fs') //引入fs模块

const url = require('url') //把url变成对象

const server = http.createServer((req,res)=> {

let urlObj = url.parse(req.url)

  console.log(urlObj)//看看url对象里是什么
  //第三步,收到浏览器发送的ajax请求带上的'/getWeather'接口,于是向浏览器返回JSON的字符串
  if(urlObj.pathname === '/getWeather'){
    res.end(JSON.stringify({data:'晴'}))
  }else{
    //第一步,让浏览器打开http://localhost:8888,服务器响应,服务器向浏览器发送index.html
    res.end(fs.readFileSync(__dirname + '/index.html'))
  }
})

server.listen(8888)

console.log('open http://localhost:8888')

html和js部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>天气:<span></span></p>
</body>
<script>//第二步,浏览器加载,发送ajax请求给服务器,
  let xhr = new XMLHttpRequest()
  xhr.open('GET','http://localhost:8888/getWeather',true)
  xhr.onload = function(){
    document.querySelector('span').innerText = JSON.parse(xhr.responseText).data
  }//第四部,浏览器收到服务器返回的JSON字符串传,将其转换成对象,添加到span标签中
  xhr.send()
</script> 
</html>

最后实现的效果

在这里插入图片描述

那么如果我有很多文件要加载,不单单是这个index.html呢?

像上面那样一个一个写太麻烦了.最终可以像下面这样做

const http  = require('http') //把http变成对象

const fs = require('fs') //引入fs模块,主要用来加载文件的

const url = require('url') //把url变成对象

const server = http.createServer((req,res)=> {
  let pathObj=url.parse(req.url,true)
  //使用switch,在不同场景下使用不同的代码块,default为不存在case情况时执行
  switch(pathObj.pathname){
    case'/getWeather'://如果get请求发送在url后面带上?city=beijing
    if(pathObj.query.city === 'beijing'){
      res.end(JSON.stringify({city:'beijing',weather:'sunny'}))
    }else{//如果get请求发送在url后面带上?city=其他城市
      res.end(JSON.stringify({city:pathObj.query.city,weather:'unknown'}))
    }
    default:
      try{//如果是默认网址展示首页,如果其他pathname就读取其他pathname的文件地址.
        let pathname = pathObj.pathname === '/' ? '/index.html' : pathObj.pathname
        res.end(fs.readFileSync(__dirname+pathname))
      }catch(e){
        res.writeHead(404,'NotFound')
        res.end('<h1>404NotFound~</h1>')}
  }
})
server.listen(8080)//监听8080端口