hongxilin
5 months ago
10 changed files with 360 additions and 147 deletions
-
9vue/gold-system/src/api/index.js
-
BINvue/gold-system/src/assets/background.jpg
-
11vue/gold-system/src/router/index.js
-
32vue/gold-system/src/util/http.js
-
230vue/gold-system/src/views/consume/addConsume.vue
-
60vue/gold-system/src/views/index.vue
-
130vue/gold-system/src/views/login.vue
-
7vue/gold-system/src/views/recharge/addRecharge.vue
-
22vue/gold-system/src/views/refund/addRefund.vue
-
6vue/gold-system/src/views/refund/allRefund.vue
@ -0,0 +1,9 @@ |
|||
import http from '../util/http.js'; |
|||
|
|||
const API={ |
|||
post: function(url,data){ |
|||
return http({url:url,method:'post',data:data}) |
|||
}, |
|||
}; |
|||
|
|||
export default API; |
|||
|
After Width: 928 | Height: 1133 | Size: 567 KiB |
@ -0,0 +1,32 @@ |
|||
import axios from 'axios'; |
|||
|
|||
export default function (options) { |
|||
//配置每次发送请求都从localStorage中获取名字叫token的数据,
|
|||
//添加到请求头部的Authorization属性中
|
|||
|
|||
//Object.assign用于合并对象的数据
|
|||
options.headers = Object.assign( |
|||
{ Authorization: localStorage.getItem('token') }, |
|||
options.headers || {} |
|||
); |
|||
//axios() 返回一个promise对象，用于异步请求
|
|||
//options是一个对象，其中包含了许多用于配置请求的参数，
|
|||
//例如请求的url、请求方法（GET、POST等）、请求头等
|
|||
return axios(options) |
|||
.then(({ status, data, statusText }) => { |
|||
//该函数在请求成功并返回数据时被调用
|
|||
//status：HTTP状态码，例如200表示请求成功。
|
|||
//data：服务器返回的数据。
|
|||
// statusText：HTTP状态文本，例如"OK"表示请求成功。
|
|||
console.log(data); |
|||
if (status == 200) { |
|||
return data; |
|||
} else { |
|||
throw new Error(statusText); |
|||
} |
|||
}) |
|||
.catch(e=>{ |
|||
return Promise.reject(e); |
|||
//return Promise.reject(e.message);
|
|||
}); |
|||
} |
|||
@ -0,0 +1,130 @@ |
|||
<script setup> |
|||
import { ref, onMounted, reactive, computed } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import axios from "axios"; |
|||
import { useRouter } from "vue-router"; |
|||
import { VscGlobe } from "vue-icons-plus/vsc"; |
|||
|
|||
const router = useRouter(); // 获取路由实例 |
|||
const form = ref({ name: "", password: "" }); |
|||
//调用方法 |
|||
const login = async function () { |
|||
try { |
|||
const result = await axios.post( |
|||
"http://192.168.8.93:10070/admin/login", |
|||
form.value |
|||
); |
|||
if (result.data.code == 200) { |
|||
localStorage.setItem("token", result.data.msg); |
|||
router.push("/"); |
|||
ElMessage.success("登录成功"); |
|||
console.log("请求成功", result); |
|||
} else { |
|||
form.value.password = ""; |
|||
form.value.username = ""; |
|||
ElMessage.error(result.data.msg); |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
ElMessage.error(result.data.msg); |
|||
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-row class="login-page"> |
|||
<img |
|||
:span="12" |
|||
src="../assets/background.jpg" |
|||
alt="logo" |
|||
class="bg" |
|||
fit="fit" |
|||
/> |
|||
<el-col :span="6" :offset="3" class="form"> |
|||
<!-- 登录表单 --> |
|||
<el-form |
|||
:model="form" |
|||
size="large" |
|||
autocomplete="off" |
|||
@keyup.enter.native="login()" |
|||
> |
|||
<el-form-item> |
|||
<h1 style="color: #409eff">金币系统登录</h1> |
|||
</el-form-item> |
|||
<el-form-item prop="username"> |
|||
<el-input |
|||
v-model="form.username" |
|||
placeholder="请输入用户名" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
type="password" |
|||
placeholder="请输入密码" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item class="flex"> |
|||
<div class="flex"> |
|||
<el-checkbox>记住我</el-checkbox> |
|||
</div> |
|||
</el-form-item> |
|||
<!-- 登录按钮 --> |
|||
<el-form-item> |
|||
<el-button |
|||
class="button" |
|||
type="primary" |
|||
auto-insert-space |
|||
@click="login()" |
|||
>登录</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</template> |
|||
<style scoped> |
|||
.bg { |
|||
border-radius: 0 20px 20px 0; |
|||
height: 100vh; |
|||
width: 50%; |
|||
object-fit: cover; |
|||
} |
|||
.background { |
|||
color: #fffdfd; |
|||
text-align: center; |
|||
font-size: 24px; |
|||
background-color: #08193d; |
|||
} |
|||
.form { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
user-select: none; |
|||
|
|||
.title { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.button { |
|||
width: 100%; |
|||
} |
|||
|
|||
.flex { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
|
|||
/* .box { |
|||
padding: 20px; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} */ |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue