React+Node+Express搭建一個前后端demo

qujian 發(fā)布于2019-08-23 18:21 / 3382人閱讀

摘要：簡述以前用過原生寫計算器，這里我想要來寫，并且用數(shù)據(jù)庫記錄每次計算公式和結(jié)果，并且可發(fā)請求獲取后臺部分建立數(shù)據(jù)庫后，通過的框架寫接口操作數(shù)據(jù)庫前端頁面通過的控制路由編寫，然后通過發(fā)送請求給后臺最終結(jié)果簡介和上手官方鏈接，具體的通過對官方文檔

1.簡述

demo：以前用過原生JS寫計算器，這里我想要react來寫，并且用數(shù)據(jù)庫記錄每次計算公式和結(jié)果，并且可發(fā)請求獲取

后臺部分：建立數(shù)據(jù)庫后，通過Node.js的express框架寫接口操作數(shù)據(jù)庫

前端頁面：通過react的router控制路由編寫，然后通過axios發(fā)送請求給后臺

最終結(jié)果http://counter.jianjiacheng.com

2.Express簡介和上手

express官方鏈接，具體的通過對官方文檔的學習還是比較容易上手的，這里我就簡要說明

2.1新建express項目

webstorm可以直接點擊newporject來選擇expressApp

2.2項目結(jié)構(gòu)與路由掛載

├── app.js # 應(yīng)用的主入口
├── bin  # 啟動腳本
├── node_modules # 依賴的模塊
├── package.json # node模塊的配置文件
├── public # 靜態(tài)資源，如css、js等存放的目錄
├── routes # 路由規(guī)則存放的目錄
└── views # 模板文件存放的目錄

2.3路由

路由寫到routes下面

var express = require("express");
var router = express.Router();
router.get("/list", function(req, res, next) {
//pool.query是數(shù)據(jù)庫的連接池下面會說到
    pool.query("SELECT * FROM counter;", function (err, rows, fields) {
        if (err) throw err;
        console.log(rows)
        res.json(
            rows
        )

    })
});
router.post("/add", function(req, res, next) {
    console.log(req.body)
    //var mysqltl="INSERT INTO counter(id,counter, time) VALUES(""+req.body.counter+"","+"now()"+");"
    var mysqltl=`INSERT INTO counter(counter, time) VALUES("${req.body.counter}",now());`
    console.log(mysqltl)
    pool.query(mysqltl, function (err, rows, fields) {
        if (err) throw err;
        console.log(rows)
        res.json(
            rows
        )

    })
});

2.4允許跨域請求設(shè)置

在app.js里面添加

app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Methods", "*");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

2.5express對數(shù)據(jù)庫的連接 2.5.1. 通過createConnection直接創(chuàng)建連接，這種方式需要去釋放連接，不建議使用

var mysql = require("mysql");
var connection = mysql.createConnection({
    host     : "localhost",
    user     : "root",
    password : "******",
    database : "mytest"http://你的數(shù)據(jù)庫名字
})
connection.connect()

2.5.2. 通過連接池連接，這樣可以出來高并發(fā)的情況，也不用去釋放連接

var mysql = require("mysql");
var pool  = mysql.createPool({
    connectionLimit : 100,//最多處理多少連接次數(shù)
    host     : "localhost",
    user     : "root",
    password : "****",
    database : "mytest"
});

2.6運行程序

3.數(shù)據(jù)庫建立，與請求

這應(yīng)該沒什么好說明的，根據(jù)自己的情況建表就完事了

建立好數(shù)據(jù)庫后通過express里面的路由頁面那里接受前臺發(fā)的請求，并且通過sql語句操作數(shù)據(jù)庫

這里前臺的請求我用的axios發(fā)送沒有的可以cnpm install axios --save

             axios({
                    method: "post",
                    headers:{"Content-type":"application/json"},
                    url: "http://localhost:3000/counter/add",
                    data: {
                        counter: input+"="+value,
                    }
                }).then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

4.react前臺頁面的搭建 4.1App.js:通過react的router控制界面路由，沒有按照可以cnpm install react-router-dom --save

