背景

我在业余时间开发了一款自己的独立产品：升讯威在线客服与营销系统。这个系统的核心后台主程序，在最早期是完全没有页面，经常有朋友部署之后，一访问是 404，以为没有部署成功。我一看这肯定不行啊，可后台主程序是一个 Web Api 项目，没有页面，怎么办呢？

1.x 的实现方式

通过 Web Api 接口，直接返回字符串

于是我通过 Web Api 接口，输出一些基本的状态信息，如下：

namespace Sheng.Linkup.Server.Controllers

{

    [ApiController]

    public class StatusController : ControllerBase

    {

       [HttpGet]

       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 社区的一款优秀开源产品。

钟意的话请给个赞支持一下吧，谢谢~

如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面的更多相关文章

  1. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  2. Vue在线客服系统【开源项目】

    1. 项目介绍 一个基于Vue2.0的在线客服系统. 技术栈包含:Vue.VueX.Vue Router.Element UI. 2. 功能介绍 项目包含了2个模块:客服端和访客端. 2.1 客服端功 ...

  3. .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布

    希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...

  4. CentOS 30分钟部署 .net core 在线客服系统

    前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程.期间有一些朋友希望能够给出 Linux 环境的安装部署指导,本文基于 CentOS 8.3 来安装部署.在本文中我 ...

  5. Linux + .net core 开发升讯威在线客服系统：首个经过实际验证的高性能版本

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程: .net core 和 WPF 开发升讯威在线客服系统:目录 https://blog.she ...

  6. 使用 WPF + Chrome 内核实现 在线客服系统 的复合客服端程序

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 免费使用 & 私有化部署免费下载:https://docs.sh ...

  7. .net core 和 WPF 开发升讯威在线客服系统：调用百度翻译接口实现实时自动翻译

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...

  8. .net core 和 WPF 开发升讯威在线客服系统：调用有道翻译接口实现实时自动翻译的方法

    业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...

  9. Linux 运行升讯威在线客服系统：同时支持 SQL Server 和 MySQL 的实现方法

    前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...

  10. 详解升讯威在线客服系统前端 JavaScript 脚本加密技术（1）

    我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 这段时间有几个技术小伙伴问了我一个有意思的问题:"你的前端脚本是 ...

随机推荐

  1. Codeforces Round 973 (Div. 2) D

    性质1:题目操作相当于将前面的数搬到了后面,将其视为柱状图,则是把前面柱的高度转移至后面柱的高度 性质2:最后移成的序列以单调不下降序列为最优,易证明当存在下降时,可通过操作使答案更优或不变差 性质3 ...

  2. vue的计算属性computed和监视属性waatch的区别

    共同的:都是用于监听数据变化的属性: 计算属性:必须有返回值return ,依赖其它属性值,其它属性值发生变化的时候就会重新计算 : 监视属性:每当数据变化的时候就会触发执行,watch有两个新值和旧 ...

  3. 通过maven动态配置spring boot配置文件

    一.引入maven插件的jar包 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifact ...

  4. Android 车载应用开发指南 - CAN Bus 协议详解

    ​ 在现代车载应用开发中,CAN(Controller Area Network)总线协议扮演着不可或缺的角色.作为一个汽车内部网络的标准协议,CAN Bus 已经成为了车载系统通信的基础.而在 An ...

  5. 使用 OpenFunction 在任何基础设施上运行 Serverless 工作负载

    作者: 霍秉杰:KubeSphere 可观测性.边缘计算和 Serverless 团队负责人,Fluent Operator 和 OpenFunction 项目的创始人,还是多个可观测性开源项目包括 ...

  6. python reqeusts 请求时headers指定content length后 请求不响应

    解释: HTTP头部中的Content-Length字段表示请求体的大小,用字节来表示.当你在使用Python的requests库进行请求时,如果你手动设置了Content-Length,但实际发送的 ...

  7. 工作中的技术总结 _Thymeleaf限制字符串的展示长度 _20210910

    工作中的技术总结 _Thymeleaf限制字符串的展示长度 _20210910 比较简单就这一行代码 #strings.abbreviate 应该是调用了 thymeleaf 的内置函数 这一个方法的 ...

  8. 《一篇就够系列》之HTTP详解，覆盖高频面试考点！

    一.写在开头 前几篇博文大概介绍了什么是网络编程,以及网络编程的实战作用,今日起,我们将针对里面涉及到的重要知识点,进行详细的梳理与学习! 在整个WEB编程中,有个应用层的协议是我们无法跳过的,那就是 ...

  9. 在react中使用阿里图标库

    参考教程:https://blog.csdn.net/qq_41977441/article/details/110352463 阿里图标库:https://www.iconfont.cn/ 成果展示 ...

  10. LLM应用实战: AI资讯的自动聚合及报告生成

    1.背景 花了整整两天时间,本qiang~开发了一个关于AI新闻资讯的自动聚合及报告生成工具. 本篇记录一下整体的框架和实现原理,并且本着它山之石可以攻玉,本qiang~开放了所有的源码,源码可见如下 ...