共计 6148 个字符,预计需要花费 16 分钟才能阅读完成。
1. 简述
- demo:以前用过原生 JS 写计算器,这里我想要 react 来写,并且用数据库记录每次计算公式和结果,并且可发请求获取
- 后台部分:建立数据库后,通过 Node.js 的 express 框架写接口操作数据库
- 前端页面:通过 react 的 router 控制路由编写,然后通过 axios 发送请求给后台
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 (
<div>
<BrowserRouter>
<Switch>
<Route path="/" component={Login} exact/>
<Route path="/counter" component={CounterView} />
<Route path="/counterHistory" component={CounterHistory} />
</Switch>
<ul id="menu">
<li><Link to='/'>Home</Link></li>
<li><Link to='/counter'>Counter</Link></li>
<li><Link to='/counterHistory'>History</Link></li>
</ul>
</BrowserRouter>
</div>
);
}
}
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 (
<div className="box1" >
<input className="input" type="text" value={this.state.inputValue} onChange={(e)=>this.changeValue(e)}/>
<div onClick={(e)=>this.getValue(e)}>
<MyButton data={ButtonArr} width="50px" height="50px"/>{/* 事件委托加载 mybutton 上无效 */}
</div>
</div>
)
}
}
export default CounterView;
import React, {Component} from 'react';
class MyButton extends Component {render() {
return (
<div >
{this.props.data.map(data=><button value={data.value} key={data.value} style={{width:this.props.width,height:this.props.height}}>{data.value}</button>)}
</div>
);
}
}
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 (
<div className="box1">
<div className="box">
<div><span className="index">index</span>
<span className="eval"> 历史计算 </span>
<span className="time"> 计算时间 </span>
<span> 操作 </span>
</div>
{data.map((data,index)=>
<div key={data.time}>
<span className="index">{index+1}</span>
<span className="eval">{data.counter}</span>
<span className="time">{moment(data.time).format('YYYY-MM-DD HH:mm:ss')}</span>
<button id={data.id} onClick={event => this.del(event)}> 删除 </button>
</div>)}
</div>
</div>
)
}
}
export default CounterHistory;
正文完
发表至: javascript
2019-06-28