目标

利用Git管理大事件项目代码
安装并且使用 Live Server插件
学会查阅layui文档
绘制出登录注册页面结构
添加表单元素自定义验证规则
查阅接口文档完成登录注册功能
知道iframe标签的使用
搭建后台主页界面

资源地址

线上 DEMO 项目地址：http://www.escook.cn:8086/
项目的 API 接口地址： https://www.showdoc.cc/escook?page_id=3707158761215217

0. 今天完成的功能效果

登录功能实现
注册功能实现
后台主页结构搭建

1. 项目前期的准备工作

1.1 项目结构搭建

将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下
- assets > css 文件夹自己编写的css代码
- assets > fonts 字体图标文件夹
- assets > images 存放图标文件夹
- assets > js 自己js代码的文件夹
- assets > lib 第三方依赖的文件夹
- home > dashboard.html 后台首页的页面效果
在 code 目录下新建 login.html 和 index.html 页面

1.2 使用`GitHub`管理大事件的项目(⭐⭐⭐)

在 code 目录中运行 git init 命令，初始化仓库
在 code 目录中运行 git add . 命令，追踪要托管的文件
在 code 目录下运行 git commit -m "init project" 命令，提交到本地仓库
新建 Github 仓库 web_bigevent
- 登录 github 官网
- 点击左上角的 new 创建仓库，填写 Repository name，描述说明，点击 Private 选项，然后点击 create repository
将本地仓库和Github仓库建立关联关系
将本地仓库的代码推送到Github仓库中
运行 git checkout -b login 命令，创建并切换到 login 分支

2. `LayUI`

这里我们使用到的是 layui，先登录找到layui的官方文档

使用的流程(⭐⭐⭐)

左侧是快捷导航，能够让我们快速找到对应的一些页面效果分类或者是功能分类
左侧选中我们想要的分类之后，右侧会有一个子分类，例如：左侧点击的布局，那么右侧是二级分类，里面有哪些布局的结构样式
当选中了对应的二级分类，就会跳转到对应效果那里
上面是示例效果
下面就是示例代码
我们需要做的就是找到对应效果的代码，copy到我们项目中，然后按照我们需要的效果进行调整即可

3. 登录注册功能

3.1 登录注册`UI`效果实现(⭐⭐⭐)

3.1.1 登录注册页面搭建

引入 layui 的css文件 layui.css，先引入第三方的，再引入自己的css
分为上下结构，上面头部的 Logo 区域
下面是登录注册区域
修改一下对应样式，给body添加背景，给登录注册区域设置宽高，剧中显示，给里面title设置背景图片

[工作技巧] -我们在改第三方库的样式的时候 ,不要改别人的,应该是自己再写一个类名,liyo-ngcss的交集选择器添加新增的类

结构示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>大事件-登录/注册</title><!-- 导入 LayUI 的样式 --><link rel="stylesheet" href="/assets/lib/layui/css/layui.css" /><!-- 导入自己的样式表 --><link rel="stylesheet" href="/assets/css/login.css" /></head><body><!-- 头部的 Logo 区域 --><div class="layui-main"><img src="/assets/images/logo.png" alt="" /></div><!-- 登录注册区域 --><div class="loginAndRegBox"><div class="title-box"></div></div></body>
</html>

css示例代码

html,
body {margin: 0;padding: 0;height: 100%;width: 100%;background: url('/assets/images/login_bg.jpg') no-repeat center;background-size: cover;
}.loginAndRegBox {width: 400px;height: 310px;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}.title-box {height: 60px;background: url('/assets/images/login_title.png') no-repeat center;
}

3.1.2 登录和注册的按需切换

在登录注册区域里面（loginAndRegBox）定义两个div
显然注册的div进行隐藏
给两个div绑定点击事件，点击了对应按钮，让对应的div进行显示，另外一个进行隐藏

结构示例代码

<!-- 登录注册区域 -->
<div class="loginAndRegBox"><div class="title-box"></div><!-- 登录的div --><div class="login-box"></div><!-- 注册的div --><div class="reg-box"></div>
</div>

