Ajax — 大事件項目（第一天）

應用的前端技術

  1. Ajax (重要) — jQuery方式接口請求
  2. Layui 框架使用
  3. HTML + CSS + JS

項目說明和演示

  1. 線上 DEMO 項目地址：http://www.liulongbin.top:8086/
  2. 項目的 API 接口地址： https://www.showdoc.cc/escook?page_id=3707158761215217

項目請求根路徑：http://www.liulongbin.top:3007

文件獲取：

git — ssh

**   :     git@gitee.com:wang_yu5201314/big_events.git**（文章列表編輯未完成）

百度云：

**鏈接：https://pan.baidu.com/s/1VLGj9d-bBMOcPmL_S6nyIA 提取碼：d1lj

準備工作

  • 創建一個文件夾，（項目根目錄），項目的所有代碼都放到這個文件夾
  • 把資料中的基本代碼里面的文件拷貝到項目目錄中
  • 使用Git來管理項目（以后做完一個功能，提交一次；）
    • git init
    • git add .
    • git commit -m ‘提交了初始的代碼’

模擬服務器的環境

  • 開發完成，最終肯定要把項目發布到真正的服務器上。

  • 所以，本地開發的時候，最好也使用服務器環境（模擬）。

  • 好處是，項目發布到真正的服務器上的時候，不會出現這樣或那樣的問題。因為本地開發的時候，使用的也是服務器環境。

如何使用服務器環境

  • 使用vscode插件 – live server
    • 編輯器右鍵菜單中會出現 “Open With Liver Server”，點擊它，可以預覽頁面
    • 特點：頁面改變之后，瀏覽器會自動刷新
  • 使用vscode插件 – preview on web server
    • 右鍵菜單出現 “vscode-preview-server:Launch on browser”，點擊它可以預覽

使用上述兩個插件，硬性要求：

vscode 編輯器側邊欄（文件區域）不能有其他文件夾，只能有你的項目文件夾。

反例1：

在這里插入圖片描述

反例2：

在這里插入圖片描述

登錄和注冊

新建分支

每個功能，最好創建一個新的分支

# 創建并切換分支
git checkout -b login# 也可以先創建分支，然后在切換分支
git branch login
git checkout login

新建login.html

在項目根目錄里面創建了login.html

創建 big-event/assets/css/login.css

創建 big-event/assets/js/login.js

加載所需的文件

<!-- login.html head區 --><!-- 加載第三方的 layui.css --><link rel="stylesheet" href="/assets/lib/layui/css/layui.css"><!-- 加載自己的css --><link rel="stylesheet" href="/assets/css/login.css"><!-- 加載jquery.js --><script src="/assets/lib/jquery.js"></script><!-- 加載layui.all.js --><script src="/assets/lib/layui/layui.all.js"></script><!-- 加載自己的js --><script src="/assets/js/login.js"></script>

原則是，先加載第三方的css和js。后加載自己的css和js

路徑中的 / 表示項目根目錄 （big-event）,必須使用服務器環境，才能使用 /

logo區布局

<!-- logo盒子 --><div class="logo"><img src="/assets/images/logo.png" /></div>

* {margin: 0;padding: 0;
}html, body {width: 100%;height: 100%;
}body {background: url("/assets/images/login_bg.jpg") no-repeat;background-size: cover;overflow: hidden;
}.logo {padding: 20px 0 0 40px;
}

表單區布局

