我想问一下是不是接口的问题

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 星