专栏首页TalkPython使用Flask和Vue.js开发一个单页面应用程序(二)

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

点击蓝字关注△ 回复“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>

现在运行服务,你应该看到:

未完待续。下一次分享,如何结合Flask构建CRUD应用程序的具体功能。

如果觉得内容还不错,分享给更多朋友,一起提升编程技能。

本文分享自微信公众号 - TalkPython(TalkPython),作者:TalkPython

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用Python播放和录制声音

    Python语言已经无所不能了,今天就来分享一下,如何使用Python来录制和播放音频文件。

    TalkPython
  • 65.如何为爬虫程序增加最大爬取深度

    在实际爬取数据时,我们可能不需要对整个网站数据进行爬取。因此,如果可以增加一个功能,对目标网站的最大爬取深度,可以灵活配置,那该多好。接下来,我们就来编写一个具...

    TalkPython
  • 有用的工具

    Python标准库中有几个内置工具,可以帮助我们在编程过程中,确定变量的类型和对象的类型。

    TalkPython
  • python elasticsearch 批量写入测试

    elasticsearch 是一个高效的近实时的数据库。最近要重新进行老版本的ES 数据迁移到新版本。由于以前都是采用java来进行连接的,不过这回为了方便,找...

    sparkexpert
  • CMDB学习之六 --客户端请求测试,服

    客户端使用agent 请求测试,agent使用的POST 请求,使用requests模块

    py3study
  • 2015年腾讯研究院年会发布《腾讯“互联网+”指数》报告

    ?  “互联网+”已然成为了时下最热门的词语之一,克强总理带头,各行各业都在热议“互联网+”。我国31个省/自治区/直辖市(港澳台地区数据未统计),351个...

    腾讯研究院
  • Spring 条件注解 @Conditional

    Spring 4提供了一个更通用的基于条件的Bean的创建方式,即使用@Conditional注解。

    wuweixiang
  • 【Ubuntu快速上手】五、Ubuntu环境下Apache Server安装&配置

    ken.io
  • 用Python播放和录制声音

    Python语言已经无所不能了,今天就来分享一下,如何使用Python来录制和播放音频文件。

    TalkPython
  • 为什么你的命令行程序没有输出

    执行上述命令,你会发现你的程序没有产生任何输出,只有当logfile的内容足够多的时候才会产生输出,这是怎么回事呢?

    用户2131907

扫码关注云+社区

领取腾讯云代金券