---恢復內容開始---css
最近在看mysql的視頻,因此手寫了這麼個東西,歡迎你們指點指點 前端
// 項目開始先造一個簡單的node服務器server.js:
const Koa = require('koa'); const Path = require('path'); const Static = require('koa-static'); const KoaBody = require('koa-body')(); const Route = require('./router/router'); const App = new Koa();
// const main = Static(Path.join(__dirname)); App.use(main);
// 處理post請求須要用這個 App.use(KoaBody);
// 使用路由 App .use(Route.routes()) .use(Route.allowedMethods()); App.listen(3666, (err) => { if(err) { throw err; } console.log('server listen 3666'); });
// 接下來進行對路由的配置router.js:
const Router = require('koa-router');node
const Route = new Router();mysql
// 從processData.js中引入這四個方法react
const {
wantAddData, // 添加數據
wantDeleData, // 刪除數據
wantExitData, // 修改數據
wantFindData // 查找數據
} = require('../processData/processData');ios
Route.post('/add',wantAddData);
Route.get('/getShopMsg', wantFindData);
Route.post('/exitShopMsg', wantExitData);
Route.get('/delete', wantDeleData);sql
module.exports = Route;數據庫
// 這樣一個簡單版的node服務器就架好了json
// 接下來就是鏈接上本地的mysql數據庫了axios
// 建立mysql.js
const Mysql = require('mysql');
const { _SQLCONFIG } = require('../config');
// _SQLCONFIG 保存你的mysql信息,結構以下:
/**
_SQLCONFIG: {
host: 'localhost',
user: 'root',
port: '3306',
database: '',
password: '',
connectionLimit: 50 // 最大鏈接數
}
*/
// 建立數據庫鏈接
const pool = Mysql.createPool(_SQLCONFIG);
// 經過connection的query方法統一執行增刪改查的操做。
// connecQuery爲增刪改查方法的函數名
// statements進行增刪改查操做的條件,查詢條件都由前端訪問時將條件傳入
// parameter 進行添加或修改的數據
function poolFn(connecQuery, statements, parameter) {
// getConnection 建立鏈接池
return new Promise((resolve, reject) => {
pool.getConnection((err, connection) => {
if(err) {
throw err;
reject('創建鏈接池失敗');
return;
}
connecQuery(connection, statements, parameter).then(data => {
connection.release(); // 到這步說明已經完成操做,釋放鏈接
resolve(data);
});
});
// console.log(pool._allConnections.length); // 鏈接池裏的鏈接數
});
}
/*
* connection 鏈接句柄
* statements 查詢語句
* */
// 基於promise方法實現
// 查詢數據
function connecQueryFind(connection, statements) {
return new Promise((resolve, reject) => {
connection.query(statements, (err, result) => {
if(err) {
throw err;
reject('查詢失敗');
}
resolve(result);
});
})
}
// 添加數據
function connecQueryAdd(connection, statements, parameter) {
return new Promise((resolve, reject) => {
connection.query(statements, parameter, (err, result) => {
if(err) {
throw err;
reject('添加失敗');
}
resolve(result);
});
})
}
// 刪除數據
function connecQueryDele(connection, statements) {
return new Promise((resolve, reject) => {
connection.query(statements, (err, result) => {
if(err) {
throw err;
reject('刪除失敗');
}
resolve(result);
});
})
}
// 修改數據
function connecQueryExit(connection, statements, parameter) {
return new Promise((resolve, reject) => {
connection.query(statements, parameter, (err, result) => {
if(err) {
throw err;
reject('修改失敗');
}
resolve(result);
});
})
}
// 將方法封裝統一導出
function queryFn(connecQuery, statements, parameter) {
return new Promise((resolve) => {
poolFn(connecQuery, statements, parameter).then(data => {
resolve(data);
});
});
}
module.exports = {
findData(statements, parameter) {
return queryFn(connecQueryFind, statements, parameter);
},
addData(statements, parameter) {
return queryFn(connecQueryAdd, statements, parameter);
},
deleData(statements, parameter) {
return queryFn(connecQueryDele, statements, parameter);
},
exitData(statements, parameter) {
return queryFn(connecQueryExit, statements, parameter);
}
};
// 最後就是對mysql中四個方法在路由中的處理了processData.js:
// 從mysql.js引入增刪改查方法
const {
findData,
addData,
deleData,
exitData
} = require('../mysql/mysql');
// ------------------ctx.query獲取get請求參數--------------------------------------
// ------------------ctx.request.body獲取post請求參數------------------------------
// let data = fs.readFileSync('./k_Mongo/shopList.json', 'utf-8'); 讀取文件信息
// 這邊經過async方法保證數據的同步獲取
let wantFindData = async(ctx) => { // 獲取數據
let res = ctx.query;
// 返回的數據格式爲json
ctx.response.type = 'json';
let statements = res.statements;
await findData(statements).then(data => {
ctx.body = data;
}, () => {
ctx.body = { err: '數據獲取失敗' };
});
};
let wantAddData = async(ctx) => { // 添加數據
let res = ctx.request.body;
let statements = res.statements;
let parameter = JSON.parse(res.parameter);
ctx.response.type = 'json';
await addData(statements, parameter).then(data => {
ctx.body = data;
}, () => {
ctx.body = { err: '數據添加失敗' };
});
};
let wantDeleData = async(ctx) => { // 刪除數據
let res = ctx.query;
let statements = res.statements;
ctx.response.type = 'json';
await deleData(statements).then(data => {
ctx.body = data;
}, () => {
ctx.body = { err: '數據刪除失敗' };
});
};
let wantExitData = async(ctx) => { // 修改數據
let res = ctx.request.body;
let parameter = JSON.parse(res.parameter);
let statements = res.statements;
ctx.response.type = 'json';
await exitData(statements, parameter).then(data => {
ctx.body = data;
}, () => {
ctx.body = { err: '數據修改失敗' };
});
};
module.exports = {
wantFindData,
wantAddData,
wantDeleData,
wantExitData
};
// 到這一步基本上結束了,能夠在前端使用試驗一下
// 先本身封裝一個axios的方法,結合上次講的axios封裝get和post方法 fetch.js:
const axios = require('axios');
//封裝axios請求,get和post
export default function(url, method, params = {}) {
let data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
return axios({
method,
url,
[data]: params
}).then((res) => {
return Promise.resolve(res.data);
}).catch((err) => {
return Promise.reject(err);
})
}
// 再新建一個api.js文件專門存放接口查詢
// 這邊就只使用添加數據和獲取數據
import fetch from './fetch';
// 添加商品數據
export function addShopData(params) {
return new Promise((resolve, reject) => {
fetch('/add', 'post', params).then(data => {
resolve(data);
}, err => {
reject(err);
})
});
}
// 獲取商品列表數據
export function getShopData(params) {
return new Promise((resolve, reject) => {
fetch('/getShopMsg', 'get', params).then(data => {
resolve(data);
}, err => {
reject(err);
})
});
}
// 修改商品列表數據
export function exitShopData(params) {
return new Promise((resolve, reject) => {
fetch('/exitShopMsg', 'post', params).then(data => {
resolve(data);
}, err => {
reject(err);
})
});
}
// 最後一步了
// React先建立shopList.js
import React, { Component } from 'react';
import { getShopData } from '../../../api/shopApi';
import SingShop from './singShop';
import CompontHead from '../homeComHead/compontHead';
import './shoplist.scss';
export default class HomeShopList extends Component {
constructor(props) {
super(props);
// 商品數據
this.state = {
shopData: [],
shopData02: []
};
// this.conUl = React.createRef();
// 查詢條件
// 查詢shopMsg表的全部數據
this.getParams = {
statements: 'SELECT * FROM shopMsg'
};
// 這是修改的數據
// let DATA = [{"detImg":"/static/images/all/1495869803526192.jpg"}];
// 修改的參數
// this.exitParams = {
// statements: 'UPDATE shopMsg SET product_det=? WHERE product_id="KY_13141544361478180"', // 修改條件
// parameter: [JSON.stringify(DATA)] // 修改的數據
// };
// product_genre product_det
}
componentWillMount() {
// 進行查詢操做
getShopData(this.getParams).then(data => {
data.map(item => {
item.product_genre = JSON.parse(item.product_genre);
item.product_det = JSON.parse(item.product_det);
});
data.length = 8;
let shopData02 = JSON.parse(JSON.stringify(data));
this.setState({
shopData: data,
shopData02: shopData02.splice(2, data.length)
});
console.log(data);
});
// exitShopData(this.exitParams).then(data => {
// console.log(data);
// });
}
render() {
return (
<div>hehe</div>
)
}
}
// 這是查詢出來的數據:
// 這是我數據庫裏的product_id='KY_13141544361478180'的數據,對應上面查到的第一條數據
// 添加數據就不展現了,由於這裏面的數據都是我添加進去的
// 本文只是實現了基本的mysql增刪改查,對於mysql更深層的操做目前還沒達到那個境界,之後還需更加努力!文筆很差,謝謝閱讀,但願對你有所幫助。