背景

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

    题目描述 给出 \(N\) 个正整数 \(a[1..N]\) ,再给出一个正整数 \(k\) ,现在可以进行如下操作:每次选择一个大于 \(k\) 的正整数 \(a[i]\) ,将 \(a[i]\) ...

  2. 华为GaussDB数据库（单机版）在ARM环境下的安装指南

    一.软件版本 机器配置:8核16G,CPU: Huawei Kunpeng 920 2.9GHz 操作系统:EulerOS 2.8 64bit with ARM 数据库版本:GaussDB Kerne ...

  3. laravel框架接口

    下面是增删改查的接口,在使用过程中按自己需求对代码进行更改 控制器代码 <?php namespace App\Http\Controllers; use App\Models\Fang; us ...

  4. 一个SMMU内存访问异常的问题

    最近碰到棘手的问题: 以太网进行iperf测试时, 发生了SMMU (System Memory Management Unit)访问异常导致内核崩溃. 原本只是内部测试发现, 后面在试验车上也概率性 ...

  5. KSM的使用

    使能KSM KSM只会处理通过madvise系统调用显式指定的用户进程地址空间,因此用户程序想使用这个功能就必须在分配地址空间时显式地调用madvise(addr,length,MADV_MERGEA ...

  6. 从浏览器输入url到回车发生了什么

    1. 域名解析,即把域名解析成以为唯一的ip ps:ip是每个网站的对应的一个key,域名是为了语义化,方便使用而设计的 : ps:第一次域名解析需要花费较长的时间,所以一般第一次解析就会把DNS解析 ...

  7. 4. 说一下ts

    TypeScript 是微软基于JavaScript开发的开源编程语言,是js的超集,扩展了js语法并添加了静态类型,可以兼容js所有的运行平台: js 是弱类型语言 , ts 是强类型语言 : js ...

  8. python实现链表（单链，双链）

    # code:utf-8 # createTime:2023.8.17 # -------------------------------------------------------------- ...

  9. Java新特性-stream流

    Java 8 API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据. Stream 使用一种类似用 SQL 语句从数据库查询数据的直观方式来提供一种对 Java 集合运算和表达 ...

  10. 解决ValueError: day is out of range for month的问题

    Bug类型 ValueError: day is out of range for month 解决思路 值错误:天超出了月的范围 解决方法 开始日期要早于结束日期 还有一种是 2月最大为28天,如果 ...