【项目实训】项目主页面的设计实现与前后端连接

在构建项目时，前端不仅需要呈现出色的用户界面，还要与后端服务高效交互。我们使用Vue.js结合Element Plus创建了一个动态的前端界面，并实现通过该界面与后端服务进行数据交互。

1. 前端界面设计

我们使用Vue.js和Element Plus创建了一个具有多个功能模块的动态仪表盘。这个仪表盘包括几个交互式组件，允许用户查询数据、识别图像等。

• 布局与样式：使用el-container、el-header和el-main等布局组件构建基础页面结构，el-row和el-col则用于构建响应式的网格布局，确保在不同设备上都能良好展示。
• 视觉元素：每个功能模块均配备有渐变背景的视觉框架和相关的图标，通过background和img标签增强视觉吸引力。
• 交互设计：按钮通过@click事件绑定到Vue实例方法，实现页面的交互逻辑。
• <el-button type="primary" style="width: 100%;" plain @click="JunmpToChart('1')">人数查询</el-button>

2. 前后端交互

在前端应用中实现与后端的数据交互，是现代Web应用的核心功能之一。我们通过Vue Router和Axios库来处理这部分需求。

• Vue Router：用于管理前端路由，实现不同页面间的无刷新跳转。在项目中，点击不同的按钮会根据传递的参数跳转到相应的路由。

• Axios库：用于发送HTTP请求到后端API，处理请求与响应。后端可以是使用Express, Flask等框架搭建的RESTful API。

• const JunmpToChart = (id: string) => {
      console.log(id);
      router.push({ name: 'Root', query: { id } });
  }
  这段代码演示了如何根据用户的操作触发路由跳转，并带有必要的查询参数。

3. 后端服务连接

连接后端服务通常涉及以下几个关键步骤：

• 定义API端点：后端定义清晰的RESTful接口，前端通过这些接口获取数据。
• 安全认证：实现基于Token或Session的认证机制，保证数据交换的安全性。
• 数据处理：后端处理来自前端的请求数据，执行必要的业务逻辑后返回结果给前端。

实现代码：

<script setup lang='ts'>
import {useRouter} from 'vue-router'

const router = useRouter()

const JunmpToChart = (id: string) => {
  console.log(id)
  router.push({name: 'Root', query: {id}})
}
</script>

<template>
    <el-container class="MainContainer">
        <el-header style="width: 100%;height: 15%;color: #fff;font-size: 60px;font-weight: bolder;">DSBTPG</el-header>
        <el-main style="width: 100%;height: 85%;position: relative;">
            <el-row justify="space-evenly" class="RowContainer">
              <el-col :span="6">
                <div style="width: 100%;padding-top: 100%;background:  linear-gradient(135deg, rgba(151, 51, 255) 0%, rgba(82, 106, 255) 42%, rgba(17, 185, 255) 100%);position: relative;">
                  <img src="@/assets/1.png" style="width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;"/>
                </div>
                <el-button type="primary" style="width: 100%;margin-top: 3%;" plain @click="JunmpToChart('1')">人数查询</el-button>
              </el-col>
              <el-col :span="6">
                <div style="width: 100%;padding-top: 100%;background:  linear-gradient(135deg, rgba(151, 51, 255) 0%, rgba(82, 106, 255) 42%, rgba(17, 185, 255) 100%);position: relative;">
                  <img src="@/assets/2.png" style="width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;"/>
                </div>
                <el-button type="primary" style="width: 100%;margin-top: 3%;" plain @click="JunmpToChart('2')">安全帽识别</el-button>
              </el-col>
              <el-col :span="6">
                <div style="width: 100%;padding-top: 100%;background:  linear-gradient(135deg, rgba(151, 51, 255) 0%, rgba(82, 106, 255) 42%, rgba(17, 185, 255) 100%);position: relative;">
                  <img src="@/assets/3.png" style="width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;"/>
                </div>
                <el-button type="primary" style="width: 100%;margin-top: 3%;" plain @click="JunmpToChart('3')">高空作业有无安全绳</el-button>
              </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<style scoped>
.MainContainer{
    width: 100%;
    height: 100%;
    background-image: url('@/assets/background.jpg');
    background-size: cover;
    background-position: center;
}

.RowContainer{
    width: 100%;
    height: 60%;
    margin-top: 5%;
}
<style>

界面展示：