vue模拟后台数据

古城微笑少年丶 2021-10-01 01:20 338阅读 0赞

在mock文件夹创建json数据，模拟后台数据发送  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70]

在webpack.dev.conf.js文件中配置，加载friend.json数据  
`const friendData = require('./../mock/friend.json')`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 1]  
在devServer,在里面加上before（）方法

before(app){
       app.get('/friend',function(req,res,next){
         res.json(friendData);
       })
       }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 2][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 3]  
数据请求成功：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70]: /images/20210724/3d305aa7ab534007a7c3500169cf9cea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 1]: /images/20210724/21d6fb188f214ecca9875a4fee9b5c19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 2]: /images/20210724/ff0d118c9fb34424be58588c9d77d0b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 3]: /images/20210724/d2ddba5344b14a959d3260c1663d80a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70 4]: /images/20210724/85ef87bab34948bb964783ca39a8fa16.png