css示例代码

.reg-box {display: none;
}

js示例代码

$(function() {// 点击“去注册账号”的链接$('#link_reg').on('click', function() {$('.login-box').hide()$('.reg-box').show()})// 点击“去登录”的链接$('#link_login').on('click', function() {$('.login-box').show()$('.reg-box').hide()})
})

3.1.3 绘制登录表单的结构样式

找到 layui 文档的 页面元素 -> 表单 这一分类

拷贝里面内容，不需要全部拷贝过来，我们拷贝第一行的输入框即可，注意：外面form表单域需要带上
删除里面的 label 提示内容，然后把lable 的父元素 div 进行删除，不然前面label删除了还有空隙在左侧
拷贝过来对应的 button 按钮，然后设置样式，让宽度填充整个父元素

结构示例代码

  <!-- 登录的div --><div class="login-box"><!-- 登录的表单 --><form class="layui-form" action=""><!-- 用户名 --><div class="layui-form-item"><i class="layui-icon layui-icon-username"></i><input type="text" name="username" 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="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" /></div><!-- 登录按钮 --><div class="layui-form-item"><!-- 注意：表单提交按钮和普通按钮的区别，就是 lay-submit 属性 --><button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>登录</button></div><div class="layui-form-item links"><a href="javascript:;" id="link_reg">去注册账号</a></div></form></div>

css 示例代码

给表单域设置内边距，左右留一点缝隙
给下面的 links 设置 flex 布局，让里面 a标签居右边显示
修改 a 标签文字大小

.layui-form {padding: 0 30px;
}.links {display: flex;justify-content: flex-end;
}.links a {font-size: 12px;
}

3.1.4 绘制文本框前面的小图标

在 layui 中给我们提供了一些图标，我们直接使用即可

在用户名的文本框之前，添加如下的标签结构

<i class="layui-icon layui-icon-username"></i>

在密码框之前，添加如下的标签结构

<i class="layui-icon layui-icon-password"></i>

修改一下对应样式

.layui-form-item {position: relative;
}.layui-icon {position: absolute;left: 10px;top: 10px;
}.layui-input {padding-left: 32px;
}

3.1.5 绘制注册表单的结构样式

注册表单与登录是差不多的，多了一个输入框，我们把之前登录的结构直接拷贝过来
修改一下里面对应内容

结构示例代码

  <!-- 注册的div --><div class="reg-box"><!-- 注册的表单 --><form class="layui-form" action=""><!-- 用户名 --><div class="layui-form-item"><i class="layui-icon layui-icon-username"></i><input type="text" name="username" 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="password" name="password" 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="password" name="repassword" required lay-verify="required" placeholder="再次确认密码" autocomplete="off" class="layui-input" /></div><!-- 注册按钮 --><div class="layui-form-item"><!-- 注意：表单提交按钮和普通按钮的区别，就是 lay-submit 属性 --><button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>注册</button></div><div class="layui-form-item links"><a href="javascript:;" id="link_login">去登录</a></div></form></div>

3.2 登录注册逻辑实现(⭐⭐⭐)

3.2.1 实现登录表单的验证

在layui中，默认有帮我们验证表单元素的逻辑
导入 layui 的 js 文件

<script src="/assets/lib/layui/layui.all.js"></script>

为需要验证的表单项添加 lay-verify 属性，同时指定具体的校验规则即可

<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" />

3.2.2 自定义校验规则

通过查阅文档，我们只要如果需要去自定义校验规则，我们先要得到form模块对象

var form = layui.form

