大事件项目

槿川001

已于 2022-12-09 11:20:00 修改

阅读量738

点赞数

分类专栏：黑马大事件项目文章标签： javascript 开发语言 ecmascript

于 2022-12-03 10:09:54 首次发布

本文链接：https://blog.csdn.net/qq_55891636/article/details/128158017

版权

1.3 安装VSCode的Live Server插件辅助开发

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

2.13 提交login分支的代码到GitHub

3. 后台主页

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

3.2 修改侧边栏的结构

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

3.4 为菜单项添加图标

3.5 使用iframe标签在内容主体区域显示网页内容

3.6 解决3个小问题

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

1.0. 资源地址

线上 DEMO 项目地址：http://www.escook.cn:8086/
项目的 API 接口地址： ShowDoc

1. 项目前期的准备工作

1.1 初始化项目结构

将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下
在 code 目录下新建 login.html 和 index.html 页面

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

在 code 目录中运行 git init 命令
在 code 目录中运行 git add . 命令
在 code 目录下运行 git commit -m "init project" 命令
新建 Github 仓库 web_bigevent
将本地仓库和Github仓库建立关联关系
将本地仓库的代码推送到Github仓库中
运行 git checkout -b login 命令，创建并切换到 login 分支

1.3 安装VSCode的Live Server插件辅助开发

在插件市场，搜索 Live Server 并安装
在页面上鼠标右键，选择 Open With Live Server 即可快速使用 http 协议访问页面

2. 登录注册

2.1 绘制login页面的基本结构

编写 HTML 结构：

  <!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>

美化样式：

  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;
  }

2.2 实现登录和注册的按需切换

编写 HTML 结构：

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

编写样式：
```
  .reg-box {
    display: none;
  }
```

编写 JavaScript 代码：

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

2.3 绘制登录表单的基本结构

编写 HTML 结构：

    <!-- 登录的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>

2.4 美化登录表单的样式

编写样式：

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

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

在用户名的文本框之前，添加如下的标签结构：
```
  <i class="layui-icon 
```

最低0.47元/天解锁文章

槿川001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大事件项目

黑马大事件项目
复制链接

扫一扫

专栏目录

大事件项目

1.0. 资源地址

1. 项目前期的准备工作

1.1 初始化项目结构

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

1.3 安装VSCode的Live Server插件辅助开发

2. 登录注册

2.1 绘制login页面的基本结构

2.2 实现登录和注册的按需切换

2.3 绘制登录表单的基本结构

2.4 美化登录表单的样式

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

“相关推荐”对你有帮助么？