koa2 + react + node后台+热更新

最新推荐文章于 2021-12-24 11:26:28 发布

艾离

最新推荐文章于 2021-12-24 11:26:28 发布

阅读量772

点赞数

分类专栏： node 文章标签： node mysql koa react

本文链接：https://blog.csdn.net/weixin_42946929/article/details/103464389

版权

node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

技术栈

代码 https://github.com/jinguohua/demo4
react+webpack 支持前台编写。node+mysql做后台维护
使用ts，包括了tsc,bable7,antd
使用mysql,koa-route 做路由

react+webpack配置

由于使用bable7 ,所以直接使用.babelrc 解析react、ts、es6高级语法
.babelrc相关配置如下，此文件位于项目根目录下。

//.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    ["@babel/preset-react"],
    ["@babel/preset-typescript"]
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd"
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import"
  ]
}

同样需要配置tsconfig.json,此文件位于项目根目录下。内容如下

{
    "compilerOptions": {
        "outDir": "./dist",
        "module": "esnext",
        "target": "es5",
        "lib": [
            "es6",
            "dom"
        ],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "allowUnreachableCode": true,
        "noImplicitAny": false
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

这是基础配置，接下来是配置webpack.config.js,此文件位于项目根目录下
区分了开发和线上环境

if (process.env.NODE_ENV === "development") {
  module.exports = require("./config/webpackconfig");
} else {
  module.exports = require("./config/webpackconfig");
}

根据webpack.config.js中文件的路径，新建生产和线上的webpack 配置，有几个小知识点，
1、使用了happypack ,直接打包了babel-loader
2.1、output.path是硬盘文件路径
2.2、output.publicPath配置的是打包文件输出的访问路径
3、const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);这个可以将.tsx中引入的.less 文件拆分出来
4、const HtmlWebpackPlugin = require(“html-webpack-plugin”);可以根据你设置的路径在dist中生成.html模版，并且将3中拆分出来的less 引入到dist/index.html中
5、new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(),
这三个是是用于koa-webpack-dev-middleware热更新的，随后配置后端的时候，会再提到
下面是webpack 代码

const path = require("path");
const webpack = require("webpack"); // 加载webpack 中的模块
const HappyPack = require("happypack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const os = require("os");
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const nodeEnv = "development";
module.exports = {
  mode: process.env.NODE_ENV,

  entry: {
    index: [
      "@babel/polyfill",
      "webpack-hot-middleware/client?noInfo=true",
      "./src/index.tsx"
    ]
  },
  output: {
    path: path.join(__dirname, "../dist"),
    publicPath: "/dist/",
    filename: "js/[name].js",
    chunkFilename: "js/[name].chunk.js"
  },

  module: {
    rules: [
      {
        test: /\.(js?|ts?|jsx?|tsx?)$/,
        exclude: /node_modules/,
        use: ["happypack/loader?id=babel"]
      },
      {
        test: /\.(c|le)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === "development"
              //reloadAll: true,
            }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }
    ]
  },

  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify(nodeEnv),
        NODE_LOCATION: JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new HappyPack({
      id: "babel",
      loaders: [
        {
          loader: "babel-loader"
        }
      ],
      threadPool: happyThreadPool
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name].css",
      ignoreOrder: false
    }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html",
      inject: true
    })
  ],

  resolve: {
    //有些不同的模块会区分不同的代码这里决定使用哪份代码，例如es6 and es5
    mainFiles: ["index.web", "index"],
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    // 添加让webpack 解析的后缀 例如 ./entry ,优先匹配entry.ts,entry.tsx,最后是entry.js
    extensions: [".ts", ".tsx", ".js", ".json", ".less", ".css"]
  },
  performance: {
    hints: false
  }
};

总的来说，react+webpack 前半部分基本上就是这样了
package.json 启动脚本是这样的

   "start": "cross-env NODE_ENV=development  nodemon --watch 'server_koa.js' -e ts,tsx --exec 'ts-node' ./server_koa.js ",

koa_server.js,在后半部分详细介绍，启动http 服务，做接口请求。
nodemon 检测server_koa.js，支持检测路径’server/**/*’，当使用ts 编写后台时，可以直接重新编译，然后重启ts-node’ ./server_koa.js 服务

======================手动分割线=

现在是重中之重koa2+node +koaroute路由做接口

koa2 是轻量级的服务器接口

