摘要:簡(jiǎn)述以前用過(guò)原生寫計(jì)算器,這里我想要來(lái)寫,并且用數(shù)據(jù)庫(kù)記錄每次計(jì)算公式和結(jié)果,并且可發(fā)請(qǐng)求獲取后臺(tái)部分建立數(shù)據(jù)庫(kù)后,通過(guò)的框架寫接口操作數(shù)據(jù)庫(kù)前端頁(yè)面通過(guò)的控制路由編寫,然后通過(guò)發(fā)送請(qǐng)求給后臺(tái)最終結(jié)果簡(jiǎn)介和上手官方鏈接,具體的通過(guò)對(duì)官方文檔
1.簡(jiǎn)述
demo:以前用過(guò)原生JS寫計(jì)算器,這里我想要react來(lái)寫,并且用數(shù)據(jù)庫(kù)記錄每次計(jì)算公式和結(jié)果,并且可發(fā)請(qǐng)求獲取
后臺(tái)部分:建立數(shù)據(jù)庫(kù)后,通過(guò)Node.js的express框架寫接口操作數(shù)據(jù)庫(kù)
前端頁(yè)面:通過(guò)react的router控制路由編寫,然后通過(guò)axios發(fā)送請(qǐng)求給后臺(tái)
最終結(jié)果http://counter.jianjiacheng.com
2.Express簡(jiǎn)介和上手express官方鏈接,具體的通過(guò)對(duì)官方文檔的學(xué)習(xí)還是比較容易上手的,這里我就簡(jiǎn)要說(shuō)明2.1新建express項(xiàng)目
webstorm可以直接點(diǎn)擊newporject來(lái)選擇expressApp
├── app.js # 應(yīng)用的主入口 ├── bin # 啟動(dòng)腳本 ├── 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ù)庫(kù)的連接池下面會(huì)說(shuō)到 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允許跨域請(qǐng)求設(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對(duì)數(shù)據(jù)庫(kù)的連接 2.5.1. 通過(guò)createConnection直接創(chuàng)建連接,這種方式需要去釋放連接,不建議使用
var mysql = require("mysql"); var connection = mysql.createConnection({ host : "localhost", user : "root", password : "******", database : "mytest"http://你的數(shù)據(jù)庫(kù)名字 }) connection.connect()2.5.2. 通過(guò)連接池連接,這樣可以出來(lái)高并發(fā)的情況,也不用去釋放連接
var mysql = require("mysql"); var pool = mysql.createPool({ connectionLimit : 100,//最多處理多少連接次數(shù) host : "localhost", user : "root", password : "****", database : "mytest" });2.6運(yùn)行程序 3.數(shù)據(jù)庫(kù)建立,與請(qǐng)求
這應(yīng)該沒(méi)什么好說(shuō)明的,根據(jù)自己的情況建表就完事了
建立好數(shù)據(jù)庫(kù)后通過(guò)express里面的路由頁(yè)面那里接受前臺(tái)發(fā)的請(qǐng)求,并且通過(guò)sql語(yǔ)句操作數(shù)據(jù)庫(kù)
這里前臺(tái)的請(qǐng)求我用的axios發(fā)送沒(méi)有的可以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前臺(tái)頁(yè)面的搭建 4.1App.js:通過(guò)react的router控制界面路由,沒(méi)有按照可以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 (4.2寫法是通過(guò)寫一個(gè)方便灌入數(shù)據(jù)的button組件,通過(guò)事先定義好的數(shù)組去動(dòng)態(tài)生成界面 4.3效果圖與核心代碼); } } export default App;
//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("表達(dá)式錯(cuò)誤") } } 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)}/>) } } export default CounterView;this.getValue(e)}>{/*事件委托加載mybutton上無(wú)效*/}
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 () } } export default CounterHistory;index 歷史計(jì)算 計(jì)算時(shí)間 操作{data.map((data,index)=>{index+1} {data.counter} {moment(data.time).format("YYYY-MM-DD HH:mm:ss")})}
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/105102.html
摘要:簡(jiǎn)述以前用過(guò)原生寫計(jì)算器,這里我想要來(lái)寫,并且用數(shù)據(jù)庫(kù)記錄每次計(jì)算公式和結(jié)果,并且可發(fā)請(qǐng)求獲取后臺(tái)部分建立數(shù)據(jù)庫(kù)后,通過(guò)的框架寫接口操作數(shù)據(jù)庫(kù)前端頁(yè)面通過(guò)的控制路由編寫,然后通過(guò)發(fā)送請(qǐng)求給后臺(tái)最終結(jié)果簡(jiǎn)介和上手官方鏈接,具體的通過(guò)對(duì)官方文檔 1.簡(jiǎn)述 demo:以前用過(guò)原生JS寫計(jì)算器,這里我想要react來(lái)寫,并且用數(shù)據(jù)庫(kù)記錄每次計(jì)算公式和結(jié)果,并且可發(fā)請(qǐng)求獲取 后臺(tái)部分:建立數(shù)據(jù)...
摘要:文件夾是業(yè)務(wù)代碼,這個(gè)不是重點(diǎn),是執(zhí)行文件入口文件執(zhí)行讀取本地文件返回?cái)?shù)據(jù)的方法實(shí)現(xiàn)是做代理的一些配置文件是本地代理的代理邏輯然后上面文件夾是準(zhǔn)備好的本地文件,調(diào)取接口時(shí)候就是調(diào)取了本地文件然后讀取文件返回?cái)?shù)據(jù)的一個(gè)過(guò)程。 在平時(shí)開發(fā)過(guò)程中,很多時(shí)候前后端并行開發(fā),暫時(shí)無(wú)法調(diào)取后臺(tái)接口,此時(shí)我們很多時(shí)候可能會(huì)采取本地偽數(shù)據(jù)方式,或者采用mock數(shù)據(jù),我以前大多采用這種方式,最近來(lái)新公司...
摘要:本文主要是從前端的角度,使用搭建一個(gè)簡(jiǎn)易的測(cè)試項(xiàng)目,在自己搭建的代理服務(wù)的下實(shí)現(xiàn)簡(jiǎn)單的微信分享。在微信測(cè)試工具中調(diào)試接口,點(diǎn)擊發(fā)送即可會(huì)出現(xiàn)比較漂亮的分享鏈接。 一、背景簡(jiǎn)介: 目前流行的前后端分離項(xiàng)目,一般都處于不同的域名下,前后端開發(fā)過(guò)程中,是分別部署在不同服 務(wù)器上,在做接口聯(lián)調(diào)時(shí),會(huì)出現(xiàn)跨域的情況,部署上線時(shí),基本不存在這種需要,因此搭建一個(gè) 前端代理服務(wù),方便開發(fā)。 作為一個(gè)...
摘要:本文主要是從前端的角度,使用搭建一個(gè)簡(jiǎn)易的測(cè)試項(xiàng)目,在自己搭建的代理服務(wù)的下實(shí)現(xiàn)簡(jiǎn)單的微信分享。在微信測(cè)試工具中調(diào)試接口,點(diǎn)擊發(fā)送即可會(huì)出現(xiàn)比較漂亮的分享鏈接。 一、背景簡(jiǎn)介: 目前流行的前后端分離項(xiàng)目,一般都處于不同的域名下,前后端開發(fā)過(guò)程中,是分別部署在不同服 務(wù)器上,在做接口聯(lián)調(diào)時(shí),會(huì)出現(xiàn)跨域的情況,部署上線時(shí),基本不存在這種需要,因此搭建一個(gè) 前端代理服務(wù),方便開發(fā)。 作為一個(gè)...
摘要:一步一步搭建應(yīng)用項(xiàng)目初始化一步一步構(gòu)建一個(gè)應(yīng)用開篇地址前端初始化目錄結(jié)構(gòu)。。。。。。 一步一步搭建react應(yīng)用-項(xiàng)目初始化 [一步一步構(gòu)建一個(gè)react應(yīng)用-開篇](https://segmentfault.com/a/11... git地址 前端初始化 # 目錄結(jié)構(gòu) +----/build + +----/config + +----+/pu...
閱讀 2332·2023-04-26 00:28
閱讀 3079·2019-08-30 15:55
閱讀 2752·2019-08-30 12:47
閱讀 1562·2019-08-29 11:04
閱讀 3189·2019-08-28 18:14
閱讀 954·2019-08-28 18:11
閱讀 1682·2019-08-26 18:36
閱讀 3397·2019-08-23 18:21