<!-- 登錄的盒子 --><div class="login"><!-- 盒子的標題 --><div class="title"><img src="/assets/images/login_title.png" /></div><!-- 表單區 --><form class="layui-form"><!-- 第一行：賬號 --><div class="layui-form-item"><i class="layui-icon layui-icon-username"></i><input type="text" name="title" required lay-verify="required" placeholder="請輸入賬號" autocomplete="off"class="layui-input"></div><!-- 第二行：密碼 --><div class="layui-form-item"><i class="layui-icon layui-icon-password"></i><input type="text" name="title" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off"class="layui-input"></div><!-- 第三行：按鈕 --><div class="layui-form-item"><button class="layui-btn layui-btn-fluid layui-bg-blue" lay-submit lay-filter="formDemo">登錄</button></div><!-- 第四行：去注冊 --><div class="layui-form-item"><a href="javascript:">去注冊</a></div></form></div><!-- 注冊的盒子 --><div class="register"><!-- 盒子的標題 --><div class="title"><img src="/assets/images/login_title.png" /></div><!-- 表單區 --><form class="layui-form"><!-- 第一行：賬號 --><div class="layui-form-item"><i class="layui-icon layui-icon-username"></i><input type="text" name="title" required lay-verify="required" placeholder="請輸入賬號" autocomplete="off"class="layui-input"></div><!-- 第二行：密碼 --><div class="layui-form-item"><i class="layui-icon layui-icon-password"></i><input type="text" name="title" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off"class="layui-input"></div><!-- 第三行：確認密碼 --><div class="layui-form-item"><i class="layui-icon layui-icon-password"></i><input type="text" name="title" required lay-verify="required" placeholder="請確認密碼" autocomplete="off"class="layui-input"></div><!-- 第四行：按鈕 --><div class="layui-form-item"><button class="layui-btn layui-btn-fluid layui-bg-blue" lay-submit lay-filter="formDemo">注冊</button></div><!-- 第五行：去登錄 --><div class="layui-form-item"><a href="javascript:">去登錄</a></div></form></div>

/*登錄的盒子和注冊的盒子*/
.login, .register {width: 400px;height: 310px;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}/* 先隱藏注冊的盒子 */
.register {display: none;
}.title {margin: 18px auto;text-align: center;
}/*表單區*/
.layui-form {padding: 0 30px;
}.layui-form a {display: flex;justify-content: flex-end; /*讓元素在盒子的右側顯示*/
}/*字體圖標調整*/
.layui-form-item {position: relative;
}.layui-form-item .layui-icon {position: absolute;top: 11px;left: 8px;
}input.layui-input {padding-left: 28px;
}

