我的第一個項目(二):使用Vue做一個登錄註冊界面

来源:https://www.cnblogs.com/FatTiger4399/archive/2022/11/19/16906977.html
-Advertisement-
Play Games

好家伙, 頂不住了,太多的bug, 本來是想把背景用canvas做成動態的,但是,出現了各種問題 為了不耽誤進度,我們先把一個簡單的登錄註冊界面做出來 來看看效果: (看上去還不錯) 本界面使用Vue2(新建項目的時候記得把less勾上,項目里有用到) 1.項目目錄: 2.MyLogin.vue組件 ...


好家伙,

 

頂不住了,太多的bug,

本來是想把背景用canvas做成動態的,但是,出現了各種問題

為了不耽誤進度,我們先把一個簡單的登錄註冊界面做出來

 

來看看效果:

 

 (看上去還不錯)

 

本界面使用Vue2(新建項目的時候記得把less勾上,項目里有用到)

 

1.項目目錄:

 

 

2.MyLogin.vue組件代碼如下:

<template>
  <div class="login-container">
    <div class="login-box">

      <!-- 頭像區域 -->
      <div class="text-center avatar-box">
        <img src="../assets/logo.png" class="img-thumbnail avatar" alt="">
      </div>

      <!-- 表單區域 -->
      <div class="form-login p-4">
        <!-- 登錄名稱 -->
        <div class="form-group form-inline">
          <label for="username">登錄名稱</label>
          <input type="text" class="form-control ml-2" id="username" placeholder="請輸入登錄名稱" autocomplete="off" v-model.trim="username"/>
        </div>
        <!-- 登錄密碼 -->
        <div class="form-group form-inline">
          <label for="password">登錄密碼</label>
          <input type="password" class="form-control ml-2" id="password" placeholder="請輸入登錄密碼" v-model.trim="password"/>
        </div>
        <!-- 登錄和重置按鈕 -->
        <div class="form-group form-inline d-flex justify-content-end">
          <button type="button" class="btn btn-secondary mr-2" @click="register">註冊</button>
          <button type="button" class="btn btn-primary" @click="login">登錄</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'MyLogin',
  data() {
    return {
      username:'',
      password: ''
    }
  },
  methods: {
    reset() {
      this.username = ''
      this.password = ''
    },
    login() {
      
    },
    register(){
      this.$router.push('/register')
    },
  }
}
</script>

<style lang="less" scoped>
.login-container {
  background-color: #35495e;
  height: 100%;
  .login-box {
    width: 400px;
    height: 250px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

.form-control {
  flex: 1;
}

.avatar-box {
  position: absolute;
  width: 100%;
  top: -65px;
  left: 0;
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #efefef;
  }
}
</style>

(在綠色部分使用你想要的圖片進行替換)

 

 

 

3.MyRegister代碼如下:

<template>
    <div class="login-container">
        <div class="login-box">

            <!-- 頭像區域 -->
            <div class="text-center avatar-box">
                <img src="../assets/logo.png" class="img-thumbnail avatar" alt="">
            </div>

            <!-- 表單區域 -->
            <div class="form-login p-4">
                <!-- 登錄名稱 -->
                <div class="form-group form-inline">
                    <label for="username">賬戶</label>
                    <input type="text" class="form-control ml-2" id="username" placeholder="請輸入登錄名稱" autocomplete="off"
                        v-model.trim="username" />
                </div>
                <!-- 登錄密碼 -->
                <div class="form-group form-inline">
                    <label for="password">密碼</label>
                    <input type="password" class="form-control ml-2" id="password" placeholder="請輸入登錄密碼"
                        v-model.trim="password" />
                </div>
                <!-- 登錄密碼 -->
                <div class="form-group form-inline">
                    <label for="password">手機號</label>
                    <input type="phonenumber" class="form-control ml-2" id="phonenumber" placeholder="請輸入手機號"
                        v-model.trim="password" />
                </div>
                <!-- 登錄和重置按鈕 -->
                <div class="form-group form-inline d-flex justify-content-end">
                    <button type="button" class="btn btn-secondary mr-2" @click="backlogin">返回登陸界面</button>
                    <button type="button" class="btn btn-primary" @click="backlogin">註冊</button>
                </div>
            </div>

        </div>
    </div>
</template>
  
<script>
export default {
    
    name: 'MyLogin',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        backlogin() {
            this.$router.push('/login')

        },
    }
}
</script>
  
