老师仿京东项目登录不了了是不是地址不能用了呀

老师，为啥手机开热点给电脑可以登录，连接网线就会请求失败呢

同学你好，猜测可能是某种程序限制了明文流量的网络请求，所以这样就会导系统禁止当前应用进行一些请求。如果能用手机热点测试话，建议同学先用热点测试。

祝学习愉快！

<template>

    <div class="wrapper">

        <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" />

        <div class="wrapper__input">

            <input class="wrapper__input__content" placeholder="请输入用户名" v-model="username" />

        </div>

        <div class="wrapper__input">

            <input class="wrapper__input__content" placeholder="请输入密码" v-model="password" type="password"/>

        </div>

        <div class="wrapper__login-button" @click="handleLogin">登录</div>

        <div class="wrapper__login-link" @click="handleRegister">立即注册</div>

        <Toast v-if="show" :message="showMessage" />

    </div>

</template>

<script>

import { useRouter } from 'vue-router';

import { reactive, toRefs } from '@vue/reactivity';

import Toast, { useToastEffect } from '../../components/Toast'

import { post } from '../../utils/requests.js'

// 调用路由方法

// 处理登录逻辑

const useLoginEffect = (showToast) => {

    const router = useRouter();

    const data = reactive({

        username: '',

        password: ''

    });

    const handleLogin = async () => {

        try {

            const result = await post('/api/user/login', {

                username: data.username,

                password: data.password

            })

            const { username, password } = data

            // 用data结构出来的username类型为字符串

            if ( username == "" || password == "") {

                showToast('用户名或密码不能为空')

                return

            } else {

                if (result?.errno === 0) {

                    localStorage.isLogin = true;

                    router.push({ name: 'Home' })

                    // 路由跳转到name指定的路由

                } else {

                    showToast('登陆失败')

                }

            }

        } catch (e) {

            showToast('请求失败')

        }

    }

    const { username, password } = toRefs(data)

    return { username, password, handleLogin }

}

// 处理注册跳转

const useRegisterEffect = () => {

    const router = useRouter()

    const handleRegister = () => {

        router.push({ name: 'Register' })

    }

    return { handleRegister }

}

export default {

    components: { Toast },

    name: 'Login',

    // setup写主要流程

    setup() {

        const { show, showToast, showMessage } = useToastEffect();

        const { username, password, handleLogin } = useLoginEffect(showToast)

        const { handleRegister } = useRegisterEffect()

        return {

            username, password, show, showMessage,

            handleLogin, handleRegister

        }

    }

}

</script>

import { propsToAttrMap } from "@vue/shared";

import axios from "axios";

// 创建axios实例

const intance = axios.create({

    baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd',

    timeout: 10000

})

export const get = (url, params = {}) => {

    return new Promise((resolve, reject) => {

        intance.get(url, { params }).then((response) => {

            resolve(response.data)

        }, err => {

            reject(err)

        })

    })

}

export const post = (url, data = {}) => {

    return new Promise((resolve, reject) => {

    intance.post(url, data, {

        headers: {

            'content-type': 'application/json'

        }

    }).then((response) => {

        resolve(response.data)

    }, err => {

        reject(err)

    })

  })

}

<template>

  <div class="toast">{{ message }}</div>

</template>

<script>

import { reactive, toRefs } from "vue"

export default {

  props: ['message']

}

export const useToastEffect = () => {

  const toastData = reactive({

    show: false,

    showMessage: ''

  })

  const showToast = (message) => {

    toastData.show = true;

    toastData.showMessage = message;

    setTimeout(() => {

      toastData.show = false;

      toastData.showMessage = '';

    }, 2000);

  }

  const { show, showMessage } = toRefs(toastData)

  return { showToast, show, showMessage }

}

</script>

<style lang="scss" scoped>

.toast {

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  padding: 0.1rem;

  background: rgba(0, 0, 0, 0.35);

  border-radius: 0.05rem;

  color: #fff;

}

</style>