打造炫酷大屏展示页

前端

2024-01-18 21:31:36

前言

今年的11月初，我们公司参加了「2017年亚洲幼教年会(APEAC)」并取得了很不错的成果。本人有幸负责关于这次展示页的前端开发，特以此文记录开发过程中的关键环节。

展示页分为三大模块：数据展示、动态展示和地图展示。效果如下：

[展示页效果图]

数据展示模块

此模块展示我们公司至今为止的各项数据，通过异步请求从后端获取数据，并使用图表库进行展示。

1. 数据请求

数据请求是整个模块的核心，需要保证数据的准确性和及时性。我们使用的是Axios库来发送异步请求，并使用Promise来处理异步请求的结果。

// 导入Axios库
import axios from 'axios';

// 发送异步请求
axios.get('/api/data')
  .then((response) => {
    // 请求成功，处理数据
    const data = response.data;
    // 使用图表库进行展示
    const chart = new Chart(document.getElementById('chart'), {
      type: 'bar',
      data: {
        labels: data.labels,
        datasets: [{
          label: '数据',
          data: data.data
        }]
      }
    });
  })
  .catch((error) => {
    // 请求失败，处理错误
    console.error(error);
  });

2. 图表展示

数据请求成功后，就可以使用图表库进行展示了。我们使用的是Chart.js库，这是一个简单易用的图表库，支持多种类型的图表。

// 导入Chart.js库
import Chart from 'chart.js';

// 创建图表
const chart = new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: {
    labels: data.labels,
    datasets: [{
      label: '数据',
      data: data.data
    }]
  }
});

动态展示模块

此模块展示我们公司的一些动态信息，如新闻、公告等。数据也是通过异步请求从后端获取的，并使用列表的方式进行展示。

1. 数据请求

动态展示模块的数据请求与数据展示模块类似，也是使用Axios库发送异步请求，并使用Promise来处理异步请求的结果。

// 导入Axios库
import axios from 'axios';

// 发送异步请求
axios.get('/api/news')
  .then((response) => {
    // 请求成功，处理数据
    const data = response.data;
    // 使用列表的方式进行展示
    const list = document.getElementById('list');
    data.forEach((item) => {
      const li = document.createElement('li');
      li.innerHTML = `
        <a href="${item.url}">${item.title}</a>
        <p>${item.content}</p>
      `;
      list.appendChild(li);
    });
  })
  .catch((error) => {
    // 请求失败，处理错误
    console.error(error);
  });

2. 列表展示

数据请求成功后，就可以使用列表的方式进行展示了。我们使用的是简单的HTML和CSS来实现列表。

<ul id="list"></ul>

#list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#list li {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}

#list li a {
  text-decoration: none;
  color: #333;
}

地图展示模块

此模块展示我们公司在全国各地的业务分布情况。数据也是通过异步请求从后端获取的，并使用地图库进行展示。

1. 数据请求

地图展示模块的数据请求与数据展示模块和动态展示模块类似，也是使用Axios库发送异步请求，并使用Promise来处理异步请求的结果。

// 导入Axios库
import axios from 'axios';

// 发送异步请求
axios.get('/api/map')
  .then((response) => {
    // 请求成功，处理数据
    const data = response.data;
    // 使用地图库进行展示
    const map = new Map(document.getElementById('map'), {
      center: [39.91, 116.40],
      zoom: 5
    });
    data.forEach((item) => {
      const marker = new Marker(map, {
        position: [item.lat, item.lng],
        title: item.name
      });
    });
  })
  .catch((error) => {
    // 请求失败，处理错误
    console.error(error);
  });

2. 地图展示

数据请求成功后，就可以使用地图库进行展示了。我们使用的是Mapbox GL JS库，这是一个功能强大的地图库，支持多种地图样式和数据源。

// 导入Mapbox GL JS库
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

// 创建地图
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [39.91, 116.40],
  zoom: 5
});

// 添加标记
data.forEach((item) => {
  const marker = new mapboxgl.Marker({
    color: '#f00'
  })
  .setLngLat([item.lat, item.lng])
  .addTo(map);
});