Skip to content

Commit 3bcc105

Browse files
aibayanyu20aibayanyu20
committed
添加 '33-登录页面布局开发'
1 parent b38b679 commit 3bcc105

File tree

1 file changed

+371
-0
lines changed

1 file changed

+371
-0
lines changed

‎33-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E5%BC%80%E5%8F%91.md

+371
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
## 目标
2+
完成登录页面的开发
3+
## ![截屏2022-11-23 21.32.03.png](https://cdn.nlark.com/yuque/0/2022/png/10377041/1669210379511-4b3c5bc0-79cb-482d-87f0-cac22c3c63c4.png#averageHue=%23121216&clientId=u737cefca-4660-4&from=drop&id=u2a89e285&name=%E6%88%AA%E5%B1%8F2022-11-23%2021.32.03.png&originHeight=1574&originWidth=2688&originalType=binary&ratio=1&rotation=0&showTitle=false&size=218048&status=done&style=none&taskId=ua659e9c9-9163-4a4c-8ad2-465aa5cc375&title=)
4+
## 开发
5+
切到pages/login/index.vue中，首先为了兼容naive-ui的样式系统，我们直接在根节点包一个n-el标签，并定义tag为div。
6+
```vue
7+
<script lang="ts" setup>
8+
9+
</script>
10+
11+
<template>
12+
<n-el tag="div">
13+
登录页
14+
</n-el>
15+
</template>
16+
17+
<style scoped>
18+
19+
</style>
20+
21+
```
22+
### 背景开发
23+
我们先来开发一下我们的背景图片。
24+
```vue
25+
<template>
26+
<n-el tag="div" class="pro-admin-login-container h-screen">
27+
28+
</n-el>
29+
</template>
30+
31+
32+
<style scoped>
33+
.pro-admin-login-container{
34+
background-image: url("~@/assets/images/bg.svg");
35+
background-repeat: no-repeat;
36+
background-position: center 110px;
37+
background-size: 100%;
38+
}
39+
</style>
40+
41+
```
42+
43+
### 开发底部版权信息
44+
```vue
45+
<template>
46+
<n-el ...>
47+
<div flex="~ shrink-0" class="items-center justify-center my-2">
48+
<span>Naive Admin Pro</span>
49+
&copy; 2022 后台管理系统模板
50+
</div>
51+
</n-el>
52+
</template>
53+
```
54+
55+
### 开发logo和描述部分
56+
描述的部分我们还是使用多语言的方式开发，我们在locales下面创建一个pages的目录，然后再创建两个文件分别是：zh-CN.ts和en-US.ts
57+
然后我们先来实现一下描述的多语言如下这里我们将所有与登录页相关的多语言全部罗列出来：
58+
en-US.ts
59+
```typescript
60+
export default {
61+
'login.admin.desc': 'A front-end and back-end solution based on Naive UI',
62+
'login.account.tab': 'Account Login',
63+
'login.mobile.tab': 'Mobile Login',
64+
'login.username.placeholder': 'Username: admin',
65+
'login.username.required': 'Please enter username!',
66+
'login.username.length': 'Username length should be 5 to 20 characters',
67+
'login.password.placeholder': 'Password: admin',
68+
'login.password.required': 'Please enter password!',
69+
'login.password.length': 'Password length should be 5 to 20 characters',
70+
'login.mobile.placeholder': 'Mobile number',
71+
'login.mobile.required': 'Please enter mobile number!',
72+
'login.mobile.verification-code.placeholder': 'Verification code',
73+
'login.mobile.verification-code.required': 'Please enter the verification code!',
74+
'login.mobile.verification-code.rule': 'The verification code format is incorrect!',
75+
'login.mobile.verification-code.get-verification-code': 'Get code',
76+
'login.mobile.resend': 'Resend',
77+
'login.remember-me': 'Remember me',
78+
'login.forgot-password': 'Forgot your password?',
79+
'login.sign-in-with': 'Sign in with:',
80+
'login.signup': 'Sign up',
81+
'login.login': 'Login',
82+
}
83+
84+
```
85+
zh-CN.ts
86+
```typescript
87+
export default {
88+
'login.admin.desc': '一个基于Naive UI的前端中后台的解决方案',
89+
'login.account.tab': '账户密码登录',
90+
'login.mobile.tab': '手机号登录',
91+
'login.username.placeholder': '用户名: admin',
92+
'login.username.required': '请输入用户名!',
93+
'login.username.length': '用户名长度在 5 到 20 个字符',
94+
'login.password.placeholder': '密码: admin',
95+
'login.password.required': '请输入密码！',
96+
'login.password.length': '密码长度在 5 到 20 个字符',
97+
'login.mobile.placeholder': '手机号',
98+
'login.mobile.required': '请输入手机号！',
99+
'login.mobile.rule': '手机号格式错误！',
100+
'login.mobile.verification-code.rule': '验证码格式错误！',
101+
'login.mobile.verification-code.placeholder': '验证码',
102+
'login.mobile.verification-code.required': '请输入验证码！',
103+
'login.mobile.verification-code.get-verification-code': '获取验证码',
104+
'login.mobile.resend': '重新获取',
105+
'login.remember-me': '自动登录',
106+
'login.forgot-password': '忘记密码',
107+
'login.sign-in-with': '其他登录方式：',
108+
'login.signup': '注册账户',
109+
'login.login': '登录',
110+
}
111+
112+
```
113+
然后在login/index.vue中
114+
```vue
115+
<template>
116+
<n-el tag="div" flex="~ col" class="pro-admin-login-container h-screen">
117+
<div class="flex-1">
118+
<div flex="~ col" class="py-20px items-center justify-center">
119+
<div class="flex items-center">
120+
<img src="~@/assets/vue.svg" class="h-40px w-40px">
121+
<span class="ml-3 text-33px font-600">
122+
Naive Admin Pro
123+
</span>
124+
</div>
125+
<div class="flex items-center mt-12px mb-40px text-[var(--text-color-3)]">
126+
{{ $t('login.admin.desc') }}
127+
</div>
128+
</div>
129+
</div>
130+
...
131+
</n-el>
132+
</template>
133+
```
134+
135+
### 实现登录页
136+
137+
```vue
138+
<n-tabs default-value="username" type="line" justify-content="space-evenly">
139+
<n-tab-pane name="username" :tab="$t('login.account.tab')">
140+
<n-form label-placement="left" label-align="left">
141+
<n-form-item-row>
142+
<n-input :placeholder="$t('login.username.placeholder')">
143+
<template #prefix>
144+
<n-icon :component="UserOutlined" />
145+
</template>
146+
</n-input>
147+
</n-form-item-row>
148+
<n-form-item-row>
149+
<n-input :placeholder="$t('login.password.placeholder')">
150+
<template #prefix>
151+
<n-icon :component="LockOutlined" />
152+
</template>
153+
</n-input>
154+
</n-form-item-row>
155+
<n-form-item-row>
156+
<div class="w-100% flex items-center justify-between">
157+
<n-checkbox>
158+
{{ $t("login.remember-me") }}
159+
</n-checkbox>
160+
<a class="cursor-pointer text-[var(--primary-color)]">
161+
{{ $t("login.forgot-password") }}
162+
</a>
163+
</div>
164+
</n-form-item-row>
165+
</n-form>
166+
<n-button type="primary" block secondary strong>
167+
{{ $t("login.login") }}
168+
</n-button>
169+
</n-tab-pane>
170+
<n-tab-pane name="signup" :tab="$t('login.mobile.tab')">
171+
<n-form label-align="left" label-placement="left">
172+
<n-form-item-row>
173+
<n-input :placeholder="$t('login.mobile.placeholder')">
174+
<template #prefix>
175+
<n-icon :component="MobileOutlined" />
176+
</template>
177+
</n-input>
178+
</n-form-item-row>
179+
<n-form-item-row>
180+
<n-input-group>
181+
<n-input :placeholder="$t('login.mobile.verification-code.placeholder')">
182+
<template #prefix>
183+
<n-icon :component="LockOutlined" />
184+
</template>
185+
</n-input>
186+
<n-button>
187+
{{ $t("login.mobile.verification-code.get-verification-code") }}
188+
</n-button>
189+
</n-input-group>
190+
</n-form-item-row>
191+
<n-form-item-row>
192+
<div class="w-100% flex items-center justify-between">
193+
<n-checkbox>
194+
{{ $t("login.remember-me") }}
195+
</n-checkbox>
196+
<a class="cursor-pointer text-[var(--primary-color)]">
197+
{{ $t("login.forgot-password") }}
198+
</a>
199+
</div>
200+
</n-form-item-row>
201+
</n-form>
202+
<n-button type="primary" block secondary strong>
203+
{{ $t("login.login") }}
204+
</n-button>
205+
</n-tab-pane>
206+
</n-tabs>
207+
208+
```
209+
我们来看一下整个的布局效果。
210+
### 第三方登录部分
211+
接下来我们来实现一下第三方登录的部分。
212+
第三方登录我们可以不跟着tab进行切换，我们直接放到tabs的下面。我们以github为例子。
213+
```vue
214+
<div class="flex mt-24px items-center">
215+
{{ $t("login.sign-in-with") }}
216+
<n-icon
217+
size="24"
218+
class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)]"
219+
:component="GithubOutlined"
220+
/>
221+
</div>
222+
```
223+
224+
225+
### 布局抽离
226+
接下来我们来看一下，我们整个的背景这一部分，是可以单独的抽离出来进行复用，所以接下来我们来抽离一下这一部分的布局。
227+
在layouts中创建一个blank-layout的目录并创建一个index.vue的文件。
228+
```vue
229+
<template>
230+
<n-el tag="div" flex="~ col" class="pro-admin-login-container h-screen">
231+
<slot name="prefix" />
232+
<div class="flex-1">
233+
<slot />
234+
</div>
235+
<slot name="suffix">
236+
<div flex="~ shrink-0 basis-auto col" class="items-center">
237+
<div class="my-2">
238+
<span>Naive Admin Pro</span>
239+
&copy; 2022 后台管理系统模板
240+
</div>
241+
</div>
242+
</slot>
243+
</n-el>
244+
</template>
245+
246+
<style scoped>
247+
.pro-admin-login-container{
248+
background-image: url("~@/assets/images/bg.svg");
249+
background-repeat: no-repeat;
250+
background-position: center 110px;
251+
background-size: 100%;
252+
}
253+
</style>
254+
255+
```
256+
在layouts/index.ts中注册组件：
257+
```typescript
258+
import Layout from './base-layout/index.vue'
259+
+ import BlankLayout from './blank-layout/index.vue'
260+
261+
export {
262+
Layout,
263+
+ BlankLayout,
264+
}
265+
266+
```
267+
在pages/login/index.vue中使用
268+
```vue
269+
<script lang="ts" setup>
270+
import { GithubOutlined, LockOutlined, MobileOutlined, UserOutlined } from '@vicons/antd'
271+
import { BlankLayout } from '~/layouts'
272+
</script>
273+
274+
<template>
275+
<BlankLayout>
276+
<div flex="~ col" class="py-20px items-center justify-center">
277+
<div class="flex items-center">
278+
<img src="~@/assets/vue.svg" class="h-40px w-40px">
279+
<span class="ml-3 text-33px font-600">
280+
Naive Admin Pro
281+
</span>
282+
</div>
283+
<div class="flex items-center mt-12px mb-40px text-[var(--text-color-3)]">
284+
{{ $t('login.admin.desc') }}
285+
</div>
286+
<div class="w-350px mx-auto">
287+
<!-- -->
288+
<n-tabs default-value="username" type="line" justify-content="space-evenly">
289+
<n-tab-pane name="username" :tab="$t('login.account.tab')">
290+
<n-form label-placement="left" label-align="left">
291+
<n-form-item-row>
292+
<n-input :placeholder="$t('login.username.placeholder')">
293+
<template #prefix>
294+
<n-icon :component="UserOutlined" />
295+
</template>
296+
</n-input>
297+
</n-form-item-row>
298+
<n-form-item-row>
299+
<n-input :placeholder="$t('login.password.placeholder')">
300+
<template #prefix>
301+
<n-icon :component="LockOutlined" />
302+
</template>
303+
</n-input>
304+
</n-form-item-row>
305+
<n-form-item-row>
306+
<div class="w-100% flex items-center justify-between">
307+
<n-checkbox>
308+
{{ $t("login.remember-me") }}
309+
</n-checkbox>
310+
<a class="cursor-pointer text-[var(--primary-color)]">
311+
{{ $t("login.forgot-password") }}
312+
</a>
313+
</div>
314+
</n-form-item-row>
315+
</n-form>
316+
<n-button type="primary" block secondary strong>
317+
{{ $t("login.login") }}
318+
</n-button>
319+
</n-tab-pane>
320+
<n-tab-pane name="signup" :tab="$t('login.mobile.tab')">
321+
<n-form label-align="left" label-placement="left">
322+
<n-form-item-row>
323+
<n-input :placeholder="$t('login.mobile.placeholder')">
324+
<template #prefix>
325+
<n-icon :component="MobileOutlined" />
326+
</template>
327+
</n-input>
328+
</n-form-item-row>
329+
<n-form-item-row>
330+
<n-input-group>
331+
<n-input :placeholder="$t('login.mobile.verification-code.placeholder')">
332+
<template #prefix>
333+
<n-icon :component="LockOutlined" />
334+
</template>
335+
</n-input>
336+
<n-button>
337+
{{ $t("login.mobile.verification-code.get-verification-code") }}
338+
</n-button>
339+
</n-input-group>
340+
</n-form-item-row>
341+
<n-form-item-row>
342+
<div class="w-100% flex items-center justify-between">
343+
<n-checkbox>
344+
{{ $t("login.remember-me") }}
345+
</n-checkbox>
346+
<a class="cursor-pointer text-[var(--primary-color)]">
347+
{{ $t("login.forgot-password") }}
348+
</a>
349+
</div>
350+
</n-form-item-row>
351+
</n-form>
352+
<n-button type="primary" block secondary strong>
353+
注册
354+
</n-button>
355+
</n-tab-pane>
356+
</n-tabs>
357+
<div class="flex mt-24px items-center">
358+
{{ $t("login.sign-in-with") }}
359+
<n-icon
360+
size="24"
361+
class="cursor-pointer text-[var(--text-color-3)] hover:text-[var(--primary-color)]"
362+
:component="GithubOutlined"
363+
/>
364+
</div>
365+
</div>
366+
</div>
367+
</BlankLayout>
368+
</template>
369+
370+
```
371+
最后我们来看一下实现后的效果。

0 commit comments

Comments
 (0)