一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--登录页面
advertisement

使用vue全家桶高仿小米商城--登录页面

代码如下:

  1. <template>  
  2.   <div class="login">  
  3.     <div class="container">  
  4.       <a href="/#/index"><img src="/images/login-logo.png" alt=""></a>  
  5.     </div>  
  6.     <div class="wrapper">  
  7.       <div class="container">  
  8.         <div class="login-form">  
  9.           <h3>  
  10.             <span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>  
  11.           </h3>  
  12.           <div class="input">  
  13.             <input type="text" placeholder="请输入帐号" v-model="username">  
  14.           </div>  
  15.           <div class="input">  
  16.             <input type="password" placeholder="请输入密码" v-model="password">  
  17.           </div>  
  18.           <div class="btn-box">  
  19.             <a href="javascript:;" class="btn" @click="login">登录</a>  
  20.           </div>  
  21.           <div class="tips">  
  22.             <div class="sms" @click="register">手机短信登录/注册</div>  
  23.             <div class="reg">立即注册<span>|</span>忘记密码?</div>  
  24.           </div>  
  25.         </div>  
  26.       </div>  
  27.     </div>  
  28.     <div class="footer">  
  29.       <div class="footer-link">  
  30.         <a href="http://www.zhangren.online" target="_blank">Blog</a><span>|</span>  
  31.         <a href="https://github.com/listenerzhang" target="_blank">Github</a><span>|</span>  
  32.       </div>  
  33.       <p class="copyright">Copyright ©2020 www.zhangren.online All Rights Reserved.</p>  
  34.     </div>  
  35.   </div>  
  36. </template>  
  37.   
  38. <script>  
  39. // import {mapActions} from 'vuex'  
  40.   
  41. export default {  
  42.   name: 'login',  
  43.   data () {  
  44.     return {  
  45.         username: '',  
  46.         password: '',  
  47.         userId: '',  
  48.         res:{}  
  49.     }  
  50.   },  
  51.   methods: {  
  52.     login () {  
  53.         let {username, password} = this;  
  54.         this.axios.post('/user/login', {  
  55.             username,  
  56.             password  
  57.         }).then(res => {  
  58.             this.res = res;  
  59.             this.$cookie.set('userId', res.id, {expires: '1M'});  
  60.             this.$router.push('/index')  
  61.       })  
  62.     },  
  63.     register () {  
  64.       this.axios.post('/user/register', {  
  65.         username: 'zhangren',  
  66.         password: 'zhangren',  
  67.         email: '908123945@qq.com'  
  68.       }).then(() => {  
  69.         alert('注册成功')  
  70.       })  
  71.     }  
  72.   }  
  73. }  
  74. </script>  
  75.   
  76. <style lang="scss">  
  77.   .login{  
  78.     &>.container{  
  79.       height:113px;  
  80.       img{  
  81.         width:auto;  
  82.         height:100%;  
  83.       }  
  84.     }  
  85.     .wrapper{  
  86.       background:url('/images/login-bg.jpg') no-repeat center;  
  87.       .container{  
  88.         height:576px;  
  89.         .login-form{  
  90.           box-sizing: border-box;  
  91.           padding-left: 31px;  
  92.           padding-right: 31px;  
  93.           width:410px;  
  94.           height:510px;  
  95.           background-color:#ffffff;  
  96.           position:absolute;  
  97.           bottom:29px;  
  98.           right:0;  
  99.           h3{  
  100.             line-height:23px;  
  101.             font-size:24px;  
  102.             text-align:center;  
  103.             margin:40px auto 49px;  
  104.             .checked{  
  105.               color:#FF6600;  
  106.             }  
  107.             .sep-line{  
  108.               margin:0 32px;  
  109.             }  
  110.           }  
  111.           .input{  
  112.             display:inline-block;  
  113.             width:348px;  
  114.             height:50px;  
  115.             border:1px solid #E5E5E5;  
  116.             margin-bottom:20px;  
  117.             input{  
  118.               width: 100%;  
  119.               height: 100%;  
  120.               border: none;  
  121.               padding: 18px;  
  122.             }  
  123.           }  
  124.           .btn{  
  125.             width:100%;  
  126.             line-height:50px;  
  127.             margin-top:10px;  
  128.             font-size:16px;  
  129.           }  
  130.           .tips{  
  131.             margin-top:14px;  
  132.             display:flex;  
  133.             justify-content:space-between;  
  134.             font-size:14px;  
  135.             cursor:pointer;  
  136.             .sms{  
  137.               color:#FF6600;  
  138.             }  
  139.             .reg{  
  140.               color:#999999;  
  141.               span{  
  142.                 margin:0 7px;  
  143.               }  
  144.             }  
  145.           }  
  146.         }  
  147.       }  
  148.     }  
  149.     .footer{  
  150.       height:100px;  
  151.       padding-top:60px;  
  152.       color:#999999;  
  153.       font-size:16px;  
  154.       text-align:center;  
  155.       .footer-link{  
  156.         a{  
  157.           color:#999999;  
  158.           display:inline-block;  
  159.         }  
  160.         span{  
  161.           margin:0 10px;  
  162.         }  
  163.       }  
  164.       .copyright{  
  165.         margin-top:13px;  
  166.       }  
  167.     }  
  168.   }  
  169. </style>  

1、首先的到router.js里面去配置登录页面的路由,如下图所示:

2、因为使用了vue-cookie所以得在mian.js里面引入:
import VueCookie from 'vue-cookie',然后在加载它即可:Vue.use(VueCookie);

zhangren.online
上一篇:使用vue全家桶高仿小米商城--首页轮播Swiper使用
下一篇:使用vue全家桶高仿小米商城--拉取用户信息

您可能喜欢

回到顶部