WebApi+Bootstrap+KnockoutJs打造单页面程序
19 浏览量
2020-11-22
03:15:57
上传
评论
收藏 179KB PDF 举报
WebApi+Bootstrap+KnockoutJs打造单页面程序打造单页面程序
一、前言一、前言
在前一个专题快速介绍了KnockoutJs相关知识点，也写了一些简单例子，希望通过这些例子大家可以快速入门KnockoutJs。为了让大家可以清楚地看到KnockoutJs在实际项目中的应用，本
专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序。这种模式也是现在大多数公司实际项目中用到的。
二、二、SPA（单页面）好处（单页面）好处
在介绍具体的实现之前，我觉得有必要详细介绍了SPA。SPA，即Single Page Web Application的缩写，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。
单页面程序的好处在于：
更好的用户体验，让用户在Web app感受native app的速度和流畅。
分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起。
减轻服务器压力，服务器只用生成数据就可以，不用管展示逻辑和页面逻辑，增加服务器吞吐量。MVC中Razor语法写的前端是需要服务器完成页面的合成再输出的。
同一套后端程序，可以不用修改直接用于Web界面、手机、平板等多种客户端。
当然单页面程序除了上面列出的优点外，也有其不足：
不利于SEO。这点如果是做管理系统的话是没影响的
初次加载时间相对增加。因为所有的JS、CSS资源会在第一次加载完成，从而使得后面的页面流畅。对于这点可以使用Asp.net MVC中Bundle来进行文件绑定。关于Bundle的详细使用参考文
章：//www.jb51.net/article/84329.htm、//www.jb51.net/article/84329.htm和//www.jb51.net/article/82174.htm。
导航不可用。如果一定要导航需自行实现前进、后退。对于这点，可以自行实现前进、后退功能来弥补。其实现在手机端网页就是这么干的，现在还要上面导航的。对于一些企业后台管理系
统，也可以这么做。
对开发人员技能水平、开发成本高。对于这点，也不是事，程序员嘛就需要不断学习来充电，好在一些前端框架都非常好上手。
三、使用三、使用Asp.net MVC+WebAPI+Bootstrap+KnockoutJS实现实现SPA
前面详细介绍了SPA的优缺点，接下来，就让我们使用Asp.net MVC+WebAPI+BS+KO来实现一个单页面程序，从而体验下SPA流畅和对原始Asp.net MVC +Razor做出来的页面进行效果对
比。
1.使用VS2013创建Asp.net Web应用程序工程，勾选MVC和WebAPI类库。具体见下图：
2. 创建对应的仓储和模型。这里演示的是一个简单任务管理系统。具体的模型和仓储代码如下：
任务实体类实现：
public enum TaskState
{
Active = 1,
Completed =2
}
/// <summary>
/// 任务实体
/// </summary>
public class Task
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public DateTime CreationTime { get; set; }
public DateTime FinishTime { get; set; }
public string Owner { get; set; }
public TaskState State { get; set; }
public Task()
{
CreationTime = DateTime.Parse(DateTime.Now.ToLongDateString());
State = TaskState.Active;
}
}
任务仓储类实现：
/// <summary>
/// 这里仓储直接使用示例数据作为演示，真实项目中需要从数据库中动态加载
/// </summary>
public class TaskRepository
{
#region Static Filed
评论0
最新资源