$(function () {// 入口函數// --------------------------  切換登錄和注冊的盒子 -------------// 點擊去注冊$('.login a').click(function () {$('.login').hide().next().show();});// 點擊去登錄$('.register a').click(function () {$('.register').hide().prev().show();});});

Git提交了一次

實現注冊功能

// --------------------- 完成注冊功能 ---------------------$('.register form').on('submit', function (e) {e.preventDefault();// 獲取表單中的數據let data = $(this).serialize(); // serialize是根據表單各項的name屬性獲取值的，所以要檢查表單各項的name屬性// 發送ajax請求到接口，完成注冊$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3007/api/reguser',data: data,success: function (res) {alert(res.message);if (res.status === 0) {// 注冊成功，讓登陸的盒子顯示$('.register').hide().prev().show();}}});});

注冊功能可以實現，但是缺少表單驗證。

Git，提交。完成了注冊功能。 git commit -a -m '完成了注冊功能'

layui表單驗證模塊

layui模塊的使用步驟：

  1. 加載模塊（得到一個JS對象）let form = layui.form;
  2. 使用模塊提供的方法

使用表單模塊中的表單驗證方法

// 加載模塊
let form = layui.form;
// 調用方法，定義驗證規則
form.verify({// 對象里面的每個鍵值對，就是一個自定義的驗證規則// 寫法一，使用數組// 驗證規則: [/正則表達式/,  '驗證失敗時的提示']// 寫法二：使用函數// 驗證規則： function (valeu) {//      valeu 表示輸入框輸入的值//      return '失敗后的提示'// }
});

我們的項目 login.js

// -----------------------------   表單驗證  --------------
// 1. 加載表單（form）模塊
let form = layui.form;
// 2. 使用form.verify()方法實現表單驗證
form.verify({// 第一個驗證規則，驗證密碼長度必須是6~12位// key: value// 驗證規則: array|function// pwd: ['正則', '驗證不通過時的提示'],// pwd: [/^\S{6,12}$/, '密碼長度必須是6~12位，并且不能有空格']pwd: function (value) {// value表示使用驗證規則的輸入框的值if (!/^\S{6,12}$/.test(value)) {return '密碼長度必須是6~12位，并且不能有空格';}},// 驗證兩次密碼repwd: function (value) {// value 表示確認密碼let pwd = $('input[name="password"]').val().trim(); // 獲取密碼if (value !== pwd) {return '兩次密碼不一致';}}
});

login.html頁面中，表單元素使用驗證規則：

<!-- 第二行：密碼 -->
<div class="layui-form-item"><i class="layui-icon layui-icon-password"></i><input type="text" name="password" required lay-verify="required|pwd" placeholder="請輸入密碼" autocomplete="off"class="layui-input">
</div>

<!-- 第三行：確認密碼 -->
<div class="layui-form-item"><i class="layui-icon layui-icon-password"></i><input type="text" required lay-verify="required|pwd|repwd" placeholder="請確認密碼" autocomplete="off"class="layui-input">
</div>

千萬注意：想要實現表單驗證，登錄按鈕必須有 lay-submit 屬性

Git 提交。git commit -a -m ‘完成了注冊時的表單驗證’

使用layer模塊實現彈出層效果

使用模塊：

  1. 加載模塊 let layer = layui.layer;
  2. 調用方法 layer.msg(提示信息)

具體，在login.js中，先加載模塊，然后注冊的失敗，使用彈出層。

let layer = layui.layer; // 加載彈出層模塊
// --------------------- 完成注冊功能 ---------------------
$('.register form').on('submit', function (e) {e.preventDefault();// 獲取表單中的數據let data = $(this).serialize(); // serialize是根據表單各項的name屬性獲取值的，所以要檢查表單各項的name屬性// 發送ajax請求到接口，完成注冊$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3007/api/reguser',data: data,success: function (res) {// alert(res.message);layer.msg(res.message);if (res.status === 0) {// 注冊成功，讓登陸的盒子顯示$('.register').hide().prev().show();}}});
});

Git提交。 git commit -a -m '使用layer模塊優化注冊的彈出層'

實現登錄功能

自行修改表單項的name屬性值。

// --------------------------  完成登錄功能 ---------------------------
$('.login form').on('submit', function (e) {e.preventDefault();// 獲取賬號和密碼// 提交給接口，完成登錄。登錄成功，跳轉到 index.html （index.html是項目的首頁面）$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3007/api/login',data: $(this).serialize(), // 檢查表單各項的name屬性值success: function (res) {layer.msg(res.message);if (res.status === 0) {// 登錄成功，跳轉到index.htmllocation.href = '/index.html';}}});
})

Git提交， git commit -a -m '完成了登錄代碼'

JWT驗證機制原理

JWT（json web token），是一種前后端分離項目的常用身份認證機制。

原理圖：

在這里插入圖片描述

項目中，登錄成功之后，把token保存到本地存儲中：

// --------------------------  完成登錄功能 ---------------------------
$('.login form').on('submit', function (e) {e.preventDefault();// 獲取賬號和密碼// 提交給接口，完成登錄。登錄成功，跳轉到 index.html （index.html是項目的首頁面）$.ajax({type: 'POST',url: 'http://www.liulongbin.top:3007/api/login',data: $(this).serialize(), // 檢查表單各項的name屬性值success: function (res) {layer.msg(res.message);if (res.status === 0) {// 登錄成功，先保存token（令牌）---------------------localStorage.setItem('token', res.token);// 登錄成功，跳轉到index.htmllocation.href = '/index.html';}}});
})

Git提交， git commit -a -m '登錄成功記錄了token'

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248029.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248029.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248029.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

JS,JQ 格式化小數位數

JS,JQ 格式化小數位數

在<script>中&#xff1a; $(function(){ 　　var num$(".price").length;/*獲取應用了class"price"的標簽數量*/ 　　for(var i0;i<num;i){ 　　　　if($(".price")[i].innerText!"") 　　　　　　$(".price")[i]…
閱讀更多...
iOS開發實用技巧—Objective-C中的各種遍歷（迭代）方式

iOS開發實用技巧—Objective-C中的各種遍歷（迭代）方式

說明&#xff1a; 1&#xff09;該文簡短介紹在iOS開發中遍歷字典、數組和集合的幾種常見方式。 2&#xff09;該文對應的代碼可以在下面的地址獲得&#xff1a;https://github.com/HanGangAndHanMeimei/Code 一、使用for循環 要遍歷字典、數組或者是集合&#xff0c;for循環是…
閱讀更多...
windows系統作為客戶端時,linux中本地yum源掛載時,如何同時掛載DVD1和DVD2?

windows系統作為客戶端時,linux中本地yum源掛載時,如何同時掛載DVD1和DVD2?

這里以CentOS6.5為例.他的鏡像有兩個DVD1和DVD2.DVD1中是系統和主要的安裝包,DVD2中是剩下的安裝包 當掛載時如果要同時掛載DVD1和DVD2.需要這樣做: 1)在虛擬機的設置中選擇連接 2)分別在mnt下創建cdrom和cdrom1文件夾 3)到dev下查看有軟連接 cdrom->sr0 cdrom1->sr1 這里…
閱讀更多...
Ajax — 大事件項目（第二天）