通过 form.verify() 函数自定义校验规则，里面是 key：value形式，key后续对应设置到标签的 lay-verity属性中，value就是验证的规则，这里定义了两个自定义校验规则，一个是密码框，利用的是正则，一个是确认密码

  form.verify({// 自定义了一个叫做 pwd 校验规则pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],// 校验两次密码是否一致的规则repwd: function(value) {// 通过形参拿到的是确认密码框中的内容// 还需要拿到密码框中的内容// 然后进行一次等于的判断// 如果判断失败,则return一个提示消息即可var pwd = $('.reg-box [name=password]').val()if (pwd !== value) {return '两次密码不一致！'}}})

按需为表单项添加校验规则，如果有多个规则，用 | 隔开就好

<input type="password" name="repassword" required lay-verify="required|pwd|repwd" placeholder="再次确认密码" autocomplete="off" class="layui-input" />

3.2.3 发起注册用户的Ajax请求

查阅接口文档，关注以下几个重点信息
- 请求URL
- 请求方式
- 参数名
- 响应数据
给按钮添加id，添加绑定事件，在事件处理函数里面先取消表单提交的默认行为
利用 $.ajax() 进行网络请求，注意添加根路径
- http://ajax.frontend.itheima.net
请求成功之后提示用户
- 利用 layer.msg 来进行提示
- 获取到 layer 内置模块
```
var layer = layui.layer
```
- 模拟用户点击了去登陆

js示例代码

// 监听注册表单的提交事件
$('#form_reg').on('submit', function(e) {// 1. 阻止默认的提交行为e.preventDefault()// 2. 发起Ajax的POST请求var data = {username: $('#form_reg [name=username]').val(),password: $('#form_reg [name=password]').val()}$.post('http://ajax.frontend.itheima.net/api/reguser', data, function(res) {if (res.status !== 0) {return layer.msg(res.message)}layer.msg('注册成功，请登录！')// 模拟人的点击行为$('#link_login').click()})
})

3.2.4 发起登录的Ajax请求

查阅接口文档，关注几个重点要（请求URL，请求方式，请求参数，响应数据）
给按钮添加id，添加绑定事件，在事件处理函数里面先取消表单提交的默认行为
利用 $.ajax() 进行网络请求，注意添加根路径
请求成功之后提示用户，保持token信息，跳转到后台主页
- token 用来标识用户是否登录的令牌，后台的页面需要用户登录之后才能查阅，那么权限校验的机制也就出来了，需要检验权限的页面后台先判断请求头里面是否有token，以此来判断是否是登录状态

js示例代码

// 监听登录表单的提交事件
$('#form_login').submit(function(e) {// 阻止默认提交行为e.preventDefault()$.ajax({url: 'http://ajax.frontend.itheima.net/api/login',method: 'POST',// 快速获取表单中的数据data: $(this).serialize(),success: function(res) {if (res.status !== 0) {return layer.msg('登录失败！')}layer.msg('登录成功！')// 将登录成功得到的 token 字符串，保存到 localStorage 中localStorage.setItem('token', res.token)// 跳转到后台主页location.href = '/index.html'}})
})

3.2.5 在`ajaxPrefilter`中统一拼接请求的根路径

每次请求的时候都需要去添加根路径，比较的麻烦，如果根路径进行了修改，那么每个请求的页面都需要调整，那么jQuery中提供了一个过滤器，可以帮我们统一去进行设置，而这个过滤器调用的时机是在我们调用 $.ajax() 之后，请求真正发给后台之前调用的： $.ajax() > ajaxPrefilter过滤器 -> 发送请求给服务器

在 /assets/js 目录中新建 baseAPI.js
调用 $.ajaxPrefilter() 函数，里面传递一个回调函数，回调函数里面有一个形成 options，这个形成里面就包含了这一次请求的相关信息

js示例代码

// 注意：每次调用 $.get() 或 $.post() 或 $.ajax() 的时候，
// 会先调用 ajaxPrefilter 这个函数
// 在这个函数中，可以拿到我们给Ajax提供的配置对象
$.ajaxPrefilter(function(options) {// 在发起真正的 Ajax 请求之前，统一拼接请求的根路径options.url = 'http://ajax.frontend.itheima.net' + options.url
})

3.2.6 提交`login`分支的代码到`GitHub`

运行 git add . 命令
运行 git commit -m "完成了登录和注册的功能" 命令
运行 git push -u origin login 命令
运行 git checkout master 命令
运行 git merge login 命令
运行 git push 命令
运行 git checkout -b index 命令

4. 后台主页

4.1 快速实现后台主页的布局效果

找到LayUI 文档里面页面元素 > 布局 > 后台布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-piF24xDb-1600483111545)(images/后台布局.png)]

