ejs,Code片段,代码实例,代码示例,代码片段库

ejs 设置我们的游戏页面

对于第13集：<br/> https://code.tutsplus.com/tutorials/quick-tip-use-swfobject-to-embed-your-flash-content--active-9726

app.js

const express = require("express");
const app = express();
const request = require("request");
 
//Sets the public folder as the external file folder
app.use(express.static("public"));
 
//Officially sets the view engine as ejs, therefore setting the default file type for readering to .ejs
app.set("view engine", "ejs");
 
app.get("/", function(req, res){
    res.render("homepage"); 
});
 
app.get("/game/:title/:creator/:width/:height/:fileName/:thumbnailFile", function(req, res){
    res.render("game", {
        title: req.params.title,
        creator: req.params.creator,
        width: req.params.width,
        height: req.params.height,
        fileName: req.params.fileName,
        thumbnailFile: req.params.thumbnailFile
    });
});
 
app.get("/list", function(req, res){ 
 
    //Our ghetto database
    const gamesData = [
        {
            title: "American Racing", 
            creator: "turboNuke",
            width: 640,
            height: 480,
            fileName: "americanracing.swf",
            thumbnailFile: "americanracingpicture.jpg"
        },
        {
            title: "Generic Defense Game", 
            creator: "PyschoGoldfish",
            width: 640,
            height: 480,
            fileName: "genericdefense.swf",
            thumbnailFile: "GenericDefenseGame.png"
        },
        {
            title: "Learn to Fly 2", 
            creator: "light_bringer777",
            width: 640,
            height: 480,
            fileName: "embeddable_115608.swf",
            thumbnailFile: "ltf2.jpg"
        },
        {
            title: "Wonderputt", 
            creator: "dampgnat",
            width: 750,
            height: 650,
            fileName: "wonderputt.swf",
            thumbnailFile: "pop-wonderputt.jpg"
        }
    ]
 
    res.render("list", {
        gamesData: gamesData
    });
});
 
app.listen("3000", function(){
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});

list.ejs

<% include partials/header %>
 
    <h1>This is all of the games we have:</h1>
 
    <div class="row">
        <% for(var i = 0;i < gamesData.length; i++){ %>
        <div class="col-md-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="/games/thumbnails/<%= gamesData[i].thumbnailFile %>" style="height: 180px">
                <div class="card-body">
                <h5 class="card-title"><%= gamesData[i].title %></h5>
                <p class="card-text">Game created by <%= gamesData[i].creator %></p>
                <a href="/game/<%= gamesData[i].title %>/<%= gamesData[i].creator %>/<%= gamesData[i].width %>/<%= gamesData[i].height %>/<%= gamesData[i].fileName %>/<%= gamesData[i].thumbnailFile %>" class="btn btn-primary">Play Game</a>
                </div>
            </div>
        </div>
        <% } %>
    </div>
    
<% include partials/footer %>

game.ejs

<% include partials/header %>
 
        <h2>Game Title: <%= title %></h2>
        <h3>Game Creator: <%= creator %></h3>
        
        <!-- Game will go here -->
        <div id="game">
            <h1>Alternative content</h1>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
        </div>

<script type="text/javascript" src="/swf/src/swfobject.js"></script>
<script>
var el = document.getElementById("game");
swfobject.embedSWF("/games/<%= fileName %>", el, <%= width %>, <%= height %>, 9, "/swf/expressInstall.swf");
</script>
<% include partials/footer %>

ejs 删除游戏

app.js

//Schema for storing accounts in database
var userSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: String
});

var User = mongoose.model("User", userSchema);

app.get("/login", function(req, res){
    res.render("login");
});

app.get("/signup", function(req, res){

    var errors = "";

    res.render("signup", {
        errors: errors
    });
});

//Submission for signup page
app.post("/signup", function(req, res){
    
    var errors = [];

    if(req.body.password.length < 8){
        errors.push("Password must be at least 8 characters");
    }else if(req.body.password != req.body.password2){
        errors.push("Passwords must match");
    }

    if(errors.length > 0){
        res.render("signup", {
            errors: errors,
            name: req.body.name,
            email: req.body.email,
            password: req.body.password,
            password2: req.body.password2
        })
    }else{
        res.send("User created!");
    }

});

