`
sillycat
  • 浏览: 2551549 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Charts and Console(1)UI Console and RESTful Client

    博客分类:
  • UI
 
阅读更多
Charts and Console(1)UI Console and RESTful Client

Redux Introduction
http://www.jianshu.com/p/53faad8a152a
http://www.alloyteam.com/2015/09/react-redux/
https://zhuanlan.zhihu.com/p/21337964
Redux —> Action, Reducer, Store
Action -
         function addTodo(text){
            return {
                type: ‘ADD_TODO’,
                text
            }
        }

Reducer - deal with action, update state
Store -
    import { createStore } from ‘redux’
    import todoApp from ‘./reducers’
    let store = createStore( todoApp, window.STATE_FROM_SERVER)
   
    dispatch(addTodo(text))
    dispatch(completeTodo(index))

http://sillycat.iteye.com/blog/2377442
http://sillycat.iteye.com/blog/2377580
http://sillycat.iteye.com/blog/2377592
http://sillycat.iteye.com/blog/2377909
http://sillycat.iteye.com/blog/2377910
http://www.chartjs.org/docs/latest/notes/comparison.html
https://github.com/jackhutu/jackblog-react
http://www.alloyteam.com/2015/09/react-redux/
https://zhuanlan.zhihu.com/p/21337964

Add “Redux DevTools” from this Link https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

ReactJS
Simple CRUD Demo https://github.com/ariesmcrae/reactjs-crud-boilerplate

https://github.com/facebookincubator/create-react-app

I create a demo project called monitor-console. It is using bootstrap.

How to talk to the backend is as follow:
https://github.com/jackhutu/jackblog-react/blob/master/src/api/resources.js
Check package axios
https://github.com/mzabriskie/axios
http://coderlt.coding.me/2017/03/21/axios-api-md/


Google OAuth
http://sillycat.iteye.com/blog/2239827
http://sillycat.iteye.com/blog/2236954
http://sillycat.iteye.com/blog/2232877
http://sillycat.iteye.com/blog/2232889
http://sillycat.iteye.com/blog/2227060
http://sillycat.iteye.com/blog/1848592

Mock server
http://sillycat.iteye.com/blog/2194907
https://github.com/mrak/stubby4node

Set up the Mock Server
>sudo npm install -g stubby

Start the mock server as follow:
>stubby -d mock_server/monitor.json -w -l 0.0.0.0 -s 9000

The format of the file will be similar in https://github.com/mrak/stubby4node#installation

The axios is a very simple and useful API library.

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:9000';
axios.defaults.headers.post['Content-Type'] = 'application/json';


class CourseApi {
    static getAllCourses() {
        return axios.get('/courses');
    }

    static saveCourse(course) {
        course = Object.assign({}, course); // to avoid manipulating object passed in.        const json = "{\n" +
            "    \"id\": \"react-flux-building-applications\",\n" +
            "    \"title\": \"Building Applications in React and Flux\",\n" +
            "    \"watchHref\": \"http://www.pluralsight.com/courses/react-flux-building-applications\",\n" +
            "    \"authorId\": \"cory-house\",\n" +
            "    \"length\": \"5:08\",\n" +
            "    \"category\": \"JavaScript\"\n" +
            "}";
        return axios.post('/courses', json);
    }

    static deleteCourse(courseId) {
        const query = "react-flux-building-applications";
        return axios.delete('/courses/' + query);
    }


    static getCourse(courseId) {
        const query = "react-flux-building-applications";
        return axios.get('/courses/' + query);
    }

}

export default CourseApi;

The sample code and project will be in monitor-console

References:
https://github.com/jackhutu/jackblog-react
http://www.chartjs.org/docs/latest/notes/comparison.html

ReactJS
http://sillycat.iteye.com/blog/2377442
http://sillycat.iteye.com/blog/2377580
http://sillycat.iteye.com/blog/2377592
http://sillycat.iteye.com/blog/2377909
http://sillycat.iteye.com/blog/2377910

Connect to Backend
https://github.com/mzabriskie/axios
http://www.opendigg.com/p/axios
http://www.10tiao.com/html/496/201606/2652401931/1.html
https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/

分享到:
评论

相关推荐

    Axhub Charts Pro、Element UI、ecahrs元件库.rar

    1.Axhub Charts Pro V1.0.8 Axure 2.Element UI Axure 3.ecahrs Axure

    Good Book - Practical WPF Charts and Graphics

    1. **数据绑定**:WPF的核心特性之一是数据绑定,这使得UI元素可以直接与数据源关联,实时反映数据的变化。在创建图表时,数据绑定可以极大地简化代码,提高效率。 2. **图表控件**:WPF Data Visualization库中的...

    Axhub Charts Pro、Element UI、ECharts元件库.rar

    Axure制作原型时,方便实用的统计图表元件。 内容包括:饼状图、柱状图、折线图、环形图,区间图,甘特图,面积图,色块图,玫瑰图,仪表盘,水波图,雷达图,漏斗图,k线图,散点图,气泡图,双轴图等,非常实用。

    Awesome Charts and Graphs 1.1.3.unitypackage

    可自定义条形图 -可自定义折线图 -可自定义饼图 -X和Y轴标签自定义 -X和Y轴线自定义 -多个数据集可用.....等

    实用c#图形编程指南 Practical C# Charts and Graphics

    1. **C#基础与图形API**:首先,书中会介绍C#语言的基础知识,包括面向对象编程概念、类库的使用等,然后深入探讨.NET Framework提供的图形API,如System.Drawing和Windows Presentation Foundation (WPF)中的...

    Practical C#Charts.and.Graphics

    WPF(Windows Presentation Foundation)是微软提供的一套UI框架,支持矢量图形、动画以及数据绑定等功能。本书可能会详细介绍如何使用WPF进行高级图形编程,包括如何创建动态图表、交互式图形界面等。 ### 四、...

    unity数据分析图表Graph And Chart 1.2

    State of the art charts, 2D and 3D. Beautiful, Responsive and Interactive. Completely customizable from the editor and does not require even one line of code. Can be used within any platform including...

    qtcharts实现在UI界面绘制图形

    在ui界面实现简单图形的绘制,在ui界面的widget控件提升为QChartView(png图片,代码截图)

    graph and chart1.22

    All charts are completly customizable and can be set up quickly either from code or from the unity editor. Graph And Chart can be used with any platform including VR/AR, mobile ,web and desktop. All ...

    The truthful art data, charts, and maps for communication

    图书名称:The Truthful Art: Data, Charts, and Maps for Communication 作者:Alberto Cairo 出版社:New Riders 页数:154 出版时间:2016 语言:English 格式:EPUB 内容简介: No matter what your actual ...

    Good.Charts.1633690709.epub

    In Good Charts, dataviz maven Scott Berinato provides an essential guide to how visualization works and how to use this new language to impress and persuade. Dataviz today is where spreadsheets and ...

    ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI

    1. **组件丰富**:Kendo UI包含了数据网格(Grid)、日历(Calendar)、下拉列表(ComboBox)、日期选择器(DatePicker)、时间选择器(TimePicker)、滑块(Slider)、图表(Charts)等多种UI组件,覆盖了日常开发...

    NEW CHARTS AND NAUTICAL DOCUMENTS,电子海图,S57,相关标准

    本文旨在介绍《NEW CHARTS AND NAUTICAL DOCUMENTS》中提及的电子海图及其相关标准,特别是国际水道测量组织(International Hydrographic Organization, IHO)制定的S-57标准。 #### 二、电子海图与相关标准的重要...

    Pro JavaFX 9: A Definitive Guide to Building Desktop, Mobile, and Embedded Java

    Use the JavaFX platform to create rich-client Java applications and discover how you can use this powerful Java-based UI platform, which is capable of handling large-scale data-driven business ...

    Awesome Charts and Graphs 1.1.6.unitypackage

    Awesome Charts是一个库,旨在帮助构建美丽的图表毫不费力。主要目标是为构建UI画布图表提供所有必要的类,这些类很容易自定义,不需要大量的设置时间。当前版本的库支持LineChart, BarChart和PieChart。

    LiveCharts LiveCharts2

    LiveCharts 是一个流行的开源图表库,专为 .NET Framework 和 .NET Core 平台设计,用于在 WPF、UWP 和 WinForms 应用程序中创建动态、交互式的数据可视化图表。这个库允许开发者轻松地将各种图表类型,如柱状图、...

    practical-wpf-charts-graphics-master.rar

    1. **WPF图表基础**:WPF中的图表组件主要由System.Windows.Controls.DataVisualization库提供,包括Chart、Series、Axis等元素。开发者可以通过这些元素组合,轻松创建基本的图表类型。 2. **数据绑定**:WPF的...

Global site tag (gtag.js) - Google Analytics