ASP .Net Core Api生成靜態頁面的思路和方法
在正常網站開發中，我們經常會用到靜態頁面，尤其是針對SEO開發的網站，關于靜態頁面或者靜態的網站的優勢，想必不用贅述了，
- 能夠提高訪問速度，增加用戶體驗，
- 有利于SEO搜索引擎收錄（有人說沒有用了，不過目前來看，還是有用的）
- 靜態網頁有利于網站的穩定性（避免程式出現問題，頁面無法訪問）
- ASP .Net Core Api生成靜態頁面的思路和方法
- 創建靜態模板頁(html頁面)
- 創建基于I/O操作的幫助類，（讀寫html檔案）
- 獲取資料，生成靜態頁面，(讀取模板，替換資料，輸出html頁面)
- 附加
創建靜態模板頁(html頁面)
在Api專案檔案下創建一個Template檔案（名稱隨意），在檔案下創建一個html頁面模板，在html檔案中，在我們需要插入資料的位置，采用一個特定字串來代替該資料，使用該模板的時候，用Replace方法,將資料進行替換，模板如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
// {title} 就可以用從表單或者資料庫獲取來的Title來代替
<title> {title} </title>
<meta name="Generator" content="vue.netcore">
<meta id="viewport" name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="Author" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
body {
position: relative;
height: 100%;
max-width: 880px;
margin: 0 auto;
padding: 15px;
}
.title h2 {
text-align: center;
font-weight: 700;
color: #4d4f53;
letter-spacing: 1px;
line-height: 54px;
padding-bottom: 8px;
margin-bottom: 13px;
border-bottom: 1px dashed #ccc;
}
.title .source {
text-align: center;
}
.title .date,
.title .author,
.title .count {
letter-spacing: 1px;
margin-left: 50px;
font-size: 14px;
color: #8c8b8b;
}
#count {
font-size: 14px;
color: #8c8b8b;
}
.tm-content {
margin-top: 40px;
font-size: 18px;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div >
<h2>
{title}
</h2>
<div >
<span >來源：vol-core</span>
<span >發布時間：{date}</span>
<span >瀏覽次數：</span><span id="count">0</span>
</div>
</div>
<div >
{content}
</div>
</body>
</html>
<script>
var count = 0;
window.onload = function () {
var params = window.location.href.split("?");
if (!params || params.length <= 1) {
return;
}
params[1].split("&").forEach(function (item) {
var query = item.split("=");
if (query.length > 0 && query[0] == "c") {
document.getElementById("count").innerText = (~~query[1]) + 1;
}
})
}
</script>
創建基于I/O操作的幫助類，（讀寫html檔案）
關于幫助類，沒有什么過多解釋，就是I/O讀寫檔案，直接上代碼，
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
namespace Utilities
{
public class FileHelper
{
public static string ReadFile(string fullName)
{
// Encoding code = Encoding.GetEncoding(); //Encoding.GetEncoding("gb2312");
//判斷路徑是否正確，如果獲取格式不正確，先用Replace做修改
//string temp = fullName.MapPath().ReplacePath();
string str = "";
if (!File.Exists(fullName))
{
return str;
}
StreamReader sr = null;
try
{
sr = new StreamReader(fullName);
str = sr.ReadToEnd(); // 讀取檔案
}
catch { }
sr?.Close();
sr?.Dispose();
return str;
}
/// <summary>
///
/// </summary>
/// <param name="path">路徑 </param>
/// <param name="fileName">檔案名</param>
/// <param name="content">寫入的內容</param>
/// <param name="appendToLast">是否將內容添加到未尾,默認不添加</param>
public static void WriteFile(string path, string fileName, string content, bool appendToLast = false)
{
//判斷路徑是否正確，如果獲取格式不正確，先用Replace做修改
//path = path.ReplacePath();
//fileName = fileName.ReplacePath();
if (!Directory.Exists(path))//如果不存在就創建file檔案夾
Directory.CreateDirectory(path);
using (FileStream stream = File.Open(path + fileName, FileMode.OpenOrCreate, FileAccess.Write))
{
byte[] by = Encoding.Default.GetBytes(content);
if (appendToLast)
{
stream.Position = stream.Length;
}
else
{
stream.SetLength(0);
}
stream.Write(by, 0, by.Length);
}
}
}
}
獲取資料，生成靜態頁面，(讀取模板，替換資料，輸出html頁面)
- 單頁面生成靜態，通過form表單獲取資料，也可根據id從資料庫中獲取
- Controller中
/// <summary>
/// 生成靜態頁面
/// </summary>
/// <param name="news"></param>
/// <returns></returns>
[HttpPost, Route("createPage")]
[ApiActionPermission("App_News", ActionPermissionOptions.Add)]
public async Task<IActionResult> CreatePage([FromBody]App_News news)
{
return Json(await Service.CreatePage(news));
}
- Server中
//WebResponseContent 是自定義的回傳值類 在文末有代碼
public async Task<WebResponseContent> CreatePage(App_News news)
{
WebResponseContent webResponseContent = WebResponseContent.Instance;
if (news == null)
{
return webResponseContent.Error("未獲取到資料");
}
if (!await repository.ExistsAsync(x => x.Id == news.Id))
{
return webResponseContent.Error("請求的資料已發生變化,請重繪頁面重新提交");
}
string template = FileHelper.ReadFile(@"Template\\news.html");
if (string.IsNullOrEmpty(template))
{
return webResponseContent.Error("未獲取到頁面的模板,請確認模板是否存在");
}
string filePath;
string fileName;
string urlPath;
if (!string.IsNullOrEmpty(news.DetailUrl) && news.DetailUrl.IndexOf("/") != -1 && news.DetailUrl.Split(".").Length == 2)
{
var file = news.DetailUrl.Split("/");
fileName = file[file.Length - 1];
filePath = news.DetailUrl.Replace(fileName, "");
urlPath = filePath;
}
else
{
string day = DateTime.Now.ToString("yyyyMMdd");
fileName = DateTime.Now.ToString("HHmmsss") + new Random().Next(1000, 9999) + ".html";
urlPath = $"static/news/{day}/";
filePath = urlPath.MapPath(true);
}
string content = template.Replace("{title}", news.Title).Replace("{date}", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")).Replace("{content}", news.Content);
FileHelper.WriteFile((filePath.IndexOf("wwwroot") == -1 ? "wwwroot/" : "") + filePath, fileName, content);
//更新資料庫的url
news.DetailUrl = $"{urlPath}{fileName}";
repository.Update(news, x => new { news.DetailUrl, news.Content }, true);
return webResponseContent.OK("面發布成功,可預覽看效果", new { url = news.DetailUrl });
}
- 多頁面批量生成
- 獲取資料
??在前端通過復選框選中多行資料，通過異步傳遞"id拼接字串"（如：1，2，3），
??后臺接受字串，對字串Split(",");獲取到int[]陣列，
??通過for回圈，創建靜態頁面，
*生成靜態頁面
??在遍歷int[]陣列中，和生成單頁面方法一樣，
附加
- WebResponseContent 自定義類
using VOL.Core.Enums;
using VOL.Core.Extensions;
namespace VOL.Core.Utilities
{
public class WebResponseContent
{
public WebResponseContent()
{
}
public WebResponseContent(bool status)
{
this.Status = status;
}
public bool Status { get; set; }
public string Code { get; set; }
public string Message { get; set; }
//public string Message { get; set; }
public object Data { get; set; }
public WebResponseContent OK()
{
this.Status = true;
return this;
}
public static WebResponseContent Instance
{
get { return new WebResponseContent(); }
}
public WebResponseContent OK(string message = null,object data=https://www.cnblogs.com/Z7TS/p/null)
{
this.Status = true;
this.Message = message;
this.Data = data;
return this;
}
public WebResponseContent OK(ResponseType responseType)
{
return Set(responseType, true);
}
public WebResponseContent Error(string message = null)
{
this.Status = false;
this.Message = message;
return this;
}
public WebResponseContent Error(ResponseType responseType)
{
return Set(responseType, false);
}
public WebResponseContent Set(ResponseType responseType)
{
bool? b = null;
return this.Set(responseType, b);
}
public WebResponseContent Set(ResponseType responseType, bool? status)
{
return this.Set(responseType, null, status);
}
public WebResponseContent Set(ResponseType responseType, string msg)
{
bool? b = null;
return this.Set(responseType, msg, b);
}
public WebResponseContent Set(ResponseType responseType, string msg, bool? status)
{
if (status != null)
{
this.Status = (bool)status;
}
this.Code = ((int)responseType).ToString();
if (!string.IsNullOrEmpty(msg))
{
Message = msg;
return this;
}
Message = responseType.GetMsg();
return this;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/125552.html
標籤：其他
上一篇：html5+css3的神奇搭配