大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
一、流行框架比较
作者用过的前端框架不少，曾经还在一个项目中同时使用两套框架控件（年少无知、效率特慢），所以可供选择的前端框架有不少：
- easyui：
-
- 优点：非常成熟的框架，基于iframe可以进行多线程操作
- 缺点：由于采用iframe，不优化情况下效率是个问题，同时iframe导致对SEO的支持不是很好，自带风格不是很符合现在人的口味，自己定义风格有点浪费时间，顺便提供下本人自己修改过的风格
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095251768.png)
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](http://javaforall.cn/wp-content/themes/justnews/themer/assets/images/lazy.png)
- ligerui：与easyui差不多，国人自己写的产品，有些控件的使用比easyui更舒服
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095252250.png)
- ace（bootstrap）：风格比较不错的一套bootstrap框架
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095252252.png)
- metronic（bootstrap）：现在最火的一套bootstrap框架，不过风格个人不是很喜欢
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095252229.png)
- beyond admin（bootstrap ）：个人比较喜欢这个范，而且提供的控件也足够使用，决定就使用它了，而且它本身也是把大部分bootstrap常见的控件融合了起来，比如：jquery.datatables、fonts等
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095252205.png)
- react native：独立开发成本比较大
- vuejs：独立开发成本比较大
二、下载对应的beyond admin源码
- 解压可以看到对应的目录
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095252213.png)
- 打开index.html 可以看到对应的页面示例，具体的控件示例可以自己细看：
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095252225.png)
三、将前端框架融合进ABP
- 拷贝assets到项目的Scripts中
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095251693.png)
- 更改 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. 32 var 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> 62 <script src="~/Abp/Framework/scripts/libs/abp.toastr.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"> 188 10°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"> 210 2 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.com 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> 272 4 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 style="width:65%" 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 style="width:35%" 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 style="width:75%" 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 style="width:10%" 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.com</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="#" style="background-color:#5DB2FF;" rel="assets/css/skins/blue.min.css"></a></li> 360 <li><a class="colorpick-btn" href="#" style="background-color:#2dc3e8;" rel="assets/css/skins/azure.min.css"></a></li> 361 <li><a class="colorpick-btn" href="#" style="background-color:#03B3B2;" rel="assets/css/skins/teal.min.css"></a></li> 362 <li><a class="colorpick-btn" href="#" style="background-color:#53a93f;" rel="assets/css/skins/green.min.css"></a></li> 363 <li><a class="colorpick-btn" href="#" style="background-color:#FF8F32;" rel="assets/css/skins/orange.min.css"></a></li> 364 <li><a class="colorpick-btn" href="#" style="background-color:#cc324b;" rel="assets/css/skins/pink.min.css"></a></li> 365 <li><a class="colorpick-btn" href="#" style="background-color:#AC193D;" rel="assets/css/skins/darkred.min.css"></a></li> 366 <li><a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="assets/css/skins/purple.min.css"></a></li> 367 <li><a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="assets/css/skins/darkblue.min.css"></a></li> 368 <li><a class="colorpick-btn" href="#" style="background-color:#585858;" rel="assets/css/skins/gray.min.css"></a></li> 369 <li><a class="colorpick-btn" href="#" style="background-color:#474544;" rel="assets/css/skins/black.min.css"></a></li> 370 <li><a class="colorpick-btn" href="#" style="background-color:#001940;" rel="assets/css/skins/deepblue.min.css"></a></li> 371 </ul> 372 </li> 373 <!--/Theme Selector Area--> 374 <li class="dropdown-footer"> 375 <a href="login.html"> 376 Sign out 377 </a> 378 </li> 379 </ul> 380 <!--/Login Area Dropdown--> 381 </li> 382 <!-- /Account Area --> 383 <!--Note: notice that setting div must start right after account area list. 384 no space must be between these elements--> 385 <!-- Settings --> 386 </ul><div class="setting"> 387 <a id="btn-setting" title="Setting" href="#"> 388 <i class="icon glyphicon glyphicon-cog"></i> 389 </a> 390 </div><div class="setting-container"> 391 <label> 392 <input type="checkbox" id="checkbox_fixednavbar"> 393 <span class="text">Fixed Navbar</span> 394 </label> 395 <label> 396 <input type="checkbox" id="checkbox_fixedsidebar"> 397 <span class="text">Fixed SideBar</span> 398 </label> 399 <label> 400 <input type="checkbox" id="checkbox_fixedbreadcrumbs"> 401 <span class="text">Fixed BreadCrumbs</span> 402 </label> 403 <label> 404 <input type="checkbox" id="checkbox_fixedheader"> 405 <span class="text">Fixed Header</span> 406 </label> 407 </div> 408 <!-- Settings --> 409 </div> 410 </div> 411 <!-- /Account Area and Settings --> 412 </div> 413 </div> 414 </div> 415 416 <div class="main-container container-fluid"> 417 <!-- Page Container --> 418 <div class="page-container"> 419 <!-- Page Sidebar --> 420 <div class="page-sidebar" id="sidebar"> 421 <!-- Page Sidebar Header--> 422 <div class="sidebar-header-wrapper"> 423 <input type="text" class="searchinput" /> 424 <i class="searchicon fa fa-search"></i> 425 <div class="searchhelper">Search Reports, Charts, Emails or Notifications</div> 426 </div> 427 <!-- /Page Sidebar Header --> 428 <!-- Sidebar Menu --> 429 <ul class="nav sidebar-menu"> 430 <!--主页 <li class="active">--> 431 <li> 432 <a href="index.html"> 433 <i class="menu-icon glyphicon glyphicon-home"></i> 434 <span class="menu-text"> 主页 </span> 435 </a> 436 </li> 437 <!--系统管理--> 438 <li> 439 <a href="#" class="menu-dropdown"> 440 <i class="menu-icon fa fa-table"></i> 441 <span class="menu-text"> 配置维护 </span> 442 443 <i class="menu-expand"></i> 444 </a> 445 446 <ul class="submenu"> 447 <li> 448 <a href="/System/Users"> 449 <i class="fa fa-users" style="width:16px;"></i> <span class="menu-text">用户管理</span> 450 </a> 451 </li> 452 <li> 453 <a href="/System/Role"> 454 <i class="fa fa-user" style="width:16px;"></i> <span class="menu-text">角色管理</span> 455 </a> 456 </li> 457 <li> 458 <a href="/System/Menus"> 459 <i class="fa fa-tags" style="width:16px;"></i> <span class="menu-text">菜单管理</span> 460 </a> 461 </li> 462 <li> 463 <a href="/System/Module"> 464 <i class="fa fa-cogs" style="width:16px;"></i> <span class="menu-text">模块管理</span> 465 </a> 466 </li> 467 <li> 468 <a href="tables-data.html"> 469 <i class="fa fa-cubes" style="width:16px;"></i> <span class="menu-text">权限管理</span> 470 </a> 471 </li> 472 </ul> 473 </li> 474 475 <!--日志管理--> 476 <li> 477 <a href="#" class="menu-dropdown"> 478 <i class="menu-icon fa fa-table"></i> 479 <span class="menu-text"> 日志管理 </span> 480 481 <i class="menu-expand"></i> 482 </a> 483 484 <ul class="submenu"> 485 <li> 486 <a href="/Log/LogDB"> 487 <i class="fa fa-users" style="width:16px;"></i> <span class="menu-text">数据库日志</span> 488 </a> 489 </li> 490 <li> 491 <a href="/System/Role"> 492 <i class="fa fa-user" style="width:16px;"></i> <span class="menu-text">文本日志</span> 493 </a> 494 </li> 495 496 </ul> 497 </li> 498 <li> 499 <a href="#" class="menu-dropdown"> 500 <i class="menu-icon fa fa-table"></i> 501 <span class="menu-text"> 测试例子 </span> 502 503 <i class="menu-expand"></i> 504 </a> 505 506 <ul class="submenu"> 507 <li> 508 <a href="#" class="menu-dropdown"> 509 <span class="menu-text"> 510 <i class="menu-icon fa fa-rocket"></i>表格例子 511 </span> 512 <i class="menu-expand"></i> 513 </a> 514 515 <ul class="submenu"> 516 <li> 517 <a href="/Demo/DataTable_1"> 518 <i class="menu-icon fa fa-rocket"></i> 519 <span class="menu-text">表格例子1</span> 520 </a> 521 </li> 522 <li> 523 <a href="glyph-icons.html"> 524 <i class="menu-icon glyphicon glyphicon-stats"></i> 525 <span class="menu-text">表格例子2</span> 526 </a> 527 </li> 528 <li> 529 <a href="typicon.html"> 530 <i class="menu-icon typcn typcn-location-outline"></i> 531 <span class="menu-text">表格例子3</span> 532 </a> 533 </li> 534 </ul> 535 </li> 536 537 </ul> 538 </li> 539 <!--UI Elements--> 540 <li> 541 <a href="#" class="menu-dropdown"> 542 <i class="menu-icon fa fa-desktop"></i> 543 <span class="menu-text"> 菜单示例 </span> 544 <i class="menu-expand"></i> 545 </a> 546 547 <ul class="submenu"> 548 <li> 549 <a href="elements.html"> 550 <span class="menu-text">菜单1</span> 551 </a> 552 </li> 553 <li> 554 <a href="#" class="menu-dropdown"> 555 <span class="menu-text"> 556 菜单2 557 </span> 558 <i class="menu-expand"></i> 559 </a> 560 561 <ul class="submenu"> 562 <li> 563 <a href="font-awesome.html"> 564 <i class="menu-icon fa fa-rocket"></i> 565 <span class="menu-text">菜单2-1</span> 566 </a> 567 </li> 568 <li> 569 <a href="glyph-icons.html"> 570 <i class="menu-icon glyphicon glyphicon-stats"></i> 571 <span class="menu-text">菜单2-2</span> 572 </a> 573 </li> 574 <li> 575 <a href="typicon.html"> 576 <i class="menu-icon typcn typcn-location-outline"></i> 577 <span class="menu-text">菜单2-3</span> 578 </a> 579 </li> 580 </ul> 581 </li> 582 <li> 583 <a href="tabs.html"> 584 <span class="menu-text">菜单3</span> 585 </a> 586 </li> 587 <li> 588 <a href="alerts.html"> 589 <span class="menu-text">菜单4</span> 590 </a> 591 </li> 592 593 </ul> 594 </li> 595 596 </ul> 597 <!-- /Sidebar Menu --> 598 </div> 599 <!-- /Page Sidebar --> 600 <!-- Page Content --> 601 <div class="page-content"> 602 <!-- Page Breadcrumb --> 603 <div class="page-breadcrumbs"> 604 <ul class="breadcrumb"> 605 <li> 606 <i class="fa fa-home"></i> 607 <a href="#">系统管理</a> 608 </li> 609 <li class="active">角色管理</li> 610 </ul> 611 </div> 612 <!-- /Page Breadcrumb --> 613 <!-- Page Header --> 614 @*<div class="page-header position-relative"> 615 <div class="header-title"> 616 <h1> 617 Dashboard 618 </h1> 619 </div> 620 <div class="header-buttons"> 621 <a class="sidebar-toggler" href="#"> 622 <i class="fa fa-arrows-h"></i> 623 </a> 624 <a class="refresh" id="refresh-toggler" href=""> 625 <i class="glyphicon glyphicon-refresh"></i> 626 </a> 627 <a class="fullscreen" id="fullscreen-toggler" href="#"> 628 <i class="glyphicon glyphicon-fullscreen"></i> 629 </a> 630 </div> 631 </div>*@ 632 <!-- /Page Header --> 633 <div class="page-body"> 634 @RenderBody() 635 </div> 636 </div> 637 638 <!-- /Page Content --> 639 </div> 640 <!-- /Page Container --> 641 <!-- Main Container --> 642 643 </div> 644 645 646 </body> 647 </html> 648 649 <!--Basic Scripts--> 650 @*<script src="~/Scripts/assets/js/jquery-2.0.3.min.js"></script> 651 <script src="~/Scripts/assets/js/bootstrap.min.js"></script>*@ 652 653 <!--Skin Script: Place this script in head to load scripts for skins and rtl support--> 654 <script src="~/Scripts/assets/js/skins.min.js"></script> 655 656 <!--Beyond Scripts--> 657 <script src="~/Scripts/assets/js/beyond.min.js"></script> 658 659 660 <!--Page Related Scripts--> 661 <!--Sparkline Charts Needed Scripts--> 662 <script src="~/Scripts/assets/js/charts/sparkline/jquery.sparkline.js"></script> 663 <script src="~/Scripts/assets/js/charts/sparkline/sparkline-init.js"></script> 664 665 <!--Easy Pie Charts Needed Scripts--> 666 <script src="~/Scripts/assets/js/charts/easypiechart/jquery.easypiechart.js"></script> 667 <script src="~/Scripts/assets/js/charts/easypiechart/easypiechart-init.js"></script> 668 669 <!--Page Related Scripts--> 670 <script src="~/Scripts/assets/js/datatable/jquery.dataTables.js"></script> 671 <script src="~/Scripts/assets/js/datatable/ZeroClipboard.js"></script> 672 <script src="~/Scripts/assets/js/datatable/dataTables.tableTools.min.js"></script> 673 <script src="~/Scripts/assets/js/datatable/dataTables.bootstrap.js"></script> 674 @*<script src="~/Scripts/assets/js/datatable/datatables-init.js"></script>*@ - 运行程序还是看到以下页面
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095251727.png)
- 我们猜测主页面路由指向问题，找到HomeController控制器，看到以下代码
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095251725.png)
- 更改代码，并添加相关页面
![使用ABP打造SAAS系统（2）——前端框架选择[通俗易懂]](https://img-blog.csdnimg.cn/20200319095251728.png)
- 重新运行程序可以看到以下页面，证明我们迁移成功了
四、示例：
我们添加一个控制器（DemoContorller），专门用来放相关测试demo
- 示例1：datatable
我们直接采用 jquery.datatables来作为我们的首选表格控件，此控件虽然自带属性和事件比较少，可扩展性比较好
- 示例2：fonts
暂略。
- 示例3：弹出框
弹出框在modal和layer中考虑了许久，从易用性和使用效果讲，最后决定使用 layer来作为弹出框使用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/191730.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
