src/views/LoginView.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<div class="loginbody">
		<div id="login">
			<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
				<div id="title">
					<h1>学生信息管理系统</h1>
				</div>
				<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
					<a-input v-model:value="formState.username" />
				</a-form-item>

				<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
					<a-input-password v-model:value="formState.password" />
				</a-form-item>

				<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
					<a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
				</a-form-item>

				<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
					<a-button style="margin-right: 10px;">Cancel</a-button>
					<a-button type="primary" html-type="submit">Submit</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>
<script lang="ts">
	import { message } from 'ant-design-vue';
	import {
		defineComponent,
		reactive,
	} from 'vue';
	import {
		useRouter,
		//useRoute
	} from 'vue-router';
	import { getD } from '../api/index.js';
	interface FormState {
		username: string;
		password: string;
		remember: boolean;
	}
	export default defineComponent({
		setup() {
			const router = useRouter();
			//const route= useRoute();
			const formState = reactive < FormState > ({
				username: '',
				password: '',
				remember: true,
			});
			const onFinish = (values: any) => {
				console.log(values);
				console.log('Success:', values);
				getD('/api/Login/Login',{"username":values.username,"password":values.password}).then(res=> {
					if(res.status==200){
						//返回成功
						if(res.data>0){
							sessionStorage['UserId']=values.username;