三、Vue 的一些语法样例 (2)

我们要做前后端分离，那么通过http 请求访问后端数据是避免不了的。所以我们一起来看下。我这里也是查看资料中的例子。直接拿过来用了。
我们创建一个BlogList.vue 文件，内容如下：

<template> <div > <table> <tr v-for="blog in blogs"> <!--<td @click='show_blog(blog.id)'>{{blog.title}}</td>--> <td> <router-link :to="{name: 'Blog', query: {id: blog.id}}"> {{blog.title}} </router-link> </td> </tr> </table> </div> </template> <script> export default { data () { return { title: '博客列表页', blogs: [] } }, mounted () { this.$http.get('api/interface/blogs/all').then((response) => { console.info(response.body) this.blogs = response.body.blogs }, (response) => { console.error(response) }); }, methods:{ show_blog: function(blog_id) { this.$router.push({name: 'Blog', query: {id: blog_id}}) } } } </script> <style > td { border-bottom: 1px solid grey; } </style>

上面的代码可以看到。mounted 方法中发送http 请求。mounted 函数是初始化页面后，将数据渲染到界面上的。

mounted () { this.$http.get('api/interface/blogs/all').then((response) => { this.blogs = response.body.blogs }, (response) => { console.error(response) }); },

我们启动项目，发现报这种错误。这是因为我们项目中没有引入 vue-resource 所以我们需要在项目中引入。

我们在idea 中打开控制台（alt+F12）。

npm install vue-resource

安装好之后，我们在在main.js 中引入它

import VueResource from 'vue-resource' Vue.use(VueResource) Vue.http.options.emulateJSON = true //允许使用post 请求。

在config--index.js 中设置一下代理，模拟一下跨域请求，不然接口访问不了。

proxyTable: { '/api': { // 1. 对于所有以 "/api"　开头的url 做处理． target: 'http://siwei.me', // 3. 转发到 siwei.me 上． changeOrigin: true, pathRewrite: { '^/api': '' // 2. 把url中的　"/api" 去掉． } } },

好了，我们启动看一下，

后面是获取详情的，上面没有传递参数，获取详情需要传递参数，代码如下：

<template> <div > <div> <p> 标题： {{ blog.title }} </p> <p> 发布于： {{blog.created_at }}</p> <div> <div v-html='blog.body'></div> </div> </div> </div> </template> <script> export default { data () { return { blog: {} } }, mounted() { this.$http.get('api/interface/blogs/show?id='+this.$route.query.id).then((response) => { this.blog = response.body.result }, (response) => { console.error(response) }); } } </script> <style scoped> </style>

这是别人的接口，好像不支持post 请求。所以post 请求就先算了，并且这种算是原生的http 请求吧，我们以后使用的时候，可以使用 axios 来发送http 请求。这个我们后面再尝试。

番外

这篇就讲到这吧，都是一些例子。如果要看语法的话，还得看看官网的教程。

代码上传到github：
https://github.com/QuellanAn/zlflovemmVue

后续加油♡

欢迎大家关注个人公众号 "程序员爱酸奶"

分享各种学习资料，包含java，linux，大数据等。资料包含视频文档以及源码，同时分享本人及投递的优质技术博文。

如果大家喜欢记得关注和分享哟❤