// 项目开始先造一个简单的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更深层的操作目前还没达到那个境界，以后还需更加努力！文笔不好，谢谢阅读，希望对你有所帮助。