// 项目开始先造一个简单的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= newKoa();
//
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) {throwerr;
}
console.log('server listen 3666');
});
// 接下来进行对路由的配置router.js:
const Router = require('koa-router');
const Route = new Router();
// 从processData.js中引入这四个方法
const {
wantAddData, // 添加数据
wantDeleData, // 删除数据
wantExitData, // 修改数据
wantFindData // 查找数据
} = require('../processData/processData');
Route.post('/add',wantAddData);
Route.get('/getShopMsg', wantFindData);
Route.post('/exitShopMsg', wantExitData);
Route.get('/delete', wantDeleData);
module.exports = Route;
// 这样一个简单版的node服务器就架好了
// 接下来就是连接上本地的mysql数据库了
// 创建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 (
)
}
}
// 这是查询出来的数据:
// 这是我数据库里的product_id='KY_13141544361478180'的数据,对应上面查到的第一条数据
// 添加数据就不展示了,因为这里面的数据都是我添加进去的
// 本文只是实现了基本的mysql增删改查,对于mysql更深层的操作目前还没达到那个境界,以后还需更加努力!文笔不好,谢谢阅读,希望对你有所帮助。