1、前言

记录从零基础学习编写 element-ui项目的笔记，以防遗忘时可回溯温习。此文乃是笔者在开展从无到有编写 element-ui 项目的学习进程中所留存的笔记，同时涵盖了记录期间遭遇的部分问题及其解决之法，亦包含了些许个人的思考与见解。

2、项目描述

增设工具平台的二级菜单，凭借手机号实现归属地与运营商的查询功能。页面上方为手机号查询输入框，点击查询按钮掉用后端服务接口查询运营商信息并将后端返回结果显示在下方表格中。

3、项目实现

A、前端tools一级菜单实现

通过DIV和<router-view>显示路由页面。DIV 元素作为页面布局的常用工具，为页面的结构提供了基础框架。而 组件则在路由管理中发挥着关键作用。当用户在页面中进行操作，触发路由切换时， 会根据当前的路由配置，动态地加载相应的组件内容，并将其准确无误地展示在由 DIV 元素划分好的区域内。

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
    }
</script>
<style>
</style>

B、Menu菜单添加

el-submenu是 Element UI 菜单系统的子菜单组件，需嵌套在 <el-menu> 内，支持多级嵌套。每个 el-submenu 必须设置唯一 index 值（字符串类型），否则会导致同级菜单展开冲突。

<el-submenu index="/tools">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span>工具平台</span>
    </template>
    <el-menu-item-group>
        <el-menu-item index="/tools/getPhoneArea">
            <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>查询手机号归属地</span>
            </template>
        </el-menu-item>
    </el-menu-item-group>
</el-submenu>

C、router路由调整

在 Layout 根目录之下的子路由当中，需要添加工具平台的二级路由。这一操作至关重要，其目的在于确保整个页面能够完整地被包含在 layout 的整体布局之中。

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        name: 'home',
        component: Home,
      },
      {
        path: '/tools',
        name: 'tools',
        component: Tools,
        children: [
          {
            path: 'getPhoneArea',
            name: 'getPhoneArea',
            component: PhoneArea,
          },
        ]
      },
    ]
  }
]

D、后端接口API实现

在使用 Element UI 进行前端开发时，通常会涉及到与后端接口进行数据交互。Element UI 本身是一个基于 Vue.js 的前端 UI 框架，主要用于构建界面和组件，而实际的接口调用通常是通过 Vue.js 的 HTTP 客户端库。本文介绍通过Axios实现前后端接口交互。

安装axios插件

npm install -S axios

request文件

request 请求进行统一的封装操作，旨在对发出的请求（request）以及接收的响应（response）进行全面且统一的处理。不管是成功的响应还是包含错误信息的响应，都能按照统一的规则进行解析和处理，为后续的业务逻辑提供清晰、准确的数据。再者，统一封装还便于进行请求和响应的监控与日志记录。通过集中的处理方式，可以详细记录每一次请求的发起时间、参数、响应时间以及响应结果等关键信息，这对于系统的性能优化、故障排查以及安全审计都具有极大的帮助。

// request.js
import axios from 'axios';

// 创建axios实例
const service = axios.create({
    baseURL: "http://localhost:8080/", // 你的API基础URL
    timeout: 5000 // 请求超时时间
});

// 请求拦截器
// 请求拦截器
service.interceptors.request.use(

);

// 响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code == 200) {
            return res;
        } else {
            return Promise.reject(new Error(res.message || 'Error'));
        }
    }
);

export default service;

api文件

后端接口的详细定义。

import request from '@/utils/request'

export function getPhoneArea(phoneNum) {
    return request({
      url: '/tools/queryPhoneArea',
      method: 'get',
      params: {phoneNum}
    })
  }

手机号运营商查询页面

借助 el-card 将整体页面呈现为卡片的样式，利用 form 表单来达成页面的功能，通过 button 的 click 方法来调用后端接口，并对返回的数据进行处理后展示在下方的 table 表格之中。

<template>
    <el-card class="phone-area-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="手机号">
                <el-input v-model="formInline.phoneNum" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-table :data="tableData" border  :header-cell-style="{ backgroundColor: 'rgb(114, 159, 241)', color: '#333' }">
                <el-table-column prop="phoneNum" label="手机号"></el-table-column>
                <el-table-column prop="phoneArea" label="归属地" ></el-table-column>
                <el-table-column prop="phoneOperator" label="运营商" ></el-table-column>
            </el-table>
        </el-form>

    </el-card>

</template>

<script>
import { getPhoneArea } from '@/api/phoneArea'
import axios from 'axios';

export default {
    data() {
        return {
            formInline: {
                phoneNum: ''
            },
            tableData:[]
        }
    },
    methods: {
        async onSubmit() {
            try {
                const response = await getPhoneArea(this.formInline.phoneNum);
                this.tableData = [response.body];
            } catch (error) {
                console.error('查询失败:', error);
            }
        }
    }
}
</script>
<style>
.phone-area-card {
    margin-left: 1px;
    margin-top: 10px;
}
</style>