页面javascript错误监控系统
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
cfg 删除secrets.js Jul 26, 2016
design 更改路由为hash方式 Apr 19, 2016
scripts 添加部署脚本 Apr 22, 2016
src
test 登录功能开发 Apr 21, 2016
.babelrc 添加redux框架 Mar 27, 2016
.editorconfig 初始化项目 Mar 22, 2016
.eslintrc 初始化项目 Mar 22, 2016
.gitignore 去除生产环境log Apr 22, 2016
.yo-rc.json 初始化项目 Mar 22, 2016
README.md Update README.md Apr 27, 2016
karma.conf.js
package.json 1.0.1 Apr 22, 2016
server.js
webpack.config.js

README.md

JSErrorMonitor

页面javascript错误监控系统:http://status.flybyte.cn。登录用户名admin,密码admin

使用

在页面中引用JSErrorCollector,并将错误上报的API地址修改为JSErrorMonitor-server的后台服务的地址,这样在页面报错时会将错误信息上传给错误监控系统JSErrorMonitor。
本地开发调试需要后台API支持,请部署JSErrorMonitor-server或者自己实现,API代理转发配置在cfg/base.js

用户界面:

  • 首页: 首页
  • 列表页: 列表页
  • 详情页: 详情页
  • 图表页: 图表页

安装

  1. 通过npm install安装所有依赖
  2. 项目本地开发调试依赖于webpackyeoman所以需要先全局安装二者
  3. 项目是基于generator-react-webpack生成的,更多用法请参考generator-react-webpack

命令

  • npm start:在本地http://localhost:8000/webpack-dev-server/启动项目
  • npm run dist:在项目的dist目录生成用于部署生产环境的文件
  • npm run deploy:将dist目录下的文件部署到生产环境(需配置cfg/secrets.js文件)

应用的框架和库

src目录结构

actions:redux的actions目录
components:react的组件目录
config:开发配置目录
constants:常量目录
favicon.ico
images:图片目录
index.html:页面
index.js:页面的入口js
reducers:redux的reducers目录
stores:redux的store目录
styles:redux的样式目录
utils:js工具方法目录

ES6与JSX harmony语法

项目默认开启ES6与JSX harmony语法支持

  • ES6教程:深入浅出ES6
  • 模块化:支持import语法,项目的node_modules目录会作为模块根目录

新建react组件

运行yo react-webapck:component path/to/name,会生成

  • src/components/path/to/NameComponent.js
  • src/styles/path/to/name.scss
  • test/components/NameComponentTest.js

redux开发:

  1. src/constants/actionType.js新增action type
  2. src/actions目录下新增action,并通过src/actions/index.js暴露出来
  3. src/reducers目录下新增reducer,并通过src/reducers/index.js暴露出来
  4. src/stores/configureStore.js配置新增的reducerstorestate映射关系
  5. 在react组件中通过connectmapStateToProps方法映射storestate到组件的props
  6. 在组件生命周期方法(比如componentDidUpdatecomponentWillUpmountcomponentDidUpdate等)中通过dispatch派发action
  7. 通过action引起的对象属性更新,会经过reducer映射到storestate中,再经过connectmapStateToProps引发组件的props更新,从而更新视图