Question

伙计们，我正在做一个短期项目的小型项目，这是关于使用下拉列表制作此图库，以便向服务器请求您在下拉列表中选择的图像并将其显示在页面，并且还需要登录/注册表单才能访问图库。现在，我正在处理下拉列表，但我不确定如何使它正常工作。

这是我到目前为止所拥有的：

NodeJS：

const express = require("express");
const exphbs = require('express-handlebars');
const path = require("path");     
const app = express();
const bodyParser = require("body-parser");
const session = require("client-sessions");
const randomStr = require("randomstring");

var strRandom = randomStr.generate();

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


app.engine(".hbs", exphbs({ 
    defaultLayout: "main",
    extname: ".hbs" }));
app.set("view engine", ".hbs");    

app.use(express.static(path.join(__dirname, '/public')));  

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

app.post("/submitPicture", function(req, res){
    var moreDogs = req.body.dogs;

    res.redirect('index');
});

app.listen(process.env.PORT, process.env.IP, function(){
    console.log("Server ready correctly");
});

JavaScript HBS：

<form action="/submitPicture" method="POST">
      <select name="dogs" id="dogs">
            <option> </option>
            <option value="corgi">Corgi</option>
            <option value="samoya">Samoya</option>
            <option value="huski">Siberian Husky</option>
            <option value="beagle">Beagle</option>
            <option value="golden">Golden Retriever</option>
      </select>
  <input type="submit" value="Submit">
  </form>

  <article>
            <aside><p id="string">Samoyed</p></aside>
            <img src="img/samoyed-dog.jpg" id="selected">
  </article>

我将这些图像作为本地文件保存在此路径中：\ public \ img \ dog.jpg 另外，这是页面的布局：https://imgur.com/a/hGtWMdh

我可能有一个想法，如何使用正文解析器npm从发布表单中提取json对象，但是我不确定如何将其编码为下拉列表

我只是从nodejs开始，所以任何建议将不胜感激！

带有下拉列表的Node JS Interactive Gallery

0 个答案: