我的第一個項目(四):(前端)發送請求以及表單校驗

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

好家伙,本篇將繼續完善前端界面 效果展示: 1.註冊登陸 (後端已啟動) 2.註冊表單驗證 (前端實現的表單驗證) 在此之前: 我的第一個項目(二):使用Vue做一個登錄註冊界面 - 養肥胖虎 - 博客園 (cnblogs.com) 後端部分: 我的第一個項目(三):註冊登陸功能(後端) - 養肥胖 ...


好家伙,本篇將繼續完善前端界面

 

效果展示:

1.註冊登陸

(後端已啟動)

 

 

 

 

2.註冊表單驗證

(前端實現的表單驗證)

 

 

 

 

在此之前:

我的第一個項目(二):使用Vue做一個登錄註冊界面 - 養肥胖虎 - 博客園 (cnblogs.com)

後端部分:

我的第一個項目(三):註冊登陸功能(後端) - 養肥胖虎 - 博客園 (cnblogs.com)

 

1.前端發送網路請求(axios)

項目目錄:

 

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="loginForm.loginName"/>
        </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="loginForm.password"/>
        </div>
        <!-- 登錄和重置按鈕 -->
        <div class="form-group form-inline d-flex justify-content-end">
          <button type="button" class="btn btn-secondary mr-2" @click="toregister">去註冊</button>
          <button type="button" class="btn btn-primary" @click="login">登錄</button>
        </div>
      </div>

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

