博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用MVC5+EF6+WebApi 做一个考试功能(五) 前端主题
阅读量:5037 次
发布时间:2019-06-12

本文共 2377 字,大约阅读时间需要 7 分钟。

内容概述

 

 

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

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管理模板 。地址: 。

现在用angular和vue做项目的也有不少,和咱这里有比较大的区别,因为一个是SPA一个MPA,具体区别大家去查一下。如果自己构造的话,可能会用到各种插件,综合来说,插件选择要考虑成本、易用度、是否稳定版本、文档是否齐全、是否有人维护(有了问题有人修复)。简单看下本项目中用到两个前端插件:

  • datatable:基于MIT开源协议,可以随便用。文档比较完备,有官网论坛,除了开源版本还有扩展的商业授权版本。缺点:缺少中文文档。
  • jstree:基于MIT开源协议,可以随便用。文档比较完备,有官网论坛,支持插件扩展,如果有能力可以自己写扩展。缺点:老外写的, 没中文文档。

开始干活

在MVC项目中,定位到Views/Shared/_Layout.cshtml。打开layout,这个和webform中的模板页类似,基于Razor语法构建的模板。

    @ViewBag.Title    
@RenderBody()

这是一个标准的Layout布局页,其中,@RenderBody()是模板页中嵌套部分的标记(语言没及格,不知道怎么说了)。可以理解为把一个HTML页面中挖出一个空来,共享外面的部分,个性化就是里面的部分。当不同的页面使用这个layout时候,风格比较统一,公共部分都在layout.cshtml这个页面上。

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

      
Bootstrap 101 Template

你好,世界!

 

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

@{    //模板页也可以再次嵌套模板页    Layout = null;}    
一个标准的Layout布局页
@* 给继承页面预留的样式窗口 *@ @RenderSection("styles", false)
@*继承页面内容填充到这里*@ @RenderBody()
@* 给继承页面预留的js脚本窗口 *@ @RenderSection("scripts", false)

 

当添加视图的时候,将“使用布局页”勾选,并选择一个布局页,然后书写代码如下:

@{    //说明了视图页是嵌套在_Layout.cahtml这个布局页的    Layout = "~/Views/Shared/_Layout.cshtml";    //一般设置页面的标题,显示在浏览器tab签上    ViewBag.Title = "MVC布局页的实例";}@*    在这里设置视图页个性化的样式内容,比如引入一些css文件,编写一些class等等    会渲染到于布局页中的 @RenderSection("styles", false)的位置*@@section styles{    }

Hello Trump!

@* 在这里编写视图页的页面脚本或引入一些js文件。 内容会渲染到布局页中 @RenderSection("scripts", false)的位置*@@section scripts{ }

 

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

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

转载于:https://www.cnblogs.com/buyixiaohan/p/8325822.html

你可能感兴趣的文章
一个Java程序员应该掌握的10项技能
查看>>
c#英文大小写快捷键
查看>>
tpframe免费开源框架又一重大更新
查看>>
一.go语言 struct json相互转换
查看>>
什么是架构设计
查看>>
程序员学习能力提升三要素
查看>>
PHP 微信错误状态返回码说明
查看>>
【4.1】Python中的序列分类
查看>>
ubuntu 移动文件
查看>>
Easy Mock
查看>>
看看 Delphi XE2 为 VCL 提供的 14 种样式
查看>>
Python内置函数(29)——help
查看>>
机器学习系列-tensorflow-01-急切执行API
查看>>
SqlServer 遍历修改字段长度
查看>>
Eclipse快捷键:同时显示两个一模一样的代码窗口
查看>>
《架构之美》阅读笔记05
查看>>
《大道至简》读后感——论沟通的重要性
查看>>
JDBC基础篇(MYSQL)——使用statement执行DQL语句(select)
查看>>
关于React中props与state的一知半解
查看>>
java中Hashtable和HashMap的区别(转)
查看>>