iview+python 前后端部分功能演示

前端
后端

前端

<div class="home-page" id="first12449931"><div><i-button type="primary" @click="getList" style="">查询</i-button><i-button type="primary" @click="showselect" style="">查看全选</i-button></div><div style="margin-top:10px;"><i-table :columns="columns" :data="tablelist" @on-selection-change="itemSelect"></i-table><Page:total="total"@on-change="pageIndexChanged":page-size-opts="[10, 20, 50]":page-size.sync="searchmodel.pageSize"show-totalshow-sizer@on-page-size-change="pageSizeChanged"></Page></div><div><Uploadref="upload":action="uploadurl"name="excel-file":show-upload-list="true":on-format-error="handleFormatError":on-success="handleSuccess":on-error="handleError":format="[]"><i-button type="ghost" icon="ios-cloud-upload-outline" style="color:gray;">上传文件</i-button></Upload><i-button type="primary" @click="downloadit" style="">下载</i-button></div><div><Uploadaction="":before-upload="beforeupload"type="drag"><div style="padding: 20px 0"><Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon><p>拖拽到此或点击上传</p></div></Upload><i-button type="primary" @click="showexcel" style="">显示</i-button></div>
</div>

<script>Vue.prototype.$http = axios;Vue.use(iview);new Vue({el: '#first12449931',data() {return {deletescope: [],searchmodel: {pageIndex: 1,pageSize: 10},columns: [{type: 'selection',fixed: 'left',width: 60,align: 'center'},{title: '考生',key: 'kaosheng'},{title: '部门',key: 'bumen'},{title: '得分',key: 'defen'},{title: '结果',key: 'jieguo'},{title: '备注',key: 'beizhu'}],tablelist: [],total: 0,uploadurl: site_url + 'api/saveafile/',formItem: {file: ''}}},methods: {itemSelect(param) {this.deletescope = param},showselect() {let idlista = []this.deletescope.forEach((item, index) => {idlista.push(item.id)})alert(JSON.stringify(idlista))},getList() {this.$http(site_url + 'api/gettestlistpage/', {method: 'get',params: this.searchmodel}).then(response => {this.tablelist = response.data.datathis.total = response.data.total})},pageSizeChanged(val) {this.searchmodel.pageSize = valthis.getList()},pageIndexChanged(val) {this.searchmodel.pageIndex = valthis.getList()},handleFormatError(file) {this.$Notice.warning({title: '文件格式不正确',desc: '文件 ' + file.name + ' 格式不正确，请上传正确文件。'})},handleSuccess(res, file) {if (res.result == true) {file = []this.$Message.success("文件上传成功！")this.$refs.upload.clearFiles()}},handleError(error, file) {this.$Message.error("数据导入失败！")},downloadit() {window.location.href = site_url + 'api/downloadone/?id=2'},beforeupload(file) {let _this = this;var files = file;var fileReader = new FileReader();fileReader.onload = function (ev) {try {var data = ev.target.result,workbook = XLSX.read(data, {type: 'binary'}), // 以二进制流方式读取得到整份excel表格对象persons = []; // 存储获取到的数据} catch (e) {console.log('文件类型不正确');return;}// 表格的表格范围，可用于判断表头是否数量是否正确var fromTo = '';// 遍历每张表读取for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {fromTo = workbook.Sheets[sheet]['!ref'];persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));// break; // 如果只取第一张表，就取消注释这行}}let list = [];persons.forEach(t => {let obj = {};obj['student'] = t['考生'];obj['department'] = t['部门'];obj['score'] = t['得分'];obj['result'] = t['结果'];obj['remarks'] = t['备注'] ? t['备注'] : '';list.push(obj)});_this.formItem.file = list;};// 以二进制方式打开文件fileReader.readAsBinaryString(files);return false;},showexcel() {let aaa = JSON.stringify(this.formItem.file)alert(aaa)},close(item) {this.$Modal.confirm({title: '提示',content: '要删除所选告警吗',closable: true,onOk: () => {},onCancel: () => {}})}},mounted() {this.getList()},watch: {}})
</script>

后端

//上传下载文件
def saveafile(request):thefile = FileSave()file = request.FILES.get('excel-file')thefile.filename = file.namethefile.fileit = file.read()thefile.save()return render_json({"result": True})def downloadone(request):id = request.GET.get("id")thefile = FileSave.objects.get(id=id)res = HttpResponse(content_type='application/octet-stream')res['Content-Disposition'] = 'attachment; filename=' + thefile.filename.encode("utf-8")# res['Accept-Ranges'] = 'bytes'# res['Cache-Control'] = 'must-revalidate,post-check=0,pre-check=0'# res['Pragma'] = 'no-cache'# res['Expires'] = '0'res.write(thefile.fileit)return res//分析excel
def importuserexcel(request):testid = request.GET.get("id")file = request.FILES.get('excel-file')file_path = os.path.join('./static/', file.name)  # 先读取文件保存with open(file_path, "wb") as f:for line in file.chunks():f.write(line)work_book = xlrd.open_workbook(file_path)table = work_book.sheet_by_index(0)nrows = table.nrowsfor onerow in range(nrows):if (table.cell(onerow,0).value is not None) and (table.cell(onerow,0).value!='') and (onerow>0):newrow = Exceldata()newrow.OneTestid = testidnewrow.kaosheng = table.cell(onerow,0).valuenewrow.bumen =  table.cell(onerow,1).valuenewrow.defen = int(table.cell(onerow,2).value)newrow.jieguo = table.cell(onerow,3).valuenewrow.beizhu = table.cell(onerow, 4).valuenewrow.save()os.remove(file_path)return JsonResponse({"result": True})
//导出excel
def download_excel_renwu(request):excelid = request.GET.get('id')resultlist = Xunjiandetail.objects.filter(xunjianid=excelid).values()response = HttpResponse(content_type='application/vnd.ms-excel')response['Content-Disposition'] = 'attachment; filename=' + ''workbook = xlwt.Workbook(encoding='utf-8')  # 创建工作簿sheet = workbook.add_sheet("sheet1")  # 创建工作页font = xlwt.Font()font.bold = Truealignment = xlwt.Alignment()  # 创建居中alignment.horz = xlwt.Alignment.HORZ_CENTER  # 可取值: HORZ_GENERAL, HORZ_LEFT, HORZ_CENTER, HORZ_RIGHT, HORZ_FILLED, HORZ_JUSTIFIED, HORZ_CENTER_ACROSS_SEL, HORZ_DISTRIBUTEDalignment.vert = xlwt.Alignment.VERT_CENTER  # 可取值: VERT_TOP, VERT_CENTER, VERT_BOTTOM, VERT_JUSTIFIED, VERT_DISTRIBUTEDstyle = xlwt.XFStyle()  # 创建样式style.alignment = alignment  # 给样式添加文字居中属性style.font = fontfirst_row = [u'业务', u'区域名称', u'服务器IP', u'巡检脚本', u'阈值', u'脚本结果', u'巡检结果']count = 0for title in first_row:sheet.write(0, count, title, style)sheet.col(count).width = 256 * 20count += 1num = 1for item in resultlist:sheet.write(num, 0, item['bizname'])sheet.write(num, 1, item['time'].strftime("%Y-%m-%d %H:%M:%S"))sheet.write(num, 2, item['ip'])sheet.write(num, 3, item['script']),sheet.write(num, 4, item['theint']),sheet.write(num, 5, item['theend']),sheet.write(num, 6, item['end'])num += 1# 写出到IOoutput = BytesIO()workbook.save(output)# 重新定位到开始output.seek(0)response.write(output.getvalue())return response//分页
from django.core.paginator import Paginatordef gettestlistpage(request):page_index = int(request.GET.get("pageIndex"))page_size = int(request.GET.get("pageSize"))data_list = Exceldata.objects.filter()total = data_list.count()paginator = Paginator(data_list, page_size)result_list = paginator.page(page_index)result_list = json.loads(serializers.serialize("json", result_list))result = page_list(result_list)return render_json({"result": True, "data": result, "total": total})# 自定义sql查询语句
def sql_result(sql):cur = connection.cursor()cur.execute(sql)result = cur.fetchall()return resultdef get_obj_from_alarmsql(x):theobj = {"unit": x[0],"name": x[1],"status": x[2],"source_time": x[3],"level": x[4],"raw": x[5],"alarm_type": x[6],"assip": x[7],"assname": x[8],"id": x[9]}return theobjdef get_sql_list(request):thesql = "SELECT * FROM `home_application_alarmevent` "alarmresult = sql_result(thesql)result = list(map(get_obj_from_alarmsql, alarmresult))return JsonResponse({"result": True, "list": result})//传文件到本地保存def uploadfile(request):file = request.FILES.get('excel-file')filename =datetime.datetime.now().strftime("%Y%m%d%H%M%S")+ file.namefile_path = os.path.join('./static/', filename)with open(file_path, "wb") as f:for line in file.chunks():f.write(line)aaa = File()aaa.name = filenameaaa.save()return JsonResponse({"result": True, "data": aaa.id})

iview+python 前后端部分功能演示相关推荐

Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
python前后端交互_Django基础之简单的前后端交互
Python Python开发 Python语言 Django基础之简单的前后端交互学习Django有一段时间了,最近刚好写了一个小项目,用到了前后端交互,刚开始写前后端交互确实很让人头晕目眩呢,下 ...
python 前后端分离
1. 前后端分离 1.1 什么是前后端分离前端:即客户端,负责渲染用户显示界面[如web的js动态渲染页面,安卓,iOS,pc客户端等] 后端:即服务端,负责接收HTTP请求,处理数据 API:Ap ...
python前后端脚本之家_Django使用中间件解决前后端同源策略问题
问题描述前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,所以就做了一个简单的图书管理系统来模拟前后端分离. 但是在开发过程中遇见了同源策略的跨域问题,页面 ...
python前后端分离前端权限_Linux上搭建前后端分离项目
一.准备工作 1.准备好服务器 2.Linux上准备搭建环境需要的软件赞赞羊项目需要用到的软件: python.gunicorn.nginx.MySQL.redis 3.开发人员对代码打包前端需要 ...
Python 技术篇-PyQt5动画功能演示，组件移动、尺寸改变动画演示
我要改变listView组件的大小,在一定时间内让组件从设定的起始大小改变为设定的终止大小. QRect(x, y, a, b)前两个是位置,后两个是宽和高. # PyQt5库引入.很经典,喜欢的可以 ...
萝卜视频源码前后端带视频演示更换播放内核到3.2.6
介绍: 版本特性:更换播放内核到3.2.6,原版3.0.2 一.广告开屏广告播放页下方广告激励广告二.视频观看: 1.芒果,只要能解就能播放 2.支持B站. 只要能解就能播放 3.修复点播 4 ...
python前后端分离项目部署_nginx+uwsgi+supervisor部署django前后端分离项目
以下内容为原创,转载请注明出处! 先前一直用的apache部署django项目,查看链接地址:https://www.520pf.cn/article/22.html .这次帮同事用nginx部署服务 ...

iview+python 前后端部分功能演示

iview+python 前后端部分功能演示

前端

后端

iview+python 前后端部分功能演示相关推荐

最新文章

热门文章