我可以將.ejs文件更改為.html以使其與Node.js和Express一起使用嗎？

Question

我有一個index.html，並希望將其鏈接到twitter.ejs頁面。 我沒有成功，現在我想知道是否可以將擴展名從ejs更改為html。 我試圖這樣做，但是它不起作用。 .ejs文件僅可使用Node.js / Express？

我的代碼嘗試從index.html重定向到twitter.ejs： http : //jsfiddle.net/1moj4v07/4/

index.html

<li><a href="/twitter">Tweet!</a></li>

script.js

const express = require('express');
const bodyParser= require('body-parser')
const app = express();
const MongoClient = require('mongodb').MongoClient
var router = express.Router();

var db

MongoClient.connect('mongodb://name:password@cluster0-shard-00-00-fquoc.mongodb.net:27017,cluster0-shard-00-01-fquoc.mongodb.net:27017,cluster0-shard-00-02-fquoc.mongodb.net:27017/twitter?ssl=true&replicaSet=Cluster0-shard-0&authSource=admin', (err, database) => {
  if (err) return console.log(err)
  db = database
  app.listen(3000, () => {
    console.log('listening on 3000')
  })
})

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

var path = require('path')


app.set('view engine', 'ejs')

app.set('views', path.join(__dirname, 'views'));

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

app.get('/', (req, res) => {
  db.collection('tweets').find().toArray((err, result) => {
    if (err) return console.log(err)
    res.render('twitter.ejs', {tweets: result})
  })
})

app.get('views/', (req, res) =>{
  res.render(views,local)
})

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

app.post('/tweets', (req, res) => {
  db.collection('tweets').save(req.body, (err, result) => {
    if (err) return console.log(err)
    console.log('saved to database')
    res.redirect('/')
  })
})

資料夾結構

 twitter
    ├── views
    |   └── twitter.ejs
    |   
    ├── public
    |   └── styles.css
    |
    ├── index.html  

Answer 1

我有一個index.html，並希望將其鏈接到twitter.ejs頁面。 我沒有成功，現在我想知道是否可以將擴展名從ejs更改為html。 我試圖這樣做，但是它不起作用。 .ejs文件僅可使用Node.js / Express？

Express確實確實支持.ejs以外的其他格式，例如您所要求的.html等，您只需要設置一個新的View Engine來支持它。 但是，看來您還有許多其他問題，這些問題與Node應用程序的結構以及路由加載其視圖的方式有關。

要通過Express呈現.html文件，您可以在HTML文件中使用res.render() ，方法是在Express中創建一個新的View Engine，然后使用它。 唯一的要求是， ejs通過安裝npm i --save ejs 。 我們直接需要ejs包，因為您需要新的html視圖引擎的renderFile()函數。 進行以下更改后，您可以使用res.render()呈現.html文件。

由於仍使用renderFile()因此此方法不會中斷使用EJS進行數據注入的情況。 這種方法的全部目的是在需要時繼續獲得EJS功能，但是它也將使用一個View Engine呈現所有標准的HTML。

在給定的代碼中，還有很多沒有意義的事情，以及糟糕的視圖結構。

• 沒有提供index.html
• twitter.ejs返回到應用程序的根目錄
• app.get('views/')使用從未定義的views變量

我已經給出了新的Express Server設置和項目目錄結構

---

應用程序的文件夾結構

/public
  /styles
    styles.css
/views
  index.html
  twitter.html
server.js
package.json  

更新的Express Server

const express = require('express')
const bodyParser = require('body-parser')
const MongoClient = require('monogdb').MongoClient
const path = require('path')

const app = express()
let db

MongoClient.connect('<connectionString>', (err, database) => {
  if (err) {
    return console.log(err)
  }

  db = database
  app.listen(3000, () => console.log('listening on 3000'))
})

app.engine('html', require('ejs').renderFile)
app.set('view engine', 'html')
app.set('views', path.join(__dirname, 'views'))
app.use(bodyParser.urlencoded({extended: true})
app.use(express.static(path.join(__dirname, 'public')))

// When at the base of the application, return /views/index.html
app.get('/', (req, res) => {
  return res.render('index')
})

// When GET /twitter is requested, get tweets from DB 
// and render /views/twitter.html
app.get('/twitter', (req, res) => {
  db.collection('tweets').find().toArray((err, tweets) => {
    if (err) {
      console.log(err)
      return res.sendStatus(500)
    }

    return res.render('twitter', {tweets})
  })   
})