听说今天是七夕，那我们写一个网页开发来庆祝一下

听说今天是七夕，那我们写一个网页开发来庆祝一下！！

文章目录

听说今天是七夕，那我们写一个网页开发来庆祝一下！！
- 一、情况介绍
- 二、项目介绍
- 三、项目的代码实现
- 四、项目的核心代码
- 五、项目展示
- 六、总结

一、情况介绍

今天是七夕佳节，是中国传统的情人节，

逢此佳节，博主也来写一个网页开发来庆祝一下七夕，

虽然博主是下图的情况：

但是，

正是处于这种情况，

才会有闲心来搞一些事情了啦~~

二、项目介绍

本项目中，我们使用了 Node 的 Express 框架，以此作为服务器后端，然后在前段，我们使用模板进行代码的编写，这样可以省去很多不必要的代码了啦。

然后，最终的成果是一个前端再加一个服务器，这里我们没有使用 Git，只不过使用他来做了一个记录，没有远程仓库。

三、项目的代码实现

在项目的index.js 中：
（这个是实现Node服务器）

let express = require("express")
let app = express()let formidable = require("formidable")
let handlebars = require("express3-handlebars").create({defaultLayout: "main"})app.use(require("body-parser")())app.use(express.static(__dirname + "/public"))app.engine("handlebars", handlebars.engine)
app.set("view engine", "handlebars")
app.set("port", process.env.PORT || 3000)app.get("/end", (req, res)=>{res.render("end")
})// app.get("/thirteenth", (req, res)=>{// res.render("thirteenth")
// })app.get("/thirteenth", (req, res)=>{res.render("thirteenth")
})app.get("/twelfth", (req, res)=>{res.render("twelfth")
})app.get("/eleventh", (req, res)=>{res.render("eleventh")
})app.get("/tenth", (req, res)=>{res.render("tenth")
})app.get("/nineth", (req, res)=>{res.render("nineth")
})app.get("/eighth", (req, res)=>{res.render("eighth")
})app.get("/seventh", (req, res)=>{res.render("seventh")
})app.get("/sixth", (req, res)=>{res.render("sixth")
})app.get("/fifth", (req, res)=>{res.render("fifth")
})app.get("/forth", (req, res)=>{res.render("forth")
})app.get("/third", (req, res)=>{res.render("third")
})app.get("/second", (req, res)=>{res.render("second")
})app.get("/first", (req, res)=>{res.render("first")
})// get / -> home
// app.get("/", (req, res)=>{//     res.render("home")
// })app.get("/", (req, res)=>{res.render("home")
})app.use((req, res)=>{res.status(404)res.render("404")
})app.use((err, req, res, next)=>{console.log(err.static)res.static(500)res.render("500")
})app.listen(app.get("port"), ()=>{console.log("Express start on http://localhost:" + app.get("port") + ";press Ctrl - C to terminate......")
})

而在模板 main.handlebrs 中：
（这是一个主模板）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>The Qi Xi Festival</title><style type="text/css">/*basic reset*/*{margin:0;padding:0;}body{background:rgb(250, 246, 246);}canvas{display:block;}</style></head><body>{{{body}}}</body>
</html>{{!-- <style type="text/css">
/*basic reset*/
*{margin:0;padding:0;}
body{background:black;}
canvas{display:block;}
</style> --}}

至于在 home.handlebars 中：
（这是主页）

<a href="http://localhost:3000/first/"><div style="position: relative;"><span style="position: absolute;font-size:xx-large;color:honeydew;">Qi Xi (click the window to go on)</span><img src="/pictures/qixi01.jpg" style=""></div>
</a>

然后，在后面的一些模板文件中也是类似的，我们此处只展示另外一个模板文件，first.handlebars 中:
（这是第一个图像）

<a href="http://localhost:3000/second/"><div style="position: relative;"><span style="position: absolute;font-size:xx-large;color:violet;line-height: 1000px;vertical-align: middle;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;The wind blows in the evening of July</span><img src="/pictures/qixi09.png" style=""></div>
</a>

最后，还有最后一个 end.handlebars 中：
（这是最后一个图像）

<canvas id="c"></canvas>
<script type="text/javascript">
var c=document.getElementById("c")
var ctx= c.getContext("2d")
c.height=window.innerHeight
c.width=window.innerWidth
var chinese="❤LOVE❤"
chinese=chinese.split("")
var font_size=22
var columns=c.width/font_size
var drops=[]
for(var x=0;x<columns;x++)drops[x]=1
function draw(){ctx.fillStyle="rgba(0, 0, 0, 0.05)"ctx.fillRect(0,0,c.width,c.height)ctx.fillStyle="#0F0"ctx.font=font_size+"px arial"for(var i=0;i<drops.length;i++){var text=chinese[Math.floor
(Math.random()*chinese.length)]
ctx.fillText(text,i*font_size,drops[i]*font_size)
if(drops[i]*font_size>c.height&&Math.random()>0.975)drops[i]=0drops[i]++}
}
setInterval(draw,50)
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"src="/media/mp3/Two Steps From Hell&Thomas Bergersen-Star Sky.mp3">Can not play the media!
</audio>

