用MVC5+EF6+WebApi 做一个考试功能(五) 前端主题

内容概述

前面絮絮叨叨没正事，到现在为止也没有开始写代码，不过在考虑下貌似这一节还是开始不了。

B/S架构开发有一个特点，就是用浏览器打开，不同的用户群体可能有不同的风格，不论是管理平台还是普通的网站，也是有自己的风格。

我们要做这样一个管理系统，风格上没有客户来约束要做什么样，那简单处理，我们采用如下处理

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语法构建的模板。

<!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这个页面上。

如果是使用Bootstrap进行样式布局的话，Bootstrap提供了一套标准样式

<!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>

把两者集合到一起，得到我们想要的布局页：

@{

    //模板页也可以再次嵌套模板页

    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>

}

基本上布局页的使用就这些，网上各种说明有一大堆，真正用的时候碰到问题可以查找一下，没有多少问题。

最后看一下我们设计好的后台首页，下一节将处理一下EF公共类的问题。