三维交互可视化平台（智慧海上牧场平台）学习开发之Flask+Vue+Mysql（二）

前言

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

flask、Vue部署

这篇博文部署的非常详细，很适合小白查阅部署
先讲讲构造：
在这里插入图片描述

名字	作用
index.html	vue应用的起点，id="app"连接生成的html和css构建UI界面
main.js	app接入点，和根组件一起加载并初始化Vue，导入样式
App.vue	根组件，所有组件都会在这里开始渲染，布设样式等
asset	存储图像和字体等静态资源
components	存储UI组件
router	定义URL地址映射到组件
ping.vue(组件)	由template和script组成
index.js(router下)	导入组件，更新路由，将url的path映射到compont

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

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

请求映射：这里涉及到两个请求映射
一个是后端，也就是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,
		    },
		  ],

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

在运行flask和vue后，测试localhost:8080

这是端口8080提供的，即前端提供的，但使用的json数据却是5000端口提供的。
添加数据：一种在服务端添加，另一种在客户端添加。
先说说在服务端添加，在加载了bootstrapvue后，在flask的映射中添加POST请求方法，如图

测试添加数据后8080页面，如果你打开5000/books也能看到json格式的新添加数据。

再来实现客户端添加，注意原文没有把书名和作者写出来,这个地方要注意
<td>{ { book.title }}</td> <td>{ { book.author }}</td>
然后即可实现添加书目
组件连接：alert组件跟着books组件，先在book.vue的script标签引入，再在template中写alert标签，即算引入成功，做添加，更新，删除操作时会有提示book added/updated/deleted!

我在测试的时候一般打开8080和5000，客户端可服务端都查看一下，数据内容是否符合，是否操作执行成功。

数据库部署

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

先创建数据库

这里注意两个点：第一id直接设定自增即可；第二read作为保留字不能作为字段名使用，在这里我们使用反引号才可以创建read。
```
create table books(
		id int auto_increment primary key,
		title VARCHAR(12),
		author VARCHAR(12),
		`read` BOOLEAN
		);
```

修改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部署实现数据的增删改查已经结束，下一章开始正式做项目。

三维交互可视化平台（智慧海上牧场平台）学习开发之Flask+Vue+Mysql（二）

前言

flask、Vue部署

数据库部署

结语

猜你喜欢