拷贝里面的代码，修改以下对应的文字内容

结构示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>后台主页</title><!-- 导入 layui 的样式表 --><link rel="stylesheet" href="/assets/lib/layui/css/layui.css" /></head><body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo"><img src="/assets/images/logo.png" alt="" /></div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img" />个人中心</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">更换头像</a></dd><dd><a href="">重置密码</a></dd></dl></li><li class="layui-nav-item"><a href="">退出</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">所有商品</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="javascript:;">列表三</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="">云市场</a></li><li class="layui-nav-item"><a href="">发布商品</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域</div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div></div><!-- 导入 layui 的JS文件 --><script src="/assets/lib/layui/layui.all.js"></script></body>
</html>

4.2 修改侧边栏的结构(⭐⭐⭐)

找到没有二级分类的li，移植到第一个位置
对应修改里面的文字内容即可

结构示例代码

<div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="/">首页</a></li><li class="layui-nav-item"><a class="" href="javascript:;">文章管理</a><dl class="layui-nav-child"><dd><a href="javascript:;">文章类别</a></dd><dd><a href="javascript:;">文章列表</a></dd><dd><a href="javascript:;">发布文章</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">个人中心</a><dl class="layui-nav-child"><dd><a href="javascript:;">基本资料</a></dd><dd><a href="javascript:;">更换头像</a></dd><dd><a href="javascript:;">重置密码</a></dd></dl></li></ul></div>
</div>

4.3 使用`lay-shrink`实现左侧菜单互斥效果

目前效果是侧边栏的二级列表都可以展开，这个不是我们需要的效果，我们需要的是，一个二级列表展开之后，另外的二级列表需要关闭

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKKNJ1yu-1600483111548)(images/侧边栏效果.png)]

只需要给侧边栏的ul添加一个 lay-shrin 属性

示例代码

<div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-shrink="all"><!-- 省略其他代码 --></ul></div>
</div>

4.4 为菜单项添加图标

利用第三方的字体图标库来实现

导入第三方的图标库
哪个地方需要使用，添加 span标签，里面设置 class 类名
- 注意：iconfont 这个类名不能省略

<!-- 导入第三方图标库 -->
<link rel="stylesheet" href="/assets/fonts/iconfont.css" />...<div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-shrink="all"><li class="layui-nav-item"><a href=""><span class="iconfont icon-home"></span>首页</a></li><li class="layui-nav-item"><a class="" href="javascript:;"><span class="iconfont icon-16"></span>文章管理</a>...</li><li class="layui-nav-item"><a href="javascript:;"><span class="iconfont icon-user"></span>个人中心</a>...</li></ul></div></div>

修改头部“退出”按钮的结构

<li class="layui-nav-item"><a href=""><span class="iconfont icon-tuichu"></span>退出</a>
</li>

导入自己的样式表文件

<link rel="stylesheet" href="/assets/css/index.css" />

编写自己的样式

.layui-footer {text-align: center;font-size: 12px;
}.iconfont {margin-right: 8px;
}.layui-icon {margin-right: 8px;margin-left: 20px;
}

4.5 使用`iframe`标签在内容主体区域显示网页内容(⭐⭐⭐)

如果每个导航栏对应的内容都写在一个页面中，会导致页面太臃肿，不利于维护，遵循模块化开发的思路，我们可以不同导航栏的内容是一个页面，这样我们就利用 iframe 来实现了

在页面主体的 div 中添加 iframe

  <div class="layui-body"><!-- 内容主体区域 --><iframe name="fm" src="" frameborder="0"></iframe></div>

为首页链接添加href和target属性

<a href="/home/dashboard.html" target="fm"><span class="iconfont icon-home"></span>首页</a>

设置对应样式

iframe {width: 100%;height: 100%;
}.layui-body {overflow: hidden;
}

指定默认 iframe 页面，添加 src 的属性即可

<iframe name="fm" src="/home/dashboard.html" frameborder="0"></iframe>

