我想问一下是不是接口的问题
request.js
相关代码:
import axios from 'axios' export const post = (url, data = {}) => { return new Promise((resolve, reject) => { axios.post(url, data, { baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd', headers: { 'Content-Type': 'application/json' } }).then((response) => { resolve(response.data) }, err => { reject(err) }) }) }
Login.vue
相关代码:
<template> <div class="wrapper"> <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="" class="wrapper__img" /> <div class="wrapper__input"> <input type="text" placeholder="请输入用户名" class="wrapper__input__content" v-model="data.username" /> </div> <div class="wrapper__input"> <input type="password" placeholder="请输入密码" class="wrapper__input__content" v-model="data.password" /> </div> <div class="wrapper__login--button" @click="handleLogin">登录</div> <div class="wrapper__login--link" @click="handleRegisterClick"> 立即注册 </div> </div> </template> <script> import { useRouter } from "vue-router"; import { post } from "../../utils/request"; import { reactive } from "vue"; export default { name: "Login", setup() { const data = reactive({ username: "", password: "", }); const router = useRouter(); const handleLogin = async () => { try { const result = await post('/api/user/login', { username: data.username, password: data.password, }); if (result?.data?.errno === 0) { localStorage.isLogin = true; router.push({ name: "Home" }); } else { alert("失败"); } } catch (e) { alert("请求失败"); } // .then(()=>{ // alert('成功') // }).catch(()=>{ // alert('失败') // }) // localStorage.isLogin = true; // router.push({name:'Home'}) }; const handleRegisterClick = () => { router.push({ name: "Register" }); }; return { handleLogin, handleRegisterClick, data }; }, }; </script> <style lang="scss" scoped> @import "../../style/virables.scss"; .wrapper { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); &__img { display: block; margin: 0 auto 0.4rem auto; width: 0.66rem; height: 0.66rem; } &__input { box-sizing: border-box; height: 0.48rem; margin: 0 0.4rem 0.16rem 0.4rem; padding: 0.16rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; &__content { border: none; outline: none; width: 100%; // line-height: .48rem; background: none; font-size: 0.16rem; color: $content-notice-fontcolor; &::placeholder { color: $content-notice-fontcolor; } } } &__login--button { margin: 0.32rem 0.4rem 0.16rem 0.4rem; line-height: 0.48rem; background: #0091ff; box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32); border-radius: 0.04rem; color: #fff; font-size: 0.16rem; text-align: center; } &__login--link { text-align: center; font-size: 0.14rem; color: $content-notice-fontcolor; } } </style>
15
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕星星
2022-04-04 11:45:23
同学你好,建议检查fastmock官网是否能打开?
如果能打开,可以在浏览器打开下面的请求地址
https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/login
能打开的话,网络应该就没问题,建议再试试。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星