Location>code7788 >text

How to Add Bootstrap Launch Page to Web Api Backend Main Program for Online Customer Service System

Popularity:317 ℃/2024-12-17 21:48:37

contexts

In my spare time, I have developed an independent product of my own: the XUNWEI online customer service and marketing system. The core background program of this system, in the earliest stage, there is no page at all, often friends deployed, a visit is 404, thinking that the deployment has not been successful. I see this certainly not ah, but the background program is a Web Api project, no page, how to do?

The realization of the

Returns a string directly through the Web Api interface.

So I output some basic status information through the Web Api interface as follows:

namespace
{
    [ApiController]
    public class StatusController : ControllerBase
    {
       [ApiController] public class StatusController : ControllerBase { [HttpGet
       public string Get()
       {
            // Output the basic status information here
            string msg = "StarVision Online Customer Service and Marketing System (Private Deployment Edition)";
            msg += "";
            return msg; }
       }

    }
}

This approach at least solves the problem of haves and have-nots and has stuck with it for a long time. Until recently.Due to a customization request from a client, a special status page and O&M functionality needed to be added to the main application.

The realization of the

Introducing Bootstrap-related packages to add beautiful, interactive startup pages

Let's take a look at the effect, is not much better than the effect of it. Although it is a Web Api project, it can also provide beautiful pages.

implementation method

To add a page to the Web Api, first we go to the Bootstrip website and download its latest development package. Then add it to our project file.

We add an html folder to the root directory of the project, and then create a Bootstrip subfolder where we put all the files we downloaded from the official website.

In the second step, we introduce the newly created wwwroot directory and enable its static file access.

 String wwwrootFiles = ((), "wwwroot");
 (new StaticFileOptions
 {
     FileProvider = new PhysicalFileProvider(wwwrootFiles),
     RequestPath = "/"
 });

Finally, we take the developed status display page and put it in the html folder:

A sample page code is given here:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Service System Status</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>program operating status</h1>
    <div class="status-box">
        <p>current state:<span >running</span></p>
    </div>
</body>

</html>

Press Visual Studio's Launch Project button to see our default launch page.

The whole process can be said to be very simple and convenient. In this way, even if it is a Web Api project, you can provide users with a very clear and beautiful status display page. 🎉

Introduction to this .net developed customer service system

100% privatized deployment in your own server, can be 24 hours a day 7 × 24 hours on-line operation, do not fall out of the line does not lose the message, welcome to test.

/

Hopefully, it will be built:Open, open source, share. Strive to create an excellent open source product for the .net community.

If you like it, please give me a like, thank you!