thing.ejs

      <h4 style="color: red"><%= errors %></h4>

ejs 更新和编辑游戏

app.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const fileUpload = require("express-fileupload");

mongoose.connect("mongodb://juicewrld:juice123@ds023078.mlab.com:23078/youtube", {
    useNewUrlParser: true
}, function(error){
    if(error){
        console.log(error);
    }else{
        console.log("Connected to the database");
    }
});

var gameSchema = new mongoose.Schema({
    title: String,
    creator: String,
    width: Number,
    height: Number,
    fileName: String,
    thumbnailFile: String
});

var Game = mongoose.model("Game", gameSchema);
 
//Sets the public folder as the external file folder
app.use(express.static("public"));

app.use(bodyParser.urlencoded({extended: true}));

app.use(fileUpload());
 
//Officially sets the view engine as ejs, therefore setting the default file type for readering to .ejs
app.set("view engine", "ejs");
 
app.get("/", function (req, res) {
    res.render("homepage");
});

app.get("/game/:id", function (req, res) {
    var id = req.params.id;

    Game.findById(id, function(error, foundGame){
        if(error){
            console.log("Couldn't find game with that id");
        }else{
            res.render("game", {
                title: foundGame.title,
                creator: foundGame.creator,
                width: foundGame.width,
                height: foundGame.height,
                fileName: foundGame.fileName
            });
        }
    });
});

app.get("/game/:id/edit", function(req, res){
    var id = req. params.id; //id from route params

    //Use the id to get information on the game and send it to the edit page
    Game.findById(id, function(error, foundGame){
        if(error){
            console.log("Couldn't find game with that id");
        }else{
            res.render("edit", { //The edit a game page
                title: foundGame.title,
                creator: foundGame.creator,
                width: foundGame.width,
                height: foundGame.height,
                fileName: foundGame.fileName,
                id: id
            }); 
        }
    });    
});

app.post("/update/:id", function(req, res){
    var id = req.params.id;

    //Update game in database
    Game.findOneAndUpdate(id, {
        title: req.body.title,
        creator: req.body.creator,
        width: req.body.width,
        height: req.body.height
    }, function(err, updatedGame){
        if(err){
            console.log("Couldn't update game");
            console.log(err);
        }else{
            res.redirect("/list");
        }
    })

});
 
app.get("/list", function (req, res) {
 
    Game.find({}, function(error, games){
        if(error){
            console.log("There was a problem retrieving all of the games from the database.");
            console.log(error);
        }else{
            res.render("list", {
                gamesList: games
            });
        }
    });

});

app.get("/addgame", function(req, res){
    res.render("addgame");
});

app.post("/addgame", function(req, res){
    var data = req.body;

    var gameFile = req.files.gameFile;
    var imageFile = req.files.imageFile;

    gameFile.

    gameFile.mv("public/games/" + gameFile.name, function(error){
        if(error){
            console.log("Couldn't upload the game file");
            console.log(error);
        }else{
            console.log("Game file successfully uploaded.");
        }
    });

    imageFile.mv("public/games/thumbnails/" + imageFile.name, function(error){
        if(error){
            console.log("Couldn't upload the image file");
            console.log(error);
        }else{
            console.log("Image file successfully uploaded.");
        }
    });

    Game.create({
        title: data.title,
        creator: data.creator,
        width: data.width,
        height: data.height,
        fileName: gameFile.name,
        thumbnailFile: imageFile.name
    }, function(error, data){
        if(error){
            console.log("There was a problem adding this game to the database");
        }else{
            console.log("Game added to database");
            console.log(data);
        }

    });
    res.redirect("/list");
});
 
app.listen("3000", function () {
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});

edit.ejs

<% include partials/header %>

<h1>Edit this game: </h1>

