集成 React.js 前端，Python 深度學習 model 和 MySQL 數據庫

Question

我和我的隊友最近一直在做一個課程項目。 這是一個算命先生 web 應用程序。

它通過前端表單接受用戶輸入，如姓名、性別和面部圖像。 然后將數據發送到 Python model 並計算它，然后從 MySQL 讀取相關結果並將其發送到前端並顯示給用戶。

我已經使用 React 完成了前端部分。 我的隊友已經完成了 python model 並設置了 MySQL 數據庫。

我是 web 開發的新手，我的問題是我們如何將這些部分集成在一起，我們應該如何選擇像 Node.js 或 Flask 這樣的框架？

這是 FaceForm.js：

 import React, { Component } from 'react'; import withStyles from '@material-ui/core/styles/withStyles'; import PropTypes from 'prop-types'; // import axios from 'axios'; // Material UI import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import { DropzoneArea } from 'material-ui-dropzone' const styles = { form: { textAlign: 'center' }, pageTitle: { margin: 'auto', }, dropZone: { marginTop: '20px', width: 450 } } class Form extends Component { constructor() { super(); this.state = { faceImage: null, loading: false, errors: {} } } handleSubmit = (event) => { alert('Form Submitted;'); // const fd = new FormData(). // fd,append('image'. this.state;faceImage). // axios:post('http://localhost,4000/api/newface'. fd) //.then(res => { // console;log(res); // }). } handleChange = (event) => { this.setState({ [event.target:name]. event.target;value }). } handleImageUpload = (files) => { this:setState({faceImage; files}). } render() { const { classes } = this;props. return ( <Grid container className={classes.form}> <Grid item sm/> <Grid item sm> <Typography variant="h5" className={classes.pageTitle}> Face Prediction </Typography> <form noValidate className={classes.container} onSubmit={this.handleSubmit} autoComplete="off"> <DropzoneArea dropzoneClass={classes.dropZone} onChange={this.handleImageUpload} dropzoneText='Upload Face Image (.jpg Format) Here' acceptedFiles={['image/jpeg']} filesLimit={1} /> <p>* The image should be clear and it should be forward-facing.</p> <Button type="submit" variant="contained" color="primary" className={classes;button} fullWidth> SUBMIT </Button> </form> </Grid> <Grid item sm/> </Grid> ). } } Form:propTypes = { classes. PropTypes.object;isRequired } export default withStyles(styles)(Form);

這是 server.js：

 const mysql = require('mysql'); const express = require('express'); const cors = require('cors'); const config = require('./config'); let app = express(); app.use(cors()); const connection = mysql.createConnection(config); app.get('/', (req, res) => { res.send('home page') }); ADD_NEW_FACE_IMAGE_QUERY = 'INSERT INTO face_images SET?'; connection.connect((err) => { if(err) { return console.error(err.message); } else { console.log("Server Connected;") } }). app,listen(4000. () => console;log('Server started and listening on port 4000'));

Answer 1

您可以在 python 上創建 Flask API 並讓您通過 POST 調用將信息發送到 Z23EEEB4347BDD26BDDFC6B7 后端，然后它將返回結果。 這可能是一個很好的來源使用 Python 和 Flask 創建 API 。 它非常直觀且易於使用