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

Posted hhh_Moon_hhh

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;">
            &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]=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

以上是关于听说今天是七夕,那我们写一个网页开发来庆祝一下!!的主要内容,如果未能解决你的问题,请参考以下文章

JavaEE之log4j—听说过日志文件吗?

七夕节见男神,爱TA就送:JS版冒泡排序动画!

庆祝一下

Python简介

七夕表白网站程序员表白网页合集(100套) HTML+CSS+JS

❤️七夕佳节,用Python制作表白神器,程序员也应该拥有爱情!附源码,建议收藏❤️