<form action="/update/<%= id %>" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" value="<%= title %>" name="title">
  </div>
  <div class="form-group">
    <label>Creator</label>
    <input type="text" class="form-control" value="<%= creator %>" name="creator">
  </div>
  <div class="form-group">
    <label>Size</label>
    <input type="text" class="form-control" value="<%= width %>" name="width">
    <input type="text" class="form-control" value="<%= height %>" name="height">
  </div>
  <!--
  <div class="form-group">
    <label>File Name</label>
    <input type="text" class="form-control" placeholder="booger.swf" name="fileName">
  </div>
  <div class="form-group">
    <label>Thumbnail Name</label>
    <input type="text" class="form-control" placeholder="thumbnail.png" name="thumbnailFile">
  </div>
  -->
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>



<% include partials/footer %>

ejs EJS Footer Bootstrap

EJS Footer包括Bootstrap JS脚本

bootstrap-footer.ejs

<div class="footer-padding"></div>
  <div class="footer">
    <p></p>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

ejs EJS Header Bootstrap

用于HTML视图的EJS标头，包括Bootstrap样式表

bootstrap-header.ejs

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>!!!!!!</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/styles.css">
</head>

<body>
<div class="container">

ejs 上传文件和移动文件

对于第18集：

app.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const fileUpload = require('express-fileupload');


mongoose.connect("geturown", {
    useNewUrlParser: true
}, function(error){
    if(error){
        console.log(error);
    }else{
        console.log("Connected to the database");
    }
});

var gameSchema = new mongoose.Schema({
    title: String,
    creator: String,
    width: Number,
    height: Number,
    fileName: String,
    thumbnailFile: String
});

var Game = mongoose.model("Game", gameSchema);

// const games = [{
//     title: "Learn to Fly 2",
//     creator: "light_bringer777",
//     width: 640,
//     height: 480,
//     fileName: "learntofly2.swf",
//     thumbnailFile: "Learn_To_Fly_2.jpg"
// },
// {
//     title: "Run 3",
//     creator: "player_03",
//     width: 800,
//     height: 600,
//     fileName: "run3.swf",
//     thumbnailFile: "run3.jpg"
// },
// {
//     title: "Continuity",
//     creator: "glimajr",
//     width: 640,
//     height: 480,
//     fileName: "continuity.swf",
//     thumbnailFile: "booty.png"
// }
// ]
 
//Sets the public folder as the external file folder
app.use(express.static("public"));

app.use(bodyParser.urlencoded({extended: true}));
 
//Officially sets the view engine as ejs, therefore setting the default file type for readering to .ejs
app.set("view engine", "ejs");

app.use(fileUpload());
 
app.get("/", function (req, res) {
    res.render("homepage");
});

app.get("/game/:id", function (req, res) {
    var id = req.params.id;

    Game.findById(id, function(error, foundGame){
        if(error){
            console.log("Couldn't find game with that id:");
        }else{
            res.render("game", {
                title: foundGame.title,
                creator: foundGame.creator,
                width: foundGame.width,
                height: foundGame.height,
                fileName: foundGame.fileName
            });
        }
    });
});
 
app.get("/list", function (req, res) {
 
    Game.find({}, function(error, games){
        if(error){
            console.log("There was a problem retrieving all of the games from the database.");
            console.log(error);
        }else{
            res.render("list", {
                gamesList: games
            });
        }
    });

});

app.get("/addgame", function(req, res){
    res.render("addgame");
});

app.post("/addgame", function(req, res){
    var data = req.body;

    //a variable representation of the files
    var gameFile = req.files.gamefile;
    var imageFile = req.files.imagefile;

    //Using the files to call upon the method to move that file to a folder
    gameFile.mv("public/games/" + gameFile.name, function(error){
        if(error){
            console.log("Couldn't upload the game file");
            console.log(error);
        }else{
            console.log("Game file succesfully uploaded.");
        }
    });
    imageFile.mv("public/games/thumbnails/" + imageFile.name, function(error){
        if(error){
            console.log("Couldn't upload the image file");
            console.log(error);
        }else{
            console.log("Image file succesfully uploaded.");
        }
    });
    
    Game.create({
        title: data.title,
        creator: data.creator,
        width: data.width,
        height: data.height,
        fileName: gameFile.name,
        thumbnailFile: imageFile.name
    }, function(error, data){
        if(error){
            console.log("There was a problem adding this game to the database");
        }else{
            console.log("Game added to database");
            console.log(data);
        }

    });
    res.redirect("/list");
});
 
