前言

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

flask、Vue部署

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

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

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

Logo

前往低代码交流专区

更多推荐