用MVC5+EF6+WebApi 做一个测验成果(五) 前端主题

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

B/S架构开发有一个特点，就是用浏览器打开，差此外用户群体可能有差此外气势派头，岂论是打点平台还是普通的网站，也是有本身的气势派头。

我们要做这样一个打点系统，气势派头上没有客户来约束要做什么样，那简单措置惩罚惩罚，我们给与如下措置惩罚惩罚

此刻用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=http://www.mamicode.com/"@Url.Content("~/Content/Site.css")" rel=http://www.mamicode.com/"stylesheet" type=http://www.mamicode.com/"text/css" /> <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type=http://www.mamicode.com/"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">  <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet">    </head> <body> <h1>你好，世界！</h1>  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html>

把两者调集到一起，得到我们想要的构造页：

秒客网

用MVC5+EF6+WebApi 做一个测验成果(五) 前端主题

相关文章