内部导航网

主题

Hyde2025-06-15 15:13:222025-07-03 07:32:48Api接口
804
3.9m

前端篇 ​

环境准备 ​

Node.js | pnpm 下载安装与环境配置

创建项目 ​

pnpm
bash
pnpm create vite
sh
 pnpm create vite
│
◇  Project name:
│  vite-project
│
◆  Select a framework:
│  ○ Vanilla
│  ● Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
Select a variant:
│  ● TypeScript
│  ○ JavaScript
│  ○ Official Vue Starter ↗
│  ○ Nuxt ↗
└

安装依赖 ​

进入对应的项目文件夹，安装依赖

pnpm
bash
pnpm i

启动项目 ​

pnpm
bash
pnpm dev

Axios 安装 ​

pnpm
bash
pnpm add axios

Axios 使用 ​

  • 在src目录下创建utils文件夹，在utils文件夹中新建request.js文件,添加以下内容
js
// 导入axios
import axios from "axios";

// 创建axios实例
const instance = axios.create({
  baseURL: "/api", // 使用代理地址
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 导出实例
export default instance;

接口使用 ​

  • 在src目录下创建api文件夹，在utils文件夹中新建get-contact-list.js文件,添加以下内容
js
import request from "../utils/request";

/**
 * 项目配置常量
 */
const PROJECT_CONFIG = {
  ID: "fj3mnx", // 项目ID
  DEFAULT_TIME_RANGE: {
    start: 1680000000, // 默认开始时间戳
    end: 1750225456, // 默认结束时间戳
  },
};

// 获取客户列表
export function getContactList(options = {}) {
  // 解构参数并设置默认值
  const {
    project_id = PROJECT_CONFIG.ID,
    timeRange = PROJECT_CONFIG.DEFAULT_TIME_RANGE,
    page_size = 100,
  } = options;

  // 将时间范围对象转换为JSON字符串
  const updated_time = JSON.stringify(timeRange);

  return request({
    url: "/api/chat-user/get-contact-list",
    method: "get",
    params: {
      // 此处不需要排序
      project_id,
      updated_time,
      page_size,
    },
  });
}
  • 在src\components目录下创建getContactList.vue中添加以下内容
vue
<script setup>
// 导入Vue组合式API
import { ref, onMounted } from "vue";
// 导入获取客户列表的API方法
import { getContactList } from "../api/get-contact-list";

// 创建响应式客户列表
const contactList = ref([]);

// 定义获取客户列表的异步函数
const getContactListAPI = async () => {
  try {
    // 调用API获取客户列表
    const res = await getContactList();
    // 检查响应状态和数据
    if (res && res.data && res.data.data && res.data.data.list) {
      // 将获取到的客户列表赋值给响应式变量
      contactList.value = res.data.data.list;
      // 在控制台打印获取客户列表的API响应数据
      console.log("客户列表数据：", contactList.value);
    } else {
      console.error(res.data);
    }
  } catch (error) {
    console.error("获取客户列表失败：", error);
  }
};

// 在组件挂载时自动调用获取客户列表的函数
onMounted(() => {
  getContactListAPI();
});
</script>

<template>
  <div class="contact-list">
    <div v-if="contactList.length > 0">
      <div
        v-for="contact in contactList"
        :key="contact.chat_user_id"
        class="contact-item"
      >
        <h3>{{ contact.name || "未命名联系人" }}</h3>
        <p>渠道：{{ contact.channel }}</p>
        <p>电话：{{ contact.phone }}</p>
        <p>邮箱：{{ contact.email }}</p>
        <p>国家：{{ contact.country }}</p>
        <p>城市：{{ contact.city }}</p>
        <p>语言：{{ contact.language }}</p>
      </div>
    </div>
    <div v-else class="no-data">获取客户列表api接口失败，错误码404</div>
  </div>
</template>

<style scoped>
.contact-list {
  padding: 20px;

  .contact-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    h3 {
      margin: 0 0 10px 0;
      color: #303133;
    }

    p {
      margin: 5px 0;
      color: #606266;
    }
  }

  .no-data {
    text-align: center;
    color: #909399;
    padding: 20px;
  }
}
</style>
  • 在App.vue中引入这个组件
vue
<script lang="ts" setup>
// @ts-ignore
import getContactList from "./components/getContactList.vue";
</script>

<template>
  <getContactList />
</template>

<style scoped></style>

跨域处理 ​

在vite.config.ts中添加如下配置：

ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: "https://api.salesmartly.com",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
        configure: (proxy) => {
          proxy.on("proxyReq", (proxyReq) => {
            proxyReq.setHeader(
              "external-sign",
              "814a2d9b3ec1e6aafd4d4afc1588c24a"
            );
          });
        },
      },
    },
  },
});
最近更新