<style lang="less" scoped>
.login-container {
  background-color: #35495e;
  height: 100%;
  .login-box {
    width: 400px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

.form-control {
  flex: 1;
}

.avatar-box {
  position: absolute;
  width: 100%;
  top: -65px;
  left: 0;
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #efefef;
  }
}
</style>

 

 

4.路由

你已經是一個成熟的孩子了,要學會自己配路由

import Vue from "vue"
import VueRouter from "vue-router"
import pathArr from "@/router/pathArr.js";
//導入需要的組件
import Login from "@/components/MyLogin";
import Register from "@/components/MyRegister";
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {path: '/',redirect: '/login'},
        //登錄路由規則
        {path: '/login',component: Login},
        //後臺主頁路由規則
        
        //註冊界面路由
        {path: '/register',component: Register},
        //背景頁面

        
    ]
})

 

 

大致效果如下:

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、序言 在日常一線開發過程中,總有列表轉樹的需求,幾乎是項目的標配,比方說做多級菜單、多級目錄、多級分類等,有沒有一種通用且跨項目的解決方式呢?幫助廣大技術朋友給業務瘦身,提高開發效率。 本文將基於Java8的Lambda 表達式和Stream等知識,使用TreeUtils工具類實現一行代碼完成列 ...
  • 面試官: 小伙子,我看你簡歷上寫的項目中用到了線程池,你知道線程池是怎樣實現復用線程的? 這面試官是不是想坑我?是不是擺明瞭不讓我通過? 難道你不應該問線程池有哪些核心參數?每個參數具體作用是什麼? ...
  • 一 演算法複雜度 演算法複雜度分為時間複雜度和空間複雜度。時間複雜度是指執行演算法所需要的計算工作量;而空間複雜度是指執行這個演算法所需要的記憶體空間。 演算法的複雜性體運行該演算法時的電腦所需資源的多少,電腦資源最重要的是時間和空間(即寄存器)資源,因此複雜度分為時間和空間複雜度。 二 時間複雜度 2.1 ...
  • 摘要 在Prism中彈出一個對話框,預設是一個Windows預設樣式的視窗,會與自己所開發的項目完全不搭配,例如下麵這樣子 如果為了迎合軟體主體風格,可以做出類似這樣效果 其實原理也很簡單,Prism也考慮到了這一點,所以特意設計一個供用戶自定義的介面 編寫組件樣式 1、新建一個Window視圖 註 ...
  • 大家都用過Linux中的應用程式安裝工具,如yum、apt、rpm等工具進行安裝自己想要的一些工具或則軟體之類的,當然Linux操作系統還是很強大的有很多類似的命令來安裝我們所需要的程式,但是windwos有沒有類似於windows這樣的應用安裝程式呢?想必大家看標題就能看的出來肯定是有的,那就是微 ...
  • //源文件 void ADCPhyConfig() { RCC->APB2ENR |=1 <<8; //使能 ADC1 時鐘 RCC->AHB1ENR |=1 <<0; //使能 PORTA 時鐘 //PA5 輸入模式、下拉、高速 GPIOA->MODER |= (3<<5*2); //輸入模式 G ...
  • 1.打開手機,開發者選項,開啟usb調試 , 無線調試,查看手機ip 2.cmd 測試是否能ping通手機 > ping 192.168.0.102正在 Ping 192.168.0.102 具有 32 位元組的數據:來自 192.168.0.102 的回覆: 位元組=32 時間=283ms TTL=6 ...
  • UTF-8編碼的漢字:少數是漢字每個占用3個位元組,多數占用4個位元組 # GET請求編碼 Chrome會先把URL中非ASCII字元按照某種編碼格式(谷歌瀏覽器是UTF-8)編碼成byte數組後,然後轉成16進位數組,然後在每個16進位數字前加上&分割 eg: 地址欄:http://localhost ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...