一.說明：美食街點擊登錄

當我們面臨制作登錄和注冊功能的實作時，我們需要先設計登錄界面的布局和注冊界面的布局，做到有完整的思路時才開始實作其功能效果會更好，

我們需要做個標題欄，登陸界面，實作登陸界面的功能代碼塊，注冊界面，實作測驗界面的功能模塊即可完成，

要用到的主要技術堆疊如下：

vue-cli腳手架
vue-router路由
element組件庫
vuex庫
vscode編輯器

二.程序：登錄注冊程序

登錄，注冊界面布局：

我們需要設計想好美化登錄，注冊界面，

在登陸界面和注冊界面：當我們在網頁中點擊登錄時，跳轉到登錄注冊界面，用戶名，可以在前面加一下圖片或者圖示，在設定一下輸入字符的長度，可以用正則或者elelment.ui官網中的組件中去查找，密碼，可以去用正則去設定同時注意隱藏密碼的字符，最后通過注冊的資訊去提交或者重置，

1.撰寫登錄界面：

模擬驗證碼生成
填寫用戶名、密碼、進行登錄
實作"記住我"功能

index.js

<template>
  <div class="login-page">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="登錄" name="login">
        <login></login>
      </el-tab-pane>
      <el-tab-pane label="注冊" name="second">
        <Register></Register>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Login from './login'
import Register from './register'
export default {
  components: {Login, Register},
  data(){
    return {
      activeName: 'login',
    }
  }
}
</script>
<style lang="stylus">
.login-page
  width 500px
  background-color #fff
  margin 0 auto
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 10px;
</style>

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules="rules"
      :model="rulesForm"
      status-icon
      ref="ruleForm"
    >
      <el-form-item label="用戶名" prop="name">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>            //會出方法能拿到表單里的所有東西
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {login} from '@/service/api';
//后端獲取登錄資料
export default {
  data() {
    return {
      //存數資料的物件
      rulesForm:{
        name: '',
        password: '',
      },
      rules:{
        name:[
          {required: true,message: '請輸入用戶名',trigger:'blur'},
          {min:1,max:5,message:"最小為3最大為5",trigger:'blur'}
        ],
        password:[
          {required: true,message: '請輸入用戶名',trigger:'blur'},
          {min:3,max:5,message:"最小為3最大為5",trigger:'blur'}//設定字符長度，失去焦點觸發
        ]

      },
    };
  },
  methods: {
    submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            //如果校檢通過，在這里向后端發送用戶名和密碼
            login({
              name:this.rulesForm.name,
              password:this.rulesForm.password,
            }).then((data)=>{
                console.log(data);
                //看后端給的資料是判斷1和0
                if (data.code === 0) {//登錄成功
                localStorage.setItem('token',data.data.token);//用本地存盤設定資料獲取到的資料
                  window.location.href='/';
                }
                if (data.code === 1) {
                  this.$message.error(data.mes)
                }
            })
          }else{
            console.log("error submit!!");
            return false;
          }
        })
    }
  }
}
</script>

<style lang="stylus">
.login-section
  padding 0px 20px
</style>

2.撰寫注冊頁面組件

需要實作多步驟表單填寫
需要實作表單欄位校驗
模擬驗證碼發送及注冊成功后跳轉登錄

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form 
      label-position="top" 
      label-width="100px" 
      class="demo-ruleForm"
      :rules="rules"
      :model="rulesForm"
      status-icon
      ref="ruleForm"
    >
      <el-form-item label="用戶名" prop="name">
        <el-input type="text" v-model="rulesForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" v-model="rulesForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {register} from '@/service/api';
export default {
  data() {
    return {
        //存數資料的物件
        rulesForm:{
          name: '',
          password: '',
        },
         rules:{//判斷檢驗字串長度，失去焦點時觸發事件
          name:[
            {required: true,message: '請輸入用戶名',trigger:'blur'},
            {min:1,max:5,message:"最小為3最大為5",trigger:'blur'}
          ],
          password:[
            {required: true,message: '請輸入用戶名',trigger:'blur'},
            {min:3,max:5,message:"最小為3最大為5",trigger:'blur'}
          ]

        },
    };
  },
  methods: {
      submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            //如果校檢通過，在這里向后端發送用戶名和密碼
            register({
              name:this.rulesForm.name,
              password:this.rulesForm.password,
            }).then((data)=>{
                console.log(data);
                //根據后端資料判斷1和0
                if (data.code === 0) {//注冊成功
                localStorage.setItem('token',data.data.token);
                  window.location.href='/';
                }
                if (data.code === 1) {
                  this.$message.error(data.mes)
                }
            })
          }else{
            console.log("error submit!!");
            return false;
          }
        })
    }
  }

}
</script>

