如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
背景我在业余时间开发了一款自己的独立产品：升讯威在线客服与营销系统。这个系统的核心后台主程序，在最早期是完全没有页面，经常有朋友部署之后，一访问是 404，以为没有部署成功。我一看这肯定不行啊，可后台主程序是一个 Web Api 项目，没有页面，怎么办呢？
1.x 的实现方式
通过 Web Api 接口，直接返回字符串
于是我通过 Web Api 接口，输出一些基本的状态信息，如下：
namespace Sheng.Linkup.Server.Controllers{ public class StatusController : ControllerBase { public string Get() { //在此输出基本状态信息 string msg = "升讯威在线客服与营销系统 （私有化部署版）"; msg += "https://kf.shengxunwei.com"; return msg; } }}
这种方式好歹解决了有和无的问题，一直坚持使用了很久。直到最近，因为一个客户的定制化需求，需要为主程序加入一特殊的状态页面和运维功能。
2.x 的实现方式
引入 Bootstrap 相关包，添加美观的，可交互的启动页面
先看看效果，是不是比 1.x 的效果好太多了呢。虽然是一个 Web Api 项目，但是也可以提供美观的页面。
实现方式
要在 Web Api 中添加页面，首先我们在 Bootstrip 的官网，下载它最新的开发包。然后将其添加到我们的项目文件中。
我们在项目根目录下，添加一个 html 文件夹，然后建立一个 Bootstrip 子文件夹，把官网下载到的文件全部放进去。
第二步我们在 Program.cs 中，引入新建的 wwwroot 目录，并开启它的静态文件访问功能。
String wwwrootFiles = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"); app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider(wwwrootFiles), RequestPath = "/" });最后，我们把开发好的状态显示页面，放在 html 文件夹中：
这里给出一个页面代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>客服系统状态</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; } h1 { color: #333; } .status-box { border: 1px solid #ccc; border-radius: 5px; padding: 20px; width: 300px; margin: 0 auto; background-color: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } </style></head><body> <h1>程序运行状态</h1> <div class="status-box"> <p>当前状态：<span id="status-text">正在运行</span></p> </div></body></html>按下 Visual Studio 的启动项目按钮，就能看到我们的默认启动页面了。
整个过程可以说非常的简单和方便。这样，即使是 Web Api 项目，你也可以为用户提供非常清晰美观的状态显示页面了。🎉
简介下这个 .net 开发的客服系统
100% 私有化部署在您的自有服务器，可全天候 7 × 24 小时挂机运行，不掉线不丢消息，欢迎实测。
https://kf.shengxunwei.com/
希望能够打造： 开放、开源、共享。努力打造 .net 社区的一款优秀开源产品。
钟意的话请给个赞支持一下吧，谢谢~
页:
[1]