我的文件结构:
- 项目
- 的javascript
- char1.js
- 的javascript
- 视图
- home.ejs
- app.js
我将我的ejs存储在子文件夹中，我想访问在另一个子文件夹中的chart1.js文件，
我使用app.use(express.static(__dirname + '/public'));中间件。我被这个错误困了好几个小时:谢谢帮助!!!!
。ejs文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<link rel="stylesheet" href="/stylesheets/app.css">
</head>
<body class=" ">
<div id="chart1"></div>
<button id="refresh2">Refresh this chart</button>
<script src="/javascripts/chart1.js"></script>
</div>
</body>
</html>
chart1.js文件:
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';
const sdk = new ChartsEmbedSDK({
baseUrl: 'https://charts.mongodb.com/charts-project-0-qumgu'
});
const chart = sdk.createChart({
chartId: '1e32b53f-6de2-45d2-863d-025b85c8bec9',
weidth: 100,
height: 100,
});
chart.render(document.getElementById('chart1'))
app.js文件:
if (process.env.NODE_ENV !== "production") {
require('dotenv').config();
}
const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const Data = require('./models/data');
const dbUrl = process.env.DB_URL || 'mongodb://localhost:27017/predict-football';
mongoose.connect(dbUrl, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", () => {
console.log("database connected")
})
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.urlencoded({ extended: true }))
app.use(express.static(__dirname + '/public'));
app.get('/home', async (req, res) => {
const datas = await Data.find({}).sort({ _id: -1 });
console.log(datas.length)
res.render('home', { datas })
})
app.post('/home', async (req, res) => {
const data = new Data(req.body.data);
console.log(data)
await data.save();
res.redirect('/home')
})
if (process.env.NODE_ENV !== "production") {
require('dotenv').config();
}
const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const Data = require('./models/data');
const dbUrl = process.env.DB_URL || 'mongodb://localhost:27017/predict-football';
mongoose.connect(dbUrl, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", () => {
console.log("database connected")
})
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.urlencoded({ extended: true }))
app.use(express.static(__dirname + '/public'));
app.get('/home', async (req, res) => {
const datas = await Data.find({}).sort({ _id: -1 });
console.log(datas.length)
res.render('home', { datas })
})
app.post('/home', async (req, res) => {
const data = new Data(req.body.data);
console.log(data)
await data.save();
res.redirect('/home')
})
app.all('*', (req, res, nwxt) => {
res.send("404!!!")
})
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`serving on port ${port}`)
})
app.all('*', (req, res, nwxt) => {
res.send("404!!!")
})
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`serving on port ${port}`)
})
你必须替换:
app.use(express.static(__dirname + '/public'));
:
app.use(express.static('public'))
得到chart1.js
- 重命名javascript文件夹为js
而不是
<script src="../public/javascripts/chart1.js"></script>
使用:
<script src="/js/chart1.js"></script>