app.listen("3000", function () {
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});

addgame.ejs

<% include partials/header %>

<h1>Add a game here!!!</h1>

<form action="/addgame" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Run 3" name="title">
  </div>
  <div class="form-group">
    <label>Creator</label>
    <input type="text" class="form-control" placeholder="light_bringer777" name="creator">
  </div>
  <div class="form-group">
    <label>Size</label>
    <input type="text" class="form-control" placeholder="480" name="width">
    <input type="text" class="form-control" placeholder="680" name="height">
  </div>
  <!--
  <div class="form-group">
    <label>File Name</label>
    <input type="text" class="form-control" placeholder="booger.swf" name="fileName">
  </div>
  <div class="form-group">
    <label>Thumbnail Name</label>
    <input type="text" class="form-control" placeholder="thumbnail.png" name="thumbnailFile">
  </div>
  -->
  <h3>Upload your files</h3>
  <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="gameInput" aria-describedby="inputGroupFileAddon01" name="gamefile">
    <label class="custom-file-label" for="gameInput">Game file(.swf)</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="imageInput" aria-describedby="inputGroupFileAddon01" name="imagefile">
    <label class="custom-file-label" for="imageInput">Image file</label>
  </div>
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>



<% include partials/footer %>

ejs EJS

basic-ejs

<!-- include -->
<% include partials/header %>


<% include partials/footer %>

ejs 邮政路线

对于第14集：

app.js

const express = require("express");
const app = express();
const request = require("request");
var bodyParser = require('body-parser');

//Our ghetto database
const gamesData = [
    {
        title: "American Racing", 
        creator: "turboNuke",
        width: 640,
        height: 480,
        fileName: "americanracing.swf",
        thumbnailFile: "americanracingpicture.jpg"
    },
    {
        title: "Generic Defense Game", 
        creator: "PyschoGoldfish",
        width: 640,
        height: 480,
        fileName: "genericdefense.swf",
        thumbnailFile: "GenericDefenseGame.png"
    },
    {
        title: "Learn to Fly 2", 
        creator: "light_bringer777",
        width: 640,
        height: 480,
        fileName: "embeddable_115608.swf",
        thumbnailFile: "ltf2.jpg"
    },
    {
        title: "Wonderputt", 
        creator: "dampgnat",
        width: 750,
        height: 650,
        fileName: "wonderputt.swf",
        thumbnailFile: "pop-wonderputt.jpg"
    }
]

app.use(bodyParser.urlencoded({ extended: true }));
 
//Sets the public folder as the external file folder
app.use(express.static("public"));
 
//Officially sets the view engine as ejs, therefore setting the default file type for readering to .ejs
app.set("view engine", "ejs");
 
app.get("/", function(req, res){
    res.render("homepage"); 
});
 
app.get("/game/:title/:creator/:width/:height/:fileName", function(req, res){
    res.render("game", {
        title: req.params.title,
        creator: req.params.creator,
        width: req.params.width,
        height: req.params.height,
        fileName: req.params.fileName
    });
});
 
app.get("/list", function(req, res){ 
 
    res.render("list", {
        gamesData: gamesData
    });
});

//GET Method for /addgame route
app.get("/addgame", function(req, res){
   res.render("addgame"); 
});

//POST Method for /addgame route
app.post("/addgame", function(req, res){
    var data = req.body;
    gamesData.push(data);
    res.redirect("/list");
});

app.listen("3000", function(){
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});

addgame.ejs

<% include partials/header %>
 
<h1>Add a game here!</h1>

<form action="/addgame" method="POST">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Run 3" name="title">
  </div>
  <div class="form-group">
    <label>Creator</label>
    <input type="text" class="form-control" placeholder="light_bringer777" name="creator">
  </div>
  <div class="form-group">
    <label>Size</label>
    <input type="text" class="form-control" placeholder="width" name="width">
    <input type="text" class="form-control" placeholder="height" name="height">
  </div>
  <div class="form-group">
    <label>File Name</label>
    <input type="text" class="form-control" placeholder="bigbooty.swf" name="fileName">
  </div>
  <div class="form-group">
    <label>Thumbnail File Name</label>
    <input type="text" class="form-control" placeholder="thumbnail.jpg" name="thumbnailFile">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<% include partials/footer %>

