如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
背景
我在业余时间开发了一款自己的独立产品:升讯威在线客服与营销系统。这个系统的核心后台主程序,在最早期是完全没有页面,经常有朋友部署之后,一访问是 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 小时挂机运行,不掉线不丢消息,欢迎实测。


希望能够打造: 开放、开源、共享。努力打造 .net 社区的一款优秀开源产品。
钟意的话请给个赞支持一下吧,谢谢~
如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面的更多相关文章
- 使用 WPF+ ASP.NET MVC 开发 在线客服系统 (一)
近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...
- Vue在线客服系统【开源项目】
1. 项目介绍 一个基于Vue2.0的在线客服系统. 技术栈包含:Vue.VueX.Vue Router.Element UI. 2. 功能介绍 项目包含了2个模块:客服端和访客端. 2.1 客服端功 ...
- .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布
希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...
- CentOS 30分钟部署 .net core 在线客服系统
前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程.期间有一些朋友希望能够给出 Linux 环境的安装部署指导,本文基于 CentOS 8.3 来安装部署.在本文中我 ...
- Linux + .net core 开发升讯威在线客服系统:首个经过实际验证的高性能版本
业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程: .net core 和 WPF 开发升讯威在线客服系统:目录 https://blog.she ...
- 使用 WPF + Chrome 内核实现 在线客服系统 的复合客服端程序
本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 免费使用 & 私有化部署免费下载:https://docs.sh ...
- .net core 和 WPF 开发升讯威在线客服系统:调用百度翻译接口实现实时自动翻译
业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...
- .net core 和 WPF 开发升讯威在线客服系统:调用有道翻译接口实现实时自动翻译的方法
业余时间用 .net core 写了一个在线客服系统.并在博客园写了一个系列的文章,写介绍这个开发过程. 我把这款业余时间写的小系统丢在网上,陆续有人找我要私有化版本,我都给了,毕竟软件业的初衷就是免 ...
- Linux 运行升讯威在线客服系统:同时支持 SQL Server 和 MySQL 的实现方法
前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...
- 详解升讯威在线客服系统前端 JavaScript 脚本加密技术(1)
我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 这段时间有几个技术小伙伴问了我一个有意思的问题:"你的前端脚本是 ...
随机推荐
- 提升软件测试效率与灵活性:探索Mock测试的重要性
Mock测试是测试过程中的一种方法,用于替代那些难以构造或获取的对象,通过创建虚拟对象来进行测试.所谓难以构造的对象如何理解呢? 举例来说,像HttpServletRequest这样的对象需要在具有s ...
- 基于DPAPI+RDP技术实现本地打开远程程序,并映射到本地机器桌面上
本教程使用工具所使用的环境说明: 启动器开发工具:VS2022 启动器所用客户端技术:.NET 8 + WPF 启动器其他技术:DPAPI 启动器发布的可执行程序,系统要求:Windows 7以及以上 ...
- debian 12 编译 vlc/libvlc 支持 rtsp
debian 官方从11开始,不再提供支持 rtsp 的 VLC deb 包,通过 libvlc 播放 rtsp 也无法实现,因此需要自己编译. # 安装编译环境,编译依赖库以及 contrib 第三 ...
- 4.1 数列的概念2 (递推公式、前n项和)
\({\color{Red}{欢迎到学科网下载资料学习 }}\) [ [基础过关系列]高二数学同步精品讲义与分层练习(人教A版2019)] ( https://www.zxxk.com/docpack ...
- 图像形态学操作(cv2库实现)
#coding:utf-8 import SimpleITK as sitk import numpy as np import cv2 # 膨胀 def dilateion(image): kern ...
- springboot2.X动态修改log4j2日志级别
利用springboot提供的 spring-boot-starter-actuator 包可以实现动态修改log4j2日志级别的功能 添加依赖 添加依赖包 <dependency> &l ...
- CSP模拟10--总结
今天是我第一次给模拟赛写正规总结--因为今天的题真的受不了了 四道数学题,一点都不拖泥带水的纯血数学题! T1.黑暗型高松灯 shit 本来是一道放在T4防AK的题,结果学长为了 恶心 锻炼一下我们, ...
- 探索 Kubernetes 持久化存储之 Rook Ceph 初窥门径
在 Kubernetes 生态系统中,持久化存储是支撑业务应用稳定运行的基石,对于维护整个系统的健壮性至关重要.对于选择自主搭建 Kubernetes 集群的运维架构师来说,挑选合适的后端持久化存储解 ...
- Notification Manager 2.0.0 发布:新增飞书通知、通知路由、通知静默
Notification Manager 是 KubeSphere 可观测团队开源的一款 Kubernetes 平台上的多租户通知管理系统,其从 Kubernetes 接收告警.事件.审计,根据用户设 ...
- 根据字符串,获取实体属性上的annotation,如:createTime” 找到对应实体属性中的 TableField(value = "create_time", fill = FieldFill.INSERT)
根据字符串,获取实体属性上的annotation,如:createTime" 找到对应实体属性中的 TableField(value = "create_time", f ...