docloud后台管理项目(前端篇)
以下内容与主题无关,如果不想看可以直接忽视
!--忽视开始--!
给大家推荐一款强大的编辑器,那就是集响应快、体验好、逼格高、功能丰富为一体的sublime text 3。它除了以上特点,还有一个最重要的功能:方便快捷的插件扩展,支持大量插件而且均支持命令行安装,只要一条简单的命令就可以完成插件的安装。想要提高开发效率,sublime是一个很好的选择!
!--忽视结束--!
以下为项目开发时遇到的问题或者学习到的前端技术:
1、height:100%设置无效
解决方法:html,body{margin:0;height:100%}
2、div居中
解决方法:
两种方案
1、第一种情况,div宽度固定的情况下,给div设置width,然后margin:0 auto;
2、第二种情况,div宽度不固定或者说不想给div加宽度限制,给div设置display:inline-block;然后给他的父元素加上text-align:center;
3、纯css实现奇偶行
解决方法:
使用css的:nth-child(odd)选择器就可以了:tr:nth-child(odd){background-color: #eee}
4、css内进行简单运算
解决方法:
使用calc函数:th{width: calc(100%/7);}
5、遍历js对象
解决方法:
for (var k in jsObj) {
console.info("key:" + k + ",value:" + jsObj[k]);
}
6、解决ie Date.getTime兼容性问题
解决方法:
由于ie不兼容 yyyy-mm-dd的日期格式,所以把“-”替换为“/”就可以解决问题
function getTime(dateStr){
dateStr = dateStr.replace("-", "/");
return Date.parse(dateStr);
}
由于是数据分析的后台,所以用到了图表,我所采用的插件是highcharts,一下是使用highcharts的一点经验:
为了方便数据的修改和呈现,一般定义一个全局的参数
//图表参数
var chart = {
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: '曲线图'
},
xAxis: {
type: 'datetime',
title: {
text: '时间'
},
dateTimeLabelFormats: {
second: '%H:%M:%s',
minute: '%d日 %H:%M',
hour: '%m月%d日%H点',
day: '%Y年%m月%d',
week: '%Y-%m-%d',
month: '%Y年%m月',
year: '%Y年'
}
},
yAxis: {
title: {
text: '体温'
}
}
};
里面的参数都见名知意,就不一一解释了,具体可以看相关文档。这里xAxis 里面的type: 'datetime'表示x轴按照时间显示。
这是图表初始化方法:
var ser = [];
var ser = [];
ser[0] = {
type:'line',
name: "参数名",
data: [
["X值","Y值"],
["X值","Y值"],
["X值","Y值"]
]
};
chart.series = ser;
$('#container').highcharts(chart);
X轴按照时间显示的时候X值应该为时间戳,绑定之前记得对数组进行按X轴升序排序。
docloud后台管理项目(前端篇)的更多相关文章
- docloud后台管理项目(开篇)
最近朋友做app需要web做后台管理,所以花了一周时间做了这个项目. 废话不多说,开发环境是nginx+php5.3,使用thinkphp框架.是一个医疗器械数据统计的后台,业务功能很简单就是查看用户 ...
- C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案
在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基 ...
- vue,vuex的后台管理项目架子structure-admin,后端服务nodejs
之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...
- SSM 电影后台管理项目
SSM 电影后台管理项目 概述 通过对数据库中一张表的CRUD,将相应的操作结果渲染到页面上. 笔者通过这篇博客还原了项目(当然有一些隐藏的坑),然后将该项目上传到了Github.Gitee,在末尾会 ...
- vue初始化项目,构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
- 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析 一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
- 项目:Vue+node+后台管理项目小结
序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制 项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...
- 基于 Ant Desigin 的后台管理项目打包优化实践
背景 按照 Ant Design 官网用 React 脚手构建的后台项目,刚接手项目的时候大概30条路由左右,我的用的机子是 Mac 8G 内存,打包完成需要耗时2分钟左右,决定优化一下. 项目技术栈 ...
- 阿里百秀后台管理项目笔记 ---- Day01
摘要 在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面 将静态页面全部拷贝到 ...
随机推荐
- 学PHP也要懂得HTML
简单的HTML制做: html超文本标记语言 HTML文件主体结构: <!DOCTYPE html><html> <!--htlm开始标记 --><head& ...
- [A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转换为 [B]System.Web.WebPages.Razor.Configuration.HostSection。
记录下mvc4升级到mvc5后,运行项目提示: “/”应用程序中的服务器错误. [A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转 ...
- Android之设置拖拽监听
以EditText为例: username.setOnDragListener(new OnDragListener() { @Overridepublic boolean onDrag(View v ...
- Ubuntu-14.04. sh .py腳本双击無法執行问题的解决方法
Ubuntu-14.04中默认文件用gedit文本打开,而不是BT5里面的默认双击打开四个选择,例如以下图(这是配置完毕后的结果,就不换BT5系统了): 直接文本打开,尽管非常安全.实际生产中肯定是不 ...
- 从一个input点击引起的思考
一个input或者select标签都是有属于自己的disabled属性的,这个属性很少被使用,但是我们在项目实际开发的过程中也会遇到,比如我选择之后就让他置灰不可以变动了,那么久可利用js动态设置.对 ...
- impex 语法
impex 语法 2016-01-14 16:23 588人阅读 评论(0) 收藏 举报 分类: hybris(8) 脱离java Model单纯的去看impex文件的代码是不能很好理解impex ...
- CoffeeScript里的字符串插值
拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...
- HDFS04
===================HDFS副本放置策略=================== 一个文件划分成多个block,每个 block存多份,如何为每个block选 择节点存储这几份数据? ...
- MODULE_DEVICE_TABLE的理解【转】
本文转载自:http://blog.csdn.net/sidely/article/details/39666471 在Linux IIC驱动中看到一段代码: static struct platfo ...
- JAVA不让类实例化的方法
虽然java是面向对象编程,但也要尽可能避免创建不必要的对象,因为创建过多的对象不仅占用系统资源,而且多了很多不必要的创建销毁对象开销. 那么有哪些避免类创建对象的方法吗? 1,定义私有构造函数.这在 ...