ejs 设置我们的游戏页面

对于第13集：<br/> https://code.tutsplus.com/tutorials/quick-tip-use-swfobject-to-embed-your-flash-content--active-9726

app.js

const express = require("express");
const app = express();
const request = require("request");
 
//Sets the public folder as the external file folder
app.use(express.static("public"));
 
//Officially sets the view engine as ejs, therefore setting the default file type for readering to .ejs
app.set("view engine", "ejs");
 
app.get("/", function(req, res){
    res.render("homepage"); 
});
 
app.get("/game/:title/:creator/:width/:height/:fileName/:thumbnailFile", function(req, res){
    res.render("game", {
        title: req.params.title,
        creator: req.params.creator,
        width: req.params.width,
        height: req.params.height,
        fileName: req.params.fileName,
        thumbnailFile: req.params.thumbnailFile
    });
});
 
app.get("/list", function(req, res){ 
 
    //Our ghetto database
    const gamesData = [
        {
            title: "American Racing", 
            creator: "turboNuke",
            width: 640,
            height: 480,
            fileName: "americanracing.swf",
            thumbnailFile: "americanracingpicture.jpg"
        },
        {
            title: "Generic Defense Game", 
            creator: "PyschoGoldfish",
            width: 640,
            height: 480,
            fileName: "genericdefense.swf",
            thumbnailFile: "GenericDefenseGame.png"
        },
        {
            title: "Learn to Fly 2", 
            creator: "light_bringer777",
            width: 640,
            height: 480,
            fileName: "embeddable_115608.swf",
            thumbnailFile: "ltf2.jpg"
        },
        {
            title: "Wonderputt", 
            creator: "dampgnat",
            width: 750,
            height: 650,
            fileName: "wonderputt.swf",
            thumbnailFile: "pop-wonderputt.jpg"
        }
    ]
 
    res.render("list", {
        gamesData: gamesData
    });
});
 
app.listen("3000", function(){
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});

list.ejs

<% include partials/header %>
 
    <h1>This is all of the games we have:</h1>
 
    <div class="row">
        <% for(var i = 0;i < gamesData.length; i++){ %>
        <div class="col-md-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="/games/thumbnails/<%= gamesData[i].thumbnailFile %>" style="height: 180px">
                <div class="card-body">
                <h5 class="card-title"><%= gamesData[i].title %></h5>
                <p class="card-text">Game created by <%= gamesData[i].creator %></p>
                <a href="/game/<%= gamesData[i].title %>/<%= gamesData[i].creator %>/<%= gamesData[i].width %>/<%= gamesData[i].height %>/<%= gamesData[i].fileName %>/<%= gamesData[i].thumbnailFile %>" class="btn btn-primary">Play Game</a>
                </div>
            </div>
        </div>
        <% } %>
    </div>
    
<% include partials/footer %>

game.ejs

<% include partials/header %>
 
        <h2>Game Title: <%= title %></h2>
        <h3>Game Creator: <%= creator %></h3>
        
        <!-- Game will go here -->
        <div id="game">
            <h1>Alternative content</h1>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
        </div>

<script type="text/javascript" src="/swf/src/swfobject.js"></script>
<script>
var el = document.getElementById("game");
swfobject.embedSWF("/games/<%= fileName %>", el, <%= width %>, <%= height %>, 9, "/swf/expressInstall.swf");
</script>
<% include partials/footer %>

ejs EJS声明变换e For

variavel-e-for.ejs

<% var content=['teste1','teste2']; %>
  <ul>
          <% for(var i=0; i<content.length; i++) {  %>
             <span id="selected"></span><script>console.info('test <%= i %> = <%= content[i] %>');</script>            
              <li>
                  <a href='supplies/<%= content[i] %>'>
                      <%= content[i] %>
                  </a>
              </li>
          <% } %>
      </ul>