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 : 整合全部静态页面 将静态页面全部拷贝到 ...
随机推荐
- uva 11552 dp
UVA 11552 - Fewest Flops 一个字符串,字符串每 k 个当作一组,组中的字符顺序能够重组.问经过重组后改字符串能够编程最少由多少块字符组成.连续的一段字符被称为块. dp[i][ ...
- sizeThatFits and sizeToFit
http://liuxing8807.blog.163.com/blog/static/9703530520134381526554/ sizeThatFits and sizeToFit是UIVie ...
- linux sed 命令的用法
原文 http://blog.chinaunix.net/uid-24426415-id-77244.html ------------------------------------------- ...
- LeetCode 160. Intersection of Two Linked Lists (两个链表的交点)
Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
- shell 脚本大文件处理
shell 脚本大文件处理 字符串处理 s='{"_id":{"$oid":"59b73d80930c17474f9f050d"},&qu ...
- Android隐藏状态栏和标题栏,相当于全屏效果
隐藏标题栏需要使用预定义样式:android:theme=”@android:style/Theme.NoTitleBar”. 隐藏状态栏:android:theme=”@android:style/ ...
- case when进行数据统计
SELECT SUM(CASE WHEN `status` = '1' THEN 1 ELSE 0 END) AS waitpay, SUM(CASE WHEN `group_done` = '1' ...
- Gold Coins
http://poj.org/problem?id=2000 #include<stdio.h> ; int main() { int coin[N]; ,j,k; j = ; k = ; ...
- codeforces——模拟
805 B. 3-palindrome http://codeforces.com/problemset/problem/805/B /* 题意字符串中不能有长度为三的回文串,且c数量最少 */ ...
- [Swift通天遁地]六、智能布局-(8)布局框架的使用:多分辨率适配和横竖屏布局
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...