import React, { Component } from "react";
import CounterView from "./Pages/CounterView/index";
import CounterHistory from "./Pages/CounterHistory/index";
import Login from "./Pages/Login/index";
import { HashRouter,Router,Route,Switch,Link,BrowserRouter} from "react-router-dom";
import "./App.css";


class App extends Component {
  render() {
    return (
      
          
              
                  
                  
                  
              
              
                  Home
                  Counter
                  History
              
          

      
    );
  }
}

export default App;

4.2寫法是通過寫一個方便灌入數(shù)據(jù)的button組件，通過事先定義好的數(shù)組去動態(tài)生成界面

4.3效果圖與核心代碼

//counterview
import React, { Component } from "react";
import MyButton from "../../components/MyButton/index";
import { BUTTON_VALUE} from "../../Utils/Enum";
import styles from "./index.less";
import axios from "axios";

class CounterView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue:"",
        };
    }



    getButtonArr = (value=[]) => {
        var ButtonArr=[];
        value.forEach((outval)=> {
            outval.forEach((inval)=> {
               ButtonArr.push({value:inval})
            })
        })
        return ButtonArr;
    }


       count=()=>{
            var input = this.state.inputValue
            try{

                var value = eval(input).toFixed(2);
                const _this=this;
                axios({
                    method: "post",
                    headers:{"Content-type":"application/json"},
                    url: "http://localhost:3000/counter/add",
                    data: {
                        counter: input+"="+value,
                    }
                }).then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                return value;
            }catch(err){
                alert("表達式錯誤")
            }
        }


    getValue=(e)=>{
        var newInputValue=this.state.inputValue;
        var id=e.target.innerText;
        if(id !== "clear" && id !== "back" && id !== "equal"&&id!=="sign") {
            newInputValue = this.state.inputValue+id;
        }
        if(id === "=") {
            var value = this.count();
            newInputValue=value;
        }
        if(id === "clear") {
            newInputValue="";
        }
        if(id === "back") {
            newInputValue = this.state.inputValue.substring(0, this.state.inputValue.length - 1);
        }
        if(id === "√"){
            var value = this.count();
            if(value){
                newInputValue = Math.sqrt(value);
            }else{
                newInputValue="";
            }

        }
        this.setState({
            inputValue:newInputValue,
        })
    }
    changeValue=(e)=>{
        var newInputValue =e.target.value;
        console.log(newInputValue)
        this.setState({
            inputValue:newInputValue,
        })
    }

    render() {
        var ButtonArr = this.getButtonArr(BUTTON_VALUE)
        return (
            
                this.changeValue(e)}/>
                this.getValue(e)}>
                    {/*事件委托加載mybutton上無效*/}
                

            
        )
    }
}

export default CounterView;

import React, { Component } from "react";
class MyButton extends Component {
    render() {
        return (
            
                {this.props.data.map(data=>)}
            
        );
    }
}

export default MyButton;

import React, { Component } from "react";
import axios from "axios";
import moment from "moment";
import "./index.less";

class CounterHistory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[],
        };
    }

    componentDidMount() {
        this.getdata();
    }

    getdata=()=>{
        const _this=this;
        axios.get("http://localhost:3000/counter")
            .then(function (response) {
                console.log(response)
                _this.setState({
                    data:response.data,
                });
            })
            .catch(function (error) {
                console.log(error);

            })
    }

    del=(e)=>{
        const _this=this;
        const id=e.target.id;
        axios({
            method: "post",
            headers:{"Content-type":"application/json"},
            url: "http://localhost:3000/counter/del",
            data: {
                id: id,
            }
        }).then(function (response) {
            _this.getdata();
        }).catch(function (error) {
            console.log(error);
        });
    }



    changeValue=(e)=>{

    }

    render() {
        var data=this.state.data;
        console.log(data)
        return (
            
                
                    index
                        歷史計算
                        計算時間
                        操作
                    
                    {data.map((data,index)=>
                        
                            {index+1}
                            {data.counter}
                            {moment(data.time).format("YYYY-MM-DD HH:mm:ss")}
                            
                        )}
                
            

        )
    }
}

export default CounterHistory;