【VUE】小白学习（2）—Flask 和 Vue.js 开发一个最简单的单页面应用

根据帖子来同时实现一个单页面应用【图文完整】

我们的目标是设计一个后端 RESTful API，由 Python 和 Flask 驱动，对应一个单一资源 — books。这个 API 应当遵守 RESTful 设计原则，使用基本的 HTTP 动词：GET、POST、PUT 和 DELETE。
我们还会使用 Vue 搭建一个前端应用来使用这个后端 API.

client :

实现什么（1，2，3，4）

用自己的语言概述就主要实现这几个部分：
（1）后台有数据，前端获取后台的书籍数据，显示到界面上。

（2）有一个(ADD)增加按钮，用户可以增加书籍信息显示在前端。提交后会有反馈给用户信息显示（Alert）显示在界面上。


（3）用户可以(Update)更新已有书籍信息，并且提交后会有反馈给用户信息显示（Alert）显示在界面上。
【把哈利波特改成已读】


（4）用户可以删除已有书籍信息，并且提交后会有反馈给用户信息.[刚刚删除了Jane Eyre这本书]

实现1：后端获取数据，书单显示在前端界面：

跟着教程做没问题，这个主要提一下两个库 :
server（用在app.py）:
Flask Cors

client:
为了更好地使客户端 Vue 应用和后端 Flask 应用连接，我们可以使用 axios 库来发送 AJAX 请求
用于组件（.vue文件）中的script部分

实现2：增加book：

这个用到了bootstrap-vue得模态框，其他都是增加一系列方法和改一下add按钮。【看教程即可】
模态框就是这个东西：

一般过程：
（1）引入Bootstraovue【main.js里】

（2）把模态框前端代码放到div内【一般放在基础得网页代码下方】

<b-modal ref="addBookModal"
             id="book-modal"
             title="Add a new book"
             hide-footer>
      <b-form @submit="onSubmit" @reset="onReset" class="w-100">
      <b-form-group id="form-title-group"
                    label="Title:"
                    label-for="form-title-input">
          <b-form-input id="form-title-input"
                        type="text"
                        v-model="addBookForm.title"
                        required
                        placeholder="Enter title">
          </b-form-input>
        </b-form-group>
        <b-form-group id="form-author-group"
                      label="Author:"
                      label-for="form-author-input">
            <b-form-input id="form-author-input"
                          type="text"
                          v-model="addBookForm.author"
                          required
                          placeholder="Enter author">
            </b-form-input>
          </b-form-group>
        <b-form-group id="form-read-group">
          <b-form-checkbox-group v-model="addBookForm.read" id="form-checks">
            <b-form-checkbox value="true">Read?</b-form-checkbox>
          </b-form-checkbox-group>
        </b-form-group>
        <b-button type="submit" variant="primary">Submit</b-button>
        <b-button type="reset" variant="danger">Reset</b-button>
      </b-form>
    </b-modal>

（3）把模态框涉及到的方法啥的写到scripts里，注意看下data有没有要加得内容。
（4）改下触发该模态框出现的按钮。一般这样👇

主要遇到了问题：按照教程弄完，bookstrap-vue也下好之后，告诉我出现了这个问题：
Vue项目启动webpack报错Module build failed: Error: No PostCSS Config found in…
解决方法：
修改build目录下：webpack.dev.conf.js

因为是报的是NO PostCSS Config 找不到的错误，那就将使用配置文件的条件改为false，即 usePostCSS: false。这样就好了。踩坑结束。

实现3：Alert组件

一个 Alert 组件，当添加一本新书后，它会显示一个信息给当前用户。我们将为此创建一个新组件，因为你以后可能会在很多组件中经常用到这个功能。
(1)添加一个新文件 Alert.vue 到 “client/src/components” 中
(2)在 Books 组件的 script 中引入它并注册这个组件(写在DATA,methods那一块)
(3)在book.vue的代码里引用alert
注：下面的message是要先在Data里初始化，再在添加书本成功的方法下实例化的哦。

实现3：更新/删除book

跟着教程就可
注意不仅仅是前端变化。server端也会有变化：
删除前：

删除后：

教程还是跟着帖子走一遍就行。
主要记录一些问题。
感觉可能稍微对前后分离有了理解不过还要继续探索才可
毕竟才仅仅一个单页的demo

-----------EchoZhang---- vue的Day1 Completed!---------------------