使用Flask和Vue.js开发一个单页面应用程序（二）

TalkPython

发布于 2019-05-24 16:53:06

8870

发布于 2019-05-24 16:53:06

文章被收录于专栏：TalkPython

点击蓝字关注△ 回复“1024”领取福利大礼包

书接上回，继续开整。上一次，已经把前后端的基础环境，都已经搭建好了。现在加一些自己的功能进行。试试效果。

在前端项目（client/src/components）下，添加一个新的组件Ping.vue:

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello!',
    };
  },
};
</script>

在router.js文件中，更新Ping组件的映射和访问路由：

import Vue from 'vue';
import Router from 'vue-router';
import Ping from './components/Ping.vue';

Vue.use(Router);

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

最后，重写client/src/App.vue文件，具体内容如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

现在运行服务，在浏览器访问，你应该可以看到页面上显示Hello。

要前后端服务连接起来，需要发送ajax请求，在vue中，我们使用axios库，完成这个任务。

现在我们来安装axios库：

$ npm install axios --save

安装成功后，更新Ping.vue组件的JavaScript脚本，像下面这样：

<script>
import axios from 'axios';

export default {
  name: 'Ping',
  data() {
    return {
      msg: '',
    };
  },
  methods: {
    getMessage() {
      const path = 'http://localhost:5000/ping';
      axios.get(path)
        .then((res) => {
          this.msg = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
  created() {
    this.getMessage();
  },
};
</script>

在一个新的终端窗口中启动Flask应用程序。在浏览器访问前端服务，你应该看到页面显示pong!。

接下来，我们将Bootstrap(一个流行的CSS框架)添加到应用程序中，这样我们就可以快速添加一些样式。

$ npm install bootstrap@4.1.1 --save

安装完成后，导入Bootstrap的样式到client/src/main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

更新client/src/App.vue的样式：

<style>
#app {
  margin-top: 60px
}
</style>

在Ping.vue组件上，添加一个按钮：

<template>
  <div class="container">
    <button type="button" class="btn btn-primary">{{ msg }}</button>
  </div>
</template>

运行服务：

$ npm run serve

你将看到下面这个页面：

接下来，在添加一个新的组件Books，新组件的名字叫Books.vue。

<template>
  <div class="container">
    <p>books</p>
  </div>
</template>

更新访问路由（router.js):

import Vue from 'vue';
import Router from 'vue-router';
import Ping from './components/Ping.vue';
import Books from './components/Books.vue'

Vue.use(Router);

export default new Router({
  routes: [
       {
      path: '/',
      name: 'Books',
      component: Books
    },
    {
      path: '/ping',
      name: 'Ping',
      component: Ping,
    },
  ],
  mode: 'history'
});

最后，让我们向Books.vue组件添加一个快速的添加书籍按钮和书籍列表功能:

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-10">
        <h1>Books</h1>
        <hr><br><br>
        <button type="button" class="btn btn-success btn-sm">Add Book</button>
        <br><br>
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">Title</th>
              <th scope="col">Author</th>
              <th scope="col">Read?</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>foo</td>
              <td>bar</td>
              <td>foobar</td>
              <td>
                <button type="button" class="btn btn-warning btn-sm">Update</button>
                <button type="button" class="btn btn-danger btn-sm">Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

现在运行服务，你应该看到：