koa2 中没有像express中可以直接使用use,或者get 拦截处理路由，需要使用const Router = require(“koa-router”);做路由分发，也可以自己做这一步，不过麻烦
koa2 中同样没有静态文件分发，需要使用const send = require(“koa-send”);进行react打包的js 和less 进行模版发送，就是webpack 中从.tsx中抽离出来的js 和less 。也有资源说可以使用koa-static,但是，但是我这里加在不出来js和less,报错404.所以最后问同事才了解到koa-send。koa-static是继承实现koa-send,所以问题不大。
下面就是这一块代码，/dist/是webpack 中 output.publicpath 路径，检测系统访问的时候分发文件资源，
/test/是项目文件，就是react route 的路径，也就是浏览器地址栏的路径
这里配置中间件的格式，返回我们配置的模版，所有的访问路径都会经过这个中间件

router.get("/dist/*", async (ctx, next) => {
  await send(ctx, ctx.path);
});
// app.use(static(__dirname + "/dist/", { extensions: ["html"] }));

router.get("/test/*", async (ctx, next) => {
  ctx.type = "html";
  ctx.body = fs.createReadStream("dist/index.html");
  await next();
});

nodemon 是检测server,也监控node后台代码。检测到改变就重新编译

配置到现在，仍然不能完美的使用koa2 替换express ，现在还没有热更新，在js .tsx修改的代码仍然不能编译，下面就是需要koa的热更新

const  webpackDevMiddleware = require("koa-webpack-dev-middleware");
const webpackHotMiddleware = require("koa-webpack-hot-middleware");

const wdm = webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
});
app.use(wdm);
app.use(webpackHotMiddleware(compiler));

这两块内容来对.tsx 文件进行热更新。webpackDevMiddleware这个板块中的必须注明 publicPath: config.output.publicPath这个路径，否则不能进行文件热更新，因为找不到更改的文件对应的板块，出现的问题就是hot-update.json找不到，这个链接中注明了publicPath必须写明的原因。
还有就是config/webpackconfig.js 中使用的那三个插件

new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),

注意npm 官网上的这三个插件名称不正确，会直接在webpack 编译中直接报错，拿着报错信息自行百度一下就会有结果。
下面的是server_koa.js完整代码

const Koa = require("koa");
const app = new Koa();
const Router = require("koa-router");
// const koaBody = require("koa-body");
// const static = require("koa-static");
// const path = require("path");
const send = require("koa-send");
const fs = require("fs");

const webpack = require("webpack");
const webpackDevMiddleware = require("koa-webpack-dev-middleware");
const webpackHotMiddleware = require("koa-webpack-hot-middleware");
const config = require("./webpack.config");

const compiler = webpack(config);
const router = new Router();

router.get("/dist/*", async (ctx, next) => {
  await send(ctx, ctx.path);
});
// app.use(static(__dirname + "/dist/", { extensions: ["html"] }));

router.get("/test/*", async (ctx, next) => {
  ctx.type = "html";
  ctx.body = fs.createReadStream("dist/index.html");
  await next();
});

const wdm = webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
});
app.use(wdm);
app.use(webpackHotMiddleware(compiler));

app.use(router.routes());

app.listen(8081);

console.log("Server running on port 8081");

或者把webpack打包的这一块抽成中间件

const Koa = require("koa");
const app = new Koa();
const Router = require("koa-router");
const send = require("koa-send");
const fs = require("fs");

const webpackMiddleware = require("./config/middleware/webpack-dev-hot-middleware");
app.use(webpackMiddleware.wdm());
app.use(webpackMiddleware.whm());

const router = new Router();
router.get("/dist/*", async (ctx, next) => {
  await send(ctx, ctx.path);
});
router.get("/test/*", async (ctx, next) => {
  ctx.type = "html";
  ctx.body = fs.createReadStream("dist/index.html");
  await next();
});

app.use(router.routes());

app.listen(8081);

console.log("Server running on port 8081");

对应的webpack 中间件./config/middleware/webpack-dev-hot-middleware

const webpack = require("webpack");
const webpackDevMiddleware = require("koa-webpack-dev-middleware");
const webpackHotMiddleware = require("koa-webpack-hot-middleware");
const config = require("../../../webpack.config");
const compiler = webpack(config);

