【项目】UniApp实战多端企业网盘全栈开发 33 PC端登录页开发

快来打我* 2024-03-22 16:20 21阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  33 PC端登录页开发

![在这里插入图片描述][37917e63f0be473296063c1acb037844.png_pic_center]

##### 33 PC端登录页开发 #####

`login.vue`

<template>
    	<div class="d-flex justify-content-center" style="height: 100vh;background-color: #515a6e;">
    		<div class="bg-white rounded p-3" style="width: 380px; margin-top: 50px;height: max-content;">
    			<div class="d-flex flex-column align-items-center justify-content-center">
    				<div class="d-flex align-items-center">
    					<Icon type="md-briefcase" size="55" color="#2db7f5"/>
    					<h3 class="text-muted ml-2">企业网盘</h3>
    				</div>
    				<span class="text-muted small mt-3">企业级网盘解决方案</span>
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>

渲染效果

![在这里插入图片描述][15d63d6d9a1f4eb1877adba4424c6e0c.png_pic_center]

没问题。

`login.vue`

<template>
    	<div class="d-flex justify-content-center" style="height: 100vh;background-color: #515a6e;">
    		<div class="bg-white rounded px-3 pt-3" style="width: 380px; margin-top: 50px;height: max-content;">
    			<div class="d-flex flex-column align-items-center justify-content-center mb-4">
    				<div class="d-flex align-items-center">
    					<Icon type="md-briefcase" size="55" color="#2db7f5" />
    					<h3 class="text-muted ml-2">企业网盘</h3>
    				</div>
    				<span class="text-muted small mt-3">企业级网盘解决方案</span>
    			</div>
    
    			<Form :label-width="0">
    				<FormItem>
    					<Input v-model="formItem.username" placeholder="请输入用户名..."></Input>
    				</FormItem>
    				<FormItem>
    					<Input v-model="formItem.password" placeholder="请输入密码..." type="password"></Input>
    				</FormItem>
    
    				<div class="d-flex align-items-center mb-2">
    					<Checkbox v-model="formItem.remember">自动登录</Checkbox>
    					
    					<a href="#" class="small ml-auto">忘记密码</a>
    					<span class="mx-1">|</span>
    					<a href="#" class="small">注册账户</a>
    				</div>
    
    				<FormItem>
    					<Button type="primary" long>登 录</Button>
    				</FormItem>
    			</Form>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				formItem: {
    					username: "",
    					password: "",
    					remember: false
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

渲染效果

![在这里插入图片描述][86cedfea77934f63a6e95b7f05421b65.png_pic_center]

这下我们来做表单验证

`login.vue`

<template>
    	<div class="d-flex justify-content-center" style="height: 100vh;background-color: #515a6e;">
    		<div class="bg-white rounded px-3 pt-3" style="width: 380px; margin-top: 50px;height: max-content;">
    			<div class="d-flex flex-column align-items-center justify-content-center mb-4">
    				<div class="d-flex align-items-center">
    					<Icon type="md-briefcase" size="55" color="#2db7f5" />
    					<h3 class="text-muted ml-2">企业网盘</h3>
    				</div>
    				<span class="text-muted small mt-3">企业级网盘解决方案</span>
    			</div>
    
    			<Form ref="form" :label-width="0" :model="formItem" :rules="rules">
    				<FormItem prop="username">
    					<Input v-model="formItem.username" placeholder="请输入用户名..."></Input>
    				</FormItem>
    				<FormItem prop="password">
    					<Input v-model="formItem.password" placeholder="请输入密码..." type="password"></Input>
    				</FormItem>
    
    				<div class="d-flex align-items-center mb-2">
    					<Checkbox v-model="formItem.remember">自动登录</Checkbox>
    
    					<a href="#" class="small ml-auto">忘记密码</a>
    					<span class="mx-1">|</span>
    					<a href="#" class="small">注册账户</a>
    				</div>
    
    				<FormItem>
    					<Button type="primary" long @click="submit">登 录</Button>
    				</FormItem>
    			</Form>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				formItem: {
    					username: "",
    					password: "",
    					remember: false
    				},
    				rules: {
    					username: [{
    						required: true,
    						message: '请输入用户名...',
    						trigger: 'blur'
    					}],
    					password: [{
    						required: true,
    						message: '请输入密码...',
    						trigger: 'blur'
    					}]
    				}
    			}
    		},
    		methods: {
    			submit() {
    				this.$refs.form.validate((valid) => {
    					if (!valid) return
    					console.log("提交表单");
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

效果

![在这里插入图片描述][569d1b4ba6964819a12b64e4db20aa57.png_pic_center]

![在这里插入图片描述][5443777986cd42d9b6cb828dae0c8a1d.png_pic_center]

[37917e63f0be473296063c1acb037844.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e5eaac89bb96474cb947f9be019128fc.png
[15d63d6d9a1f4eb1877adba4424c6e0c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/71f681ac38ef467198ab5970c4d17bed.png
[86cedfea77934f63a6e95b7f05421b65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4f6e7c4a712b46b789d4995991d22200.png
[569d1b4ba6964819a12b64e4db20aa57.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5908fa9bd5d24ead9f842c50c6e64f85.png
[5443777986cd42d9b6cb828dae0c8a1d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4dfe94a030a440e3a5bc216ab53b3f04.png