<script>
export default {
  name: 'MyLogin',
  data() {
    return {
      loginForm: {
          loginName: '',
          password: ''
        }
    }
  },
  methods: {
    
    login() {
        // console.log('submit!',this.loginForm);
        
            this.axios.post('http://localhost:3312/sys-user/login',this.loginForm).then((resp)=>{
              console.log(resp);
                let data = resp.data;
                if(data.success){
                    this.loginForm= {};
                    this.$message({
                    message: '登陸成功!!!',
                    type: 'success'
                    });
                    this.$router.push({path:'/Home'})
                } else {

                  console.log(data)

                }
            })

      },
    toregister(){
      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>

 

MyRegister.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">
                <!-- 登錄名稱 -->
                <!--.trim用於去除首位空格  -->
                <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="ruleForm.loginName" />
                </div>

                <!-- 登錄昵稱 -->
                <div class="form-group form-inline">
                    <label for="password">昵稱:</label>
                    <input type="name" class="form-control ml-2" id="name" placeholder="請輸入手機號"
                        v-model.trim="ruleForm.name" />
                </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="ruleForm.password" />
                </div>
                <!-- 確認密碼 -->
                <div class="form-group form-inline">
                    <label for="password">確認密碼:</label>
                    <input type="trypassword" class="form-control ml-2" id="password" placeholder="請再次輸入登錄密碼"
                        v-model.trim="ruleForm.checkPass" />
                </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="submitForm(ruleForm)">註冊</button>
                </div>
            </div>

        </div>
    </div>
</template>
  
<script>
export default {

    name: 'MyRegister',
    data() {
        return {
            ruleForm: {
                loginName: '',
                password: '',
                name: '',
                checkPass: ""
            },
        }
    },
    methods: {
        backlogin() {
            this.$router.push('/login')
            return
        },
        submitForm(ruleForm) {
            //校驗部分
            if (this.ruleForm.password != this.ruleForm.checkPass) {
                this.$message({
                    message: '兩次輸入密碼不一致!!!',
                    type: 'error'
                });
            }
            else if(this.ruleForm.loginName==""){
                this.$message({
                    message: '請輸入賬戶!!!',
                    type: 'error'
                });
            }
            else if(this.ruleForm.name==""){
                this.$message({
                    message: '請輸入昵稱!!!',
                    type: 'error'
                });
            }
            else if(this.ruleForm.password==""){
                this.$message({
                    message: '請輸入密碼!!!',
                    type: 'error'
                });
            }
            else {
                this.axios.post('http://localhost:3312/sys-user/register', this.ruleForm).then((resp) => {
                    console.log(resp);
                    
                    let data = resp.data;
                    console.log(data);
                    if (data.success) {
                        this.ruleForm = {};
                        this.$message({
                            message: '恭喜你,註冊成功,點擊去登陸按鈕進行登陸吧!!!',
                            type: 'success'
                        });
                    }
                })
                this.$router.push({ path: '/login' })
            }

        },
    }
}
</script>
  
<style lang="less" scoped>
.login-container {
    background-color: #35495e;
    height: 100%;

    .login-box {
        width: 400px;
        height: 320px;
        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>

 

請求部分:

{
                //發起網路請求,
                this.axios.post('http://localhost:3312/sys-user/register', this.ruleForm).then((resp) => {
                    console.log(resp);
                    
                    let data = resp.data;
                    console.log(data);
                    //檢驗註冊是否成功
                    if (data.success) {
                        //清空表單數據
                        this.ruleForm = {};
                        //發送成功通知
                        this.$message({
                            message: '恭喜你,註冊成功,點擊去登陸按鈕進行登陸吧!!!',
                            type: 'success'
                        });
                    }
                })
                this.$router.push({ path: '/login' })
            }

 

2.表單驗證:

if (this.ruleForm.password != this.ruleForm.checkPass) {
                this.$message({
                    message: '兩次輸入密碼不一致!!!',
                    type: 'error'
                });
            }
            else if(this.ruleForm.loginName==""){
                this.$message({
                    message: '請輸入賬戶!!!',
                    type: 'error'
                });
            }
            else if(this.ruleForm.name==""){
                this.$message({
                    message: '請輸入昵稱!!!',
                    type: 'error'
                });
            }
            else if(this.ruleForm.password==""){
                this.$message({
                    message: '請輸入密碼!!!',
                    type: 'error'
                });
            }

這個沒什麼好解釋的,就是很簡單的驗證

如果使用的是組件的表單(比如:element之類的)也可以編輯相應的表單驗證方法(規則)

當然,自己手寫也沒什麼問題

 

 

補充:資料庫建表

(前面好像一直都忘了)

 


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

-Advertisement-
Play Games
更多相關文章
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • Linux下用rm誤刪除文件的三種恢復方法 對於rm,很多人都有慘痛的教訓。我也遇到一次,一下午寫的程式就被rm掉了,幸好只是一個文件,第二天很快又重新寫了一遍。但是很多人可能就不像我這麼幸運了。本文收集了一些在Linux下恢復rm刪除的文件的方法,給大家作為參考。 1.幾點建議避免誤刪 首先,最好 ...
  • 大數據時代,資料庫 SaaS 是企業實現降本增效和業務創新的重要抓手。在騰訊全球數字生態大會資料庫 SaaS 專場上,騰訊雲發佈了多項資料庫 SaaS 產品能力升級,並重點分享了其在上雲、日常運維、資料庫遷移等多方面的實踐應用,為廣大企業構建和提升自身數據能力提供了有效參考。 騰訊雲資料庫副總經理羅 ...
  • 大量的數據科學職位需要精通 SQL,它也是數據分析師、數據科學家、數據建模崗最常考核的面試技能。在本篇內容中 ShowMeAI 將梳理彙總所有面試 SQL 問題,按照不同的主題構建練習專項塊。 ...
  • 閱識風雲是華為雲信息大咖,擅長將複雜信息多元化呈現,其出品的一張圖(雲圖說)、深入淺出的博文(雲小課)或短視頻(雲視廳)總有一款能讓您快速上手華為雲。更多精彩內容請單擊此處。 摘要:購買Redis實例時,實例類型有單機、主備、Proxy集群、Cluster集群和讀寫分離這麼多種,該怎麼選?別擔心,本 ...
  • TIS整合ChunJun實操 B站視頻: https://www.bilibili.com/video/BV1QM411z7w5/?spm_id_from=333.999.0.0 一、ChunJun 概述 ChunJun是一款易用、穩定、高效的批流統一的數據集成框架,可基於實時計算引擎Flink實現 ...
  • 當我們把介面都做好以後,我們需要去開發前端界面。 添加文章功能裡面,最重要的就是文章內容部分,需要配置上富文本編輯器,這樣才能給我們的內容增加樣式。 下載ueditor代碼 ueditor已經很久沒有更新了,我們現在去github下載壓縮好的代碼包 https://github.com/fex-te ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...