VUE登录页面的开发

Chrome手机版调试

 

 

 

 

组件使用官方网站

https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

 

 

axios的安装

##官方文档：http://www.axios-js.com/docs/index.html



npm install axios

 

App.vue

    <div id="nav">

      <router-link to="/login">登录</router-link> |

      <router-link to="/register">注册</router-link>

    </div>

router.js

import Register from './views/Register.vue'

import Login from './views/Login.vue'

##根目录默认跳转到login

  routes: [

    {

      path: '/',

      name: 'register',

      redirect: '/login'

    },

    {

      path: '/register',

      name: 'register',

      component: Register

    },

    {

      path: '/login',

      name: 'login',

      component: () => import(/* webpackChunkName: "about" */ './views/Login.vue')

    }

  ]

main.js

import './cube-ui'

import axios from 'axios'

import 'amfe-flexible'

import setaxios from './setaxios'

## setaxios.js中的function，拦截request和repsonse

setaxios()

##可以在.vue中使用this.$http

Vue.prototype.$http=axios

setaxios.js

import axios from 'axios'

import store from './store'

import router from './router'

//http全局拦截

//token要放在我们请求的header上面带回去给后端

export default function setAxios(){

    //请求拦截

    axios.interceptors.request.use(

        config=>{

            if(store.state.token){

                config.headers.token=store.state.token

            }

            return config

        }

    )

   //每次的请求有返回的，都是先经过这个拦截器先的

    axios.interceptors.response.use(

        response=>{

            if(response.status==200){

                const data=response.data

                if(data.code==-1){

             //登录过期 需要重新登录 清空vuex的token和localstorage的token

                    store.commit('settoken','')

                    localStorage.removeItem('token')

                    //跳转到login页面

                    router.replace({path:'/login'})

                }

                return data

            }

            return response

        }

    )

}

store.js

  state: {

    token:''

  },

  mutations: {

    //设置vuex的token

    settoken(state,token){

      state.token=token

    }

  },

vue.config.js

//用户信息池

let userpoor=[

  {username:'xiaod',password:'123456'},

  {username:'tim',password:'123456'}

]



//注册接口

app.get('/api/register',(req,res)=>{

  const {username,password}=req.query

  const userlength=userpoor.filter(v=>v.username==username).length

  if(userlength>0){

    res.json({

    success:false,

    message:'用户名已存在'

   })

  }else{

    res.json({

      success:true,

      message:'注册成功'

    })

   }

  })



//登录接口

let tokenkey='xdclass'

app.get('/api/login',(req,res)=>{

  const {username,password}=req.query

  if(username=='xiaod' && password=='123456' || username=='tim' && password=='123456'){

    res.json({

      code:0,

      message:'登录成功',

      token:tokenkey+'-'+username+'-'+(new Date().getTime()+60*60*1000)

    })

   }else{

     res.json({

      code:1,

      message:'账号或密码错误'

     })

    }

  }) 

Register.vue

<template>

    <div>

        <img class="headerimg" src="/learn.png" alt="">

       <cube-form

            :model="model"

            :schema="schema"

            @submit="submitHandler">

       </cube-form>

    </div>

</template>



model:{

         username:'',

         password:''

}



methods:{

         submitHandler(e){

                   e.preventDefault()

                   this.$http.get('/api/register',{params:this.model}).then(res=>{

                   console.log(res.success)

                   }).catch(err=>{

                   console.log(err)

                   })

         }

}

Login.vue

methods:{

         async submitHandler(e){

                   e.preventDefault()

                   try{

                            const result=await this.$http.get('/api/login',{params:this.model})

                            if(result.code=='0'){

                                     this.$store.commit('settoken',result.token)

                                     window.localStorage.setItem('token',result.token)

                            }else{

                                     alert(result.message)

                            }

                   }catch(err){

                            console.log(err)

                   }

         }

}

注册演示效果

登录演示效果