为 首页 对应的导航 Item 项添加默认高亮效果， layui-this 属性

<li class="layui-nav-item layui-this"><a href="/home/dashboard.html" target="fm"><span class="iconfont icon-home"></span>首页</a>
</li>

强制清除 <a> 链接的 CSS3 动画

a {transition: none !important;
}

4.6 渲染图片头像和文字头像

找到对应的位置，添加如下结构

<!-- 右侧导航栏上面头像 -->
<a href="javascript:;" class="userinfo"><img src="http://t.cn/RCzsdCq" class="layui-nav-img" /><span class="text-avatar">A</span>个人中心
</a>
<!-- 左侧侧边栏上面头像 -->
<div class="userinfo"><img src="http://t.cn/RCzsdCq" class="layui-nav-img" /><span class="text-avatar">A</span><span id="welcome">欢迎 ***</span>
</div>

修改对应的样式

.userinfo {height: 60px;line-height: 60px;text-align: center;font-size: 12px;user-select: none;
}
.layui-side-scroll .userinfo {border-bottom: 1px solid #282b33;
}
.layui-nav-img {width: 40px;height: 40px;
}
.text-avatar {display: inline-block;width: 40px;height: 40px;background-color: #009688;border-radius: 50%;line-height: 40px;text-align: center;font-size: 20px;color: #fff;position: relative;top: 4px;margin-right: 10px;
}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