Ajax — 大事件項目（第二天）

大事件-02 fix一個bug 原因&#xff1a; 開始做注冊的時候&#xff0c;頁面中只有一個 namepassword的input&#xff0c;所以 $(‘input[name“password”]’) 可以準確的找到元素后來做登錄的時候&#xff0c;頁面中多了一個namepassword的input&#xff0c;所以$(‘input[…
閱讀更多...
OpenCV自帶dnn的Example研究（3）— object_detection

OpenCV自帶dnn的Example研究（3）— object_detection

這個博客系列&#xff0c;簡單來說&#xff0c;今天我們就是要研究https://docs.opencv.org/master/examples.html下的6個文件&#xff0c;看看在最新的OpenCV中&#xff0c;它們是如何發揮作用的。在配置使用的過程中&#xff0c;需要注意使用較高版本的VS避免編譯器兼容問題&…
閱讀更多...
Ajax — 大事件項目（第三天）

Ajax — 大事件項目（第三天）

大事件-03 用戶信息 表單驗證 html中&#xff0c;直接使用layui提供的內置驗證規則 email <input type"text" name"email" required lay-verify"required|email" placeholder"請輸入郵箱" autocomplete"off" class&q…
閱讀更多...
iOS中監測來電方案

iOS中監測來電方案

問題 最近在做一個有錄音功能的App&#xff0c;要求當用戶接到來電時&#xff0c;要停止錄音。該如何實現這個功能呢&#xff1f; 解決方案 我首先想到了AppDelegate里的applicationWillResignActive:方法&#xff0c;在該方法的注釋中就寫到到收到來電或短信時&#xff0c;系統…
閱讀更多...
iOS運行時-使用Runtime向Category中添加屬性以及運行時介紹

iOS運行時-使用Runtime向Category中添加屬性以及運行時介紹

前言 了解OC的都應該知道&#xff0c;在一般情況下&#xff0c;我們是不能向Category中添加屬性的&#xff0c;只能添加方法&#xff0c;但有些情況向&#xff0c;我們確實需要向Category中添加屬性&#xff0c;而且很多系統的API也有一些在Category添加屬性的情況&#xff0c;…
閱讀更多...
Ajax — cropper (圖片剪裁)基本用法

Ajax — cropper (圖片剪裁)基本用法

jQuery-cropper插件完整的API&#xff1a;http://www.jq22.com/jquery-info9322 1. 基本使用步驟 在 <head> 中導入 cropper.css 樣式表&#xff1a; <link rel"stylesheet" href"/assets/lib/cropper/cropper.css" />在 <body> 的結…
閱讀更多...
「短篇小說」靈囚 540 天

「短篇小說」靈囚 540 天

轉載&#xff1a;知乎 - BIMBOX 孫彬 - https://zhuanlan.zhihu.com/p/24655832 「我們總有一天會逾越那條上帝劃好的界限&#xff0c;而最終我們將無法面對真實和虛假&#xff0c;正義與罪惡。」 「不幸的是&#xff0c;從伊甸園那一次&#xff0c;我們就已經越界了。」 第十天…
閱讀更多...
iOS 夠逼格的注釋總結

iOS 夠逼格的注釋總結

首先關于注意這里就不說什么VVDocument了&#xff0c;來點新鮮的&#xff01; 也許你使用過#warning 警告提示 也許你也使用過#pragma marks。 但是你見過或者使用過下面這個嗎&#xff1f; Comments containing:MARK:TODO:FIXME:!!!:???: 沒有&#xff0c;那么你就快速的看…
閱讀更多...
Git圖形化管理工具

