Vueログイン

5490 ワード

vue

Vueログイン

ログイン実装ステップ

一、componentsでLoginを作成する.vueファイル

二、まず単一ページコンポーネントのフレームワーク

を構築する

formと2つのinputボックスにデータをバインドし、フォームコントロールにv-model

をバインドする.

フォーム検証

リモートサーバ登録を要求

ログインエラー処理

ジャンプ

は、config/indexでドメイン間で処理する.jsのdevオブジェクトに

を追加

設定クッキー

ログイン実装手順
一、componentsでLoginを作成する.vueファイル
二、まず単一ページコンポーネントのフレームワークを構築する

htmlコードを書いています.templateラベルには必ずhtmlラベルで書かれた内容が書かれていることに注意してください.例えば次の例では
包む

scriptラベルにスクリプトを作成します.

styleラベルにスタイルを書きます.element-uiコンポーネントを使用して、基本的なページ

を作成します.





export default {
  name: "#login",
  data() {
    return {

    }
  },
  methods: {
  }
};

formと2つのinputボックスにデータをバインドし、フォームコントロールにv-modelをバインドします.

dataメソッドでは、同様にデータモデルを作成します.

loginForm: {
      username: '',
      password: '',
 }

フォーム検証
1、element-uiにフォームチェックの例2、data()にこのloginRulesを付けてフォーム検証に使う

loginRules: {
        username: [
            {
                required: true,

                message: "      ",

                trigger: "blur"
            }
        ],
        password: [
           {
               required: true,
               message: '     ',
               trigger: 'blur'
           }
        ]
      }

3、コンポーネントとのバインド

リモート・サーバのログインを要求

要求サーバaxios

npm install axios --save

srcディレクトリの下にutilsフォルダを作成しrequestを作成する.jsファイル

//    
import axios from 'axios'

//  axios     json    ，        ，    axios  
//    Qs    json  ，  formdata      
import Qs from 'Qs'
const service = axios.create({
    baseURL: 'api',
    timeout: 1000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: [function (data) {
        //   data         
        return Qs.stringify(data);
    }],
});

requestを作成します.jsのツールクラスの後、サーバ要求を処理するためにsrcの下にapiフォルダを作成し、apiの下にloginを作成することをお勧めします.jsは、ログインに必要なリクエストサーバインタフェースを定義するために使用される.

import request from '@/utils/request'
export function loginReq(username,password) {
    return request.post('/login.json',{
        loginName: username,
        loginPassword: password
    })
}

作成後、Login.vueでloginReqインタフェースを呼び出します.

//     
import { loginReq } from '@/apis/Login'
// methods      
methods: {
      handleLogin (){
           this.$refs.loginForm.validate((valid) => {
               if(valid){
                  loginReq(this.loginForm.username,this.loginForm.password).then((res) => {
                      console.log(res.data.status);
                  })
               }else{
                   console.log('        ')
               }
           })
      }
  }
// el-button

ログインエラー処理
element-uiを使用してメッセージプロンプトを直接ポップアップできます.

this.$message.error("        ");

ジャンプ
ログインに成功したら、すぐに個人のトップページにジャンプする必要があります.

this.$router.push({
                  name: "Home",
                  params: {
                  username: this.loginForm.username
                  }
             });

ドメイン間処理、config/index.jsのdevオブジェクトに

proxyTable: {
      '/api/**': {
        target: 'http://127.0.0.1:6600/',
        changeOrigin: true, //   
        pathRewrite: {
          '^/api': '/'
        }
      },
    }

クッキーの設定

//  cookie
 setCookie(c_name,c_pwd,exdays) {
  var exdate=new Date();//    
  exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//     
  //     cookie
  window.document.cookie="userName"+ "=" +c_name+";path=/;expires="+exdate.toGMTString();
  window.document.cookie="userPwd"+"="+c_pwd+";path=/;expires="+exdate.toGMTString();
 },
 //  cookie
 getCookie:function () {
  if (document.cookie.length>0) {
   var arr=document.cookie.split('; ');//                    
   for(var i=0;i

vue element-ui tableスクロールバー位置キャッシュ

vueコンポーネント化開発(component)

Vueログイン

Ray