基于VUE的水果清单

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

import io
from urllib.parse import quoteimport flask
import openpyxl
import pymysql
from flask import make_response, request, redirect
from flask_cors import CORSfrom utils import get_connectionapp = 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.activesheet.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 hintif __name__ == '__main__':app.run(host='localhost', port=8000, debug=True)

a.展示效果图：

b.数据库图：

c.xlsx表格：

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

基于VUE的水果清单相关推荐

基于javaweb的水果生鲜商城系统(java+springboot+mybatis+vue+mysql)
基于javaweb的水果生鲜商城系统(java+springboot+mybatis+vue+mysql) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 开发工具后端:eclip ...
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
[译]基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
渐进式web应用是大势所趋.越来越多的大公司开始使用这些技术(比如推特:https://mobile.twitter.com/). 想象你可以在地铁中浏览一个web应用,这个应用能够向用户推送通知并且 ...
计算机毕设（附源码）JAVA-SSM基于智慧农业的水果销售系统
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
（附源码）计算机毕业设计SSM基于智慧农业的水果销售系统
(附源码)计算机毕业设计SSM基于智慧农业的水果销售系统项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe( ...
基于图像处理的水果自助售卖系统（自助水果售卖机）
目录第一章概述 1.1 发展概要 1.2 国内外研究现状 1.3 研究目的和意义 1.4 方案介绍第二章软件设计方案 2.1 整体程序框架 2.2 opencv识别水果算法 2.2.1算法整体 ...
基于 Vue 的学生社团线上管理平台开发与设计
0 引言近年来, 各高校为丰富学生的校园生活. 培养学生的个性, 社团与社团人数增加迅速, 需要处理的各类信息也层出不穷, 传统的管理方式已经不利于快捷地处理这些问题. 因此管理不便. 信息错综复杂 ...
基于JAVA智慧农业水果销售系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA智慧农业水果销售系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA智慧农业水果销售系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B/S架构 ...
基于Vue的小日历（支持按周切换）
基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template><div class="date"><!-- 年份月份 ...

基于VUE的水果清单

基于VUE的水果清单

基于VUE的水果清单相关推荐

最新文章

热门文章