當我從客戶端 js 調用服務器端 js 方法時，ejs 文件未使用 res.render 呈現

Question

我是 node.js 的新手，並試圖從服務器端 js 調用 ejs 文件。 我正在從客戶端 js 文件中調用 post 和 get 方法。 下面是我的代碼。

客戶端js：

function playerlist(){
const button = document.getElementById('playerselection');
//const data={selectedplayers:window.players};
button.addEventListener('click', function() {
  
  console.log(players);
  fetch('/FantasyTeam', {method: 'POST',
    body: JSON.stringify(players),
    headers: {'Content-Type':'application/json'},
    })
    .then(function(response) {
      if(response.ok) {
        CallGetMethod();
        return;
      }
      throw new Error('Request failed.');
    })
    .catch(function(error) {
      console.log(error);
    });
});
}
function CallGetMethod(){

  console.log('Inside CallGetMethod');
  fetch('/FantasyTeam', {method: 'GET'})
    .then(function(response) {
      if(response.ok) {
          console.log('Inside response');
          return ;
      }
      
      throw new Error('Request failed.');
    })
    .catch(function(error) {
      console.log(error);
    });
  
}


**Server-side js:**
app.post('/FantasyTeam', (req, res) => {
  
  const playerlist = req.body;
  console.log(playerlist);
    
    sql.connect(dbConfig, {
            useNewUrlParser: true
        }).then(() => {
             // create Request object
         console.log("Connected!");  
         
        var request = new sql.Request();
        
        //Insert query to FantasyTeam Table with selected players.         
        request.query("INSERT Query").then(function (err, result)
        {
            console.log('record added to db');  
            
         }).catch(err => {
            console.log('Could not insert the record to DB. Exiting now...', err);
            process.exit();
        });
        }
        res.sendStatus(201);
        
        }).catch(err => {
            console.log('Could not connect to the database. Exiting now...', err);
            process.exit();
        });
         
});

app.get('/FantasyTeam', (req, res) => {
  // connect to your database
    sql.connect(dbConfig, {
            useNewUrlParser: true
        }).then(() => {
             // create Request object
        var request = new sql.Request();
        request.query("select query"), function (err, result) 
        {    
            console.log('records fetched from DB'); 
            //res.send(result);
            //res.render(path.resolve(__dirname + "/views/FantasyTeam"),{result});
            res.render('FantasyTeam.ejs', { result });
            //res.render('FantasyTeam.ejs', { result });
            console.log(result.recordset.length);
         });
        }).catch(err => {
            console.log('Could not connect to the database. Exiting now...', err);
            process.exit();
        });
  
})  ;

我嘗試了多種方法來呈現 FantasyTeam.ejs 文件。 但是不能成功。代碼沒有錯誤，只是沒有重新編寫ejs文件。 感謝這方面的任何幫助。

Answer 1

首先，您在節點應用程序上設置了視圖引擎。 然后第二步在應用程序根目錄上創建一個視圖文件夾，然后在視圖文件夾中創建一個頁面文件夾，然后在頁面文件夾中創建所有模板。 視圖文件夾需要是靜態的。 最后，您可以從視圖目錄中的 pages 文件夾渲染模板。 看我的例子。 有關更多信息，請訪問 ejs 文檔： https ://ejs.co/#docs

const express = require('express');
const app = express()

const router = express.Router()

// Setup View Engine and set static folder

app.use(express.static('public'))
app.set('view engine','ejs')
app.set('views','views')

//Controller
router.get('/example',(req,res,next)=>{
  res.render('pages/index.ejs',{You Data})
})