基于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_