【前端框架系列】浅谈当前基于bootstrap框架的几种主流前端框架

发布时间：2020-12-17 20:51:49 所属栏目：安全来源：网络整理

导读：一? 概述当新开发一个项目或产品时，技术选型是一个不可缺少的环节，在软件架构中有着举足轻重的作用，可以这么说，技术选型的好坏直接影响项目或产品的成败优劣，因此，在进行软件架构时，一定要想好技术选型。传统的前后端耦合在一起的模式，基本上不能满

一? 概述

当新开发一个项目或产品时，技术选型是一个不可缺少的环节，在软件架构中有着举足轻重的作用，可以这么说，技术选型的好坏直接影响项目或产品的成败优劣，因此，在进行软件架构时，一定要想好技术选型。传统的前后端耦合在一起的模式，基本上不能满足当前环境下的大数据，高并发等需求，如.NET 的WebForm模式逐渐被MVC取代，MVC逐渐取代WebForm，其中有两点重要的原因：MVC前后端彻底分离和MVC通用性比较好。从架构的架构，我们把软件架构抽象为两部分，即前端和后端，两者通过接口来传递数据。但在本篇文章中，不谈架构，只是与大家分享几种基于Bootsrap的比较主流的前端框架。

二当前几种比较流行的前端框架

（一）AdminLTE

?1.参考网址：https://adminlte.io/

?2.开源

?3.Bootstrap3框架

?4.轻量级

?5.完全响应式，支持定制化

?6.github:https://github.com/almasaeed2010/AdminLTE

（二）ACE框架

?1.参考网址：http://ace.jeka.by/

?2.Twitter bootstrap3开发的后台模板

?3.开源

?4.github:https://github.com/bopoda/ace

（三）clearmin

?1.参考网址：http://cm.paomedia.com/

?2.基于Bootstrap3框架开发的

?3.github:https://github.com/paomedia/clearmin

（四）h-ui

?1.参考网址：http://www.h-ui.net/H-ui.admin.shtml

?2.H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言，完全免费，简单灵活，兼容性好让您快速搭建中小型网站后台

(五)Echats

1.参考网址：http://echarts.baidu.com/

2.由百度团队开发，完全用js开发，功能强大，各种类型报表

三 Echarts架构图

如上虽然给大家推荐了五套前端框架，但笔者推荐AdminLTE+H-ui+Echarts组合模式，这也是我目前在软件架构中运用到的组合模式。

Echarts框架

四? 用Echarts做个报表统计

（一）先看看DEMO效果图

动态效果

?1.支持多种动报表切换，如Line,Bar等；

?2.具有隐藏/显示按钮；

?3.具有数据表格功能；

?4.具有图标保存功能。

（二）前端Code

1.定义一个div容器

1 <div id="EchartsBarDemo" style="width:100%;height:600px"></div>

2.初始化

1 var myChart = echarts.init(document.getElementById(‘EchartsBarDemo‘));

