背景

我在业余时间开发了一款自己的独立产品：升讯威在线客服与营销系统。这个系统的核心后台主程序，在最早期是完全没有页面，经常有朋友部署之后，一访问是 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. iOS通知使用小结

    最近在项目开发中遇到了一个问题,首页底部菜单和底部子菜单的互动.需求是这样的,编辑状态下点击红色删除按钮,首页底部菜单移除该项,子菜单中对应项选中状态设置为未选中,典型的一对多方式.刚开始的方案是想通 ...

  2. Linux发布ASPNetCore 项目 IIS 部署

    Linux系统发布 ASP.ENT Core 项目 Linux系统-CentOS7 ---基于虚拟机来安装 IP:192.168.1.97 安装教程 链接:https://pan.baidu.com/ ...

  3. dp线段树优化

    题目:Potted Flower Description The little cat takes over the management of a new park. There is a larg ...

  4. 探索 Kubernetes 持久化存储之 Rook Ceph 初窥门径

    在 Kubernetes 生态系统中,持久化存储是支撑业务应用稳定运行的基石,对于维护整个系统的健壮性至关重要.对于选择自主搭建 Kubernetes 集群的运维架构师来说,挑选合适的后端持久化存储解 ...

  5. Chirpy+Github

    相关网址 Chirpy 示例:网页上有官方教程,我写的肯定不全 Chirpy 示例仓库:这个就是包含官方教程的那个示例的仓库 Chirpy 模板仓库:直接 fork 这个仓库,快速搭建,没有多余的东西 ...

  6. OpenGL with GLFW GLAD and CMAKE

    0. 前言 首先,无论是在youtube还是网站上,许多OpenGL的环境配置都是在VS studio里配置的,个人比较喜欢使用VS code,以及Cmake. 下文给出了一个Cmake版本关于 GL ...

  7. 正态分布——“牛而B之”

    1 问题: 什么是正态分布,为什么这么出名和重要? 1.1 名气大 为什么叫"正态分布",也有地方叫"常态分布",这两个名字都不太直观,但如果我们各取一字变为& ...

  8. freeswitch的话单处理

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. 如果对cdr话单要求不高,可以直接使用fs的原始话单文件,使用脚本做一些简单的统计. 环境 CentOS 7.9 freeswitc ...

  9. LLM论文研读: GraphRAG的替代者LightRAG

    1. 背景 最近有一个很火的开源项目LightRAG,Github6.4K+星※,北邮和港大联合出品,是一款微软GraphRAG的优秀替代者,因此本qiang~得了空闲,读读论文.跑跑源码,遂有了这篇 ...

  10. 整理程序员面试中HR最常问的问题

    前言 不要慌,不要怕,要调适好自己的情绪,在介绍自己的基本情况时面无表情,说的头头是道,必要的时候包装下自己,不属于你的功能也能说是你的(难不成会去查?查也查不到).不过在面试前,建议可以找自己的朋友 ...