基于VUE的水果清单

基于VUE的水果清单

• 渲染页面（把动态的内容填到页面上）的方式
  后端渲染（服务器侧渲染）
• 如果服务器的并发请求量很大，服务器会不堪重负
  端代码和后端代码混在了一起，没有完全分开
• 跨域问题
  浏览器的同源策略会阻止JavaScript代码回访其他网站的数据，
  如果希望别的网站能够跨域请求到我们提供的JSON数据接口，就必须进行跨域设置。
  前端渲染（用户侧渲染）—> 前后端分离的开发
  要点：
  1. 服务器不负责渲染页面，只负责提供页面需要的数据（JSON）
  2. 浏览器通过JavaScript代码实现对页面的渲染 —> Vue
  优点：
  1. 服务器负担减小，渲染页面的操作在用户端来完成
  2. 前端和后端代码完全分离，相互不牵扯，更有利于团队开发
  缺点：
  1. 对于移动终端来说，耗电量会增加
  2. 如果用户终端性能不理想，那么用户体验可能会比较糟糕
  代码如下：

import io
from urllib.parse import quote

import flask
import openpyxl
import pymysql
from flask import make_response, request, redirect
from flask_cors import CORS

from utils import get_connection

app = flask.Flask(__name__)
CORS(app)


@app.route('/')
def show_index():
    return redirect('/static/index.html')


@app.route('/api/fruits')
def get_fruits():
    conn = get_connection()
    try:
        with conn.cursor(pymysql.cursors.DictCursor) as cursor:
            cursor.execute('select frt_id as id, frt_name as name, frt_image as image, '
                           'frt_intro as intro, frt_favs as favs from tb_fruit')
            fruits = cursor.fetchall()
        result = {'code': 10000, 'fruits': fruits}
    except pymysql.MySQLError as err:
        print(err)
        result = {'code': 10001, 'fruits': []}
    finally:
        conn.close()
    return result


@app.route('/export')
def export_excel():
    wb = openpyxl.Workbook()
    sheet = wb.active
    sheet.append(('编号', '水果名称', '水果介绍', '点赞数'))
    conn = get_connection()
    try:
        with conn.cursor() as cursor:
            cursor.execute('select frt_id, frt_name, frt_intro, frt_favs from tb_fruit')
            row_data = cursor.fetchone()
            while row_data:
                sheet.append(row_data)
                row_data = cursor.fetchone()
    except pymysql.MySQLError as err:
        print(err)
    finally:
        conn.close()
    buffer = io.BytesIO()
    wb.save(buffer)
    resp = make_response(buffer.getvalue())
    resp.headers['content-type'] = 'application/vnd.ms-excel'
    filename = quote('水果清单.xlsx')
    resp.headers['content-disposition'] = f'attachment; filename="{filename}"'
    return resp


@app.route('/api/delete')
def delete_fruit():
    fruit_id = request.args.get('id')
    conn = get_connection()
    try:
        with conn.cursor() as cursor:
            cursor.execute('delete from tb_fruit where frt_id=%s', (fruit_id, ))
        conn.commit()
        hint = {'code': 10000, 'message': '操作成功'}
    except pymysql.MySQLError as err:
        print(err)
        hint = {'code': 10001, 'message': '操作失败'}
        conn.rollback()
    finally:
        conn.close()
    return hint


@app.route('/api/like')
def like_fruit():
    fruit_id = request.args.get('id')
    conn = get_connection()
    try:
        with conn.cursor() as cursor:
            cursor.execute(
                'update tb_fruit set frt_favs=frt_favs+1 where frt_id=%s',
                (fruit_id, )
            )
        conn.commit()
        hint = {'code': 10000, 'message': '操作成功'}
    except pymysql.MySQLError as err:
        print(err)
        hint = {'code': 10001, 'message': '操作失败'}
        conn.rollback()
    finally:
        conn.close()
    return hint


if __name__ == '__main__':
    app.run(host='localhost', port=8000, debug=True)

a.展示效果图：

b.数据库图：

c.xlsx表格：

总结：
​ Vue.js动态渲染应用在信息化时代,同时给我们在生活与工作中带来了太多的追溯。