模拟后台数据

最新推荐文章于 2023-06-28 23:05:09 发布

drunk喵咪

最新推荐文章于 2023-06-28 23:05:09 发布

阅读量692

点赞数

分类专栏： Vue 文章标签：模拟后台数据

本文链接：https://blog.csdn.net/jdrunk/article/details/103198490

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

JSON文件
mock.json文件模拟后台数据：

[
   {
        "time":"2019年01月09日 (星期三) 选题",
        "url":"./images/timeImage.png",
        "xuanti":[{                
            "gname":"集团总编办公室每日报题组新", 
            "new":[{ "gtitle":"加速中试基地建设 促进科技成果转化",
                "gsign":["端","网","报","视","广播","微博","微信","其他"]
                },{
                    "gtitle":"加速中试基地建设 促进科技成果转化",
                    "gsign":["端","网","报","视","广播","微博","微信","其他"]
                }]                                                 
        },{                       
            "gname":"全媒体编辑中心数据分析室报题组",                
        "new":[{ "gtitle":"加速中试基地建设 促进科技成果转化",
                "gsign":["端","网","报","视","广播","微博","微信","其他"]
                },{
                    "gtitle":"加速中试基地建设 促进科技成果转化",
                    "gsign":["端","网","报","视","广播","微博","微信","其他"]
                }]                             
        },{                
            "gname":"全媒体政治新闻部报题组",                
            "new":[{ "gtitle":"加速中试基地建设 促进科技成果转化",
                "gsign":["端","网","报","视","广播","微博","微信","其他"]
                }]                            
        }]
    },{
    "details":{               
        "xiangqingTitle":"加速中饰基地建设 促进科技成果转化",
        "url":"./images/middleImage.gif",      
        "fagao":"发稿安排：",
        "client":"客户端：",
        "website":"网站端：",
        "paper":"报纸端：",
        "video":"视频端：",
        "value1":"文字、图片",
        "value2":"视频" ,
        "baodao":"12月5日，浙江省公布2018年11月高考英语科目加权赋分情况的调查结果，决定取消这次考试的加权赋分，并恢复原始得分。调查组认为，浙江省教育厅在高考英语科目加权赋分过12月5日，浙江省公布2018年11月高考英语科目加权赋分情况的调查结果，决定取消这次考试的加权赋分，并恢复原始得分。调查组认为，浙江省教育厅在高考英语科目加权赋分过12月5日，浙江省公布2018年11月高考英语科目加权赋分情况的调查结果，决定取消这次考试的加权赋分，并恢复原始得分。调查组认为，浙江省教育厅在高考英语。"
        }
    },{
        "message":{
            "baotizu":"报题组：",
            "baoti":"全媒体政治新闻部每日报题组",
            "zhixingren":"执行人：",
            "zhixing":"和双零 卢双零",
            "title":"标题：",
            "titles":"浙江新闻客户端昨日重点稿件数据报告..."
        } 
    },{
        "zhuizong":{
            "title":"加速中试基地建设 促进科技成果转化 >",
            "zhuanxie":"撰写中",
            "shenpi":"共享前审批",
            "gongxiang":"已共享",
            "quyong":"已取用",
            "yifa":"已发",
            "value1":"黄真真正在撰写稿件",
            "value2":["微信","微信","微信","端","端","端","其他"],
            "value3":["微信","微信","微信","端"]
        }
    } 
]

用get方法请求mock.json中的数据
JavaScript：

data() {
        return {
            data:{
                xuanti:[],
                new:[],
                details:{},
                message:{},
                zhuizong:{}
            }
        }
    },
    mounted() {
        console.log(this.data.details)
        this.getDate();
    },
    methods: {
        getDate() {
            this.get('./mock.json', '')
            .then(response=>{
                this.data=response.data;   //箭头函数，this指向其上下文，this.data为get请求到的数据
                console.log(this.data)                
            })               
        },
    }

HTML：

<div class="time" v-text="data.time"></div>   可以用v-text,也可以用双大括号,实现的功能相同
//<div class='time'>{{data.time}}</div>

获取JSON文件中的数据

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>模拟数据</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
     .content{
         width: 400px;
         height: 600px;
         margin:auto;
         border:1px solid #333;
     }
  </style>
</head>
<body>
  <div id="example" class="content">

  </div>
  <script>
    // window.onload = function(){
        // axios({method:'get',url:'./customer.json'}).then(res=> {
        //   if(res.success){
            
        //   }
        // }).catch(e => {console.log(e)})
        function dataJson(data) {
            console.log(data.data);
        }
    // }
  </script>
  <script type="text/javascript" src="./customer.json?cb=dataJson"></script>
</body>
</html>

json

dataJson({
    "status": "success",
    "data": [{
            "date": "2015-01-04",
            "nlp": 8,
            "blockchain": 2
        },
        {
            "date": "2015-01-11",
            "nlp": 8,
            "blockchain": 2
        },
        {
            "date": "2015-01-18",
            "nlp": 8,
            "blockchain": 3
        }
    ]
})

drunk喵咪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模拟后台数据

JSON文件.json文件模拟后台数据[ { "time":"2019年01月09日 (星期三) 选题", "url":"./images/timeImage.png", "xuanti":[{ "gname":"集团总编办公室每日报题组新", "new":[...
复制链接

扫一扫