C#测试WebApi项目调用DeepSeek（续）

使用前端页面调用WebApi接口测试基于DeepSeek的问答

gc_2299

843人浏览 · 2025-03-22 18:33:27

gc_2299 · 2025-03-22 18:33:27 发布

接着上一篇文章的WebApi项目，编写前端页面调用接口进行问答，使用jquery调用后台WebApi，页面内容使用DeepSeek生成后微调，提示词如下：

请使用html+css+JavaScript编写一个仿照微信聊天的页面，页面上方显示发送和收到的消息，发送的消息显示在右侧，收到的消息显示在左侧，页面下方是输入框和发送按钮。当消息一页显示不下时，支持滚动条显示

前端页面调用WebApi时还得注意跨域的问题，需要在WebApi项目的program中填加如下代码：

...
...

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder =>
        {
                    builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
});
...
...
app.UseCors("AllowAll");
...
...

最后是页面运行截图及完整的前台页面代码：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信聊天页面</title>
    <script src="..\jQuery\jquery-3.7.1.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .chat-container {
            width: 400px;
            height: 600px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        .chat-box {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
        }

        .message {
            margin-bottom: 10px;
            padding: 8px 12px;
            border-radius: 5px;
            max-width: 70%;
            word-wrap: break-word;
        }

        .message.sent {
            background-color: #dcf8c6;
            margin-left: auto;
        }

        .message.received {
            background-color: #ececec;
            margin-right: auto;
        }

        .input-box {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ddd;
        }

        #message-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-right: 10px;
        }

        #send-btn {
            padding: 8px 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #send-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-box" id="chat-box">
            <!-- 聊天记录将动态插入到这里 -->
        </div>
        <div class="input-box">
            <input type="text" id="message-input" placeholder="输入消息...">
            <button id="send-btn">发送</button>
        </div>
    </div>

    <script>
        document.getElementById('send-btn').addEventListener('click', sendMessage);
        document.getElementById('message-input').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        function sendMessage() {
            const input = document.getElementById('message-input');
            const message = input.value.trim();
            if (message !== '') {
                addMessage(message, 'sent');
                input.value = '';                

                $.ajax({
                    type: 'GET',
                    url: "http://localhost:5052/Chat/Chat?question="+message,                                                         
                    success: function (result) {  
                        addMessage(result.msg, 'received'); 
                    },
                    error: function (result) {
                        addMessage("调用失败", 'received');         
                    }
                });
            }
        }

        function addMessage(text, type) {
            const chatBox = document.getElementById('chat-box');
            const messageElement = document.createElement('div');
            messageElement.classList.add('message', type);
            messageElement.textContent = text;
            chatBox.appendChild(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight; // 滚动到底部
        }
    </script>
</body>
</html>

[1]微信公众号“技术老小子”，《C# 使用DeepSeek应用的完整指南》
[2]https://api-docs.deepseek.com/zh-cn/
[3]https://github.com/niltor/DeepSeekSDK-NET
[4]https://platform.deepseek.com/