Git圖形化管理工具

Git圖形化管理工具 注意&#xff1a;必須在創建的倉庫中進行右鍵打開 復制這段內容后打開百度網盤App&#xff0c;操作更方便哦。 鏈接&#xff1a;https://pan.baidu.com/s/1eXIk01LXSmzmXvYfw3MnEA 提取碼&#xff1a;J166 --來自百度網盤超級會員V5的分享 分類 sourceTr…
閱讀更多...
TCP/IP（一）：數據鏈路層

TCP/IP（一）：數據鏈路層

背景 這一系列的文章主要是為一般的、非專業開發崗位(如移動端)的工程師準備&#xff0c;一方面可以對網絡的基本知識有基本的了解&#xff0c;另一方面不至于面試中被問到相關問題時束手無策。知識以 TCP/IP 協議簇為主&#xff0c;也會有應用層和數據鏈路層的簡單介紹。 文…
閱讀更多...
富文本和封面制作

富文本和封面制作

1. 富文本編輯器的實現步驟 添加如下的 layui 表單行&#xff1a; <div class"layui-form-item"><!-- 左側的 label --><label class"layui-form-label">文章內容</label><!-- 為富文本編輯器外部的容器設置高度 --><div…
閱讀更多...
Linux系統編程——線程（1）

Linux系統編程——線程（1）

目錄 線程概要Linux內核線程實現原理線程的共享/不共享資源線程優缺點線程控制原語pthread_selfpthread_createpthread_exitpthread_joinpthread_cancel終止線程方式控制原語對比前情提要&#xff1a; Linux用戶級線程和內核級線程區別 線程概要 Linux內核線程實現原理 類Unix系…
閱讀更多...
TCP/IP（二）：IP協議

TCP/IP（二）：IP協議

IP協議處于OSI參考模型的第三層——網絡層&#xff0c;網絡層的主要作用是實現終端節點間的通信。IP協議是網絡層的一個重要協議&#xff0c;網絡層中還有ARP(獲取MAC地址)和ICMP協議(數據發送異常通知) 數據鏈路層的作用在于實現同一種數據鏈路下的包傳遞&#xff0c;而網絡層…
閱讀更多...
Ajax — 大事件項目（第四天）

Ajax — 大事件項目（第四天）

分類管理 添加分類 初步使用彈出層 給 “添加分類” 綁定一個單擊事件單擊事件中&#xff0c;使用 layer.open() 實現一個彈出層 type: 1, 彈層的類型是頁面層title, “添加文字分類”content: ‘字符串&#xff0c;DOM’,area: [‘500px’, ‘250px’] // ---------------…
閱讀更多...
redis學習（四）

redis學習（四）

一、Redis 鍵(key) 1、Redis 鍵命令用于管理 redis 的鍵。 2、Redis 鍵命令的基本語法如下&#xff1a;redis 127.0.0.1:6379> COMMAND KEY_NAME 3、常用key命令 keys * 獲取所有的keyselect 0 選擇第一個庫move myString 1 將當前的數據庫key移動到某個…
閱讀更多...
TCP/IP（三）：IP協議相關技術

TCP/IP（三）：IP協議相關技術

在前兩篇文章中&#xff0c;我分別介紹了數據鏈路層和網絡層的IP協議。雖然這個系列教程的重點是搞定 TCP/IP&#xff0c;不過不用著急&#xff0c;本文簡要介紹完與 IP 協議相關的技術&#xff0c;下一篇文章就會正式、詳細的介紹 傳輸層與 TCP 協議。這篇文章會介紹 DNS、ARP…
閱讀更多...
Node — 第一天

Node — 第一天

Node-01 會 JavaScript&#xff0c;就能學會 Node.js&#xff01;&#xff01;&#xff01; **Node.js 的官網地址&#xff1a; ** Node.js 的學習路徑&#xff1a; JavaScript 基礎語法 Node.js 內置 API 模塊&#xff08;fs、path、http等&#xff09; 第三方 API 模塊&…
閱讀更多...
最新文章

Copyright @ 2022~2023