1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <template>
| <div class="login-view">
| <Form :model="formInline" :rules="ruleInline" inline ref="refFormInline">
| <FormItem prop="user">
| <Input type="text" v-model="formInline.user" placeholder="Username">
| <template #prepend>
| <Icon type="ios-person-outline"></Icon>
| </template>
| </Input>
| </FormItem>
| <FormItem prop="password">
| <Input
| type="password"
| v-model="formInline.password"
| placeholder="Password"
| >
| <template #prepend>
| <Icon type="ios-lock-outline"></Icon>
| </template>
| </Input>
| </FormItem>
| <FormItem>
| <Button type="primary" @click="onSignIn">Signin</Button>
| </FormItem>
| </Form>
| </div>
| </template>
|
| <script>
| import { ref } from "vue";
| import { login } from "@/api/test";
| import { Base64 } from "js-base64";
| import { showError, showSuccess, setToken } from "@/libs/util";
| export default {
| name: "LoginView",
| data() {
| return {
| formInline: {
| user: "",
| password: "",
| },
| ruleInline: {
| user: [
| {
| required: true,
| message: "Please fill in the user name",
| trigger: "blur",
| },
| ],
| password: [
| {
| required: true,
| message: "Please fill in the password.",
| trigger: "blur",
| },
| {
| type: "string",
| min: 6,
| message: "The password length cannot be less than 6 bits",
| trigger: "blur",
| },
| ],
| },
| };
| },
| methods: {
| onSignIn() {
| this.refFormInline.validate(async (valid) => {
| try {
| if (valid) {
| let res = await login({
| user_login: Base64.encode(this.formInline.user),
| user_psw: Base64.encode(this.formInline.password),
| });
| setToken(res.session_id);
| this.showSuccess("登录成功");
| this.$router.push("/");
| } else {
| this.showError("表单验证失败!");
| }
| } catch (ex) {
| this.showError(ex);
| }
| });
| },
| showError(ex) {
| showError(this, ex);
| },
| showSuccess(tip) {
| showSuccess(this, tip);
| },
| },
| setup() {
| const refFormInline = ref(null);
| return { refFormInline };
| },
| };
| </script>
|
| <style lang="less" scoped>
| .login-view {
| height: 100vh;
| display: flex;
| align-items: center;
| justify-content: center;
| }
| </style>
|
|
