听说今天是七夕，那我们写一个网页开发来庆祝一下！！
Posted 江 月
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了听说今天是七夕，那我们写一个网页开发来庆祝一下！！相关的知识，希望对你有一定的参考价值。
听说今天是七夕，那我们写一个网页开发来庆祝一下！！
一、情况介绍
今天是七夕佳节，是中国传统的情人节，
逢此佳节，博主也来写一个网页开发来庆祝一下七夕，
虽然博主是下图的情况：
但是，
正是处于这种情况，
才会有闲心来搞一些事情了啦~~
二、项目介绍
本项目中，我们使用了 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;">
            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]=0
drops[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*f以上是关于听说今天是七夕，那我们写一个网页开发来庆祝一下！！的主要内容，如果未能解决你的问题，请参考以下文章