第七节：框架搭建之页面静态化的剖析

一. 前言

抛砖引玉： 提到项目性能优化，大部分人第一时间就会想到缓存，针对“读多写少”的数据，可以放到缓存里，设置个过期时间，这样就不用每次都去数据库中查询了，减轻了数据库的压力，比如：商城项目的物品分类目录，不会经常变化，就可以放到缓存里。

详细分析：缓存的引入减轻了数据库的压力，但还是要访问服务器端的接口，需要执行接口中的代码，需要从缓存中读取数据，我们有没有办法直接访问一个页面，不再执行服务器端代码的业务呢？
答案是显然的，肯定有，那就是页面静态化。

1. 什么是页面静态化？

　　针对每个用户看到的页面显示的数据都是一样的情况，可以考虑把该页面直接生成一个html页面，存放到服务器的硬盘中，该html页面中是有数据的，其他用户直接访问该页面地址即可，这样既减轻了数据库的

压力，还不需要执行服务器端业务代码，显然是要比缓存好的。（通俗点说就是把原先要从数据库查询的数据写死到html中保存，用户直接通过服务器存放的地址进行访问）

案例：比如博客园，博主发表一篇文章，文章的内容对每个用户来说看到的内容都是一样的，这样的话新增文章的时候，内容固然要存到数据库，但同时将内容写到一个html页面里，保存到服务器硬盘上，博主更新博客的时候，同样要更新原先的html静态页面，这样其他用户访问的时候，直接通过这个页面的地址进行访问即可。

PS：分享一个博客地址，https://www.cnblogs.com/yaopengfei/p/9216229.html 可以看出来最后都是 xxx.html ,显然是静态页面。

2. 页面静态化的适用范围？

　　首先静态页的性能比缓存好，在条件适用的情况下，能用静态页就用静态页，静态页适用于相同地址所有人看到的内容都是一样的这种情况。

二. 案例剖析

　　模拟一个简单的blog案例，来说明页面静态化在实际项目中的使用，该案例分为列表页和详情页面，包含的功能有：增加信息、修改信息、查看详情功能，同时简单的设计一下数据库，数据库内容如下：表blogs，表信息分别是：主键、博客标题、博客内容、博客其它信息、添加时间。

核心剖析：

　　事先准备一个查看详情页面的模板，每次增加信息或者修改信息的时候，调用【页面渲染为html字符串的方法】和【写入文件的方法】，将最新的信息保存到html中，进而存到硬盘上，供用户直接访问。

渲染Html页面为字符串的方法如下，注意收藏哦：

 1        /// <summary>
 2         /// 将页面渲染成html字符串
 3         /// </summary>
 4         /// <param name="context">传入this.ControllerContext</param>
 5         /// <param name="viewPath">静态页面的模板路径</param>
 6         /// <param name="model">往模板中传入实体，进行赋值</param>
 7         /// <returns></returns>
 8         static string RenderViewToString(ControllerContext context, string viewPath, object model = null)
 9         {
10             ViewEngineResult viewEngineResult = ViewEngines.Engines.FindView(context, viewPath, null);
11             if (viewEngineResult == null)
12             {
13                 throw new FileNotFoundException("View" + viewPath + "cannot be found.");
14             }
15             var view = viewEngineResult.View;
16             context.Controller.ViewData.Model = model;
17             using (var sw = new StringWriter())
18             {
19                 var ctx = new ViewContext(context, view, context.Controller.ViewData, context.Controller.TempData, sw);
20                 view.Render(ctx, sw);
21                 return sw.ToString();
22             }
23         }

调用时候的代码：（修改与之类似）

三. 详细步骤和效果展示

1. 主页面展示列表、包含查看详情、增加信息、修改信息三个操作。

前端代码分享

View Code

服务端代码分享

View Code

效果展示

2. 增加信息，比如依次输入：66、.Net多线程、很神奇、敬请期待，点击增加按钮，插入数据库的同时，会生成一个以id来命名静态页面存放StaticHtml文件夹下。

后台代码分享：

 1         /// <summary>
 2         /// 增加博客
 3         /// </summary>
 4         /// <returns></returns>
 5         public ActionResult AddBlog(blogs b)
 6         {
 7             try
 8             {
 9                 //1.数据库保存操作
10                 b.addTime = DateTime.Now;
11                 db.blogs.Add(b);
12                 db.SaveChanges();
13 
14                 //2. 生成静态页面操作
15                 string myHtmls = RenderViewToString(this.ControllerContext, @"~/Views/Home/TempIndex.cshtml", b);
16                 System.IO.File.WriteAllText(Server.MapPath(@"~/StaticHtml/" + b.id + ".html"), myHtmls);
17                 return Content("ok");
18             }
19             catch (Exception)
20             {
21                 return Content("error");
22             }
23         }
24         /// <summary>
25         /// 获取所有数据
26         /// </summary>
27         /// <returns></returns>
28         public ActionResult InitInfor()
29         {
30             List<blogs> blogslist = db.blogs.OrderByDescending(u => u.addTime).ToList();
31             return Json(blogslist);
32         }

模板页面代码

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta charset="UTF-8">
10     <meta name="viewport" content="width=device-width" />
11     <title>详情页面</title>
12 </head>
13 <body>
14     <div>
15         <p>id：@Model.id</p>
16         <p>题目：@Model.blogTitle</p>
17         <p>内容：@Model.blogContent</p>
18         <p>其他：@Model.blogOther</p>
19         <p>时间：@Model.addTime</p>
20         
21     </div>
22 </body>
23 </html>

运行结果

3. 修改信息，修改数据库数据的同时，进行修改静态页面的内容。

代码分享

 1        /// <summary>
 2         /// 编辑博客
 3         /// </summary>
 4         /// <param name=""></param>
 5         /// <returns></returns>
 6         public ActionResult EditBlog(blogs b)
 7         {
 8             try
 9             {
10                 //1.数据库修改操作
11                 blogs b1 = db.blogs.Where(u => u.id == b.id).FirstOrDefault();
12                 if (b1 == null)
13                 {
14                     return Content("error");
15                 }
16                 b1.blogTitle = b.blogTitle;
17                 b1.blogContent = b.blogContent;
18                 b1.blogOther = b.blogOther;
19                 b1.addTime = DateTime.Now;
20                 db.SaveChanges();
21 
22                 //2. 生成静态页面操作
23                 string myHtmls = RenderViewToString(this.ControllerContext, @"~/Views/Home/TempIndex.cshtml", b1);
24                 System.IO.File.WriteAllText(Server.MapPath(@"~/StaticHtml/" + b.id + ".html"), myHtmls);
25 
26                 return Content("ok");
27             }
28             catch (Exception)
29             {
30                 return Content("error");
31             }
32         }

4. 查看详情，在没做页面静态化的时候，是这样处理的：获取该条数据的id→传到控制器的Action中→进行数据查询→页面渲染并显示页面。

而有了页面静态化后，直接通过地址打开页面即可。

作者 : Yaopengfei(姚鹏飞)
博客地址 : http://www.cnblogs.com/yaopengfei/

第七节：框架搭建之页面静态化的剖析

猜你喜欢