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

qujian 发布于2019-08-23 18:21 / 3568人阅读

摘要：简述以前用过原生写计算器，这里我想要来写，并且用数据库记录每次计算公式和结果，并且可发请求获取后台部分建立数据库后，通过的框架写接口操作数据库前端页面通过的控制路由编写，然后通过发送请求给后台最终结果简介和上手官方链接，具体的通过对官方文档

1.简述

demo：以前用过原生JS写计算器，这里我想要react来写，并且用数据库记录每次计算公式和结果，并且可发请求获取

后台部分：建立数据库后，通过Node.js的express框架写接口操作数据库

前端页面：通过react的router控制路由编写，然后通过axios发送请求给后台

最终结果http://counter.jianjiacheng.com

2.Express简介和上手

express官方链接，具体的通过对官方文档的学习还是比较容易上手的，这里我就简要说明

2.1新建express项目

webstorm可以直接点击newporject来选择expressApp

2.2项目结构与路由挂载

├── app.js # 应用的主入口
├── bin  # 启动脚本
├── node_modules # 依赖的模块
├── package.json # node模块的配置文件
├── public # 静态资源，如css、js等存放的目录
├── routes # 路由规则存放的目录
└── views # 模板文件存放的目录

2.3路由

路由写到routes下面

var express = require("express");
var router = express.Router();
router.get("/list", function(req, res, next) {
//pool.query是数据库的连接池下面会说到
    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允许跨域请求设置

在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对数据库的连接 2.5.1. 通过createConnection直接创建连接，这种方式需要去释放连接，不建议使用

var mysql = require("mysql");
var connection = mysql.createConnection({
    host     : "localhost",
    user     : "root",
    password : "******",
    database : "mytest"//你的数据库名字
})
connection.connect()

2.5.2. 通过连接池连接，这样可以出来高并发的情况，也不用去释放连接

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

2.6运行程序

3.数据库建立，与请求

这应该没什么好说明的，根据自己的情况建表就完事了

建立好数据库后通过express里面的路由页面那里接受前台发的请求，并且通过sql语句操作数据库

这里前台的请求我用的axios发送没有的可以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写法是通过写一个方便灌入数据的button组件，通过事先定义好的数组去动态生成界面

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;

GPU云服务器云服务器 Node_Express node_express数据库 webrtc前后台demo 前后端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105102.html

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

摘要：简述以前用过原生写计算器，这里我想要来写，并且用数据库记录每次计算公式和结果，并且可发请求获取后台部分建立数据库后，通过的框架写接口操作数据库前端页面通过的控制路由编写，然后通过发送请求给后台最终结果简介和上手官方链接，具体的通过对官方文档 1.简述 demo：以前用过原生JS写计算器，这里我想要react来写，并且用数据库记录每次计算公式和结果，并且可发请求获取后台部分：建立数据...

MageekChiu 2019-08-02 15:25 评论0 收藏0
react在本地代理请求json文件返回接口数据开发

摘要：文件夹是业务代码，这个不是重点，是执行文件入口文件执行读取本地文件返回数据的方法实现是做代理的一些配置文件是本地代理的代理逻辑然后上面文件夹是准备好的本地文件，调取接口时候就是调取了本地文件然后读取文件返回数据的一个过程。在平时开发过程中，很多时候前后端并行开发，暂时无法调取后台接口，此时我们很多时候可能会采取本地伪数据方式，或者采用mock数据，我以前大多采用这种方式，最近来新公司...

张春雷 2019-08-22 18:44 评论0 收藏0
搭建并使用前端代理服务器

摘要：本文主要是从前端的角度，使用搭建一个简易的测试项目，在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口，点击发送即可会出现比较漂亮的分享链接。一、背景简介：目前流行的前后端分离项目，一般都处于不同的域名下，前后端开发过程中，是分别部署在不同服务器上，在做接口联调时，会出现跨域的情况，部署上线时，基本不存在这种需要，因此搭建一个前端代理服务，方便开发。作为一个...

lyning 2019-08-01 18:25 评论0 收藏0
搭建并使用前端代理服务器

摘要：本文主要是从前端的角度，使用搭建一个简易的测试项目，在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口，点击发送即可会出现比较漂亮的分享链接。一、背景简介：目前流行的前后端分离项目，一般都处于不同的域名下，前后端开发过程中，是分别部署在不同服务器上，在做接口联调时，会出现跨域的情况，部署上线时，基本不存在这种需要，因此搭建一个前端代理服务，方便开发。作为一个...

jasperyang 2019-08-22 13:56 评论0 收藏0
一步一步搭建react应用-前后端初始化

摘要：一步一步搭建应用项目初始化一步一步构建一个应用开篇地址前端初始化目录结构。。。。。。一步一步搭建react应用-项目初始化 [一步一步构建一个react应用-开篇](https://segmentfault.com/a/11... git地址前端初始化 # 目录结构 +----/build + +----/config + +----+/pu...

fevin 2019-06-26 17:23 评论0 收藏0