整个项目的 JSON 文件为：

{"name": "qi_xi","version": "1.0.0","description": "qi xi festival","main": "index.js","scripts": {"test": "node index.js"},"repository": {"type": "git","url": "now is none"},"keywords": ["671513"],"author": "hu yu xuan","license": "ISC"
}

以上就是我们的整个项目的一些代码。

四、项目的核心代码

本项目最核心的代码是服务器的构建，以及最后一个图像的绘制：

服务器：

let express = require("express")
let app = express()let formidable = require("formidable")
let handlebars = require("express3-handlebars").create({defaultLayout: "main"})app.use(require("body-parser")())app.use(express.static(__dirname + "/public"))app.engine("handlebars", handlebars.engine)
app.set("view engine", "handlebars")
app.set("port", process.env.PORT || 3000)app.get("/end", (req, res)=>{res.render("end")
})// app.get("/thirteenth", (req, res)=>{// res.render("thirteenth")
// })app.get("/thirteenth", (req, res)=>{res.render("thirteenth")
})app.get("/twelfth", (req, res)=>{res.render("twelfth")
})app.get("/eleventh", (req, res)=>{res.render("eleventh")
})app.get("/tenth", (req, res)=>{res.render("tenth")
})app.get("/nineth", (req, res)=>{res.render("nineth")
})app.get("/eighth", (req, res)=>{res.render("eighth")
})app.get("/seventh", (req, res)=>{res.render("seventh")
})app.get("/sixth", (req, res)=>{res.render("sixth")
})app.get("/fifth", (req, res)=>{res.render("fifth")
})app.get("/forth", (req, res)=>{res.render("forth")
})app.get("/third", (req, res)=>{res.render("third")
})app.get("/second", (req, res)=>{res.render("second")
})app.get("/first", (req, res)=>{res.render("first")
})// get / -> home
// app.get("/", (req, res)=>{//     res.render("home")
// })app.get("/", (req, res)=>{res.render("home")
})app.use((req, res)=>{res.status(404)res.render("404")
})app.use((err, req, res, next)=>{console.log(err.static)res.static(500)res.render("500")
})app.listen(app.get("port"), ()=>{console.log("Express start on http://localhost:" + app.get("port") + ";press Ctrl - C to terminate......")
})

最后一个图像的绘制

<canvas id="c"></canvas>
<script type="text/javascript">
var c=document.getElementById("c")
var ctx= c.getContext("2d")
c.height=window.innerHeight
c.width=window.innerWidth
var chinese="❤LOVE❤"
chinese=chinese.split("")
var font_size=22
var columns=c.width/font_size
var drops=[]
for(var x=0;x<columns;x++)drops[x]=1
function draw(){ctx.fillStyle="rgba(0, 0, 0, 0.05)"ctx.fillRect(0,0,c.width,c.height)ctx.fillStyle="#0F0"ctx.font=font_size+"px arial"for(var i=0;i<drops.length;i++){var text=chinese[Math.floor
(Math.random()*chinese.length)]
ctx.fillText(text,i*font_size,drops[i]*font_size)
if(drops[i]*font_size>c.height&&Math.random()>0.975)drops[i]=0drops[i]++}
}
setInterval(draw,50)
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"src="/media/mp3/Two Steps From Hell&Thomas Bergersen-Star Sky.mp3">Can not play the media!
</audio>

五、项目展示

主页如下：

（点击屏幕会继续向后进行继续）

其他的页面：

图
1

图
2

图
3

图
4

图
5

图
6

结尾的页面：

（

这个四无限的屏幕刷屏显示，同时还配有音乐，我配的是Star Sky

）

六、总结

如果需要源代码的话，可以在我的资源哪里进行下载了啦：
https://download.csdn.net/download/m0_54218263/21071555?spm=1001.2014.3001.5503

啊，虽然博主做了一个七夕的小项目，但是呢，又没有人可以送，于是就在这里进行分享了啦。

曾经，博主还在一直思考，为什么博主这么菜，什么都不会，也没有npy，后来。。。。。。

同时，常常记得另一个博主的TCP讲解：

。。。。。

最后，谢谢大家的阅读了

谢谢支持！！

（づ￣3￣）づ╭❤～

喜欢的话就留下来点个赞呗~~