点击蓝字关注△ 回复“1024”领取福利大礼包
书接上回，继续开整。上一次，已经把前后端的基础环境，都已经搭建好了。现在加一些自己的功能进行。试试效果。
在前端项目（client/src/components）下，添加一个新的组件Ping.vue:
代码语言：javascript复制<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'Ping',
data() {
return {
msg: 'Hello!',
};
},
};
</script>在router.js文件中，更新Ping组件的映射和访问路由：
代码语言：javascript复制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文件，具体内容如下：
代码语言：javascript复制<template>
<div id="app">
<router-view/>
</div>
</template>现在运行服务，在浏览器访问，你应该可以看到页面上显示Hello。
要前后端服务连接起来，需要发送ajax请求，在vue中，我们使用axios库，完成这个任务。
现在我们来安装axios库：
代码语言：javascript复制$ npm install axios --save安装成功后，更新Ping.vue组件的JavaScript脚本，像下面这样：
代码语言：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框架)添加到应用程序中，这样我们就可以快速添加一些样式。
代码语言：javascript复制$ npm install bootstrap@4.1.1 --save安装完成后，导入Bootstrap的样式到client/src/main.js:
代码语言：javascript复制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的样式：
代码语言：javascript复制<style>
#app {
margin-top: 60px
}
</style>在Ping.vue组件上，添加一个按钮：
代码语言：javascript复制<template>
<div class="container">
<button type="button" class="btn btn-primary">{{ msg }}</button>
</div>
</template>运行服务：
代码语言：javascript复制$ npm run serve你将看到下面这个页面：
接下来，在添加一个新的组件Books，新组件的名字叫Books.vue。
代码语言：javascript复制<template>
<div class="container">
<p>books</p>
</div>
</template>更新访问路由（router.js):
代码语言：javascript复制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组件添加一个快速的添加书籍按钮和书籍列表功能:
代码语言：javascript复制<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应用程序的具体功能。
如果觉得内容还不错，分享给更多朋友，一起提升编程技能。
