本文目录一览：
如何生成json文件
创建json文件,桌面上找个空点的地方右建新建文本文件,名字改为 xxxx.json 这就是json文件了噻复制到vs里就好了噻
vs里面可以看看新建的时候有没有自定义文件
至于json文件里面数据格式,那只能看你了
使用React制作简易财务报表
1.创建项目
2.cd到该文件夹
3.运行（开发模式）
如果再起一个服务器，可能会出现端口号不会自动排的现象，针对这种情况，可以在package.json中自行设置端口号，如下图
4.模拟数据服务器
4.1 使用GitHub登录，创建一个新项目
4.2点击进入
4.3点击进入
4.4填写信息
4.4.1填写路由名称（数据表名）
4.4.2填写数据表里的内容
4.4.3生成链接
4.4.4在浏览器地址栏中输入地址加路由records
4.5访问数据
第一种方法：通过外网进行访问
①浏览器地址栏测试数据访问
②终端测试数据访问
③浏览器console debug栏测试api接口（get方式）
第二种方法：将json数据存放在本地服务器进行访问
1.链接：
2.全局安装
3.在fssytem中创建一个json文件格式为{“records”:}，然后将前文通过外 网地址访问到的数据赋值粘贴到：后面
4.运行服务器
5.在地址栏中输入命令中的http地址（服务器运行中）
4.6App.js中
4.7发送请求获取数据（在项目中使用jQuery和axios优化App.js）之使用 jQuery方式
4.7.1命令安装jquery
4.7.2 App.js中导入jQuery组件
4.7.3使用jQuery发请求
4.7.4使用传统的map遍历(App.js中)
4.7.5records文件中
4.7.4使用ES6扩展运算符
4.7.5Records.js
4.8优化部分
4.8.1需要在record.js优化时间显示
4.8.2优化jQuery引入app.js
4.8.3引入显示状态和错误显示状态
4.8.3.1定义isloaded(是否完成加载)，定义error
4.8.3.2重设状态机，分别设置成功时和失败时的状态
4.8.3.3视情况进行判断，写出对应的显示内容
4.9发送请求获取数据（在项目中使用jQuery和axios优化App.js）之使用 axios方式（与jQuery两种方法任选其一即可）
网址：
4.9.1安装
4.9.2导入
4.9.3使用因为axios会将所获取的数据存在data的集合中，所以需要response.data
4.9.4引入显示状态和错误显示状态
5.0优化URL请求，目的是使用环境变量来将URL请求地址写灵活，方便统一管理。
方法一 ：src中创建一个utils文件夹，创建一个Config.js文件，配置环境变量
App.js中导入
使用
由于windows系统不支持配置环境变量，解决方式如下:
Package.json中配置（红框之间有空格）
重启服务器
页面显示
方法二：
在根目录下创建一个.env.development.local 文件（与src平级）
在package.json中删除之前配置的东西，恢复原状
重启服务器
继续优化
1.删除原来的后缀
2.App.js中简写
3.config.js中
4.App.js
� 5.提取公共变量
功能：增加input框，实现添加，编辑，取消，更新，删除等功能
6.0增加input框
6.1在components文件夹中创建一个名为Input的文件，因为bootstrap按钮和input框相比较大，所以需要另外设置css样式进行引入使用
效果图如下：
6.2实现添加提交功能
1. Input文件中通过设置input的onChange事件来获取输入的值
1.1调用selectedinfo方法
1.2为了保证所有选框都填写完整才可以提交的情况，这里需要设置一下button的属性，当所有都完整的时候，button才可以点击
1.3点击button进行提交
1.3.1使用post方式将数据提交到服务器上（在Config.js文件配置post 方法并开放）
1.3.2在子组件RecordForm中导入上文方法并使用，服务器响应成功后将该值传递给父级App
1.3.3父级App接收到值后进行处理负责显示在界面上
1.3.3.1导入input文件
� 1.3.3.2设置与子级对应的行间属性handleNewRecord
1.3..3.3设置addRecord方法
6.3实现编辑功能
1.先在增加编辑、删除功能键，并在App.js文件中增加一个操作表头。
2.当点击编辑的时候，前面的内容状态变为input可修改的状态框
2.1设置一个中间变量edit,默认状态是false，当点击编辑按钮时，edit为true，对应内容状态为可输入的input框。Edit的状态决定使用哪个模板.
2.1.1设置edit中间变量
2.1.2点击编辑按钮调用handleEdit事件（定义点击编辑前的状态模板）
2.1.3定义handleEdit方法，并重置状态机设置edit状态
2.1.4定义点击编辑按钮后的状态模板
2.1.5根据edit的状态来决定使用哪个模板
6.4实现取消功能（直接在取消调用与编辑按钮一样的方法即可）
6.5实现更新功能
1.先提交数据到服务器,传值给父级
1.1在Config,js文件中配置更新的put方法，为了得到更新的是哪一个数据，还需要传id值
1.2在Record导入该方法，以便在更新事件中使用
1.3给更新按钮增加更新事件
1.4定义该更新事件
修改前
修改后
Record文件中所有之前格式类似为this.props.data的都改为如下格式：
1.5为了找到当前这个input框的值，需要给input增加一个ref行间属性
2.父级app进行处理显示
2.1设置与子
怎么生成json文件？？？急！！！！
json说白了只是一串长得像js对象字符串，不是一个后缀名或者一种文件形式，所以只要将这个字符串传给前端js处理就行了，json本身就是一个对象，所以你可以直接赋值给一个对象就行。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/191095.html
微信扫一扫 
支付宝扫一扫 