3.设置option

 1 var option = {
 2                 title: {
 3                     text: ‘XXX高三6月学生总分统计‘, 4                     subtext: ‘虚拟数据‘
 5                 }, 6                 tooltip: {
 7                     trigger: ‘axis‘
 8                 }, 9                 legend: {
10                     data: [‘文科‘,‘理科‘]
11                 },12                 toolbox: {
13                     show: true,14                     feature: {
15                         mark: { show: true },16                         dataView: { show: true,readOnly: false },17                         magicType: { show: true,type: [‘line‘,‘bar‘] },18                         restore: { show: true },19                         saveAsImage: { show: true }
20                     }
21                 },22                 calculable: true,23                 xAxis: [
24                     {
25                         type: ‘category‘,26                         data: [‘300以下‘,‘300-400‘,‘400-500‘,‘500-550‘,‘550-600‘,‘600-650‘,‘650以上‘]
27                     }
28                 ],29                 yAxis: [
30                     {
31                         type: ‘value‘
32                     }
33                 ],34                 series: [
35                     {
36                         name: ‘理科‘,37                         type: ‘bar‘,38                         data: LiKeScores,39                         markPoint: {
40                             data: [
41                                 { type: ‘max‘,name: ‘最大值‘ },42                                 { type: ‘min‘,name: ‘最小值‘ }
43                             ]
44                         },45                         markLine: {
46                             data: [
47                                 { type: ‘average‘,name: ‘平均值‘ }
48                             ]
49                         }
50                     },51                     {
52                         name: ‘文科‘,53                         type: ‘bar‘,54                         data: WenKeScores,55                         markPoint: {//标注点
56                             data: [
57                                 { type: ‘max‘,58                                 { type: ‘min‘,name: ‘最小值‘ }
59                             ]
60                         },61                         markLine: { //水平线
62                             data: [
63                                 { type: ‘average‘,name: ‘平均值‘ } //水平线表示平均值
64                             ]
65                         }
66                     }
67                 ]
68             }

4.将option添加给myCharts实例

1 myChart.setOption(option);
2 // 设置加载等待隐藏
3 myChart.hideLoading();

（三）.NET

 1 public class DefaultController : Controller
 2     {
 3         // GET: Default
 4         public ActionResult BarEcharts()
 5         {
 6             return View();
 7         }
 8 
 9         public ContentResult GetScoresJson()
10         {
11             //这里只是模拟数据，正式环境需要到db中查询
12             return Content("{LiKe:[10,20,30,100,300,80,60],WenKe:[15,10,400,60]}");
13         }
14     }

（四）完整源码

1.前端

  1 <html>
  2 <head>
  3     <meta name="viewport" content="width=device-width" />
  4     <script src="~/Scripts/jquery-3.3.1.js"></script>
  5     <script src="~/Scripts/echarts.js"></script>
  6     <title>BarEcharts</title>
  7 </head>
  8 <body>
  9     <div id="EchartsBarDemo" style="width:100%;height:600px"></div>
 10 </body>
 11 </html>
 12 
 13 <script>
 14     //初始化
 15     var myChart = echarts.init(document.getElementById(‘EchartsBarDemo‘));
 16     //定义全局变量
 17     //var LiKeScores = [10,60];
 18     //var WenKeScores = [15,60];
 19     var LiKeScores = [];
 20     var WenKeScores = [];
 21     var jsonURL = "/Default/GetScoresJson";
 22     $.ajax({
 23         type: ‘get‘, 24         url: jsonURL, 25         dataType: "text", 26         success: function (rspData) {
 27             console.log(rspData);
 28             var str = eval(‘(‘ + rspData + ‘)‘);
 29             LiKeScores =str.LiKe;
 30             WenKeScores = str.WenKe;
 31             var option = {
 32                 title: {
 33                     text: ‘XXX高三6月学生总分统计‘, 34                     subtext: ‘虚拟数据‘
 35                 }, 36                 tooltip: {
 37                     trigger: ‘axis‘
 38                 }, 39                 legend: {
 40                     data: [‘文科‘,‘理科‘]
 41                 }, 42                 toolbox: {
 43                     show: true, 44                     feature: {
 45                         mark: { show: true }, 46                         dataView: { show: true, 47                         magicType: { show: true, 48                         restore: { show: true }, 49                         saveAsImage: { show: true }
 50                     }
 51                 }, 52                 calculable: true, 53                 xAxis: [
 54                     {
 55                         type: ‘category‘, 56                         data: [‘300以下‘,‘650以上‘]
 57                     }
 58                 ], 59                 yAxis: [
 60                     {
 61                         type: ‘value‘
 62                     }
 63                 ], 64                 series: [
 65                     {
 66                         name: ‘理科‘, 67                         type: ‘bar‘, 68                         data: LiKeScores, 69                         markPoint: {
 70                             data: [
 71                                 { type: ‘max‘, 72                                 { type: ‘min‘,name: ‘最小值‘ }
 73                             ]
 74                         }, 75                         markLine: {
 76                             data: [
 77                                 { type: ‘average‘,name: ‘平均值‘ }
 78                             ]
 79                         }
 80                     }, 81                     {
 82                         name: ‘文科‘, 83                         type: ‘bar‘, 84                         data: WenKeScores, 85                         markPoint: {//标注点
 86                             data: [
 87                                 { type: ‘max‘, 88                                 { type: ‘min‘,name: ‘最小值‘ }
 89                             ]
 90                         }, 91                         markLine: { //水平线
 92                             data: [
 93                                 { type: ‘average‘,name: ‘平均值‘ } //水平线表示平均值
 94                             ]
 95                         }
 96                     }
 97                 ]
 98             }
 99             myChart.setOption(option);
100             // 设置加载等待隐藏
101             myChart.hideLoading();
102         },103         error: function (data) {
104             console.log(data);
105             LiKeScores = data.LiKe;
106             WenKeScores = data.WenKe;
107             //Loading(false);
108         }
109     });
110 </script>

View Code

2.后端

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace EchartDemo.Controllers
 8 {
 9     public class DefaultController : Controller
10     {
11         // GET: Default
12         public ActionResult BarEcharts()
13         {
14             return View();
15         }
16 
17         public ContentResult GetScoresJson()
18         {
19             //这里只是模拟数据，正式环境需要到db中查询
20             return Content("{LiKe:[10,60]}");
21         }
22     }
23 }

View Code

五? ?版权区

感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
博主网址：http://www.cnblogs.com/wangjiming/。
极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：[email?protected]。
可以转载该博客，但必须注名博客来源。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!