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.mzph.cn/news/248029.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iOS开发实用技巧—Objective-C中的各种遍历（迭代）方式

iOS开发实用技巧—Objective-C中的各种遍历（迭代）方式

说明&#xff1a; 1&#xff09;该文简短介绍在iOS开发中遍历字典、数组和集合的几种常见方式。 2&#xff09;该文对应的代码可以在下面的地址获得&#xff1a;https://github.com/HanGangAndHanMeimei/Code 一、使用for循环 要遍历字典、数组或者是集合&#xff0c;for循环是…
阅读更多...
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运行时-使用Runtime向Category中添加属性以及运行时介绍

iOS运行时-使用Runtime向Category中添加属性以及运行时介绍

前言 了解OC的都应该知道&#xff0c;在一般情况下&#xff0c;我们是不能向Category中添加属性的&#xff0c;只能添加方法&#xff0c;但有些情况向&#xff0c;我们确实需要向Category中添加属性&#xff0c;而且很多系统的API也有一些在Category添加属性的情况&#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;也会有应用层和数据链路层的简单介绍。 文…
阅读更多...
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 模块&…
阅读更多...
TCP/IP（四）：TCP 与 UDP 协议简介

TCP/IP（四）：TCP 与 UDP 协议简介

从本章开始&#xff0c;我们开始介绍最重要的传输层。传输层位于 OSI 七层模型的第四层&#xff08;由下往上&#xff09;。顾名思义&#xff0c;传输层的主要作用是实现应用程序之间的通信。网络层主要是保证不同数据链路下数据的可达性&#xff0c;至于如何传输数据则是由传输…
阅读更多...
Node — 第二天

Node — 第二天

http模块 搭建服务器的步骤 ① 导入 http 模块 ② 创建 web 服务器实例 ③ 为服务器实例绑定 request 事件&#xff0c;监听客户端的请求 ④ 启动服务器 // ① 导入 http 模块 const http require(http);// ② 创建 web 服务器实例 const server http.createServer();/…
阅读更多...
TCP/IP（五）：TCP 协议详解

TCP/IP（五）：TCP 协议详解

上一节 中讲过&#xff0c;TCP 协议是面向有连接的协议&#xff0c;它具有丢包重发和流量控制的功能&#xff0c;这是它区别于 UDP 协议最大的特点。本文就主要讨论这两个功能。 数据包重发 数据发送 丢包重发的前提是发送方能够知道接收方是否成功的接收了消息。所以&#…
阅读更多...
TCP/IP（六）：HTTP 与 HTTPS 简介

TCP/IP（六）：HTTP 与 HTTPS 简介

本文是准备面试过程中网络部分总结整理的最后一篇文章&#xff0c;主要介绍以下知识&#xff1a; HTTP 协议概述POST 请求和 GET 请求Cookie 和 Session数据传输时的加密HTTPS 简介 HTTP 协议 在 OSI 七层模型中&#xff0c;HTTP 协议位于最顶层的应用层中。通过浏览器访问网…
阅读更多...
Node — 第三天

Node — 第三天

模块化 什么是模块化 模块化是指解决一个复杂问题时&#xff0c;自顶向下逐层把系统划分成若干模块的过程。 对于整个系统来说&#xff0c;模块是可组合、分解和更换的单元。 生活中的模块化 编程中的模块化 编程领域中的模块化&#xff0c;就是遵守固定的规则&#xff0c;…
阅读更多...
FireDAC 中文字段过滤问题

FireDAC 中文字段过滤问题

当使用 FireDAC Filter 过滤数据的时候&#xff0c;通常这样写&#xff1a; FDMemTable.Filtered : False; FDMemTable1.Filter : 姓名 string(edtFilter.Text).QuotedString; FDMemTable.Filtered : True; 将会报错&#xff1a;[FireDAC][Stan][Eval]-107. Invalid characte…
阅读更多...
Express — 使用步骤

Express — 使用步骤

Express Express 介绍安装搭建服务器的步骤express提供的新方法GET接口 获取GET中的请求参数 POST接口 获取POST请求提交的数据 中间件原理中间件语法中间件初体验&#xff08;设置响应头&#xff09;中间件开放静态资源中间件接收POST请求体中间件返回404页面 express 介绍 E…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023