用MVC5+EF6+WebApi 作一個考試功能(五) 前端主題

時間 2019-12-01

標籤 mvc5+ef6+webapi mvc webapi 一個考試功能前端主題简体版

原文原文鏈接

內容概述

前面絮絮不休沒正事，到如今爲止也沒有開始寫代碼，不過在考慮下貌似這一節仍是開始不了。javascript

B/S架構開發有一個特色，就是用瀏覽器打開，不一樣的用戶羣體可能有不一樣的風格，不管是管理平臺仍是普通的網站，也是有本身的風格。css

咱們要作這樣一個管理系統，風格上沒有客戶來約束要作什麼樣，那簡單處理，咱們採用以下處理html

Bootstrap ：聽說是Twitter工程師以爲前端工做太麻煩而後就弄了一套框架出來，如今有三個版本並行，2.x，穩定版本是3.x.x，開發中的是v4.x，在2018年1月18號發佈了正式版。在接觸Bootstrap以前，作B/S架構的項目是很麻煩的，首先要找一個美工來設計一套頁面，而後還要考慮各類瀏覽器兼容，CSS，Js等等都要考慮。bootstrap首先頁面統一，另外是響應式的、移動端優先的一套框架。尤爲適合快速原型等。
JQuery：不少年曆史了，當年js很難寫，後來出了JQuery，解決了不少兼容性的問題，Dom操做也變得簡單得多。也是有多個版本，1.X兼容性比較寬，對IE支持較好。2.X和3.X拋棄了一些對就瀏覽器的兼容。因此用jQuery的時候要先肯定好客戶端須要的兼容性，而後在考慮那個版本。
Bootstrap Admin模板：網上有很多基於Bootstrap構建的Admin模板，就看各位在網上查找資源的本領了。Github是一個大寶庫，程序員必定要能利用起來。這裏極少一個MIT開源協議的，基於Bootstrap 3.x版本構建的一套Admin管理模板。地址：https://adminlte.io/ 。

如今用angular和vue作項目的也有很多，和咱這裏有比較大的區別，由於一個是SPA一個MPA，具體區別你們去查一下。若是本身構造的話，可能會用到各類插件，綜合來講，插件選擇要考慮成本、易用度、是否穩定版本、文檔是否齊全、是否有人維護（有了問題有人修復）。簡單看下本項目中用到兩個前端插件：前端

datatable：基於MIT開源協議，能夠隨便用。文檔比較完備，有官網論壇，除了開源版本還有擴展的商業受權版本。缺點：缺乏中文文檔。
jstree：基於MIT開源協議，能夠隨便用。文檔比較完備，有官網論壇，支持插件擴展，若是有能力能夠本身寫擴展。缺點：老外寫的，沒中文文檔。

開始幹活

在MVC項目中，定位到Views/Shared/_Layout.cshtml。打開layout，這個和webform中的模板頁相似，基於Razor語法構建的模板。vue

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

這是一個標準的Layout佈局頁，其中，@RenderBody()是模板頁中嵌套部分的標記（語言沒及格，不知道怎麼說了）。能夠理解爲把一個HTML頁面中挖出一個空來，共享外面的部分，個性化就是裏面的部分。當不一樣的頁面使用這個layout時候，風格比較統一，公共部分都在layout.cshtml這個頁面上。html5

若是是使用Bootstrap進行樣式佈局的話，Bootstrap提供了一套標準樣式java

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

把二者集合到一塊兒，獲得咱們想要的佈局頁：jquery

@{
    //模板頁也能夠再次嵌套模板頁
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>一個標準的Layout佈局頁</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    @* 給繼承頁面預留的樣式窗口 *@
    @RenderSection("styles", false)

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="content-wrapper">

        <section class="content">
            @*繼承頁面內容填充到這裏*@
            @RenderBody()
        </section>
    </div>

    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    @* 給繼承頁面預留的js腳本窗口 *@
    @RenderSection("scripts", false)
</body>
</html>

當添加視圖的時候，將「使用佈局頁」勾選，並選擇一個佈局頁，而後書寫代碼以下：程序員

@{

    //說明了視圖頁是嵌套在_Layout.cahtml這個佈局頁的
    Layout = "~/Views/Shared/_Layout.cshtml";

    //通常設置頁面的標題，顯示在瀏覽器tab簽上
    ViewBag.Title = "MVC佈局頁的實例";
}

@*
    在這裏設置視圖頁個性化的樣式內容，好比引入一些css文件，編寫一些class等等
    會渲染到於佈局頁中的 @RenderSection("styles", false)的位置
*@
@section styles{
    <style type="text/css">
        h2 {
            font-size: 48px;
        }
    </style>
}

<div class="well">
    <h2>Hello Trump!</h2>
</div>

@*
    在這裏編寫視圖頁的頁面腳本或引入一些js文件。
    內容會渲染到佈局頁中 @RenderSection("scripts", false)的位置
*@

@section scripts{
    <script type="text/javascript">
        $(function () {
            alert("hello ivanka!");
        })
    </script>
}