java-bookstore/ui/src/pages/login.vue

<template>
	<div class="login-container">
		<div class="module">
			<img src="/loginimg.jpg" class="module_img" />
			<div class="module_r">
				<div class="module_mian">
					<div class="module_title">登录帐户</div>
					<div class="module_desc">输入用户名 & 登录密码</div>

					<div class="module_m">
						<div class="module_text">用户名</div>
						<input class="module_input" type="text" placeholder="输入用户名" v-model="login.username" />
					</div>
					<div class="module_m">
						<div class="module_text">密码</div>
						<input class="module_input" type="password" placeholder="输入密码" v-model="login.password" />
					</div>
<!--					<div class="module_m">-->
<!--						<div class="module_text">验证码</div>-->
<!--						<div class="module_code">-->
<!--							<input class="module_code_input" type="text" placeholder="输入验证码" v-model="login.captcha" />-->
<!--							<img class="module_code_img" :src="state.captchaUrl" @click="getCaptcha">-->
<!--						</div>-->
<!--					</div>-->
					<div class="module_m">
						<div class="module_code">
							<el-radio-group v-model="state.role" class="ml-4">
								<el-radio :label=false size="large">普通用户</el-radio>
								<el-radio :label=true size="large">管理员</el-radio>
							</el-radio-group>
						</div>
					</div>
					<!--							<div class="module_radio"><input  type="radio"/>记住密码 </div>-->
					<div class="forgetpwd" @click="router.push('/register')">没有密码吗？</div>
					<button class="module_button" :disabled="state.loading" @click="onLogin">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { loginAdmin } from '~/api/user/adminUserApi'
import { getUuid } from '~/utils/utils'
const router = useRouter()
const state = reactive({
	role: false,
	captchaUrl: '',
	loginFrom: {},
	loading: false
})
const login = reactive({
	username: '',
	password: '',
	captcha: '',
	uuid: '' })
const onLogin = () => {
	state.loading = true
	if (state.role) {
		loginAdmin(login).then(response => {
			state.loading = false
			ElMessage.success('登录成功')
			userStore().adminIsLogin = true
			userStore().adminToken = response.data.token
			adminRequest.get("/sys/user/info").then(response => {
				userStore().adminUserInfo = response.data
				router.push('/admin')
				ElMessage.success("登录成功~")
			})

		}).catch(() => {
			state.loading = false
			onRefreshCode()
		})
	} else {
		frontRequest.post("/api/user/login", login).then(response =>{
			const user = userStore()

			user.frontToken = response.data.token
			frontRequest.get("/api/user/userInfo").then(response =>{
				user.frontIsLogin = true
				user.frontUserInfo = response.data
				ElMessage.success("登录成功~")
				router.push('/')
			})
		})
	}
}
/**
 * 获取验证码
 */
const getCaptchaUrl = () => {
	login.uuid = getUuid()
	login.captcha = ''
	state.captchaUrl = import.meta.env.VITE_ADMIN_API_BASE_URL + `/captcha?uuid=${login.uuid}`
}
const onRefreshCode = () => {
	getCaptchaUrl()
}
onMounted(() => {
	getCaptchaUrl()


})
</script>

<style scoped>
.login-container {
	width: 100%;
	height: 100vh;
	background: #FFFFFF;
}

.module {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100vh;
}

.module_img {
	width: 60%;
	height: auto;
}

.module_r {
	width: 40%;
	background: #e5efee;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;

	.module_mian {
		width: 65%;
		background: #FFFFFF;
		height: auto;
		border-radius: 8px;
		overflow: hidden;
		padding-top: 40px;
		padding-bottom: 40px;

		.module_title {
			font-size: 18px;
			font-weight: 500;
			text-align: center;
			color: #333333;
		}

		.module_desc {
			font-size: 12px;
			text-align: center;
			color: #a7a7a7;
			margin-bottom: 20px;
		}

		.module_m {
			margin: 0 auto;
			width: 80%;
			height: auto;
			margin-top: 10px;

			.module_text {
				font-size: 14px;
				color: #333333;
				margin-bottom: 5px;
			}

			.module_input {
				width: 96%;
				height: 40px;
				padding-left: 2%;
				padding-right: 2%;
				border: 1px solid #eee;
				border-radius: 5px;
				font-size: 12px;
			}

			.module_code {
				width: 96%;
				display: flex;
				align-items: center;

				.module_code_input {
					width: 60%;
					height: 40px;
					border-radius: 5px;
					border: 1px solid #eee;
					font-size: 12px;
					padding-left: 2%;
					padding-right: 2%;
				}

				.module_code_img {
					width: 130px;
					height: 40px;
					border-radius: 5px;
					margin-left: 10px;
					cursor: pointer;
				}
			}
		}

		.module_radio input {
			margin-right: 5px;
		}

		.forgetpwd {
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #328d86;
			margin-top: 10px;
			cursor: pointer;
		}

		.module_button {
			margin: 0 auto;
			display: block;
			width: 80%;
			background: #328d86;
			color: #FFFFFF;
			height: 40px;
			margin-top: 20px;
			border-radius: 5px;
			font-weight: 500;
			cursor: pointer;
		}

		.module_button:active {
			opacity: 0.4;
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>