<style lang="stylus">
.login-section
  padding 0px 20px
</style>

3、路由設定

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import {userInfo}from '@/service/api.js'
import Home from '@/views/home/Home.vue'
import Store  from '@/store'
const Login=()=>import('@/views/user-login/index');
const router = new Router({
    mode:"history",
    routes:[
    {
        path:'/',
        name:"Home",
        title:"首頁",
        component:Home
    },
    {
        path:'/login', 
        name:"login",
        title:"登錄頁",
        component:Login,
        meta:{
            login: true
        },
    },
    // ...viewsRoute,
    {
        path:"*",
        name:"noFound",
        title:"未找到",
        redirect:{
            name:"home"

        }
    },
]
});
//路由守衛
router.beforeEach(async (to,from,next)=>{
    //驗證登錄
    /* 
    有些路由是需要登錄的，判斷狀態
    1.沒有登錄：跳轉到登錄頁
    2.登錄：直接進入
    3.有些路由不需要登錄，那就直接進入；
    ps：是否需要登錄 --meta
    */
    const token=localStorage.getItem('token');//獲取login里的資料
    const isLogin=!!token;//兩個感嘆號轉布林值
    //進入路由的時候，向后端發送token，驗證是否合法
     const data =await userInfo();
     Store.commit('chageUserInfo',data.data);
   //判斷是否需要登錄：如果meta中的為true那么需要登錄
    if (to.matched.some(item=>item.meta.login)) {//需要登錄
        console.log("需要登錄")

        if (isLogin) {//已經登錄但已經登陸就直接通過
            if (data.error === 400) {
                next({name:'login'});
                localStorage.removeItem('token');//移除本地存盤
                return;
            }
            if (to.name=== 'login') {
                next({name:'home'})
            }else{
                next();
            }
            next();
            return;
        }
        if(!isLogin && to.name==='login') {//沒有登陸，仍需要去登錄頁
            next();
        }
        if(!isLogin && to.name !=='login') {//沒有登陸，去的也不是登錄頁
            next({name:"login"});
        }
    } else{
        next();
    }
})

export default router;

4.vuex資料庫

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
    userInfo: {}
  },
  getters:{
    isLogin(state){
      return !!Object.keys(state.userInfo).length;
    }
  },
  mutations:{
    chageUserInfo(state, data){
      state.userInfo = data;
    }
  },
  actions:{}
})

export default store;

5.npm安裝elementUI

npm install element-ui -S #安裝element-ui模塊

在入口檔案中引入：

import ElementUI from 'element-ui' //新添加1
import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包樣式不同，要放在import App from './App';之前

Vue.use(ElementUI) //新添加3

三.注意事項

1.axios請求是使用post請求還是使用get請求
axios是vue2提倡使用的輕量版的ajax，它是基于promise的HTTP庫，它會從瀏覽器中創建XMLHttpRequests，與Vue配合使用非常好，

GET提交：注意資料是保存到json物件的params屬性

post提交：注意資料是直接保存到json物件

2.axios.get提交沒有問題，axios.post提交后臺接收不到資料

因為POST提交的引數的格式是Request Payload，這樣后臺取不到資料的

四.總結

本文講了美食杰制作登錄和注冊功能的實作，界面的布局介紹，如果您還有更好地理解，歡迎溝通
定位：分享 &知識點，有興趣可以繼續關注 vue.js html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302529.html

標籤：其他

上一篇：??炫酷黑色電影資訊博客網頁模板??（電影主題-HTML+CSS+JavaScript-前端大作業）

下一篇：美食杰專案首頁--部分功能代碼以及簡介

美食杰 login的實作效果