Echarts在java中使用
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>This is my JSP page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body,#wrapper{
width: 100%;
height: 100%;
}
.navbar-inverse{
border-radius:0;
margin-bottom: 0;
}
.navbar-inverse .navbar-header{
width: 180px;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.4);
}
.navbar-inverse .navbar-header .navbar-brand{
float: none;
display: inline-block;
}
.slider{
width: 180px;
min-width:180px;
top:52px;
bottom: 0;
position: absolute;
background-color: rgba(0,0,0,0.00);
box-shadow:3px 0 6px rgba(0,0,0,0.3)
}
.slider .nav li a:hover,
.slider .nav li.active > a{
background-color: rgba(0,0,0,0.2)!important;
}
.slider .sub-menu li a{
padding-left:40px;
}
.slider .sub-menu{
/* border-bottom:1px solid #e5e5e5; */
border-top:1px solid #e5e5e5;
}
#wrap{
margin: 0 0 0 180px;
}
#wrap .wrap{
padding:5px 10px;
}
.panel .panel-footer{
background-color: #ffffff;
padding: 0 15px;
}
.panel-footer .pagination{
margin: 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">后台系统</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首 页 <span class="sr-only">(current)</span></a></li>
<li><a href="views/login.jsp">登 录</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更 多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">注 册</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="logout" title="安全退出">安全退出</a></li>
</ul>
</nav>
<div class="slider">
<ul class="nav">
<li class="active">
<a href="javascript:void(0);" onclick="openOrClose(this)"><i class="glyphicon glyphicon-user"></i> 用户管理 <i class="glyphicon glyphicon-chevron-down pull-right"></i></a>
<ul class="nav sub-menu">
<li><a href="users/usersController?_method=findAll"><i class="glyphicon glyphicon-list"></i> 用户列表</a></li>
<li class="active"><a href="#"><i class="glyphicon glyphicon-plus"></i> 用户添加</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" onclick="openOrClose(this)"><i class="glyphicon glyphicon-th-list"></i> 地址管理 <i class="glyphicon glyphicon-chevron-left pull-right"></i></a>
<ul class="nav sub-menu hidden">
<li ><a href="#"><i class="glyphicon glyphicon-list"></i> 地址列表</a></li>
<li><a href="#"><i class="glyphicon glyphicon-plus"></i> 地址添加</a></li>
</ul>
</li>
</ul>
</div>
<div id="wrap">
<div class="wrap">
<div class="panel panel-info">
<div class="panel-heading">
用户列表
<form action="users/usersController" style="display:inline;">
<div class="col-sm-4 pull-right" style="margin-top: -7px;">
<div class="input-group">
<input type="text" class="form-control" name="keyword" placeholder="搜索..." value="${page.keywords['username'] }">
<input type="hidden" name="_method" value="findAll">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">搜 索</button>
</span>
</div>
</div>
</form>
<button type="button" class="btn btn-default btn-sm pull-right" style="margin-top:-5px;" data-toggle="modal" data-target="#gridSystemModalLabel">年龄分析</button>
</div>
<table class="table table-bordered table-hover" style="margin-bottom: 0">
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${page.data }" var="user">
<tr>
<td>${user.id }</td>
<td>${user.username }</td>
<td>${user.password }</td>
<td>${user.age }</td>
<td>${user.email }</td>
<td>
<a href="#" class="btn btn-info">详情</a>
<a href="users/usersController?_method=findById&id=${user.id }" class="btn btn-warning">修改</a>
<a href="users/usersController?_method=deleteById&id=${user.id }" onclick="return confirm('确认删除?');" class="btn btn-danger">删除</a>
</td>
</tr>
</c:forEach>
</table>
<div class="panel-footer text-right">
<ul class="pagination">
<li><span>${page.curr } / ${page.pageCount }</span></li>
<li ${(page.curr eq page.first)?'class="disabled"':'' }>
<a href="users/usersController?_method=findAll&keyword=${page.keywords['username'] }&curr=${page.first }" title="首页">首页</a>
</li>
<li ${(page.curr eq page.first)?'class="disabled"':'' }>
<a href="users/usersController?_method=findAll&keyword=${page.keywords['username'] }&curr=${page.prev }" title="上一页">上一页</a>
</li>
<c:forEach begin="${page.start }" end="${page.end }" var="num">
<c:choose>
<c:when test="${page.curr == num }">
<li class="active"><a title="第${num }页">${num }</a></li>
</c:when>
<c:otherwise>
<li><a href="users/usersController?_method=findAll&keyword=${page.keywords['username'] }&curr=${num }" title="第${num }页">${num }</a></li>
</c:otherwise>
</c:choose>
</c:forEach>
<li ${(page.curr eq page.last)?'class="disabled"':'' }>
<a href="users/usersController?_method=findAll&keyword=${page.keywords['username'] }&curr=${page.next }" title="下一页">下一页</a>
</li>
<li ${(page.curr eq page.last)?'class="disabled"':'' }>
<a href="users/usersController?_method=findAll&keyword=${page.keywords['username'] }&curr=${page.last }" title="尾页">尾页</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">用户年龄分析</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="charts" style="width: 100%;height:60%;"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script type="text/javascript" src="assets/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/echarts.min.js"></script>
<script type="text/javascript" src="assets/js/Utils.js"></script>
<script type="text/javascript">
$('#gridSystemModalLabel').on('shown.bs.modal',function(){
var charts = echarts.init(document.getElementById("charts"));
var option = {
title: {
text: '用户年龄分析',
left:'center'
},
tooltip: {},
legend: {
orient:'vertical',
left:'left',
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
name: '用户年龄分析',
type: 'pie',
radius:'65%',
data: []
}]
};
charts.showLoading();
utils.ajax({
url:'users/usersController',
data:{"_method":"analyzeAge"},
success:function(data){
charts.hideLoading();
eval("data = "+data);
//为了得到名字
var names = [];
for(var i in data){
names.push(data[i]['name']);
}
//设置值
option.legend.data = names;
option.series[0].data = data;
charts.setOption(option);
}
});
});
//打开或是关闭菜单
function openOrClose(_dom){
var sub_menu = getNextSilbing(_dom);
var flag = _dom.querySelector(".pull-right");
//如果包含某些样式 则做一些事情
if(hasClass(sub_menu,"hidden")){
//去掉 关于隐藏的class
removeClass(sub_menu,"hidden");
//去掉菜单上的向左的箭头
removeClass(flag,"glyphicon-chevron-left");
//添加上向下的箭头
addClass(flag,"glyphicon-chevron-down");
}else{
//添加是 隐藏的class
addClass(sub_menu,"hidden");
//移除向下的箭头
removeClass(flag,"glyphicon-chevron-down");
//添加上向左的箭头
addClass(flag,"glyphicon-chevron-left");
}
//console.log();
}
//得到下一个兄弟节点
function getNextSilbing(_dom){
_dom = _dom.nextSibling;
while(_dom.nodeType!=1){
_dom = _dom.nextSibling;
}
return _dom;
}
//判断是否包含没有个class样式
function hasClass(_dom,_className){
if(_dom.className.indexOf(_className)!=-1){
return true;
}
return false;
}
//给指定的元素添加指定的样式
function addClass(_dom,_className){
_dom.className = _dom.className+" "+_className;
}
//给指定的元素移除指定的样式
function removeClass(_dom,_className){
_dom.className = _dom.className.replace(_className,"");
//将每次添加上的多余的空格去掉
_dom.className = _dom.className.replace(/\s+/ig," ");
}
</script>
</html>
UsersController.java
package com.huawei.controller;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.huawei.common.Page;
import com.huawei.po.Users;
import com.huawei.service.UsersService;
/**
* Servlet implementation class UsersController
*/
public class UsersController extends HttpServlet {
private static final long serialVersionUID = 1L;
private UsersService usersService = new UsersService();
/**
* @see HttpServlet#HttpServlet()
*/
public UsersController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/**
* 将 当前的doPost方法 当作中专站
*/
String _method = request.getParameter("_method");
if("findAll".equalsIgnoreCase(_method)){
this.findAll(request, response);
}else if("deleteById".equalsIgnoreCase(_method)){
this.deleteById(request, response);
}else if("register".equalsIgnoreCase(_method)){
this.register(request, response);
}else if("findById".equalsIgnoreCase(_method)){
this.findById(request, response);
}else if("update".equalsIgnoreCase(_method)){
this.update(request, response);
}else if("analyzeAge".equalsIgnoreCase(_method)){
this.analyzeAge(request, response);
}
}
private void analyzeAge(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{
// TODO Auto-generated method stub
response.getWriter().write(this.usersService.analyzeAge());
}
private void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
Users curr = (Users) request.getSession().getAttribute("admin");
if(ServletFileUpload.isMultipartContent(request)){
Map<String, FileItem> map = new HashMap<String, FileItem>();
//创建工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//得到JVM提供的缓存目录
ServletContext context = this.getServletContext();
File repository = (File)context.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
//创建ServletFileUpload
ServletFileUpload upload = new ServletFileUpload(factory);
//解析请求
try {
List<FileItem> items = upload.parseRequest(request);
//users = new Users();
for(FileItem item:items){
//form表单里面的每一个字段
map.put(item.getFieldName(), item);
}
Users u = new Users();
u.setId(Integer.parseInt(map.get("id").getString()));
u.setUsername(map.get("username").getString());
u.setPassword(map.get("password").getString());
u.setEmail(map.get("email").getString());
//u.setImage(Integer.parseInt(map.get("id").getString()));
u.setAge(Integer.parseInt(map.get("age").getString()));
//处理 前一步的数据没有顺序的问题
//for(String key:map.keySet()){
//FileItem item = map.get(key);
//if(item.isFormField()){
//没有顺序
//}else{
//得到跟路径
String path = context.getRealPath("/");
//得到附件目录
File attachment = new File(path,"attachment/"+map.get("username").getString());
//如果没有 就创建目录
System.out.println(attachment.getAbsolutePath());
System.out.println(attachment.exists());
if(!attachment.exists()){
attachment.mkdirs();
}
FileItem image = map.get("image");
File output = new File(attachment,System.currentTimeMillis()+"."+getSuffix(image.getName()));
image.write(output);
u.setImage("attachment/"+map.get("username").getString()+"/"+output.getName());
//System.currentTimeMillis()
this.usersService.update(u);
this.findAll(request, response);
//}
//}
//map.get("id");
} catch (Exception e) {
e.printStackTrace();
}
}
}
private String getSuffix(String name){
if(name!=null){
String[] suffixs = name.split("\\.");
if(suffixs.length>1){
return suffixs[suffixs.length-1];
}
}
return "";
}
private void findById(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
if(id!=null && id.trim()!=""){
Users users = this.usersService.findById(Integer.parseInt(id));
request.setAttribute("users", users);
request.getRequestDispatcher("/views/update.jsp").forward(request, response);
return ;
}
}
private void register(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Users users = null;
//判断是否有文件上传
if(ServletFileUpload.isMultipartContent(request)){
//创建工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//得到JVM提供的缓存目录
ServletContext context = this.getServletContext();
File repository = (File)context.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
//创建ServletFileUpload
ServletFileUpload upload = new ServletFileUpload(factory);
//解析请求
try {
List<FileItem> items = upload.parseRequest(request);
users = new Users();
for(FileItem item:items){
//form表单里面的每一个字段
}
//得到跟路径
String path = context.getRealPath("/");
//得到附件目录
File attachment = new File(path,"attachment");
//如果没有 就创建目录
if(!attachment.exists()){
attachment.mkdirs();
}
} catch (FileUploadException e) {
e.printStackTrace();
}
}
}
protected void deleteById(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id");
this.usersService.deleteById(Integer.parseInt(id));
response.sendRedirect("usersController?_method=findAll");
}
protected void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//List<Users> users = this.usersService.findAll();
//request.setAttribute("users", users);
String keyword = request.getParameter("keyword");
if(keyword==null){
keyword = "";
}
Page page = new Page();
String curr = request.getParameter("curr");
if(curr ==null || curr.trim().equals("")){
curr ="1";
}
page.getKeywords().put("username", keyword);
page.setCurr(Integer.parseInt(curr));
page = this.usersService.find4Page(page);
request.setAttribute("page", page);
request.getRequestDispatcher("/views/index.jsp").forward(request, response);
return;
}
}
UsersService.java
package com.huawei.service;
import java.util.List;
import com.huawei.common.Page;
import com.huawei.dao.UsersDAO;
import com.huawei.po.Users;
public class UsersService {
private UsersDAO usersDAO = new UsersDAO();
public List<Users> findAll(){
return this.usersDAO.findAll();
}
public void deleteById(Integer id) {
// TODO Auto-generated method stub
this.usersDAO.delete(id);
}
public Page find4Page(Page page){
return this.usersDAO.find4Page(page);
}
public Users findByUsername(String username) {
List<Users> users = this.usersDAO.findBy("username",username);
return users.size()>0?users.get(0):null;
}
public Users findById(Integer id){
return this.usersDAO.findById(id);
}
public void update(Users users){
this.usersDAO.update(users);
}
public String analyzeAge(){
return this.usersDAO.analyzeAge();
}
}
UsersDAO.java
package com.huawei.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import com.huawei.base.BaseDAO;
import com.huawei.common.CallBack;
import com.huawei.common.Page;
import com.huawei.po.Users;
import com.huawei.utils.BeanUtil;
public class UsersDAO extends BaseDAO<Users, Integer>{
@Override
public Page find4Page(Page page) {
//构建sql语句
String sql = "SELECT * FROM "+BeanUtil.getTableName(clazz)+" WHERE username LIKE ? LIMIT ?,?";
String count = "SELECT COUNT(1) FROM "+BeanUtil.getTableName(clazz)+" WHERE username LIKE ?";
//得到数据
List<Users> data = this.find(sql, new Object[]{"%"+page.getKeywords().get("username")+"%",(page.getCurr()-1)*page.getPageSize(),page.getPageSize()});
page.setRowCount(this.getCount(count,new Object[]{"%"+page.getKeywords().get("username")+"%"}));
page.setData(data);
return page;
}
public String analyzeAge(){
final StringBuilder sb = new StringBuilder("[");
String sql = "SELECT "+
"CASE "+
"WHEN age>0 && age<11 THEN '十岁以下' "+
"WHEN age>10 && age<21 THEN '11-20' "+
"WHEN age>20 && age<31 THEN '21-30' "+
"WHEN age>30 && age<41 THEN '31-40' "+
"WHEN age>40 && age<51 THEN '41-50' "+
"WHEN age>50 && age<61 THEN '51-60' "+
"WHEN age>60 && age<71 THEN '61-70' "+
"WHEN age>70 && age<81 THEN '71-80' "+
"WHEN age>80 && age<91 THEN '81-90' "+
"WHEN age>90 && age<101 THEN '91-100' "+
"WHEN age>100 THEN '一百岁以上' "+
"END as 'label',count(age) as 'value' "+
"FROM "+
"users "+
"GROUP BY label ";
this.executeQuery(sql, null, new CallBack() {
@Override
public void execute(ResultSet rs) throws SQLException {
//处理数据
//"{\"name\":\"\",\"value\":\"\"}"
while(rs.next()){
sb.append("{").append("\"name\":\"").append(rs.getString("label")+"\",\"value\":\"").append(rs.getInt("value")+"\"").append("},");
}
}
});
if(sb.length()>1){
sb.deleteCharAt(sb.length()-1);
}
sb.append("]");
return sb.toString();
}
}
Echarts在java中使用的更多相关文章
- Echarts 的 Java 封装类库 转自 https://my.oschina.net/flags/blog/316920
转自: https://my.oschina.net/flags/blog/316920 Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-ja ...
- java中的锁
java中有哪些锁 这个问题在我看了一遍<java并发编程>后尽然无法回答,说明自己对于锁的概念了解的不够.于是再次翻看了一下书里的内容,突然有点打开脑门的感觉.看来确实是要学习的最好方式 ...
- java中的字符串相关知识整理
字符串为什么这么重要 写了多年java的开发应该对String不陌生,但是我却越发觉得它陌生.每学一门编程语言就会与字符串这个关键词打不少交道.看来它真的很重要. 字符串就是一系列的字符组合的串,如果 ...
- Java中的Socket的用法
Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...
- java中Action层、Service层和Dao层的功能区分
Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. DAO只 ...
- Java中常用集合操作
一.Map 名值对存储的. 常用派生类HashMap类 添加: put(key,value)往集合里添加数据 删除: clear()删除所有 remove(key)清除单个,根据k来找 获取: siz ...
- java中的移位运算符:<<,>>,>>>总结
java中有三种移位运算符 << : 左移运算符,num << 1,相当于num乘以2 >> : 右移运算符,num >& ...
- 关于Java中进程和线程的详解
一.进程:是程序的一次动态执行,它对应着从代码加载,执行至执行完毕的一个完整的过程,是一个动态的实体,它有自己的生命 周期.它因创建而产生,因调度而运行,因等待资源或事件而被处于等待状态,因完成任务而 ...
- Java中的进程和线程
Java中的进程与线程 一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是 ...
随机推荐
- mfc 鼠标、键盘响应事件
一.基本目标 1.有一个基本的MFC程序,点击“关闭”则“关闭”这个程序,这点没什么好讲的,把自带的“取消”按钮,右键->属性的Caption改成“关闭”二字就可以了 2.鼠标在对话框中移动,则 ...
- Mac根据端口号查询进程
sudo lsof -i :8080
- HAL层编写规范
andriod HAL模块也有一个通用的入口地址,这个入口地址就是HAL_MODULE_INFO_SYM变量,通过它,我们可以访问到HAL模块中的所有想要外部访问到的方法. 在Linux系统中,后缀 ...
- tomcat深入学习
总体结构:https://www.jianshu.com/p/d74eef07487f servlet相关:https://www.ibm.com/developerworks/cn/java/j-l ...
- MEF学习总结(4)---Container层
通过AttributeedModelPrograming,我们可以声明暴露组件,依赖组件,发现组件,但是所有这些需要有一个触发点.即需要把所有这些组合在一起来协同工作,最终实现依赖注入.这就是Cont ...
- 利用OsCache实现后端轮循
轮循随处可见,最常用的是APP首页的一些促销活动,一两秒切换一张图片,让前端实现起来也不难.这里说下后端的轮循,实现原理是数组+缓存.将数组放入缓存,指定缓存失效时间,如果是在失效前从缓存中取数据,那 ...
- java web 程序---在线时长
思路:toLocalString()这个方法 <body> <% long t=session.getLastAccessedTime(); long t2=session.getC ...
- 项目中Map端内存占用的分析
最近在项目中开展重构活动,对Map端内存尽量要省一些,当前的系统中Map端内存最高占用大概3G左右(设置成2G时会导致Java Heap OOM).虽然个人觉得占用不算多,但是显然这样的结果想要试 ...
- AtomicHashMap
folly/AtomicHashmap.h folly/AtomicHashmap.h introduces a synchronized UnorderedAssociativeContainer ...
- 为什么要用webUI?
先看看身边有哪些软件已经在用webUI: 1.QQ查找窗口: 2.LOL主界面: 3.EC营销软件功能界面: 三个例子足以说明一切: 1.HTML是目前在用户体验.界面舒适度最先进的语言 2.HTML ...