欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-09 22:42:57
...

如何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数据

实现一个简单的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>

最后实现的效果

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

那么如果我有很多文件要加载,不单单是这个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端口
相关标签： JavaScript javascript nodejs

上一篇： 将a.txt、b.txt、c.txt中的内容合并成文档d.txt

下一篇： nodejs学习笔记01-利用数据流将A.txt内容传入B.txt

推荐阅读