浏览器javascript书签小应用

待业，在家无聊，想着昨天的js书签应用其实挺适合公司内部使用的，所以自己想了一个需求

业务员小王每天要出一份销售的报表，有柱状图啥的那种，他想让技术部小张帮他弄一个自动生成报表的程序，但是公司的业务系统是别家公司做的，数据也托管在那边，小张无法直接从数据库拿数据，于是他用迂回的方式，爬虫，为了方便小王使用，小张决定用js书签形式

以下是程序demo

app

|----templates

|----index.html(生成报表页面)

|----test.js(js爬虫)

|----test.py(flask程序)

先制作一个js书签，制作过程请看我上一篇博客http://blog.csdn.net/u013055678/article/details/79401139

代码如下：

javascript:void((function(){//创建一个元素var e=document.createElement('script');var ex=document.createElement('script');//给元素添加属性e.setAttribute('src','http://127.0.0.1:5000');ex.setAttribute('src','http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js');//将元素添加到页面document.body.appendChild(e);document.body.appendChild(ex);
})())

javascript:void((function(){var e=document.createElement('script');var ex=document.createElement('script');e.setAttribute('src','http://127.0.0.1:5000');ex.setAttribute('src','http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js');document.body.appendChild(e);document.body.appendChild(ex);})())

需要删掉注释，所以我贴了格式化的和一整行的两段代码

test.js代码：

(function(){//  测试用alert("js书签有效");//需要发送的数据var jsondata = {}var xx = []
//    var yy = []var sulex = document.getElementsByClassName("hotArticle-list sort-list ClassSort-list");var ex = sulex[0].getElementsByClassName("odd-overhidden floatL");for (var i = 0; i < ex.length; i++) {xx.push({"name":ex[i].innerText,"num":sulex[0].getElementsByClassName("read list-left floatR")[i].innerText.replace("篇","")})}//    var dulex = document.getElementsByClassName("hotArticle-list timeSort-list");
//    var eex = dulex[0].getElementsByClassName("odd-overhidden floatL");
//    for (var i = 0; i < eex.length; i++) {alert(eex[i].innerText);alert(dulex[0].getElementsByClassName("read list-left floatR")[i].innerText);
//          yy.push({"name":eex[i].innerText,"num":dulex[0].getElementsByClassName("read list-left floatR")[i].innerText.replace("篇","")})
//    }jsondata["xx"]=xx;
//    jsondata["yy"]=yy;console.log(JSON.stringify(jsondata));$.ajax({url:'http://127.0.0.1:5000/postdata',type:'post', //数据发送方式dataType:'json', //接受数据格式 (这里有很多,常用的有html,xml,js,json)data:{"data":JSON.stringify(jsondata)}, //要传递的数据error: function(){ //失败alert('发送失败');},success: function(msg){ //成功if(msg){window.open(msg["url"]);}}});
})();

test.py代码：

# -*-coding:utf-8 -*-
__author__ = "ZJL"from flask import Flask
from flask import request
from flask import Response
from flask import render_template
from queue import Queue
import jsonapp = Flask(__name__)
#队列
q = Queue()#跨域
def Response_headers(content):resp = Response(content)resp.headers['Access-Control-Allow-Origin'] = '*'return resp# js代码
@app.route("/")
def index():of = open("test.js","r")jsd = of.read()return jsd# js爬取的数据发送过来
@app.route("/postdata",methods=['POST'])
def postdata():datax = request.form.to_dict()#这里可以加一个处理的主函数，处理完成后把数据放进队列q.put(datax["data"])data_url = {"url":"http://127.0.0.1:5000/xxx"}return Response_headers(json.dumps(data_url))#展示页面
@app.route('/xxx')
def xxx ():return render_template("index.html")#展示页面数据
@app.route('/echarts')
def echarts():while not q.empty():# 队列中取出数据x = q.get()# print("xxxxxx",x)resp = Response_headers(x)return respif __name__ == "__main__":app.run(debug=True)

templates/index.html 代码：

