Question

我对JS真的很陌生，我正在尝试构建一个全栈式Web应用程序。我已经构建了大多数前端React代码，而我的后端文件具有到数据库的连接和查询。我正在尝试将这两个文件连接在一起，但是一旦我尝试在任何文件中导入“ express”，它就会中断。无需导入快递就可以了。在浏览器运行时给我这个错误：“ TypeError：无法获取未定义或空引用的属性'prototype'” Index.js（尝试在此处导入Express）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// import './index.css';
// var express = require('express')
// var app = express()
var Connection = require('tedious').Connection;
var Request = require('tedious').Request;
// const axios = require('axios')


ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

App.js（前端）

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { Typography } from '@material-ui/core';

// var express = require('express')
// var app = express()

//change the primary colours of the UI 
const theme = createMuiTheme({
  palette: {

    primary: {

      main: '#00a843',
      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    },

    },
  }); 



export default class App extends React.Component
{
  constructor(props) {
    super(props);
    this.handleEnterClick = this.handleEnterClick.bind(this);
    this.handleSaveClick = this.handleSaveClick.bind(this);
    this.state = {showAll: false, inputEmail: "", successfullySaved: true, newList: ""};
  }

  async handleEnterClick() {
    //send the entered email to the server

//   var xhr = new XMLHttpRequest()
    // get a callback when the server responds
//   xhr.addEventListener('load', () => {
      // update the state of the component with the result here
//     console.log(xhr.responseText)
//   })
    // open the request with the verb and the url
//   xhr.open('PUT', '/api/controllers/AppController/enter')
    // send the request
//    xhr.send(JSON.stringify({ yourEmail: this.state.inputEmail }))
/*
    const response = await fetch('/api/controllers/AppController/enter', {
      method: 'PUT',
      body: JSON.stringify({ email: this.state.inputEmail }),
    })
    console.log(await response.json())
*/
    //update the UI to reflect the button being pressed
    this.setState({showAll: true});
  }

  handleSaveClick() {
    //save to the datbase
    var xhr = new XMLHttpRequest()
    // get a callback when the server responds
    xhr.addEventListener('load', () => {
      // update the state of the component with the result here
      console.log(xhr.responseText)
    })
    // open the request with the verb and the url
    xhr.open('PUT', '/api/controllers/AppController/save')
    // send the request
    xhr.send(JSON.stringify({ newList: this.state.newList }))


    //update the UI to reflect the save
    this.setState({showAll: false, inputEmail: "", successfullySaved: true, newList: ""});
    //add a successful save message
  }


  render () {
    return (
      <form display="flex" noValidate autoComplete="off">
      <ThemeProvider theme={theme}>
      <div align = 'center'>

        <TextField 
          id="tfInputEmail"
          value={this.state.inputEmail}
          onKeyPress={(ev) => {
            if (ev.key === 'Enter') {
              this.setState({showAll: true});
               ev.preventDefault();
            }
          }}

          onChange={e => this.setState({ inputEmail: e.target.value })}
          style={{ width: 600}}
          placeholder="first_last"

          autoComplete = "email" 
          InputLabelProps={{
            shrink: true,
            style: {fontSize: 17, fontFamily: "Helvetica"}
          }}
          inputProps={{
            style: {fontFamily: "Helvetica"}
          }}

          variant="outlined"
        />
        <br/>

        <Button id="btnEnter" variant="contained" color="primary"
        style={{ marginTop: 15, marginBottom: 35, width: 600, height: 35}} onClick={this.handleEnterClick}>
          Enter
        </Button>

        <PressedEnter show={this.state.showAll} click={this.handleSaveClick} list={this.state.newList}/>
      </div>
      </ThemeProvider>
    </form>
    );
  }

}

function PressedEnter(props)
{ 
  if(!props.show) {
    return null;
  }

  return (
    <div >

        <Box fontSize={18} fontFamily="Helvetica"  marginLeft="9px" 
          marginBottom="20px" marginTop="30px">
          Check spelling and formatting before clicking 'Update your list' below. There's no error checking at the moment.
        </Box>
        <div width="100%" horizontal layout > 
        {
          // REPLACE THE ABOVE DIV WITH A GRID LAYOUT FROM MATERIAL UI 
        }

          {// Vertical layout for the textbox and its label 
          }
          <div> 
            <Box fontSize={16} fontFamily="Helvetica" 
              marginBottom="10px" marginTop="20px">
              Add/change/delete emails and separate by semicolon (;) here:
            </Box>


            <TextField
              id="tfChangeList"

              multiline
              style={{ margin: 8, width: 446}}
              InputLabelProps={{
                shrink: true,
                style: {fontSize: 20, fontFamily: "Helvetica"}
              }}
              inputProps={{
                style: {height:300, fontFamily: "Helvetica"}
              }}
              variant="outlined"
            />
          </div>


          {// Vertical layout for the textbox and its label 
          }
          <div>
            <Box fontSize={16} fontFamily="Helvetica" 
                marginBottom="10px" marginTop="20px">
                View your current Pulse Check list here:
            </Box>

            <TextField
              disabled
              id="tfCurrentList"
              multiline 
              style={{ margin: 8, width: 446}}
              InputLabelProps={{
                shrink: true,
                style: {fontSize: 20, fontFamily: "Helvetica"}
              }}
              inputProps={{
                style: {height:300, fontFamily: "Helvetica"}
              }}
              variant="outlined"
            />
          </div>

        </div>
        <br/>
        <Button id="btnSave" variant="contained" color="primary" style={{ marginLeft: 8, marginBottom: 8, 
          marginTop: -8}} onClick={props.click}>
          Save your Updates!
        </Button>
    </div>
  );
}
  );
}

Answer 1

您的全栈Web应用程序应分别运行客户端和服务器-即在localhost：3000（后端）上运行Express应用程序，并从运行在单独Webpack服务器中的客户端（React）向其发送HTTP请求（前端）。

因为应用程序是“全栈式”，所以这并不意味着前端和后端组合在一起。这些是分开的。希望这会有所帮助。

尝试连接前端（React）和后端（Node.js）时导入Express

1 个答案: