前言

三维交互可视化平台（智慧海上牧场平台）学习开发之Vue（一）
因为已经学习过flask，现在学如何融合flask+vue部署一个web网站。

flask、Vue部署

这篇博文部署的非常详细，很适合小白查阅 部署
先讲讲构造：

本人用的pycharm编译器，按照以上文章部署完毕后总结几个小点：

1. 跨域请求：需要导入Flask-CORS，一般flask运行的端口号为5000，而vue运行的端口号为8080，通过CORS可以为我们提供跨域资源共享。

2. 请求映射：这里涉及到两个请求映射
   一个是后端，也就是flask提供的，app.py文件中,通过url绑定函数进行数据交互

   @app.route('/books', methods=['GET'])
   def all_books():
     return jsonify({
         'status': 'success',
         'books': BOOKS
     })
   

   另一个是前端，vue提供的，在src/router/index.js中，导入组件后，加入路由

   routes: [
   		    {
   		      path: '/',
   		      name: 'Books',
   		      component: Books,
   		    },
   		  ],
   

3. 错误信息：可能在run dev的时候会出现缩进的错误，按照这篇修改设置解决问题。

   在运行flask和vue后，测试localhost:8080
   
   这是端口8080提供的，即前端提供的，但使用的json数据却是5000端口提供的。

4. 添加数据：一种在服务端添加，另一种在客户端添加。
   先说说在服务端添加，在加载了bootstrapvue后，在flask的映射中添加POST请求方法，如图
   
   测试添加数据后8080页面，如果你打开5000/books也能看到json格式的新添加数据。
   
   再来实现客户端添加，注意原文没有把书名和作者写出来,这个地方要注意
   <td>{{ book.title }}</td> <td>{{ book.author }}</td>
   然后即可实现添加书目

5. 组件连接：alert组件跟着books组件，先在book.vue的script标签引入，再在template中写alert标签，即算引入成功，做添加，更新，删除操作时会有提示book added/updated/deleted!
   
   
   我在测试的时候一般打开8080和5000，客户端可服务端都查看一下，数据内容是否符合，是否操作执行成功。
   

数据库部署

在研究完以上博文后，现在开始想办法把数据库引进来，实现增删改查。

1. 先创建数据库

   这里注意两个点：第一id直接设定自增即可；第二read作为保留字不能作为字段名使用，在这里我们使用反引号才可以创建read。

   create table books(
   		id int auto_increment primary key,
   		title VARCHAR(12),
   		author VARCHAR(12),
   		`read` BOOLEAN
   		);
   

2. 修改app.py

   话不多说，直接上代码：

   from flask import Flask, jsonify, request
   
   from flask_cors import CORS
   import pymysql
   
   #
   app = Flask(__name__)
   #
   app.config.from_object(__name__)
   # # 只有添加Flask-CORS才可以进行跨域请求，跨域资源共享
   CORS(app)
   
   
   def get_db():
       db = pymysql.connect(host='localhost', user='root', passwd='root', db='db_sea', port=3306, charset='utf8')
       return db
   
   
   # 增添操作
   # execute可执行数据库查询select和命令insert，delete，update三种命令(这三种命令需要commit()或rollback())
   
   def db_add(title, author, read):
       db = get_db()
       cur = db.cursor()
       sql = f"insert into books(title,author,`read`)values ('{title}','{author}',{read})"
       print(sql)
       cur.execute(sql)
       db.commit()
       cur.close()
       db.close()
   
   
   # 删除操作
   
   def db_delete(book_id):
       db = get_db()
       cur = db.cursor()
       sql = f"DELETE FROM books WHERE id={book_id}"
       # print(sql)
       cur.execute(sql)
       db.commit()
       cur.close()
       db.close()
   
   
   # 更新操作
   def db_update(book_id, title, author, read):
       db = get_db()
       cur = db.cursor()
       sql = f"UPDATE books SET title='{title}', author='{author}', `read`={read} where id={book_id}"
       print(sql)
       cur.execute(sql)
       db.commit()
       cur.close()
       db.close()
   
   
   def db_query():
       db = get_db()
       cur = db.cursor()
       sql = "select * from books"
       cur.execute(sql)
       books_info = cur.fetchall()
       print(u'查询到的数据', books_info)
       cur.close()
       db.close()
       book_list = []
       for row in books_info:
           dic = {'id': row[0], 'title': row[1], 'author': row[2]}
           if row[3] == 1:
               dic['read'] = True
           else:
               dic['read'] = False
           book_list.append(dic)
       return book_list  # [{'id': 1, 'title': '1', 'author': '1', 'read': True}]
   
   
   # 增加书目
   @app.route('/books', methods=['GET', 'POST'])
   def all_books():
       response_object = {'status': 'success'}
       BOOKS = db_query()
       if request.method == 'POST':
           post_data = request.get_json()
           db_add(post_data.get('title'), post_data.get('author'), post_data.get('read'))
           response_object['message'] = 'Book added!'
       else:
           response_object['books'] = BOOKS
       return jsonify(response_object)
   
   
   # 更新和删除书目
   @app.route('/books/<book_id>', methods=['PUT', 'DELETE'])
   def single_book(book_id):
       response_object = {'status': 'success'}
       if request.method == 'PUT':
           post_data = request.get_json()
           db_update(book_id, post_data.get('title'), post_data.get('author'), post_data.get('read'))
           response_object['message'] = 'Book updated!'
       if request.method == 'DELETE':
       	# 客户端删除书目
           remove_book(book_id)
           # 服务端删除书目
           db_delete(book_id)
           response_object['message'] = 'Book removed!'
       return jsonify(response_object)
   
   
   def remove_book(book_id):
       BOOKS = db_query()
       for book in BOOKS:
           if book['id'] == book_id:
               BOOKS.remove(book)
               return True
       return False
   
   
   if __name__ == '__main__':
       # print(BOOKS)
       app.run()
   

   至此实现了数据库的增删改查，客户端与服务端端同步。
   

结语

一个简单的flask+vue部署实现数据的增删改查已经结束，下一章开始正式做项目。