【小程序云开发挑战赛】长大寻物-明远队作品说明书
目录第一章项目背景1.1 问题背景1.2 市场背景第二章目的与意义2.2 项目实施的意义1.对个人2.对校园3.对社会第三章项目创新与竞争优势3.1 创新特色详述3.2 市场现有产品所存在的问题3.3 本系统的具体优势第四章概要设计4.1 概要设计与实现5.2 数据表详细设计第六章部分代码…...
2024/4/10 20:06:32
Java学者福音，阿里P9资深架构师竟写出Java岗面试必过的核心笔记
号外，号外：阿里巴巴P8架构师竟编写出了一本Java岗必备核心笔记，对于程序员来说真是一大福音，不管是初学者，还是资深架构师相信都能让你受益匪浅。此笔记不但内容覆盖面广， 条理清晰，而且图文并茂…...
2024/4/12 10:41:51
promethes的安装以及搭配supervisor
七、Prometheus的应用前文已经说过我们整体的监控系统采用 Prometheus Grafana 的方案。这也是当前企业中普遍采用的监控方案，这里我们以Nginx的请求和Flume Argent实时监控为例，来讲解监控方案的实施。 7.1 prometheus的简介 supervisor是python的…...
2024/4/28 19:18:07
Netty学习笔记(二)Channel的分类
Channel分类在Netty中存在众多Channel类和接口，大致关系如下： Netty中Channel类图 Channel：和Java Nio中的Channel同名，是Netty对网络底层读写和连接的抽象。AbstractChannel： 是Channel的抽象实现类，抽…...
2024/4/12 16:27:27
HMM（隐马尔可夫）中文分词
一、隐马尔可夫模型隐马尔可夫模型（Hidden Markov Model，HMM）是用来描述一个含有隐含未知参数的马尔可夫过程。 1、举例理解假设我手里有三个不同的骰子。第一个骰子是我们平常见的骰子（称这个骰子为D6）&#xff0c…...
2024/4/26 3:13:07
【Python项目】外星人入侵项目笔记
【Python项目】外星人入侵~ 作者：Code_Linghu-令狐 1、Windows系统中安装Pygame 1.1检查python环境是否安装成功打开 CMD命令行输入 python 执行成功的截图，说明python安装成功！ 如果你没有安装python环境和开发工具则打开如下链接&…...
2024/4/30 10:27:27
Aliyun Linux（Centos7） Rabbit health check failed
这几天开始在自己阿里云服务器，部署rabbit mq 。遇到一个问题，给大家一点思路问题描述 rabbit mq 安装成功控制台能够跟正常登录， 通过控制台创建用户 XXX ，并且赋予了权限后来设置了 etc 下的监听的端口，和远程用…...
2024/4/27 1:00:28
什么是次世代3D建模，次世代游戏模型怎么被做出来？
什么是次世代次世代这个名字源自日语，指还未广泛应用的先进技术。 VR游戏的诞生，世代游戏有质的飞跃。VR玩家可以“亲身进入”游戏场景中，切身感受游戏里的氛围。不但能近距离观看场景、道具和角色，还可以近距离体验特效。与…...
2024/4/13 19:06:48
LeetCode 1191. K 次串联后最大子数组之和--动态规划求最大子区间和
给你一个整数数组 arr 和一个整数 k。首先，我们要对该数组进行修改，即把原数组 arr 重复 k 次。举个例子，如果 arr [1, 2] 且 k 3，那么修改后的数组就是 [1, 2, 1, 2, 1, 2]。然后，请你返回修改后的数组中的最…...
2024/5/6 5:57:20
ZooKeeper单机伪集群搭建
安装配置请看前文： Linux系统安装ZooKeeper 开始搭建 cp多个zoo.cfg文件，分别命令为zoo1.cfg、zoo2.cfg、zoo3.cfg zoo.cfg #f milliseconds of each tick tickTime2000 # The number of ticks that the initial # synchronization phase can take i…...
2024/4/7 11:37:37
链栈java实现
1.用java实现一个链栈 import java.util.Iterator; import java.util.NoSuchElementException;import edu.princeton.cs.algs4.StdIn; import edu.princeton.cs.algs4.StdOut;//链表栈 public class LinkedStack<Item> implements Iterable<Item> {private int n;…...
2024/5/5 7:24:46
04_装饰模式
模式定义： 动态（组合）地给一个对象增加一些额外的职责。就增加功能而言，装饰模式比生成子类（继承）更为灵活（消除重复代码 & 减少子类个数） 使用动机： 在某些情况下…...
2024/4/20 12:33:50
基于柯西矩阵的Erasure Code技术详解
原文 http://alanwu.blog.51cto.com/3652632/1410132 一、概述 Erasure Code 可以应用于分布式存储系统中，替代多份数据拷贝的数据冗余方式，从而可以提高存储空间利用率。此外， Erasure code 还可以应用于传统 RAID系统中，增加…...
2024/4/23 20:51:38
IDEA打开自动导包
学Spring Boot网上教程进行编写测试类的时候，遇到了以下异常 org.junit.runners.model.InvalidTestClassError: Invalid test class com.hznu.zl.chapter11.Chapter11ApplicationTests:1. No runnable methodsat org.junit.runners.ParentRunner.validate(ParentRu…...
2024/4/30 9:54:13
云服务器SQL数据库端口1433访问不了?------三步设置教你快速开放云数据库端口
相信很多新手小伙伴会经常遇到云服务器端口访问不了而苦恼明明安全组内已经加上了数据库端口,防火墙也关了,实际上呢又连接不上. 今天给大家实际演示一下如何正确开放云数据库端口. 第一步进入云控制台(演示用的是免费试用版腾讯云,所有云服务器操作步骤类似) 找到安全组,没…...
2024/4/28 4:16:29
二分查找的循环退出条件
public int search(int[] nums, int target) {int low0, highnums.length-1;while (low<high) {int mid (lowhigh)/2;if (nums[mid] target) {return mid;} else if (nums[mid] > target) {high mid-1;} else { low mid1;}}return -1; }以上是一个常规的二分查找法代…...
2024/4/24 8:24:45
Vuejs与Axios项目开发，简单的网页版的播放器实现
前提说明在这里使用到vue和axios，vue进行数据绑定等，axios进行从连接获取数据。在这里axios获取的链接及api如下： https://autumnfish.cn/search?keywords 根据关键字进行搜索https://autumnfish.cn/song/url?id 搜索之后根据返回的id来…...
2024/4/24 22:53:33
AI全自动生成视频神器
AI全自动生成视频神器：只需要输入一个关键词，即可自动生成一批原创视频出来。亦可根据易撰上的爆文，采集爆文和相关视频自动生成原创视频。软件会根据关键词采集阅读量高的文章，并自动采集相关视频，对这些视频进行一个…...
2024/4/7 11:37:29
即拼商城系统开发源码（Java）
前言运用JAVA语言开发即拼商城系统，分享源码，以及开发总结；完整源码看下面 import java.util.regex.Matcher; import java.util.regex.Pattern;public class RegexMatches {public static void main(String args[]) {String str "&qu…...
2024/4/22 6:24:10
05_桥模式
使用动机： 由于某些类型的固有的实现逻辑，使得它们具有两个变化的维度，乃至多个维度的变化。 class MessagerImpl { public:~MessagerImpl() { }public:virtual void PlaySound() 0;virtual void WriteText(string &msg) 0;virtual vo…...
2024/4/18 14:40:31

45 大事件项目 Day01

目标

资源地址

0. 今天完成的功能效果

1. 项目前期的准备工作

1.1 项目结构搭建

1.2 使用`GitHub`管理大事件的项目(⭐⭐⭐)

2. `LayUI`

使用的流程(⭐⭐⭐)

3. 登录注册功能

3.1 登录注册`UI`效果实现(⭐⭐⭐)

3.1.1 登录注册页面搭建

3.1.2 登录和注册的按需切换

3.1.3 绘制登录表单的结构样式

3.1.4 绘制文本框前面的小图标

3.1.5 绘制注册表单的结构样式

3.2 登录注册逻辑实现(⭐⭐⭐)

3.2.1 实现登录表单的验证

3.2.2 自定义校验规则

3.2.3 发起注册用户的Ajax请求

3.2.4 发起登录的Ajax请求

3.2.5 在`ajaxPrefilter`中统一拼接请求的根路径

3.2.6 提交`login`分支的代码到`GitHub`

4. 后台主页

4.1 快速实现后台主页的布局效果

4.2 修改侧边栏的结构(⭐⭐⭐)

4.3 使用`lay-shrink`实现左侧菜单互斥效果

4.4 为菜单项添加图标

4.5 使用`iframe`标签在内容主体区域显示网页内容(⭐⭐⭐)

4.6 渲染图片头像和文字头像

相关文章

最新文章

45 大事件项目 Day01

目标

资源地址

0. 今天完成的功能效果

1. 项目前期的准备工作

1.1 项目结构搭建

1.2 使用GitHub管理大事件的项目(⭐⭐⭐)

2. LayUI

使用的流程(⭐⭐⭐)

3. 登录注册功能

3.1 登录注册UI效果实现(⭐⭐⭐)

3.1.1 登录注册页面搭建

3.1.2 登录和注册的按需切换

3.1.3 绘制登录表单的结构样式

3.1.4 绘制文本框前面的小图标

3.1.5 绘制注册表单的结构样式

3.2 登录注册逻辑实现(⭐⭐⭐)

3.2.1 实现登录表单的验证

3.2.2 自定义校验规则

3.2.3 发起注册用户的Ajax请求

3.2.4 发起登录的Ajax请求

3.2.5 在ajaxPrefilter中统一拼接请求的根路径

3.2.6 提交login分支的代码到GitHub

4. 后台主页

4.1 快速实现后台主页的布局效果

4.2 修改侧边栏的结构(⭐⭐⭐)

4.3 使用lay-shrink实现左侧菜单互斥效果

4.4 为菜单项添加图标

4.5 使用iframe标签在内容主体区域显示网页内容(⭐⭐⭐)

4.6 渲染图片头像和文字头像

相关文章

最新文章

1.2 使用`GitHub`管理大事件的项目(⭐⭐⭐)

2. `LayUI`

3.1 登录注册`UI`效果实现(⭐⭐⭐)

3.2.5 在`ajaxPrefilter`中统一拼接请求的根路径

3.2.6 提交`login`分支的代码到`GitHub`

4.3 使用`lay-shrink`实现左侧菜单互斥效果

4.5 使用`iframe`标签在内容主体区域显示网页内容(⭐⭐⭐)