使⽤ABP打造SAAS系统（2）——前端框架选择
⼀、流⾏框架⽐较
作者⽤过的前端框架不少，曾经还在⼀个项⽬中同时使⽤两套框架控件（年少⽆知、效率特慢），所以可供选择的前端框架有不少：easyui：
优点：⾮常成熟的框架，基于iframe可以进⾏多线程操作
缺点：由于采⽤iframe，不优化情况下效率是个问题，同时iframe导致对SEO的⽀持不是很好，⾃带风格不是很符合现在⼈的⼝味，⾃⼰定义风格有点浪费时间，顺便提供下本⼈⾃⼰修改过的风格
ligerui：与easyui差不多，国⼈⾃⼰写的产品，有些控件的使⽤⽐easyui更舒服
ace（bootstrap）：风格⽐较不错的⼀套bootstrap框架
metronic（bootstrap）：现在最⽕的⼀套bootstrap框架，不过风格个⼈不是很喜欢
beyond admin（bootstrap ）：个⼈⽐较喜欢这个范，⽽且提供的控件也⾜够使⽤，决定就使⽤它了，⽽且它本⾝也是把⼤部分bootstrap常见的控件融合了起来，⽐如：jquery.datatables、fonts等
react native：独⽴开发成本⽐较⼤
vuejs：独⽴开发成本⽐较⼤
⼆、下载对应的beyond admin源码
解压可以看到对应的⽬录
打开index.html 可以看到对应的页⾯⽰例，具体的控件⽰例可以⾃⼰细看：
三、将前端框架融合进ABP
拷贝assets到项⽬的Scripts中
更改 MyProject.Web/Views/Shared/_Layout.cshtml 页⾯相关源码
1 @using Abp.Timing
2 @*
3 IMPORTANT NOTES FROM ASP.NET BOILERPLATE:
4
5 This _Layout.cshtml is not used actually. It's left here if you want to add some classic style (MPA)
6 pages to your application.
7
8 See App/Main/views/layout/layout.cshtml for Angular application's layout page.
9 *@
10 @{
11 SetAntiForgeryCookie();
12 }
13 <!DOCTYPE html>
14 <html lang="en">
15 <head>
16 <meta charset="utf-8">
17 <meta http-equiv="X-UA-Compatible" content="IE=edge">
18 <meta name="viewport" content="width=device-width, initial-scale=1">
19 <meta name="description" content="">
20 <meta name="author" content="">
21
22 <title>MyProject</title>
23
24 <link rel="shortcut icon" href="~/favicon.ico">
25
26
27 <link href="~/Content/flags/famfamfam-flags.css" rel="stylesheet" />
28 <link href="~/Scripts/sweetalert/sweet-alert.css" rel="stylesheet" />
29
30 <script type="text/javascript">
31//This is used to get the application's root path from javascript. It's useful if you're running application in a virtual directory under IIS. 32var abp = abp || {}; abp.appPath = '@ApplicationPath';
33 </script>
34
35 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
36 <!--[if lt IE 9]>
37 <script src="@Url.Content("~/Scripts/others/html5shiv.js")"></script>
38 <script src="@Url.Content("~/Scripts/others/respond.min.js")"></script>
39 <![endif]-->
40
41 <script src="~/Abp/Framework/scripts/utils/ie10fix.js"></script>
42
43 <script src="~/Scripts/modernizr-2.8.3.js"></script>
44
45 <script src="~/Scripts/json2.min.js"></script>
46 <script src="~/Scripts/jquery-2.1.4.min.js"></script>
47 <script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
48 <script src="~/Scripts/jquery.blockUI.js"></script>
49 <script src="~/Scripts/toastr.min.js"></script>
50 <script src="~/Scripts/others/spinjs/spin.js"></script>
51 <script src="~/Scripts/others/spinjs/jquery.spin.js"></script>
52 <script src="~/Scripts/sweetalert/sweet-alert.min.js"></script>
53
54 <script src="~/Content/Site.js"></script>
55
56 <script src="~/Scripts/bootstrap.min.js"></script>
57
58
59
60 <script src="~/Abp/Framework/scripts/abp.js"></script>
61 <script src="~/Abp/Framework/scripts/libs/abp.jquery.js"></script>
jquery框架定义62 <script src="~/Abp/Framework/scripts/astr.js"></script>
63 <script src="~/Abp/Framework/scripts/libs/abp.blockUI.js"></script>
64 <script src="~/Abp/Framework/scripts/libs/abp.spin.js"></script>
65 <script src="~/Abp/Framework/scripts/libs/abp.sweet-alert.js"></script>
66
67 <script>
68 abp.localization.defaultSourceName = '@LocalizationSourceName';
69 </script>
70
71 <!-- Dynamic scripts of ABP system (They are created on runtime and can not be bundled) -->
72 <script src="~/api/AbpServiceProxies/GetAll?v=@(Clock.Now.Ticks)"></script>
73 <script src="~/AbpScripts/GetScripts?v=@(Clock.Now.Ticks)" type="text/javascript"></script>
74
75 <!--前端框架使⽤相关引⽤-->
76 <!--Basic Styles-->
77 <link href="~/Scripts/assets/css/bootstrap.min.css" rel="stylesheet" />
78 <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
79 <link href="~/Scripts/assets/css/font-awesome.min.css" rel="stylesheet" />
80 <link href="~/Scripts/assets/css/weather-icons.min.css" rel="stylesheet" />
81 <!--Beyond styles-->
82 <link href="~/Scripts/assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
83 <link href="~/Scripts/assets/css/demo.min.css" rel="stylesheet" />
84 <link href="~/Scripts/assets/css/typicons.min.css" rel="stylesheet" />
85 <link href="~/Scripts/assets/css/animate.min.css" rel="stylesheet" />
86 <link id="skin-link" href="" rel="stylesheet" type="text/css" />
87
88
89
90 @*公有CSS，提供给全局使⽤*@
91 <link href="~/Content/base.css" rel="stylesheet" />
92
93 </head>
94 <body>
95 <!-- Navbar -->
96 <div class="navbar">
97 <div class="navbar-inner">
98 <div class="navbar-container">
99 <!-- Navbar Barnd -->
100 <div class="navbar-header pull-left">
101
102 </div>
103 <!-- /Navbar Barnd -->
104 <!-- Sidebar Collapse -->
105 <div class="sidebar-collapse" id="sidebar-collapse">
106 <i class="collapse-icon fa fa-bars"></i>
107 </div>
108 <!-- /Sidebar Collapse -->
109 <!-- Account Area and Settings --->
110 <div class="navbar-header pull-right">
111 <div class="navbar-account">
112 <ul class="account-area">
113 <li>
114 <a class=" dropdown-toggle" data-toggle="dropdown" title="Help" href="#"> 115 <i class="icon fa fa-warning"></i>
116 </a>
117 <!--Notification Dropdown-->
118 <ul class="pull-right dropdown-menu dropdown-arrow dropdown-notifications"> 119 <li>
120 <a href="#">
121 <div class="clearfix">
122 <div class="notification-icon">
123 <i class="fa fa-phone bg-themeprimary white"></i>
124 </div>
125 <div class="notification-body">
126 <span class="title">Skype meeting with Patty</span>
127 <span class="description">01:00 pm</span>
128 </div>
129 <div class="notification-extra">
130 <i class="fa fa-clock-o themeprimary"></i>
131 <span class="description">office</span>
132 </div>
133 </div>
134 </a>
135 </li>
136 <li>
137 <a href="#">
138 <div class="clearfix">
139 <div class="notification-icon">
140 <i class="fa fa-check bg-darkorange white"></i>
141 </div>
142 <div class="notification-body">
143 <span class="title">Uncharted break</span>
144 <span class="description">03:30 pm - 05:15 pm</span>
145 </div>
146 <div class="notification-extra">
147 <i class="fa fa-clock-o darkorange"></i>
148 </div>
149 </div>
150 </a>
151 </li>
152 <li>
153 <a href="#">
154 <div class="clearfix">
155 <div class="notification-icon">
156 <i class="fa fa-gift bg-warning white"></i>
157 </div>
158 <div class="notification-body">
159 <span class="title">Kate birthday party</span>
160 <span class="description">08:30 pm</span>
161 </div>
162 <div class="notification-extra">
163 <i class="fa fa-calendar warning"></i>
164 <i class="fa fa-clock-o warning"></i>
165 <span class="description">at home</span>
166 </div>
167 </div>
168 </a>
169 </li>
170 <li>
171 <a href="#">
172 <div class="clearfix">
173 <div class="notification-icon">
174 <i class="fa fa-glass bg-success white"></i>
175 </div>
176 <div class="notification-body">
177 <span class="title">Dinner with friends</span>
178 <span class="description">10:30 pm</span>
179 </div>
180 </div>
181 </a>
182 </li>
183 <li class="dropdown-footer ">
184 <span>
185 Today, March 28
186 </span>
187 <span class="pull-right">
18810°c
189 <i class="wi wi-cloudy"></i>
190 </span>
191 </li>
192 </ul>
193 <!--/Notification Dropdown-->
194 </li>
195 <li>
196 <a class="wave in dropdown-toggle" data-toggle="dropdown" title="Help" href="#">
197 <i class="icon fa fa-envelope"></i>
198 <span class="badge">3</span>
199 </a>
200 <!--Messages Dropdown-->
201 <ul class="pull-right dropdown-menu dropdown-arrow dropdown-messages">
202 <li>
203 <a href="#">
204 <img src="~/Scripts/assets/img/avatars/divyia.jpg"class="message-avatar" alt="Divyia Austin">
205 <div class="message">
206 <span class="message-sender">
207 Divyia Austin
208 </span>
209 <span class="message-time">
2102 minutes ago
211 </span>
212 <span class="message-subject">
213 Here's the recipe for apple pie
214 </span>
215 <span class="message-body">
216 to identify the sending application when the senders image is shown for the main icon
217 </span>
218 </div>
219 </a>
220 </li>
221 <li>
222 <a href="#">
223 <img src="~/Scripts/assets/img/avatars/bing.png"class="message-avatar" alt="Microsoft Bing">
224 <div class="message">
225 <span class="message-sender">
226 Bing
227 </span>
228 <span class="message-time">
229 Yesterday
230 </span>
231 <span class="message-subject">
232 Bing Newsletter: The January Issue
233 </span>
234 <span class="message-body">
235 Discover new music just in time for the Grammy® Awards.
236 </span>
237 </div>
238 </a>
239 </li>
240 <li>
241 <a href="#">
242 <img src="~/Scripts/assets/img/avatars/adam-jansen.jpg"class="message-avatar" alt="Divyia Austin"> 243 <div class="message">
244 <span class="message-sender">
245 Nicolas
246 </span>
247 <span class="message-time">
248 Friday, September 22
249 </span>
250 <span class="message-subject">
251 New 4K Cameras
252 </span>
253 <span class="message-body">
254 The 4K revolution has come over the horizon and is reaching the general populous
255 </span>
256 </div>
257 </a>
258 </li>
259 </ul>
260 <!--/Messages Dropdown-->
261 </li>
262
263 <li>
264 <a class="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="#">
265 <i class="icon fa fa-tasks"></i>
266 <span class="badge">4</span>
267 </a>
268 <!--Tasks Dropdown-->
269 <ul class="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
270 <li class="dropdown-header bordered-darkorange">
271 <i class="fa fa-tasks"></i>
2724 Tasks In Progress
273 </li>
274 <li>
275 <a href="#">
276 <div class="clearfix">
277 <span class="pull-left">Account Creation</span>
278 <span class="pull-right">65%</span>
279 </div>
280
281 <div class="progress progress-xs">
282 <div class="progress-bar"></div>
283 </div>
284 </a>
285 </li>
286 <li>
287 <a href="#">
288 <div class="clearfix">
289 <span class="pull-left">Profile Data</span>
290 <span class="pull-right">35%</span>
291 </div>
292
293 <div class="progress progress-xs">
294 <div class="progress-bar progress-bar-success"></div>
295 </div>
296 </a>
297 </li>
298 <li>
299 <a href="#">
300 <div class="clearfix">
301 <span class="pull-left">Updating Resume</span>
302 <span class="pull-right">75%</span>
303 </div>
304
305 <div class="progress progress-xs">
306 <div class="progress-bar progress-bar-darkorange"></div>
307 </div>
308 </a>
309 </li>
310 <li>
311 <a href="#">
312 <div class="clearfix">
313 <span class="pull-left">Adding Contacts</span>
314 <span class="pull-right">10%</span>
315 </div>
316
317 <div class="progress progress-xs">
318 <div class="progress-bar progress-bar-warning"></div>
319 </div>
320 </a>
321 </li>
322 <li class="dropdown-footer">
323 <a href="#">
324 See All Tasks
325 </a>
326 <button class="btn btn-xs btn-default shiny darkorange icon-only pull-right"><i class="fa fa-check"></i></button>
327 </li>
328 </ul>
329 <!--/Tasks Dropdown-->
330 </li>
331 <li>
332 <a class="login-area dropdown-toggle" data-toggle="dropdown">
333 <div class="avatar" title="View your public profile">
334 <img src="~/Scripts/assets/img/avatars/adam-jansen.jpg">
335 </div>
336 <section>
337 <h2><span class="profile"><span>系统管理员</span></span></h2>
338 </section>
339 </a>
340 <!--Login Area Dropdown-->
341 <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
342 <li class="username"><a>系统管理员</a></li>
343 <li class="email"><a>David.Stevenson@live</a></li>
344 <!--Avatar Area-->
345 <li>
346 <div class="avatar-area">
347 <img src="~/Scripts/assets/img/avatars/adam-jansen.jpg"class="avatar">
348 <span class="caption">Change Photo</span>
349 </div>
350 </li>
351 <!--Avatar Area-->
352 <li class="edit">
353 <a href="profile.html"class="pull-left">Profile</a>
354 <a href="#"class="pull-right">Setting</a>
355 </li>
356 <!--Theme Selector Area-->
357 <li class="theme-area">
358 <ul class="colorpicker" id="skin-changer">
359 <li><a class="colorpick-btn" href="#" rel="assets/css/skins/blue.min.css"></a></li> 360 <li><a class="colorpick-btn" href="#" rel="assets/css/skins/azure.min.css"></a></li> 361 <li><a class="colorpick-btn" href="#" rel="assets/css/skins/teal.min.css"></a></li> 362 <li><a class="colorpick-btn" href="#" rel="assets/css/skins/green.min.css"></a></li>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论