web大作业开发文档

课程选题

《小火龙的个人博客》

PS：

由于酷爱神奇宝贝，个人的社交平台（抖音、csdn等）名称均为小火龙，同步一下课题网站名😀

项目简介

本项目是基于基础的html（html5）、css（css3）、js（及其一些js包）实现一款个人网站的前端部分的项目，实现的效果如图：

项目背景

在编程学习的过程中由于知识的庞大与复杂性，我们不可能一次性记住所有的知识，熟练使用技术，所以必不可少的是面向对象（百度、谷歌等搜索网站）编程，查阅文档与资料。

我在查阅的过程中就能发现很多技术大牛比如廖雪峰、阮一峰等，都有自己的个人网站（博客），专门用来记录日常的技术学习，遇到的bug，以及给类似于我这种的技术小白来分享知识拓展眼界，教会我们实操技术，上手代码。

个人认为，写个人博客既能让自己更好的了解掌握更多的技术，又能分享给需要学习相关编程技术的入门者，是一举两得的事情，同时通过读者的反馈又能纠正自己的写博客时的错误与不足，更好的激励自己学习，是一种正反馈的过程。

技术选型

前端：

Html CSS Javascript

后端：

暂未写，未来可补充登录注册留言等接口。

需求分析

1. 首先搭建博客的框架，实现基本的导航栏（首页，文章、分类、友链、留言、登录），侧边栏，轮播图、底部等。（由于是先写的项目设计，再开始写代码，可能太多页面做不完，先挖个坑）
2. 登录注册的页面（想实现的功能是：登录后方可留言，当然需要后端只能先完成页面样式表的设计）
3. 导航栏上方设计一个动漫二次元的轮播图~
4. 调用一些现成的api（比如网易云接口来加个歌单或者mp3）
5. 集成一个js小游戏：计划是《2048》益智类游戏

网站架构

网站架构也就是源代码的组织结构为下图：

首先主页面为index.html，符合许多主流的博客设计名称，利于利用github等平台进行免费的部署上线。

css和js都用单独的文件夹编写，从外部引入，便于后期的修改与维护。

然后就是images,media ,mp3等一些放置静态文件的文件夹。

网站页面布局和样式设计

布局方面：由于时间有限并没有追求flex弹性布局或者grif布局，而是采用了基本的css加上div盒子的布局，根据导航栏、主体部分以及底部的唯一id通过css来修改对应的布局样式。

网站总共包含了8个页面，分别是主页面，登录注册页面，游戏页面和一些自己写的文章的页面，通过<a></a>超链接的特性实现本地跳转页面。利用html5新特性，引入mp3格式设计在侧边栏。

当然之后有时间会完善更多的“酷炫效果”：比如返回顶部的网页小宠物，动态效果的背景图，精致的下拉框，和一些好友链接等。

具体逻辑实现

注册的逻辑设计

1. 用户在前端输入账户和密码
2. 校验用户的账户、密码、校验密码，是否符合要求
   1. 非空
   2. 账户长度 不小于 4 位
   3. 密码就 不小于 8 位，大于16位
   4. 账户不能重复
   5. 账户不包含特殊字符（正则表达式实现）
3. 对密码进行加密
4. 向数据库插入用户数据（暂未连接数据库）

代码示例

 var ipt1 = document.querySelector(".ipt1");
      var ipt2 = document.querySelector(".ipt2");
      //2. 注册事件 失去焦点
      ipt1.onblur = function () {
        console.log(this.value);
        // 根据表单里面值的长度 ipt.value.length
        if (this.value.length < 8 || this.value.length > 16) {
          alert("您输入的位数不对要求6~16位！");
        }
      };

      ipt2.onblur = function () {
        // 根据表单里面值的长度 ipt.value.length
        if (this.value !== ipt1.value) {
         // console.log(this.value);
          //console.log(ipt1.value);
          alert("两次密码不匹配");
        }
      };

具体实现就是利用dom来取出文档中已经设计好的元素，给他们绑定好需要触发的事件（判定逻辑如上），如果没有实现效果，可以像我调试代码的时候一样输出在控制台上看看哪一步出错了。

轮播图

先上源码（基本都是按照这个逻辑来写，至于图片变换的时间什么的可以自己调节）

 window.onload = function () {
        var box = this.document.getElementsByClassName("re")[0];
        var lik = box.getElementsByTagName("li");
        function fun(i, j) {
          //转换图片函数，就是把透明度改了一下
          lik[i].style.opacity = 1;
          lik[j].style.opacity = 0;
        }
        fun(0, 1); //初始化下
        var i = 0;
        function auto() {
          //轮播循环函数
          if (++i >= 5) {
            i = 0;
            fun(0, 4);
          } else fun(i, i - 1);
        }
        timer = this.setInterval(auto, 2000);
        box.onmouseover = function () {
          //鼠标划上去，停止轮播
          //console.log("good");
          clearInterval(timer);
        };
        box.onmouseout = function () {
          //鼠标划出，继续轮播
          timer = setInterval(auto, 2000); //调用定时器
        };
       
      };

onload就是加载主页面即可触发这个函数，其中需要修改的地方就是用dom编程来取元素的时候取的id是自己设置的，然后我这里设置的是5张图片，所有轮播函数写的阈值是5，可以自行修改轮播图片的数量。
再设计一个鼠标事件，实现鼠标在图片上的时候停止轮播，划出时继续轮播。

留言板

目前阶段，由于没有数据库只是实现可以发送和删除评论的“假性”留言框。逻辑也并不复杂。

 var txt = document.querySelector("textarea");
      var btn = document.querySelector("button");
      var ul = document.querySelector("ul");
      //2、给button绑定点击事件
      btn.onclick = function () {
        if (txt.value == "") {
          //当文本框中没有文字时，提示
          alert("您没有输入内容");
        } else {
          //创建元素li作为留言区
          var li = document.createElement("li");
          //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行
          li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>";
          txt.value = ""; //添加之后文本框的内容清空
          //将留言添加到ul中，而且在最上方
          ul.insertBefore(li, ul.children[0]);
        //   当点击删除时删除ul中的li
          var as = document.querySelectorAll("a");
          //循环给每个删除绑定事件
          for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
              //删除当前a标签所在位置的父节点li
              ul.removeChild(this.parentNode);
            };
          }
        }
      };

关于源码

等学校大作业上交评分完成后，会上传到我的资源里供大家免费下载，可能会部署到github或者gitee等静态站点。

欢迎大家在评论区指正、提问、分享。一起进步！喜欢的话也可以点个赞鼓励一下博主！！ 😊😛👍👉💓👈！！！