使用react+antd+node+mysql搭建项目

1. 搭建前端react项目

使用create-react-app脚手架搭建项目，并且集成react组件库antd。

初始化项目流程

npm install -g create-react-app

create-react-app myapp

cd myapp

npm start

集成antd

npm install antd --save

//使用组件
import { Button } from 'antd';

<Button type="primary">按钮</Button>

2. 搭建node服务

在react统一项目目录下新建server文件夹，在server中初始化node服务。
node项目框架选用koa，数据库选用mysql，接下来是对项目的一些初始化操作。
我在本地已经下载安装了mysql（mac系统）。

npm i; //初始化项目

npm install koa; //安装koa

npm install mysql;  //安装mysql数据库

npm install koa-router; //安装管理路由的中间件

npm install koa-static; //安装管理静态资源的中间件

npm install koa-body; //安装用来解析body的中间件

//koa-views 是一个视图管理模块，它的灵活度很高，支持很多的模版引擎
npm install koa-views;

安装完成后项目基本上是已经初始化完成。

接下来就是让项目跑起来，首先在server目录下新建app.js作为node服务的入口文件。
在app.js中对项目做一些配置和初始化。

//app.js
//引入所需要的中间件和方法
const Koa = require('koa');
const koaBody = require('koa-body');
const fs = require('fs');
const static = require('koa-static');
const views = require('koa-views')


const app = new Koa();

app.use(koaBody());

const main = static(__dirname + './../build');
//使用react项目编译出来的模板
app.use(views(__dirname + './../build'));

app.use(main);

app.on('error', err => {
    log.error('error', err);
});
//打开view目录下的index.html页面
app.use(async (ctx, next) => {
    if (ctx.request.path === '/index') {
        ctx.type = 'text/html';
        ctx.body = fs.createReadStream('./view/index.html');
    } else {
        await next();
    }
});

app.listen(8001);

在server目录下新建route目录来管理路由，新建/route/index.js;

const router = require('koa-router')();

//index页面路由
router.get('/index', async (ctx, next) => {
    await ctx.render('index');
});

在server目录下新建service目录来管理和数据库的交互，新建/service/index.js;
在操作数据库之前要对mysql做一些基础的配置等等。

//mysqlUtil.execQuery: 是封装的操作mysql的方法

module.exports = {
    getuser: async() => {
        const result = await mysqlUtil.execQuery({
            sql: 'select * from `表名`'
        })
        return result;
    },
}

3. koa中最常用的几个中间件

参考博客： https://www.jianshu.com/p/c1e0ca3f9764

koa-router
路由是Web框架必不可少的基础功能，koa.js为了保持自身的精简，并没有像Express.js自带了路由功能，因此koa-router做了很好的补充，koa-router提供了全面的路由功能，比如类似Express的app.get/post/put的写法，URL命名参数、路由命名、支持加载多个中间件、嵌套路由等。
koa-bodyparser
koa.js并没有内置Request Body的解析器，当我们需要解析请求体时需要加载额外的中间件，官方提供的koa-bodyparser是个很不错的选择，支持x-www-form-urlencoded, application/json等格式的请求体，但不支持form-data的请求体，可以选择使用 koa-body。
koa-views
koa-views对需要进行视图模板渲染的应用是个不可缺少的中间件，支持ejs, nunjucks等众多模板引擎。
koa-static
Node.js除了处理动态请求，也可以用作类似Nginx的静态文件服务，在本地开发时特别方便，可用于加载前端文件或后端Fake数据，可结合 koa-compress 和 koa-mount 使用。
koa-logger
koa-logger提供了输出请求日志的功能，包括请求的url、状态码、响应时间、响应体大小等信息，对于调试和跟踪应用程序特别有帮助，koa-bunyan-logger 提供了更丰富的功能。