当前位置：首页 > VUE

vue实现WiFi列表

2026-01-08 14:15:20VUE

获取WiFi列表的Vue实现

使用Vue获取WiFi列表需要结合浏览器API或后端服务，因为浏览器出于安全限制无法直接访问系统WiFi信息。以下是两种常见实现方式：

方法一：通过Web API获取附近WiFi（需用户授权） 浏览器提供的navigator.wifi接口可以扫描附近WiFi，但需要HTTPS环境且用户授权。

vue实现WiFi列表

<template>
  <div>
    <button @click="scanWifi">扫描WiFi</button>
    <ul>
      <li v-for="(wifi, index) in wifiList" :key="index">
        {{ wifi.ssid }} (信号强度: {{ wifi.rssi }}dBm)
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wifiList: []
    }
  },
  methods: {
    async scanWifi() {
      try {
        const wifi = await navigator.wifi.requestScan()
        this.wifiList = wifi.networks
      } catch (error) {
        console.error('WiFi扫描失败:', error)
      }
    }
  }
}
</script>

方法二：通过后端API获取WiFi列表 更可靠的方式是通过后端服务获取WiFi信息，前端通过HTTP请求获取数据。

<template>
  <div>
    <button @click="fetchWifiList">获取WiFi列表</button>
    <ul>
      <li v-for="(wifi, index) in wifiList" :key="index">
        {{ wifi.name }} - 加密方式: {{ wifi.encryption }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      wifiList: []
    }
  },
  methods: {
    async fetchWifiList() {
      try {
        const response = await axios.get('/api/wifi-list')
        this.wifiList = response.data
      } catch (error) {
        console.error('获取WiFi列表失败:', error)
      }
    }
  }
}
</script>

注意事项

Web API方法目前浏览器支持有限，主要适用于Chrome OS等特定环境。大多数实际应用需要后端配合，后端可通过系统命令获取WiFi信息：

vue实现WiFi列表

# 示例Python后端代码
import subprocess
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/wifi-list')
def wifi_list():
    result = subprocess.run(['nmcli', '-t', '-f', 'SSID,SIGNAL,SECURITY', 'dev', 'wifi'], 
                          stdout=subprocess.PIPE)
    return jsonify([parse_wifi(line) for line in result.stdout.decode().split('\n') if line])

增强用户体验

添加加载状态和错误处理提升用户体验：

data() {
  return {
    wifiList: [],
    isLoading: false,
    error: null
  }
},
methods: {
  async fetchWifiList() {
    this.isLoading = true
    this.error = null
    try {
      const response = await axios.get('/api/wifi-list')
      this.wifiList = response.data
    } catch (error) {
      this.error = '无法加载WiFi列表'
    } finally {
      this.isLoading = false
    }
  }
}