最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为能重复调用的组件。
阅读之前,可以先看看我之前的一些文章,这样能更好的理解这次的内容: 【使用vue-cli(vue脚手架)快速搭建项目】:https://www.jianshu.com/p/1ee1c410dc67 【vue之父子组件间通信实例讲解(props、$ref 、 $emit )】: https://www.jianshu.com/p/91416e11f012
1. 安装Echarts
首先第一步,肯定是安装Echarts了。通过cd命令进入项目根目录,然后敲以下命令行:
cnpm install echarts -S
安装成功会如下显示,package.json里的dependencies属性也会自动加上Echarts依赖:
2.在vue项目中使用Echarts
安装成功以后,我们先要考虑的是如何在vue项目中导入Echarts,并成功初始化一个图表。
下面我会先建两个.vue文件 chart.vue 和 radar-chart.vue 作为这次示例的基础。 chart.vue的角色是调用雷达图,radar-chart.vue的角色是提供雷达图:
//chart.vue
//radar-chart.vue
好,正式创建一个Echarts图表了
(1)在radar-chart.vue导入echart :
// 引入基本模板
import echarts from 'echarts/lib/echarts'
// 引入雷达图组件
import 'echarts/lib/chart/radar'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
(2)创建图表配置数据,数据格式参考 Echarts官网:
const option = {
tooltip: {},
radar: {
indicator: [{name: '体育', max: '100'}, {name: '数学', max: '100'}, {name: '化学', max: '100'}, {name: '劳动', max: '100'}, {name: '物理', max: '100'}],
center: ['50%', '51%']
},
series: [{
type: 'radar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: [58,56,78,64,98],
name: '各项得分',
itemStyle: {normal: {color: '#f0ad4e'}}
}
]
}]
}
(3)初始化图表:
const chartObj = echarts.init(document.getElementById('radar'))
chartObj.setOption(option)
上面几步汇总为以下代码,另外补充一点就是,创建配置数据option和初始化的时候,都要放在mounted钩子函数里执行,这样才能保证获取dom的是时候,dom已完成渲染:
//chart.vue
//radar-chart.vue
出来的效果是这样的:
3.将Echarts封装为组件
上面我们已经成功创建一个雷达图了,但是很明显的是,radar-chart.vue里的数据写死的,无法重复调用。接下来着手封装的事情了。
封装的思路是这样的: (1)chart.vue向radar-chart.vue传递一组个性化数据 (2)radar-chart.vue通过props选项接收数据 (3)提炼接收到的数据,覆盖配置数据option (4)初始化图表 (如果对如何传递数据不理解,可以先看看我在开始的时候提到的,我的另一篇文章 —— “ vue之父子组件间通信实例讲解(props、$ref 、 $emit )”)
具体代码如下:
//chart.vue (父组件)
//传递在子组件prop选项里约定好的数据
//radar-chart.vue (子组件)
封装以后,就能传递自定义的数据,反复调用了。上面代码最后的效果是这样的:
4.细节优化
基本的功能已经实现了,下面我们来优化下一些细节。
不知道大家有没发现radar-chart.vue里的-id是写死的,这会出现什么问题?当一个页面调用两次这个雷达图组件,id就会重复了,从而报错。
为了解决这个问题,我引入了uuid(vue-cli项目自带,不需另外安装),意在为每个生成的雷达图配一个不重复的随机id。还需要注意的是,我们要在created()方法里去做这个生成id的事情,如果写在mounted了就会出现无法初始化的情况,因为来不及渲染新的ID,就执行document.getElementById()了,具体代码如下:
成功解决重复id的问题:
整个封装echart的思路就是上面那样了,其实这个demo还不完美,像雷达图的宽高也是写死的,还没来得及做更多的优化,后面有空慢慢再完善它~
你可能感兴趣的:(vue之将echart封装为组件)
echarts中x轴、y轴 类目自定义换行
weixin_45907435
echarts 前端 javascript
在echarts中可能因为某项的名字过长想要换行展示,就可以在axisLabel属性中自定义换行,如以下案例在y轴上换行展示()yAxis:[axisLabel:{formatter:function(value){varret=''//拼接加\n返回的类目项varmaxLength=6//每项显示文字个数varvalLength=value.length//Y轴类目项的文字个数varrowNum
echarts 饼状图 label 字体设置
weixin_45907435
echarts 前端 javascript
1、给label按需设置样式,在series的label中用formatter格式化内容,在rich中设置样式option={tooltip:{trigger:'axis'},legend:{orient:'vertical',top:'center',right:'3%',itemWidth:10,//图例icon与name之间的距离itemHeight:5,//icon大小icon:'circ
pdf在页面中预览的方法
weixin_45907435
pdf
1、iframe使用方法相关属性(属性间用&连接拼接到src中):1、缩放比例:#zoom=120;(表示将文件放大120%)2、跳往特定页数:#page=33、工具栏:#toolbar=0(0隐藏、1显示)菜单栏:#menubar=0(0隐藏、1显示)4、页面自适应屏幕:#view=Fit页面自适应水平宽度:#view=FitH页面自适应垂直高度:#view=FitV5、侧边导航栏状态:#nav
vue页面导出为pdf文件
weixin_45907435
vue.js pdf 前端
在后台管理项目中,想到把页面导出为pdf格式的文件,可以使用html2canvas和jspdf插件实现1、安装'html2canvas''jspdf'npminstallhtml2canvas--savenpminstalljspdf--save2、util.js文件中封装导出方法//引入依赖importhtml2canvasfrom'html2canvas'importJsPDFfrom'jsp
软件测试之通用功能测试点
头疼的程序员
软件测试 功能测试
文章目录前言分页搜索框对搜索框操作的测试点搜索结果页测试点输入框测试点输入方式测试点输入框操作类测试点图片相关的测试点PC端上传图片测试点PC端图片浏览测试点移动端上传图片测试点移动端浏览图片测试点视频播放器测试点视频播放测试点视频操作测试点登录新增删除修改密码查询查询结果测试点单选按钮复选框滚动条控件权限测试导入导出测试后退/返回按钮系统易用性界面测试窗体控件菜单安全测试参考目录前言阅读本文前请
【AI论文】OmniHuman-1: 重新思考一阶段条件式人体动画模型的扩展升级
东临碣石82
人工智能
摘要:端到端的人体动画技术,如音频驱动的说话人物生成,近年来取得了显著的进步。然而,现有方法在大规模通用视频生成模型方面的扩展仍然存在困难,限制了它们在实际应用中的潜力。在本文中,我们提出了OmniHuman,一个基于扩散变换器的框架,该框架通过将运动相关条件融入训练阶段来扩展数据规模。为此,我们为这些混合条件引入了两种训练原则,以及相应的模型架构和推理策略。这些设计使OmniHuman能够充分利
【AI论文】使用大型推理模型进行竞技编程
东临碣石82
人工智能
摘要:我们的研究表明,将强化学习应用于大型语言模型(LLMs)能显著提升复杂编码和推理任务的性能。此外,我们将两个通用推理模型——OpenAI的o1模型和o3模型的一个早期检查点——与一个特定领域的系统o1-ioi进行了比较。o1-ioi采用了为参加2024年国际信息学奥林匹克竞赛(IOI)而手工设计的推理策略。我们使用o1-ioi实时参加了2024年IOI竞赛,并凭借手工制定的测试时策略取得了第
如何微调(Fine-tuning)大语言模型?看完这篇你就懂了!!
datian1234
语言模型 人工智能 chatgpt LLM ai AI大模型 大模型微调
前言本文介绍了微调的基本概念,以及如何对语言模型进行微调。从GPT3到ChatGPT、从GPT4到GitHubcopilot的过程,微调在其中扮演了重要角色。什么是微调(fine-tuning)?微调能解决什么问题?什么是LoRA?如何进行微调?本文将解答以上问题,并通过代码实例展示如何使用LoRA进行微调。微调的技术门槛并不高,如果微调的模型规模不大10B及10B以下所需硬件成本也不高(10B模
大型语言模型的核心机制解析
耶耶Norsea
网络杂烩 人工智能 Deepseek
摘要大型语言模型的核心机制依赖于Transformer架构,该架构通过嵌入层将输入数据转换为向量形式,并结合位置编码以保留序列中单词的顺序信息。随后,这些向量进入多头自注意力层,能够同时关注输入序列的不同部分。自注意力层的输出经过残差连接和层归一化处理,以增强模型的学习能力和稳定性。接着,数据流经前馈网络进一步处理,最终再次通过残差连接和层归一化,得到编码器层的输出。模型性能高度依赖大规模和高质量
自定义公式校验规则、常用的JavaScript正则公式合法校验、自定义公式合集、前端校验规则、字符串校验
a_dream(前端)
前端 javascript 正则表达式
vue开发中,会使用到自定义公式校验合法性,判断公式是否符合逻辑,整理个人使用过的自定义公式页面保存时对输入的字符串进行校验的一套规则(文章最后有完整代码)目录1.正则判断2.校验数字(输入数字不超过十位数,不超过两位小数)3.校验括号(嵌套括号是否符合要求)4.(完整代码文件)1.正则判断constre=/[^0-9\(\)\+\-\×\÷\.\#\{\}]{1,}///判断输入字符合法性的正则
3-wifidog代码流程
creatorly
portal网安认证 openwrt
wifidog的做法是先全部黑名单,然后再放行白名单的做法。1.wifidog流程wifidog由两部分组成,一个是运行在路由器上的程序,另一部分是运行在认证服务器上的程序。wifidog的认证流程大致是:1.首先,用户的终端可以连接上wifi,然后发起访问网站的请求,如www.baidu.com;2.网关根据防火墙规则,将用户的请求重定向到本地端口(wifidog的监听端口2060);3.网关将
2024年办公协作新趋势:8种值得瞩目的工作方式
不秃头的UI设计师
远程工作 远程办公 协作 团队协作
过去两年中,疫情的爆发推动了远程办公业务的发展,并且随着疫情的常态化和企业数字化转型的加速,中国企业对协作办公软件的需求显著增加。数据显示,2021年中国协作办公市场规模已达264.2亿元,预计到2023年将增长至330.1亿元。在线团队协作就像在不同应用场景中搭建了一座虚拟桥梁,打破了企业内部的数据孤岛,促进了各部门之间的多维协作。在线协作设计软件则成为企业数字化转型的理想选择,满足了企业在数字
设计模式-外观模式
管大虾
设计模式 设计模式 外观模式
一、定义外观模式提供了一个统一的接口,用来访问子系统中的一群接口。外观定义了一个高层的接口,让子系统更容易使用。外观模式其实和适配器模式很像,只不过适配器模式转化接口是为了实现接口的兼容,把每个接口都做了转化,而外观模式改变接口的原因是为了简化接口,把复杂的一切都隐藏,只对外暴露出一个干净的外观,而且外观模式不只是简单得简化解耦,也实现了将客户从众多子组件中解耦。其实这个模式,我们在日常开发中会不
Vue3笔记_<入门基础篇>
我的白银时代
Vue2进阶Vue3笔记 Vue3零到一实战 笔记 vue.js 前端
目录Setup语法糖ref:定义一个数据的响应式reactive:定义一个对象类型的响应式数据toRef()toRefs()计算属性watchEffect函数生命周期Vue3获取DomPropsVue3自定义事件Setup语法糖setup是一个专门用于组合式API的特殊钩子函数,只在初始化时执行一次。setup有两种返回值:对象。对象中的属性,方法在模板中都可以直接使用函数。自定义渲染内容,覆盖模
人工智能之推荐系统实战系列(协同过滤,矩阵分解,FM与DeepFM算法)
weixin_58351028
人工智能 深度学习 神经网络 算法 机器学习
一.推荐系统介绍和应用(1)推荐系统通俗解读推荐系统就是来了就别想走了。例如在大数据时代中京东越买越想买,抖音越刷越是自己喜欢的东西,微博越刷越过瘾。(2).推荐系统发展简介1)推荐系统无处不在,它是根据用户的行为决定推荐的内容。用户每天在互联网中都会留下足迹,这样就会越来越多的用户画像。2)为什么要推荐系统卖的好的商品就那几种,其它就不管了吗?答案是否定的。80%的销售来自20%的热门商品,要想
IDEA配置JSTL
阿俊仔(摸鱼版)
intellij-idea java tomcat
IDEA配置JSTL下载JSTL官网下载地址:https://tomcat.apache.org翻到下面找到:点击,download下载下面内容:(就Impl和Spec)配置JSTL将两个下好的jar包放在lib文件夹下ctrl+shift+alt+s打开ProjectStructure左侧找到Modules->右侧选择Dependences->点击➕号Library->点击java->选中WEB
web&安卓逆向之必学CSS基础知识
安替-AnTi
前端 css web android 逆向
文章目录CSS基础知识一、CSS的介绍1.CSS的定义2.CSS的作用3.CSS的基本语法4.小结二、css的引入方式1.行内式语法格式:特点:适用场景:2.内嵌式(内部样式)语法格式:特点:适用场景:3.外链式语法格式:特点:适用场景:4.CSS引入方式选择选择建议:5.小结三、css选择器1.CSS选择器的定义2.CSS选择器的种类标签选择器类选择器层级选择器(后代选择器)ID选择器组选择器伪
在Podman中配置Dify Sandbox服务与外部PostgreSQL服务的网络连接
松哥_ai自动化
经验分享
在Podman中配置DifySandbox服务与外部PostgreSQL服务的网络连接引言在容器化环境中,确保不同服务之间的可靠通信是至关重要的。本文将指导你如何使用Podman来配置DifySandbox服务与外部通过docker-compose管理的PostgreSQL数据库服务之间的网络连接。我们将逐步介绍每一步骤,并适时融入相关概念,帮助读者更好地理解配置过程。网络基础:理解容器间的通信在
Flutter 简化线程Isolate的使用
CodeOfCC
flutter flutter 开发语言 dart 多线程
文章目录前言一、完整代码二、使用示例1、通过lambda启动线程2、获取线程返回值3、线程通信4、结束isolate总结前言flutter的线程是数据独立的,每个线程一般通过sendport来传输数据,这样使得线程调用没那么方便,本文将提供一种支持lambda启动isolate的方法,且支持捕获值类型变量,以及支持返回值。一、完整代码由于代码量较少,原理就不介绍了,直接给出完整实现。isolate
【Elasticsearch】分词器概述
risc123456
Elasticsearch elasticsearch
Elasticsearch分词与神经网络分词的区别Elasticsearch的分词过程产生的是优化用于搜索和检索的语言学分词。这与机器学习和自然语言处理中的神经分词不同。神经分词器将字符串转换为更小的子词分词,这些分词被编码为向量,供神经网络使用。Elasticsearch没有内置的神经分词器。分词器接收一个字符流,将其分解为单独的分词(通常是单个单词),并输出一个分词流。例如,`whitespa
定了,2025年数据库运维就这样干
我科绝伦(Huanhuan Zhou)
mysql oracle 数据库 运维 oracle
在数字化浪潮中,数据库作为企业数据资产的核心载体,其稳定运行与高效管理至关重要。新的一年,为应对日益增长的数据量和业务复杂度,我们为数据库运维制定了一系列全面且细致的计划,旨在提升数据库性能、保障数据安全,为企业业务发展筑牢坚实基础。一、强化巡检,防患未然数据库的稳定运行离不开日常的精心呵护。2025年,我们将进一步加强巡检工作,利用专业工具和自主研发的系统,对数据库进行全面“体检”。不仅关注数据
k8s中的service、api-server、kube-proxy有什么区别
似水流年 光阴已逝
k8s kubernetes java 容器
在Kubernetes(K8s)中,Service、APIServer和kube-proxy是三个不同的组件,它们在集群中扮演着不同的角色和功能。下面我将为你解释它们之间的区别:1.Service(服务):Service是K8s中的一种资源对象,用于定义一组具有相同功能的Pod的访问方式和负载均衡。它提供了一个虚拟的IP地址和端口,作为对外提供服务的入口。Service将后端的一组Pod抽象为一个
利用IDEA将Java.class文件反编译为Java文件:原理、实践与深度解析
.猫的树
Java反编译 IDEA技巧 逆向工程
文章目录引言:当.class文件遇到源代码缺失第一章:反编译技术基础认知1.1Java编译执行原理1.2反编译的本质1.3法律与道德边界第二章:IDEA内置反编译工具详解2.1环境准备2.2三步完成基础反编译2.3高级反编译技巧2.3.1调试模式反编译2.3.2Lambda表达式处理2.3.3泛型类型恢复第三章:Fernflower反编译引擎深度配置3.1引擎参数调优3.2多文件批量反编译3.3结
解决Vue控制台报错:WebSocketClient.js:13 WebSocket connection to ‘ws://192.168.x.x:8080/ws‘ failed:
藏蓝色攻城狮
vue javascript vue.js websocket
1、报错情况在调试项目过程中,无意中发现,在控制台内,报了这样的错误:WebSocketClient.js:13WebSocketconnectionto‘ws://192.168.x.x:8080/ws’2、错误原因查了一些资料,原因是,原因就是开发环境与生产环境的区别3、解决方案:3.1第一种如果没使用过webscoket,禁用之后就可以了,就不会出现这个问题了。在vue.config.js中
Web3 的虚实融合之路:从虚拟交互到元宇宙构建
dingzd95
web3 web3 交互
在这个数字技术日新月异的时代,我们正站在Web3的门槛上,见证着互联网的又一次革命。Web3不仅仅是技术的迭代,它代表了一种全新的交互方式和价值创造模式。本文将探讨Web3如何推动虚拟交互的发展,并最终实现元宇宙的构建,揭示这一技术演进背后的关键理念与现实意义。Web3:去中心化的新交互方式Web3,即第三代互联网,是一个去中心化、用户主权、数据自主的网络环境。它依托于区块链、分布式存储等技术,实
kubernetes之kube-proxy运行机制分析
anyangyu0343
后端 网络
在kubernetes集群的每个node都会运行一个kube-proxy服务进程,这个进程可用看作Service的透明代理兼负载均衡器。其核心功能是将到某个Service的访问请求转发到后端的多个pod实例上。对每一个TCP类型的kubernetesService,kube-proxy都会在本地Node上建立一个SocketServer类负责接受请求,然后均匀发送到后端某个pod的端口上,这个过程
Stable Diffusion 教程基础篇: 如何写出好的prompt,一些技巧和原则
AI想象家
stable diffusion prompt midjourney 人工智能 openAI AI作画
StableDiffusion教程-中文AskAIforART·Originaltxt2imgandimg2imgmodes·基础模式之文生图/图生图点击可放大基础入门部分输入一段话,生成一张图。这是AI绘画的核心。入门就是那么简单,不过,这段话怎么写,其实也是有窍门的。在StableDiffusion里面,这段描述也就是Prompt,我们称之为AI的魔法咒语。那么,最开始我们需要怎么做呢?当然是
【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】006 - Makefile 编译脚本 逐行深度解析
小馋喵星人
鸿蒙OH-v5.0源码分析之 Uboot+Kernel 部分 U-Boot armv8 Makefile
【OpenHarmony4.1之U-Boot2024.07源码深度解析】006-Makefile编译脚本逐行深度解析系列文章汇总:《【鸿蒙OH-v5.0源码分析之Uboot+Kernel部分】000-文章链接汇总》本文链接:《【OpenHarmony4.1之U-Boot2024.07源码深度解析】006-Makefile编译脚本逐行深度解析》本文开始,我们来分析下U-Boot的Makefile编译
Kubernetes之kube-proxy运行机制分析
DawnEillen
kubernetes 容器 云原生
一、基础知识1.Kubernetes再创建服务时会为服务分配一个虚拟IP地址,客户端通过这个虚拟Ip地址来访问服务,而服务则负责将请求转发到后端pod上。2.上述阐述的过程为一个反向代理的过程,但是这个反向代理和普通的反向代理的区别是它的IP地址是虚拟的而且它的部署和启动以及停止是由K8s统一自动管理。3.在K8s集群里每个Node上都会运行一个kube-proxy服务进程,这个进程可以看作ser
Unity3D实战入门之第三人称射击游戏(TPS)-伍晓波-专题视频课程
wxblzzz
视频教程 射击游戏 TPS Unity3D实战 Unity3D 手机游戏
Unity3D实战入门之第三人称射击游戏(TPS)—327人已学习课程介绍这是一套第三人称射击游戏开发的入门基础课程。本课程以一款小型的第三人称射击游戏为案例,手把手教你如何搭建一款3D射击游戏的雏形。麻雀虽小,五脏俱全,这款小游戏难度不大,但第三人称射击游戏该有的模块、功能它都有涉及。通过案例游戏的开发,学习者可以对第三人称射击游戏入门,对后续复杂大中型3D游戏的开发有实际的借鉴意义。这套课程,
java杨辉三角
3213213333332132
java基础
package com.algorithm;
/**
* @Description 杨辉三角
* @author FuJianyong
* 2015-1-22上午10:10:59
*/
public class YangHui {
public static void main(String[] args) {
//初始化二维数组长度
int[][] y
《大话重构》之大布局的辛酸历史
白糖_
重构
《大话重构》中提到“大布局你伤不起”,如果企图重构一个陈旧的大型系统是有非常大的风险,重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”,下面我就分享这个“大布局”项目经验给大家。
背景
公司专注于企业级管理产品软件,企业有大中小之分,在2000年初公司用JSP/Servlet开发了一套针对中
电驴链接在线视频播放源码
dubinwei
源码 电驴 播放器 视频 ed2k
本项目是个搜索电驴(ed2k)链接的应用,借助于磁力视频播放器(官网:
http://loveandroid.duapp.com/ 开放平台),可以实现在线播放视频,也可以用迅雷或者其他下载工具下载。
项目源码:
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。
项目源码依赖于两个库项目,库项目一链接:
http://git.oschina.
Javascript中函数的toString()方法
周凡杨
JavaScript js toString function object
简述
The toString() method returns a string representing the source code of the function.
简译之,Javascript的toString()方法返回一个代表函数源代码的字符串。
句法
function.
struts处理自定义异常
g21121
struts
很多时候我们会用到自定义异常来表示特定的错误情况,自定义异常比较简单,只要分清是运行时异常还是非运行时异常即可,运行时异常不需要捕获,继承自RuntimeException,是由容器自己抛出,例如空指针异常。
非运行时异常继承自Exception,在抛出后需要捕获,例如文件未找到异常。
此处我们用的是非运行时异常,首先定义一个异常LoginException:
/**
* 类描述:登录相
Linux中find常见用法示例
510888780
linux
Linux中find常见用法示例
·find path -option [ -print ] [ -exec -ok command ] {} \;
find命令的参数;
SpringMVC的各种参数绑定方式
Harry642
springMVC 绑定 表单
1. 基本数据类型(以int为例,其他类似):
Controller代码:
@RequestMapping("saysth.do")
public void test(int count) {
}
表单代码:
<form action="saysth.do" method="post&q
Java 获取Oracle ROWID
aijuans
java oracle
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row.
The oracle.sql.ROWID class i
java获取方法的参数名
antlove
java jdk parameter method reflect
reflect.ClassInformationUtil.java
package reflect;
import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt
JAVA正则表达式匹配 查找 替换 提取操作
百合不是茶
java 正则表达式 替换 提取 查找
正则表达式的查找;主要是用到String类中的split();
String str;
str.split();方法中传入按照什么规则截取,返回一个String数组
常见的截取规则:
str.split("\\.")按照.来截取
str.
Java中equals()与hashCode()方法详解
bijian1013
java set equals() hashCode()
一.equals()方法详解
equals()方法在object类中定义如下:
public boolean equals(Object obj) {
return (this == obj);
}
很明显是对两个对象的地址值进行的比较(即比较引用是否相同)。但是我们知道,String 、Math、I
精通Oracle10编程SQL(4)使用SQL语句
bijian1013
oracle 数据库 plsql
--工资级别表
create table SALGRADE
(
GRADE NUMBER(10),
LOSAL NUMBER(10,2),
HISAL NUMBER(10,2)
)
insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser
【Nginx二】Nginx作为静态文件HTTP服务器
bit1129
HTTP服务器
Nginx作为静态文件HTTP服务器
在本地系统中创建/data/www目录,存放html文件(包括index.html)
创建/data/images目录,存放imags图片
在主配置文件中添加http指令
http {
server {
listen 80;
server_name
kafka获得最新partition offset
blackproof
kafka partition offset 最新
kafka获得partition下标,需要用到kafka的simpleconsumer
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.
centos 7安装docker两种方式
ronin47
第一种是采用yum 方式
yum install -y docker
java-60-在O(1)时间删除链表结点
bylijinnan
java
public class DeleteNode_O1_Time {
/**
* Q 60 在O(1)时间删除链表结点
* 给定链表的头指针和一个结点指针(!!),在O(1)时间删除该结点
*
* Assume the list is:
* head->...->nodeToDelete->mNode->nNode->..
nginx利用proxy_cache来缓存文件
cfyme
cache
user zhangy users;
worker_processes 10;
error_log /var/vlogs/nginx_error.log crit;
pid /var/vlogs/nginx.pid;
#Specifies the value for ma
[JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题
comsci
嵌入式
假如我们需要用JWFD的语法分析模块定义一个带负号的方程式,直接在方程式之前添加负号是不正确的,而必须这样做:
string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"
定义一个0整数c,然后用这个整数c去
如何集成支付宝官方文档
dai_lm
android
官方文档下载地址
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash
集成的必要条件
1. 需要有自己的Server接收支付宝的消息
2. 需要先制作app,然后提交支付宝审核,通过后才能集成
调试的时候估计会真的扣款,请注意
应该在什么时候使用Hadoop
datamachine
hadoop
原帖地址:http://blog.chinaunix.net/uid-301743-id-3925358.html
存档,某些观点与我不谋而合,过度技术化不可取,且hadoop并非万能。
--------------------------------------------万能的分割线--------------------------------
有人问我,“你在大数据和Hado
在GridView中对于有外键的字段使用关联模型进行搜索和排序
dcj3sjt126com
yii
在GridView中使用关联模型进行搜索和排序
首先我们有两个模型它们直接有关联:
class Author extends CActiveRecord {
...
}
class Post extends CActiveRecord {
...
function relations() {
return array(
'
使用NSString 的格式化大全
dcj3sjt126com
Objective-C
格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
使用activeX插件对象object滚动有重影
蕃薯耀
activeX插件 滚动有重影
使用activeX插件对象object滚动有重影 <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
SpringMVC4零配置
hanqunfeng
springmvc4
基于Servlet3.0规范和SpringMVC4注解式配置方式,实现零xml配置,弄了个小demo,供交流讨论。
项目说明如下:
1.db.sql是项目中用到的表,数据库使用的是oracle11g
2.该项目使用mvn进行管理,私服为自搭建nexus,项目只用到一个第三方 jar,就是oracle的驱动;
3.默认项目为零配置启动,如果需要更改启动方式,请
《开源框架那点事儿16》:缓存相关代码的演变
j2eetop
开源框架
问题引入
上次我参与某个大型项目的优化工作,由于系统要求有比较高的TPS,因此就免不了要使用缓冲。
该项目中用的缓冲比较多,有MemCache,有Redis,有的还需要提供二级缓冲,也就是说应用服务器这层也可以设置一些缓冲。
当然去看相关实现代代码的时候,大致是下面的样子。
[java]
view plain
copy
print
?
public vo
AngularJS浅析
kvhur
JavaScript
概念
AngularJS is a structural framework for dynamic web apps.
了解更多详情请见原文链接:http://www.gbtags.com/gb/share/5726.htm
Directive
扩展html,给html添加声明语句,以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称,ng是angular的命名空间
架构师之jdk的bug排查(一)---------------split的点号陷阱
nannan408
split
1.前言.
jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug.
2.代码
String[] paths = "object.object2.prop11".split("'");
System.ou
如何对10亿数据量级的mongoDB作高效的全表扫描
quentinXXZ
mongodb
本文链接:
http://quentinXXZ.iteye.com/blog/2149440
一、正常情况下,不应该有这种需求
首先,大家应该有个概念,标题中的这个问题,在大多情况下是一个伪命题,不应该被提出来。要知道,对于一般较大数据量的数据库,全表查询,这种操作一般情况下是不应该出现的,在做正常查询的时候,如果是范围查询,你至少应该要加上limit。
说一下,
C语言算法之水仙花数
qiufeihu
c 算法
/**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
int x,y,z;
for(x=1;x<=N;x++)
for(y=0;y<=N;y++)
for(z=0;z<=N;z++)
if(x*100+y*10+z == x*x*x
JSP指令
wyzuomumu
jsp
jsp指令的一般语法格式: <%@ 指令名 属性 =”值 ” %>
常用的三种指令: page,include,taglib
page指令语法形式: <%@ page 属性 1=”值 1” 属性 2=”值 2”%>
include指令语法形式: <%@include file=”relative url”%> (jsp可以通过 include