配置vuejs加载模拟数据

Posted 2020-10-12 似

【个人笔记，非技术博客】

1.使用前确保安装axios插件，vuejs官方推荐，当然使用其他插件也可以

2、配置dev-server.js

var router = express.Router();
var bookData =  require(\'./../mock/book.json\');//加载json数据
router.get("/book",function (req,res,next) {
  res.json(bookData);
});
app.use(router);

　　

3、导入axios

4、访问数据

import NavHeader from "./../components/header/header.vue"
  import NavFooter from "./../components/footer/footer.vue"
  import NavBread from  "./../components/navBread/navBread.vue"
  import axios from \'axios\'
  export default{
      data(){
         return {
             bookList:[]
         }
      },
    components:{
        NavHeader,
        NavFooter,
        NavBread
    },
    mounted:function () {
      this.getGoodsList();
    },
    methods:{
          getGoodsList(){
              axios.get("/book").then((result)=>{
                  var res = result.data;
                  this.bookList = res.result;
              })
          }
    }
  }

5、使用数据

<div>
      <ul>
        <li v-for="(item,index) in bookList">
          <img v-bind:src="\'/static/images/\'+item.bookImg"/>
          <div>{{item.bookName}}</div>
          <div>{{item.bookAuthor}}</div>
        </li>
      </ul>
    </div>