nodsjs POST请求
PHP
遇到问题:
1.跨域问题
报failed to load response data:no data fond for response with give
header("Content-Type: text/html;charset=utf-8");
header('Access-Control-Allow-Origin: *');
2.遇到这种无法读取undefined的属性(读取'getAttribute') , 导致些图表不出来
echarts.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')
解决方法: 封装的JS,在页面也要转入值到JS函数里
前端
1.最大DIV加入 id="Market" v-cloak 对应el: '#Market', 才能把值写入
2.<h4>{{topCounts['order_amount_total']}}</h4>
3.循环 与IF
<div class="countItme" v-for="item in topCounts" v-if="item.count_name=='市场活跃度排行'">
<div class="countNum">{{item.count}}</div>
<div class="countText">{{item.count_name}}</div>
</div>
<script src="./js/index.js"></script>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#Screen',
data:{
topCounts:[],
StatisticsList:[],
orderList:[],
dotList:[],
user7todayList:[],
order7todaylist:[], //1、定义变量
},
created:function(){
var that = this;
that.commImg = commImg();
that.token = localStorage.getItem('caiToken');
that.id = localStorage.getItem('id');
that.ame = localStorage.getItem('name');
},
mounted:function(){
var that = this;
var postData = {"id":that.id,"token":that.token};
//轮询
lunxun = setInterval(function(){
that.getStatistics(postData);
},10000);
that.getStatistics(postData,1);
that.getStatistics_list(postData,1);
that.order_list(postData,1);
that.doc_list(postData,1);
that.user7today_list(postData,1);
that.order7today_list(postData,1); //定义函数
},
methods:{
getStatistics:function(postData,curIndex){
var that = this;
that.getData('statistics',postData,function(res){
if(res.code==0){
that.$forceUpdate()
return false;
}else{
that.topCounts = res;
}
that.$forceUpdate()//强制刷新
});
},
getStatistics_list:function(postData,curIndex){
var that = this;
that.getData('statistics_list',postData,function(res){
if(res.code==0){
that.$forceUpdate()
return false;
}else{
that.StatisticsList = res.list;
}
that.$forceUpdate()
});
},
getData:function(aggregate,postData,onSuccess){
var url1 = commUrl() + aggregate;
var params = postData;
$.post(url1,params,function(res){
if(res.code == -1){
alert(res.msg);
}else if(res.code == 1){
onSuccess(res.data);
}else{
alert(res.msg);
return false;
}
},'json')
},
order_list:function(postData,curIndex){
var that = this;
that.getData('order_list',postData,function(res){
if(res.code==0){
that.$forceUpdate()
return false;
}else{
that.orderList = res.list; //3.值写入变量
}
that.$forceUpdate() //强制刷新
});
},
doc_list:function(postData,curIndex){
var that = this;
that.getData('dot',postData,function(res){
if(res.code==0){
that.$forceUpdate()
return false;
}else{
that.dotList = res.list;
}
that.$forceUpdate() //强制刷新
});
},
order7today_list:function(postData,curIndex){
var that = this;
that.getData('order7today_list',postData,function(res){
if(res.code==0){
that.$forceUpdate()
return false;
}else{
that.user7todayList = res.list;
}
that.$forceUpdate()
var ledger2X=[];
var ledger2Y=[];
$.each(res.list, function(index,item) {
ledger2X.push(item.x2);
ledger2Y.push(item.x1);
});
Echart2(ledger2X,ledger2Y);
});
},
user7today_list:function(postData,curIndex){
var that = this;
that.getData('user7today_list',postData,function(res){
if(res.code==0){
that.$forceUpdate()
return false;
}else{
that.user7todaylist = res.list;
}
that.$forceUpdate()
var ledger3X=[];
var ledger3Y=[];
$.each(res.list, function(index,item) {
ledger3X.push(item.x2);
ledger3Y.push(item.x1);
});
Echart3(ledger3X,ledger3Y);
});
},
}
});
</script>
index.js
function Echart3(xData,yData){
// 中间省略的数据 准备三项
var item = {
name: '',
value: 1200,
// 柱子颜色
itemStyle: {
color: '#254065'
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: '#254065'
}
},
// 工具提示隐藏
tooltip: {
extraCssText: 'opacity:0'
}
};
option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: 'item',
// 轴触发提示才有效
axisPointer: {
// 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果
type: 'shadow'
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '0',
right: '3%',
bottom: '3%',
top: '5%',
// 大小是否包含文本【类似于boxsizing】
containLabel: true,
//显示边框
show: true,
//边框颜色
borderColor: 'rgba(0, 240, 255, 0.3)'
},
// 控制x轴
xAxis: [
{
// 使用类目,必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: xData, //['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
// 刻度设置
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
}
}
],
// 控制y轴
yAxis: [
{
// 使用数据的值设为刻度文字
type: 'value',
axisTick: {
// true意思:图形在刻度中间
// false意思:图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
}
},
}
],
// 控制x轴
series: [
{
// series配置
// 颜色
itemStyle: {
// 提供的工具函数生成渐变颜色
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1,
[
{ offset: 0, color: '#00fffb' }, // 0 起始颜色
{ offset: 1, color: '#0061ce' } // 1 结束颜色
]
)
},
// 图表数据名称
name: '用户统计',
// 图表类型
type: 'bar',
// 柱子宽度
barWidth: '60%',
// 数据
data: yData, //[2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
}
]
};
var myechart = echarts.init($('.users .bar')[0]);
myechart.setOption(option);
};
nodsjs POST请求的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Android请求网络共通类——Hi_博客 Android App 开发笔记
今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目 因为要从网络请求数据所以我们先来一个请求网络的共通类. ...
- 重温Http协议--请求报文和响应报文
http协议是位于应用层的协议,我们在日常浏览网页比如在导航网站请求百度首页的时候,会先通过http协议把请求做一个类似于编码的工作,发送给百度的服务器,然后在百度服务器响应请求时把相应的内容再通过h ...
- Taurus.MVC 2.2 开源发布:WebAPI 功能增强(请求跨域及Json转换)
背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...
- nodejs之get/post请求的几种方式
最近一段时间在学习前端向服务器发送数据和请求数据,下面总结了一下向服务器发送请求用get和post的几种不同请求方式: 1.用form表单的方法:(1)get方法 前端代码: <form act ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- C# MVC 5 - 生命周期(应用程序生命周期&请求生命周期)
本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...
- nodejs进阶(5)—接收请求参数
1. get请求参数接收 我们简单举一个需要接收参数的例子 如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球.通过前面的进 ...
- 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。如果服务器位于远程计算机上,请检查。。。
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Ser ...
- [转]利用URLConnection来发送POST和GET请求
URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...
随机推荐
- js中宏任务,微任务,异步,同步,执行的顺序
[微任务]包括:Promise , process.nextTick() *node.js里面的 [宏任务]包括:整体代码script, setTimeout setInterval ...
- python 深拷贝及浅拷贝区别
深拷贝及浅拷贝区别 浅拷贝copy: 可变类型:(列表,字典,集合)copy函数对可变类型的第一层对象进行拷贝,对拷贝的对象开辟新的内存空间进行存储,不会拷贝对象内部的子对象 不可变类型:(数字,字符 ...
- echarts区域选择(brush)默认开启选择
api.dispatchAction({ // 刷选模式的开关.使用此 action 可将当前鼠标变为可刷选状态. 事实上,点击 toolbox 中的 brush 按钮时,就是通过这个 action, ...
- Topsis法的python实现
TOPSIS (Technique for Order Preference by Similarity to an Ideal Solution )法是C.L.Hwang和K.Yoon于1981年首 ...
- C 语言 数制
C 语言 数制 数制也称计数制,是指用一组固定的符号和统一的规则来表示数值的方法.计算机处理的信息必须转换成二进制形式数据后才能进行存储和传输.计算机中,经常使用的进制有二进制.八进制.十进制.十六进 ...
- CentOS 8.x 编译安装LNMP(Linux + Nginx + MySQL + PHP)架构部署动态网站环境
LNMP动态网站部署架构是一套由Linux + Nginx + MySQL + PHP组成的动态网站系统解决方案,具有免费.高效.扩展性强且资源消耗低等优良特性,目前正在被广泛使用. 前传: 1.Ce ...
- java中锁的应用(synchronized)
在面试菜鸟的时候碰到的锁的编程问题,没答好,记录一下: package com.xielu.test; /** * Hello world! * */ public class App { priva ...
- 2月26日Android开发学习
1.App运行日志 Android采用Log工具打印日志,他讲各类日志划分为五个等级 (1)Log.e:表示错误信息,比如可能导致程序崩溃的异常. (2)Log.w:表示警告信息. (3)Log.i: ...
- AcWing 66. 两个链表的第一个公共结点 (2012算法题)
题目: 输入两个链表,找出它们的第一个公共结点. 当不存在公共节点时,返回空节点. 数据范围 链表长度 [1,2000]. 保证两个链表不完全相同,即两链表的头结点不相同. 样例 给出两个链表如下所 ...
- 4.3Dsmax捕捉工具
平面视图: Line 线 多用于平面视图(按住shift可创建水平或垂直的线) Cirde 圆 Arc 弧形 NGon 多边形 Text 文本 输入中文会出现方框,换一下字体即可 Egg 鹅卵形 re ...