深度剖析：Dify+Sanic+Vue+ECharts 搭建 Text2SQL 项目 sanic-web 的 Debug 实战

项目背景介绍

sanic-web

项目地址：https://github.com/apconw/sanic-web

一个轻量级、支持全链路且易于二次开发的大模型应用项目(Large Model Data Assistant) 支持DeepSeek/Qwen2.5等大模型 基于 Dify 、Ollama&Vllm、Sanic 和 Text2SQL 📊 等技术构建的一站式大模型应用开发项目，采用 Vue3、TypeScript 和 Vite 5 打造现代UI。它支持通过 ECharts 📈 实现基于大模型的数据图形化问答，具备处理 CSV 文件 📂 表格问答的能力。同时，能方便对接第三方开源 RAG 系统 检索系统 🌐等，以支持广泛的通用知识问答。

这个项目可以作为text2sql的经典案例，通过自然语言来访问业务数据库，最终使用echarts图表可视化展示分析数据。使用了独立开发的web页面，对于前端小伙伴来说也比较友好，这完全可以作为一个AI智能助手的Demo实现。

Dify_service handle_think_tag报错NoneType

问题描述

debug

修改services/dify_service.py/handle_think_tag代码，如下：

    @staticmethod
    async def handle_think_tag(answer):
        """
        处理<think>标签内的内容
        :param answer
        """
        """
        处理<think>标签内的内容，或JSON格式的thoughts字段
        :param answer
        """
        think_content = ""
        remaining_content = answer
        # 会遇到answer可能不能解析到，先尝试解析为JSON
        try:
            data = json.loads(answer)
            if isinstance(data, dict) and "thoughts" in data:
                think_content = data["thoughts"]
                remaining_content = answer
                return think_content, remaining_content
        except Exception:
            pass
        # 再尝试正则提取<think>标签
        match = re.search(r"<think>(.*?)</think>", answer, re.DOTALL)
        if match:
            think_content = match.group(1)
            remaining_content = re.sub(r"<think>.*?</think>", "", answer, flags=re.DOTALL).strip()
            return think_content, remaining_content
        # 如果都没有，返回空
        return "", answer

Dify调用不成功，一直转圈圈

问题描述

debug

检查本地dify的端口号，修改sanic-web/docker/docker-compose.yaml中dify端口号到本地端口号，比如原端口号是18000，修改成80。

  chat-service:
    image: apconw/sanic-web:1.1.2
    container_name: sanic-web
    environment:
      - ENV=test
      - DIFY_SERVER_URL=http://host.docker.internal:80
      - DIFY_DATABASE_QA_API_KEY=app-AXDUw8TtcY7N6TMGHkPaC4VF
      - MINIO_ENDPOINT=host.docker.internal:19000
      - MINIO_ACCESS_KEY=sIR5eeDkiwoo779yNJbw
      - MiNIO_SECRET_KEY=MreuQ3aC1ymHJeo3QfzSg7aPz7PqlxeOw39nZUdE
    ports:
      - "8088:8088"
    extra_hosts:
      - "host.docker.internal:host-gateway"

前端markdown格式只显示前5页

问题描述

debug

1. 修改代码

修改web/src/components/MarkdownPreview/MarkdownTable.vue第39行-40行代码，将:data="pagedTableData"改为:data=“tableData”，并移除:pagination="pagination"属性：

<template>
    <div style="background-color: #ffffff">
        <n-card
            title="表格"
            embedded
            bordered
            :content-style="{ 'background-color': '#ffffff' }"
            :header-style="{
   
   
                color: '#26244c',
                height: '10px',
                'background-color': '#f0effe',
                'text-align': 'left',
                'font-size': '14px',
                'font-family': 'PMingLiU'
            }"
            :footer-style="{
   
   
                color: '#666',
                'background-color': '#ffffff',
                'text-align': 'left',
                'font-size': '14px',
                'font-family': 'PMingLiU'
            }"
        >
            <div
                style="
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                "
            ></div>
            <n-data-table
                style="
                    height: 550px;
                    width: 850px;
                    margin: 0px 10px;
                    background-color: #ffffff;
                "
                :columns="columns"
                :data="tableData"
                :max-height="550"
                virtual-scroll
                virtual-scroll-x
                :scroll-x="scrollX"
                :min-row-height="minRowHeight"
                :height-for-row="heightForRow"
                virtual-scroll-header
                :header-height="48"
            />
            <template #footer>
                数据来源: 大模型生成的数据, 以上信息仅供参考
            </template>
        </n-card>
    </div>
</template>

2.重新构建1.1.3镜像

# 进入web的docker目录
cd docker
# 查看原始Dockerfile ，这步也可以省略
cat Dockerfile
# 使用原始Dockerfile构建新镜像 
docker build -t apconw/chat-vue3-mvp:1.1.3 -f Dockerfile ..

3.更新sanic-web/docker/docker-compose.yaml

services:
  chat-web:
    image: apconw/chat-vue3-mvp:1.1.3  # 更新为新版本
    container_name: chat-vue3-mvp
    ports:
      - "8081:80"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    depends_on:
      - chat-service