web大作业开发文档
Posted 程序猿小火龙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web大作业开发文档相关的知识,希望对你有一定的参考价值。
文章目录
课程选题
《小火龙的个人博客》
PS:
由于酷爱神奇宝贝,个人的社交平台(抖音、csdn等)名称均为小火龙,同步一下课题网站名😀
项目简介
本项目是基于基础的html(html5)、css(css3)、js(及其一些js包)实现一款个人网站的前端部分的项目,实现的效果如图:
项目背景
在编程学习的过程中由于知识的庞大与复杂性,我们不可能一次性记住所有的知识,熟练使用技术,所以必不可少的是面向对象(百度、谷歌等搜索网站)编程,查阅文档与资料。
我在查阅的过程中就能发现很多技术大牛比如廖雪峰、阮一峰等,都有自己的个人网站(博客),专门用来记录日常的技术学习,遇到的bug,以及给类似于我这种的技术小白来分享知识拓展眼界,教会我们实操技术,上手代码。
个人认为,写个人博客既能让自己更好的了解掌握更多的技术,又能分享给需要学习相关编程技术的入门者,是一举两得的事情,同时通过读者的反馈又能纠正自己的写博客时的错误与不足,更好的激励自己学习,是一种正反馈的过程。
技术选型
前端:
Html CSS javascript
后端:
暂未写,未来可补充登录注册留言等接口。
需求分析
- 首先搭建博客的框架,实现基本的导航栏(首页,文章、分类、友链、留言、登录),侧边栏,轮播图、底部等。(由于是先写的项目设计,再开始写代码,可能太多页面做不完,先挖个坑)
- 登录注册的页面(想实现的功能是:登录后方可留言,当然需要后端只能先完成页面样式表的设计)
- 导航栏上方设计一个动漫二次元的轮播图~
- 调用一些现成的api(比如网易云接口来加个歌单或者mp3)
- 集成一个js小游戏:计划是《2048》益智类游戏
网站架构
网站架构也就是源代码的组织结构为下图:
首先主页面为index.html,符合许多主流的博客设计名称,利于利用github等平台进行免费的部署上线。
css和js都用单独的文件夹编写,从外部引入,便于后期的修改与维护。
然后就是images,media ,mp3等一些放置静态文件的文件夹。
网站页面布局和样式设计
布局方面:由于时间有限并没有追求flex弹性布局或者grif布局,而是采用了基本的css加上div盒子的布局,根据导航栏、主体部分以及底部的唯一id通过css来修改对应的布局样式。
网站总共包含了8个页面,分别是主页面,登录注册页面,游戏页面和一些自己写的文章的页面,通过<a></a>超链接的特性实现本地跳转页面。利用html5新特性,引入mp3格式设计在侧边栏。
当然之后有时间会完善更多的“酷炫效果”:比如返回顶部的网页小宠物,动态效果的背景图,精致的下拉框,和一些好友链接等。
具体逻辑实现
注册的逻辑设计
- 用户在前端输入账户和密码
- 校验用户的账户、密码、校验密码,是否符合要求
- 非空
- 账户长度 不小于 4 位
- 密码就 不小于 8 位,大于16位
- 账户不能重复
- 账户不包含特殊字符(正则表达式实现)
- 对密码进行加密
- 向数据库插入用户数据(暂未连接数据库)
代码示例
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等静态站点。
欢迎大家在评论区指正、提问、分享。一起进步!喜欢的话也可以点个赞鼓励一下博主!! 😊😛👍👉💓👈!!!
以上是关于web大作业开发文档的主要内容,如果未能解决你的问题,请参考以下文章