前几天用vue写了一个移动端的登录界面,记录一下这个练手小项目。

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. export default { 35. data() { 36. return { 37. // 这是登录表单的数据绑定对象 38. loginForm: { 39. username: '', 40. password: '' 41. }, 42. // 这是表单的验证规则对象 43. loginFormRules: { 44. // 验证用户名是否合法 45. username: [ 46. { required: true, message: '请输入登录名称', trigger: 'blur' }, //鼠标失去焦点的时候触发 47. { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } 48. ], 49. // 验证密码是否合法 50. password: [ 51. { required: true, message: '请输入登录密码', trigger: 'blur' }, 52. { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } 53. ] 54. } 55. } 56. }, 57. methods: { 58. login() { 59. this.$refs.loginFormRef.validate(async valid => { 60. // console.log(valid); 61. if (!valid) return 62. const { data: res } = await this.$http.post('login', this.loginForm) 63. if (res.meta.status !== 200) return this.$message.error('登录失败!') 64. this.$message.success('登录成功') 65. // 1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中 66. // 1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问 67. // 1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中 68. window.sessionStorage.setItem('token', res.data.token) 69. // 2. 通过编程式导航跳转到后台主页,路由地址是 /home 70. this.$router.push('./home/index') 71. }) 72. } 73. 74. } 75. } 76.77. 78.79. .login_container { 80. background-image:url(../assets/2.jpg); 81. font-size: 16px; 82. background-color: white; 83. height: 100%; 84. background-size:100% 100%; 85. } 86. 87. /deep/ .el-input__inner { 88. font-size: 40px !important; 89. height: 100px; 90. border-radius:20px; 91. } 92. 93. 94. .login_box { 95. width: 80%; 96. height: 1000px; 97. border-radius: 3px; 98. position: relative; 99. left: 50%; 100. top: 50%; 101. transform: translate(-50%, -50%); 102. 103. .avatar_box { 104. height: 200px; 105. width: 200px; 106. border: 1px solid #eee; 107. border-radius: 50%; 108. padding: 10px; 109. box-shadow: 0 0 10px #ddd; 110. position: absolute; 111. left: 50%; 112. transform: translate(-50%, -50%); 113. background-color: black; 114. img { 115. width: 100%; 116. height: 100%; 117. border-radius: 50%; 118. } 119. 120. } 121. } 122. 123. .login_form { 124. position: absolute; 125. bottom: 300px; 126. width: 100%; 127. box-sizing: border-box; 128. } 129. 130. .btns { 131. width: 100%; 132. height: 100px; 133. button { 134. border:none; 135. border-radius:20px; 136. height: 100px; 137. width: 100%; 138. justify-content: center; 139. color: black; 140. background-color: #50E3CE; 141. font-size: 40px 142. } 143. } 144. 145.
vue界面中的路径跳转与router包中的不一定匹配,这里仅是分享登录界面的设计,具体的请求路径还请自行调试
可以支持一下博主
链接:也可以在百度云获得资源
提取码:abcd
Copyright © 2023 leiyu.cn. All Rights Reserved. 磊宇云计算 版权所有 许可证编号:B1-20233142/B2-20230630 山东磊宇云计算有限公司 鲁ICP备2020045424号
磊宇云计算致力于以最 “绿色节能” 的方式,让每一位上云的客户成为全球绿色节能和降低碳排放的贡献者