Ajax — 大事件项目（第一天）
生活随笔
收集整理的這篇文章主要介紹了
Ajax — 大事件项目（第一天）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
應用的前端技術
項目說明和演示
項目請求根路徑：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模塊的使用步驟：
使用表單模塊中的表單驗證方法
// 加載模塊 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模塊實現彈出層效果
使用模塊：
具體，在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'
總結
以上是生活随笔為你收集整理的Ajax — 大事件项目（第一天）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GIT — 使用回顾
- 下一篇： Ajax — 大事件项目（第二天）