javascript - app.get('/') 不会发送我在里面传递的内容 - 快递
问题描述
我创建了几条有效的路线,但我的 app.get('/') 没有从我传递的内容中发送任何内容。后端控制台没有任何反应,因此在“localhost:3000/”上时前端也没有发生任何事情。我的前端 Home 组件在“/”路径上显示得很好……知道后面出了什么问题吗?
app.js(后端)
const bodyParser = require('body-parser');
const app = express();
const morgan = require('morgan');
const connection = require('./helpers/db.js');
const session = require('express-session')
// Configure view engine to render EJS templates.
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
// Use application-level middleware for common functionality, including
// logging, parsing, and session handling.
app.use(require('morgan')('combined'));
app.use(require('body-parser').urlencoded({ extended: true }));
app.use(require('express-session')({ secret: 'keyboard cat', resave: false, saveUninitialized: false }));
// Initialize Passport and restore authentication state, if any, from the
// session.
app.use(passport.initialize());
app.use(passport.session());
app.use(morgan('dev'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
console.log('heeeeeeere')
res.send('YOU ARE HERE')
//res.render('YOU ARE HERE')
//res.render('signup', { user: req.user });
});
app.post('/signup', (req, res) => {
var data = {
name: req.body.name,
lastname: req.body.lastname,
email: req.body.email,
password: req.body.password
};
var email = data.email
var passwordconf = req.body.passwordconf
var password = data.password
const checkEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
checkEmail.test(String(email).toLowerCase())
? password === passwordconf
? connection.query('INSERT INTO users SET ?', data, (error, response, fields) => {
if (error)
res.status(500).json({ flash: error.message });
else
res.status(200).json({ flash: "User has been signed up!" , path: '/profile'})
})
: res.status(500).json({ flash: "Please confirm your password again" })
: res.status(500).json({ flash: "Please give a correct email" });
});
app.post('/signin', (req, res) => {
var data = {
email: req.body.email,
password: req.body.password
};
const checkEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
checkEmail.test(String(data.email).toLowerCase())
? connection.query(`SELECT * FROM users WHERE email = "${data.email}" AND password = "${data.password}"`, (error, response, fields) => {
if (error)
res.status(500).json({ flash: error.message});
else
response != ''
? res.status(200).json({ flash: "Welcome !", path: '/profile'})
: res.status(200).json({ flash: `The email or the password is incorrect` , path: '/profile'})
})
: res.status(500).json({ flash: "Please give a correct email" });
});
// in case path is not found, return the 'Not Found' 404 code
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
app.get('/signin',
function(req, res){
res.render('login');
});
app.get('/logout',
function(req, res){
req.logout();
res.redirect('/');
});
app.get('/profile',
require('connect-ensure-login').ensureLoggedIn(),
function(req, res){
res.render('profile', { user: req.user });
});
// launch the node server
let server = app.listen( process.env.PORT || 5000, function(){
console.log('Listening on port ' + server.address().port);
});
路线(前端)
import {MuiThemeProvider} from '@material-ui/core/styles';
import { Grid, Paper } from '@material-ui/core';
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import Profile from './components/Profile';
import Home from './components/Home';
// const bcrypt = require('bcrypt');
function App() {
return (
<MuiThemeProvider >
<Grid container
alignItems='center'
style={{ height: '100%' }}>
<Grid item xs={12}>
<Paper
elevation={4}
style={{ margin: 32 }}
>
<Grid container
alignItems='center'
justify='center'>
<Grid item xs={12}
alignContent='center'
>
<Router>
<Switch>
<Route path='/'>
<Home />
</Route>
<Route path='/signup'>
<SignUp />
</Route>
<Route path='/signin'>
<SignIn />
</Route>
<Route path='/profile'>
<Profile />
</Route>
</Switch>
</Router>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</MuiThemeProvider>
);
}
export default App;
解决方案
exact
使用BrowserRouter
. _ 如果未指定确切的,它可能匹配所有路线?
像下面的东西?
<Route path='/' exact>
<Home />
</Route>
此处解释 - React : <Route exact path="/" /> 和 <Route path="/" /> 之间的区别
推荐阅读
- python - 如何遍历不同的 sci-kit 学习分类器
- javascript - 为什么将参数传递给单击事件侦听器函数会导致奇怪的结果?
- python-3.x - 如何打印对象方法的所有值?
- node.js - 快速会话不起作用,只是一个简单的代码
- javascript - 通过后缀搜索从数组中提取所需值
- flutter - 在颤振中,我们如何按百分比设置高度或宽度?
- angular - Angular Ng-Select 项目未更新
- c++ - 如何让我的程序从用户输入同时检查非整数和空格
- java - Java - LocalDate 比较超出范围但输出不正确
- angular - 在 Angular 中加载 Marzipano 查看器的问题