Bob's Blog

经过前面几篇的操作，我们已经完成了第一个api和第一个vue页面，在这篇文章里会记录第一个api和第一个页面的初步结合，作为后续的基础。

目前第一个project api可以直接访问和调用，第一个vue的默认页面也可以访问，不过两者还是分开的，现在就需要让vue这边请求project api，并把结果展现在页面上。

首先需要安装axios。axios 是一个基于Promise的HTTP 客户端，可以交换转换json数据，也可以结合async/await。

npm install --save axios
# 如果提示"python2" is not in PATH or produced an error，那么先运行一下类似这样的命令：pyenv shell 3.6.5 2.7.14

不过Vue访问Django的API会出现跨域错误，比如提示："Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/projects/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)."

此时需要安装django-cors-headers。

pip install django-cors-headers

# 在settings.py中新增
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True

然后在/frontend/src/components中新增home.vue文件，内容如下:

<template>
  <div>
    <h3>{{ msg }}</h3>
    <button type="button" @click='getProjects' :style="{ margin: '10px', padding: '5px' }">get projects</button>
    <table :style="{ border: '2px solid gray', borderRadius: '5px', padding: '10px' }" align='center'>
      <tr v-for='p in projects'>
        <td>{{ p.id }}</td>
        <td>{{ p.name }}</td>
        <td>{{ p.create_time }}</td>
        <td>{{ p.update_time }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Projects in Automation Center',
      projects: []
    }
  },

  methods: {
    getProjects() {
      axios.get('http://127.0.0.1:8000/api/projects/').then(response => {this.projects = response.data["results"], this.msg = 'get projects data from django api'});
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

接着修改/frontend/src/router中的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

此时运行npm run dev所看到的首页面就是新增的这个home.vue,

当点击按钮时就会用get方法调用projects的api，展示project信息到页面上，并修改了文本。

到这里就实现了一个很简单的vue与django交互的例子。当然代码复用还有界面美化会在后续加上。

我们发现打开的url中始终带有#，如果想去掉它，就在./frontend/src/router/index.js中加上"mode: history".

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

如果需要做类似发布的操作，那么运行npm run build会构建并产生一个dist文件夹。但里面的index.html中打开是有加载问题的，因为需要一个http server，如下:

npm install -g serve
serve -s dist/ # 默认监听5000端口，也可以改，比如serve -s dist/ -l 4555

此时打开localhost:5000或ip:5000就能看到和dev环境一样的页面和行为。

当然正式环境还是用nginx，这里可以用来预览生产环境效果。部署相关的可以参考官方：https://cli.vuejs.org/zh/guide/deployment.html