首页 > 解决方案 > 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;

标签: javascriptexpressroutesnodesbackend

解决方案


exact使用BrowserRouter. _ 如果未指定确切的,它可能匹配所有路线?

像下面的东西?

<Route path='/' exact>
    <Home />
</Route>

此处解释 - React : <Route exact path="/" /> 和 <Route path="/" /> 之间的区别


推荐阅读