背景

我在业余时间开发了一款自己的独立产品：升讯威在线客服与营销系统。这个系统的核心后台主程序，在最早期是完全没有页面，经常有朋友部署之后，一访问是 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. Epic Games Launcher 提示 应用程序无法正常启动（0xc000007b）

    事件起因: 在给某同事安装Epic Games Launcher报错, 提示 应用程序无法正常启动(0xc000007b) 解决办法: 用DirectX修复工具扫一下,修复一下C++插件,一般是由于 ...

  2. 揭秘！尤雨溪成立的VoidZero如何改变前端世界

    前言 Vue和Vite之父尤雨溪宣布成立公司 VoidZero,目前已经融资3200万.这篇文章欧阳将带你了解VoidZero是如何改变javascript的世界! 关注公众号:[前端欧阳],给自己一 ...

  3. 高通BoostFramework概要介绍

    概要介绍 为了保证Android系统的顺滑体验,各个厂家都有针对性的对Android系统做了性能优化的方案.高通也基于AOSP开发了一套性能优化框架,本文叫做BoostFramework.本文将介绍下 ...

  4. 在Java程序中监听mysql的binlog

    目录 1.背景 2.mysql-binlog-connector-java简介 3.准备工作 1.验证数据库是否开启binlog 2.开启数据库的binlog 3.创建具有REPLICATION SL ...

  5. 用 KubeKey 快速离线部署 K8s 与 KubeSphere

    作者:尹珉,KubeSphere Ambassador,KubeSphere 社区用户委员会杭州站站长 一.KubeKey 介绍 KubeKey(以下简称 KK) 是一个用于部署 Kubernetes ...

  6. Ubuntu 22.04 LTS 在线/离线安装 Docker

    Docker 安装方式 时间:2024-10 准备环境 root@ubuntu2204:~# hostnamectl Static hostname: ubuntu2204 Icon name: co ...

  7. 怎样替换 rhel 7.3 的 yum

    [背景] 想在自己安装的虚拟机上搭建一套 git+gitee+vscode 环境(欢迎看下期文章),发现python版本是2.7,这个版本太老 想通过yum进行更新,结果提示需要注册,索性就查查替换y ...

  8. 关于 IntelliJ IDEA 2024 安装使用 (附加激活码、补丁,亲测有效)

    第一步:下载 IDEA 安装包 访问 IDEA 官网,下载 IDEA 2024.1.4 版本的安装包,下载链接如下 : idea官方链接 也可以在这里点击下载idea https://pan.quar ...

  9. Flink RetractStream示例及UDF函数实现

    介绍 今天在Flink 1.7.2版本上跑一个Flink SQL 示例 RetractPvUvSQL,报 Exception in thread "main" org.apache ...

  10. 大便系统无法使用source的原因及解决方法

    debian中shell脚本无法使用source的原因及解决方法 现象: shell脚本中source aaa.sh时提示 source: not found 原因: ls -l `which sh` ...