const webpackMiddleware = {
  wdm() {
    return webpackDevMiddleware(compiler, {
      noInfo: true,
      publicPath: config.output.publicPath
    });
  },
  whm() {
    return webpackHotMiddleware(compiler);
  }
};

module.exports = webpackMiddleware;

接下来，就是配置koat-route ,与之对应的就是ajax 访问的接口，然后数据传输
在server_koa.ts中封装route ,

// 接口访问
let controller = fs.readdirSync(__dirname + '/controller');
controller.forEach((element) => {
  let module = require(__dirname + '/controller/' + element);
  router.use('/ajax', module.routes(), module.allowedMethods());
  console.log(router, 'router')
})

在这里插入图片描述
这里就是在server.koa.ts 中读取controller 下定义的全部模块，还有一层dao 文件，这里是将数据库操作和业务层代码分开，在controller 中解析request ,读取dao 层中的数据库操作语句，返回结果。封装response。

这里是controller 中login 下的index.ts 文件
这两部极易遇到404，检查是否写了 next();检查是否在context 返回了没有->

ctx.set("Content-Type", "application/json")
        ctx.body = JSON.stringify({
            code: 200,
            data: { username: response[0].username },
            message: '登录成功',
        })

const login = require('koa-router')();
//这个引入是将同为login 目录下的其他路由引入到index.ts。因为在server_koa.ts 中读取的只是index.ts中的路由
const loginout = require('./loginout');
// 读取数据库操作，将结果返回过来
const daoLogin = require('../../dao/login');
// login
login.post('/login', async (ctx, next) => {
    const user = ctx.request.body;
    const response = await daoLogin.loginCheck(user, next);
    if (response && response.length > 0) {
        ctx.set("Content-Type", "application/json")
        ctx.body = JSON.stringify({
            code: 200,
            data: { username: response[0].username },
            message: '登录成功',
        })
    } else {
        ctx.set("Content-Type", "application/json")
        ctx.body = JSON.stringify({
            code: 202,
            message: '密码错误',
        })
    }
})

//可以引入其他文件的但是属于本模块的路由，类似于logout 这样的功能
login.use('/loginout', loginout.routes());

module.exports = login;
export { };

这是dao 层的login

const db = require('../../../config/middleware/database');

const loginCheck = (param, next) => {
    let sql = 'select username, userid from users where username= ? and password = ?',
        value = [param.username, param.password];
    return db.query(sql, value);
}
module.exports = {
    loginCheck
}

可以看到这里就是操作数据库了，具体的数据库封装是这样的
在这里插入图片描述

//index.ts
let mysql = require('mysql');

let pool = mysql.createPool(require('./config'));

let connect = () => pool.getConnection(function (err, connection) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }
    console.log('connected as id ' + connection.threadId);
});

let query = (sql, values) => {
    return new Promise((resolve, reject) => {
        pool.getConnection((err, connection) => {
            if (err) {
                reject(err)
            } else {
                connection.query(sql, values, (err, rows) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(rows)
                    }
                    connection.end()
                })
            }
        })
    })
};
module.exports = {
    connect,
    query
}

//confg.ts
let dbConfig = {
    host: 'localhost',
    user: '*******',
    password: '**********',
    database: '*****',
    port: 3306,
    multipleStatements: true//允许多条sql同时执行
};
module.exports = dbConfig;

如果已经装好mysql 了，这里稍微改一下就可以了。

配置数mysql据库

下载好，直接装就行了，连接过程总可能会遇到这个错误：Client does not support authentication protocol requested by server; consider upgrading MySQL client。
这个是解决办法：https://www.cnblogs.com/zichuan/p/9203129.html
一些基本的数据库操作

控制台操作登录报错
mac 安装mysql :mysql: command not found
https://www.jianshu.com/p/f910c5294588

PATH="$PATH":/usr/local/mysql/bin

命令行操作数据库基本操作
https://www.jianshu.com/p/d0e1e3b26ca4
https://www.cnblogs.com/sujulin/p/9021355.html

艾离

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
koa2 + react + node后台+热更新

技术栈react+webpack 支持前台编写。node+mysql做后台维护使用ts，包括了tsc,bable7,antd使用mysql,koa-route 做路由react+webpack配置由于使用bable7 ,所以直接使用.babelrc 解析react、ts、es6高级语法.babelrc相关配置如下，此文件位于项目根目录下。//.babelrc{ "prese...
复制链接

扫一扫