可视化Demo(vue3+vite+ts+pinia+express)

1、项目简介

前端技术栈：vue3+vite+ts+pinia
后端技术栈：node+express
demo展示：

2、后端项目搭建

2.1、创建项目

创建一个node-project文件夹，再在里面创建一个index.ts文件

2.2、依赖安装

cd 进入node-project文件，安装相关依赖插件

npm install ts-node -g						（全局安装ts-node，因为在node环境下无法直接运行ts文件）
npm init -y									（生成一个package.json文件）
npm install @types/node -D					（安装node的声明文件）
npm install express -S
npm install @types/express -D				（安装express的声明文件）
npm install axios -S
tsc --init									（生成一个tsconfig.json配置文件）

2.3、编写index.ts代码

import express, {Express, Router, Request, Response, NextFunction} from 'express'
import axios from 'axios'

const app:Express = express()

app.use('*', (req:Request, res:Response, next:NextFunction) => {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

// express中Router的作用：
// 为了方便我们更好的根据路由去分模块。避免将所有的路由都写在入口文件中
const router:Router = express.Router()

app.use('/api', router)

// 编写一个简单的get请求接口
router.get('/list', async (req:Request, res:Response) => {
  const result = await axios.post('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=localCityNCOVDataList,diseaseh5Shelf')
  res.json({
    data: result.data
  })
})

// 开启一个服务，端口号为3333
app.listen(3333, () => {
  console.log('success serve http://localhost:3333')
})

2.4、项目启动

运行ts-node index.ts，启动后端项目

2.5、接口测试

postman中进行接口测试，数据返回成功

3、前端项目搭建

3.1、创建项目

运行 npm init vue@latest 搭建前端项目，并安装相关依赖

3.2、封装接口

在src下新建一个server文件夹，再新建一个index.ts文件，进行简单的接口请求封装

// src/server/index.ts
import axios from 'axios'

const server = axios.create({
  baseURL: 'http://localhost:3333'
})

export const getList = () => server.get('/api/list').then(res => res.data)

3.3、pinia数据处理

在pinia中进行接口请求数据的处理

import { defineStore } from 'pinia'
import { getList } from "@/server";
import type { RootObject } from "@/stores/type";

export const useStore = defineStore({
  id: 'list',
  state: () => ({
    list: <RootObject>{},
  }),
  actions: {
    async getList () {
      let { data } = await getList()
      this.list = data.data
    }
  }
})

3.4、测试接口数据

在App.vue中调用pinia中的getList方法，此时会发生跨域问题

<template>
  <div class="box"></div>
</template>

<script setup lang="ts">
import { useStore } from './stores/index'

const store = useStore()
store.getList()

</script>

3.5、跨域问题原因、处理

原因：
根据同源策略协议，想要不造成跨域问题，必须同协议、同域名、同端口。其中一个不同都会造成跨域问题。
由于后端服务端口为3333，而前端端口为3000，两者端口号不同造成了跨域问题。

处理方法：
处理跨域的方法有多种，此处我们用的是后端允许任何请求跨域（在2.2中已经书写，若缺失这段代码会出现跨域报错问题）

app.use('*', (req:Request, res:Response, next:NextFunction) => {
  res.header('Access-Control-Allow-Origin', '*')
  next()
})

3.6、地图引入及相关问题处理

3.6.1、echarts地图引入方式

// echarts4的引入方式
import echarts from 'echarts'
// echarts5需要把它的所有api导成一个对象引入
import * as echarts from 'echarts'

3.6.2、地图报错问题

输入地图的相关配置，但此时地图报错

<template>
  <div class="box">
    <div class="box-center" id="china" style="height: 600px; width: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from './stores/index'
import * as echarts from 'echarts'
import {onMounted} from "vue";
// import './assets/china.js'

const store = useStore()

onMounted( async () => {
  await store.getList()
  initEcharts()
})

const initEcharts =  () => {
  let data = [
    {
      name: "内蒙古",
      value:[110.3467, 41.4899]
    },
  ]
  const charts = echarts.init(document.querySelector('#china') as HTMLElement)
  charts.setOption({
    geo: {
      // 缺少china对应的json地图数据
      map: "china",
      ...
    },
    series: [
      {
        type: "map",
        map: "china",
        ...
        data: data,
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        ...
        data: data,
      },
    ],
  })
}

</script>

3.6.3、地图报错问题分析及处理

报错显示缺少地图的相关json数据，我们引入以下china.js文件

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['exports', 'echarts'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('echarts'));
  } else {
    // Browser globals
    factory({}, root.echarts);
  }
}(this, function(exports, echarts) {
  var log = function(msg) {
    if (typeof console !== 'undefined') {
      console && console.error && console.error(msg);
    }
  }
  if (!echarts) {
    log('ECharts is not Loaded');
    return;
  }
  if (!echarts.registerMap) {
    log('ECharts Map is not loaded')
    return;
  }
  echarts.registerMap('china', {
  ...
  })
}));

引入china.js后依旧报错，显示找不到echarts。

此时我们翻看china.js文件，发现它是以echarts4的方式引入，导致我们查找不到echarts。需要对china.js文件进行修改如下

import * as echarts from 'echarts'

echarts.registerMap('china', {
  ...
})

4、Json2TsInterface插件

下载途径：谷歌商店进行下载安装
功能：自动返回接口数据的类型规范

5、源码地址

可视化Demo地址

注：本项目不做任何商业用途，仅供个人练习使用

代码007普通

打赏 收藏 海报 链接