<html><head><!-- 引入 echarts.js --><script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.js"></script><!-- 引入jquery.js --><script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 900px;height:500px;"></div></body><script type="text/javascript">var a = echarts;var myChart = a.init(document.getElementById('main'));// 显示标题，图例和空的坐标轴myChart.setOption({title: {text: '数据图'},tooltip : {trigger: 'axis'},legend: {data:['今日数据']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar']},// restore : {show: true},// saveAsImage : {show: true}}},calculable : true,xAxis : [{type : 'category',boundaryGap : false,data : []}],yAxis : [{type : 'value',axisLabel : {formatter: '{value}'}}],series : [{name:'最多数量',type:'line',data:[],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},]});myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画var names=[];    //名称数组（实际用来盛放X轴坐标值）var nums=[];    //数量数组（实际用来盛放Y坐标值）$.ajax({type : "get",
//       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "http://127.0.0.1:5000/echarts",    //请求发送到Servlet处
//       data : {},dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {console.log(result["xx"]);// alert(result["xx"]);for(var i=0;i<result["xx"].length;i++){// alert(result["xx"][i]["name"]);names.push(result["xx"][i]["name"]);    //挨个取出名称并填入类别数组}for(var i=0;i<result["xx"].length;i++){
//                      // alert(result["xx"][i]["num"]);nums.push(result["xx"][i]["num"]);    //挨个取出数量并填入销量数组}myChart.hideLoading();    //隐藏加载动画myChart.setOption({        //加载数据图表xAxis: {data: names},series: [{// 根据名字对应到相应的系列name: '数量',data: nums}]});}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}})</script>
</html>

效果：

现在小王只需浏览器访问到数据页面，点击js书签，就会直接跳转到报表页面，然后只需用浏览器自带的打印功能打印出来，或者保存为pdf，就可以了，鼓掌......

如果没有跳转页面请看浏览器地址栏右边是不是拦截了弹窗

流程：

先从浏览器抓取数据，通过ajax发送给后台服务，后台接收以后处理(可以做很多处理，不光只是展示数据，还有很多统计，销量预测，销售建议等等)，然后将数据发给html页面，用ECharts展示(ECharts也有很多其它的图形)

浏览器javascript书签小应用相关推荐

Javascript 创建书签小工具（bilibili视频下载为例）
书签小工具(Bookmarklets)是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能.这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践 ...
收藏取消收藏html,一键解除网页限制，浏览器收藏夹书签小工具
一键解除网页限制,浏览器收藏夹书签小工具经常上网都会遇到一些网站不能复制文字.不能选择或者不能使用右键菜单,有时候非常的不方便. 比如:要用朗读女,读选中文字时,如果该网站有网页限制:不支持选中,复 ...
书签自动更新浏览器的书签_最有用的书签，可增强您的浏览体验
书签自动更新浏览器的书签 Bookmarklets are JavaScript links you can place on your browser's toolbar that add one ...
火狐浏览器改变书签栏位置_通过书签改善生活
火狐浏览器改变书签栏位置书签是向Web浏览器添加功能的一种简单方法,对于作为Web开发人员的工作流可能是有用的添加. 在本文中,我将指出一些有用的书签,提供有关构建自己的书签的技巧,并演示一些利用这 ...
浏览器 JavaScript HTTP 库的大比拼：SugerAgent VS Axios
浏览器 JavaScript HTTP 库的大比拼:SugerAgent VS Axios Ajax 请求在现代网站中大量使用.除了使用执行Ajax请求的内置方法(XMLHttpRequest)外,许 ...
纯JavaScript入门级小游戏：兔子抢金币（附演示地址+源码）
Hello,大家好,我是兔哥,我又来分享好玩的入门级项目啦. 今天给大家带来的是一个纯JavaScript入门级小游戏:兔子抢金币,规则非常简单,控制屏幕上的兔子去接天上掉下来的金币,接满20个就可以 ...
书签自动更新浏览器的书签_针对您的浏览器的英语翻译书签
书签自动更新浏览器的书签 Are you wanting a translation bookmarklet that just focuses on translating websites in ...
JavaScript经典小游戏
最近看了几本JavaScript的本,主要想学习下JavaScript面向对象的编码方式,想从游戏入手,特收集了一些JavaScript经典小游戏(下载地址:http://download.csdn. ...
10个JavaScript开发小技巧
"梦想天空"(网名)曾发表一篇博文,为我们介绍了10个JavaScript开发小技巧,现转载于此,供大家学习: 尽管我使用Javascript来做开发有很多年了,但它常有一些让我很 ...

浏览器javascript书签小应用

浏览器javascript书签小应用相关推荐

最新文章

热门文章