用react 构建电子表格（1）---项目搭建

服务端基于spring boot，一通向导，完成服务端搭建。

作为一个电子表格设计器，首先要由一组对象加以描述。我们用19个对象描述一个电子表格。

CommWorkbook：表示表格的集合，一个表格可以有多个commWorkSheet.
commWorkSheet:类似excel 中的一个sheet.
CommTable:sheet 当中一个table,笔者最早的想法是一个sheet当中可以有过个table.CommTable中包括行对象的集合;
CommRow:table由行组成，这个对象表示行.Table又由单元格组成。
CommCell：单元格，每个单元格都有如下属性：样式（CommStyle） 数据（Data） 
CommStyle：样式 （单元格可用），目前包括如下6个属性：CommBorders、CommFont、CommAlignMent、CommCellInput、CommNumberType、CommInterior
CommBorders
CommFont、
CommAlignMent、
CommCellInput: 单元格的输入方式
CommNumberType:数字类型
CommInterior:背景
CommData:单元格当中的数据

前端搭建：

修改端口：react项目如何修改默认3000端口号

参考React Tutorial: An Overview and Walkthrough 搞出第一个页面

flex布局：暂时没管

引入anti_design：在 create-react-app 中使用

导航栏：

路由:我们路由简单 参考【图文并茂】React中路由的使用  搞个最简单路由，复杂一点的？参考React Router教程（这个我自己还没仔细看）

引入axiso

引入字体库 或者图标  参考 Icon图标 安装图标库过程还遇到点问题，见ps2

完成工具类布局

引入样式

首先搞个静态表格：

前端设计思考：把TR 放到table对象中，还是交个Row对象自己管理这个标签呢,集合放在外层，tr td 标签还是放到自己的对象中吧

这里，主要涉及循环形成组件的过程：

//worksheet.js
import React, {Component} from 'react';
import CommRow from './commRow.js';

export default class CommTable extends Component {
    getRows(colNum)
    {
        return <CommRow colNum={colNum}/>
    }
    render() {
        var r = this.props.rowNum;  //行数
        var c = this.props.colNum;  //列数
        var rows = [];
        for (var i = 0; i < r; i++) {
            rows.push(this.getRows(c));
        }
        return (
            <div>
                <div>
                    <table>
                        {rows}
                    </table>
                </div>
            </div>
        )
    }
}


CommRow.js
//worksheet.js  由行对象决定有多少行数 tr 还是放在这里 一行当中 确定有多少列
import React, {Component} from 'react';
import CommCell from './commCell';

export default class CommRow extends Component {
/*    getCommCell() {
        return <CommCell/>
    }*/

    render() {
        var c = this.props.colNum;  //列数
        var cells = [];
        for (var i = 0; i < c; i++) {
            cells.push(<CommCell/>);
        }
        return (
            <tr>{cells}</tr>
        )
    }
}

作为设计器 还需要加TH元素，先加行的，再在第一行前面加列头 :

//worksheet.js
import React, { Component } from 'react';
import CommTable from './commTable';
import CommCell from "./commRow";
export default class TableHead extends Component {
    render() {
        var c = this.props.colNum;  //列数
        var tableHeadCells = [];
        for (var i = 0; i < c; i++) {
            tableHeadCells.push(<th>head</th>);
        }
  return (
            <tr>{tableHeadCells}</tr>
        )
    }
}

修改commtable.js

现在的效果是：

需要注意的是 由于多重循环嵌套 形成的表格，vue、react循环中，注意加Key

形成表格后，要给表格加样式

ps1:启动react 时候，报错，但在360极速中正常：

react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
    at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:8)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

解决办法 去掉浏览器react插件，重新安装！

ps2:安装字体库的是报错（日志中）：

Error: EPERM: operation not permitted, unlink 'D:\reactWorkspace\webexcelapp\node_modules\.staging\antd-e0325d37\dist\antd-with-locales.min.js'
28656 error  [OperationalError: EPERM: operation not permitted, unlink 'D:\reactWorkspace\webexcelapp\node_modules\.staging\antd-e0325d37\dist\antd-with-locales.min.js'] {
28656 error   cause: [Error: EPERM: operation not permitted, unlink 'D:\reactWorkspace\webexcelapp\node_modules\.staging\antd-e0325d37\dist\antd-with-locales.min.js'] {
28656 error     errno: -4048,
28656 error     code: 'EPERM',
28656 error     syscall: 'unlink',
28656 error     path: 'D:\\reactWorkspace\\webexcelapp\\node_modules\\.staging\\antd-e0325d37\\dist\\antd-with-locales.min.js'

网上很多解释是要以管理员权限运行相关安装命令，实验数次不成功，用cnpm安装，问题解决。