MichiPedia

Voraussetzung

JSON Server

• https://www.npmjs.com/package/json-server
• https://www.youtube.com/watch?v=_1kNqAybxW0
• Installation (global)

npm install -g json-server

(Mac / Linux:)
sudo npm install -g json-server

• Start des Servers aus dem Projekt-Directory
• Startet mit Port 3000 (default) (Konflikt: selber Port wie nmp start !)
• Angabe der Datei, die überwacht werden soll mit watch

npx json-server --watch src/assets/db.json --port 3100

• Beispielpost
• PFAD/posts/1 entspricht posts mit "id": 1

http://localhost:3100/posts
http://localhost:3100/posts/1

• Beispieldaten ( z.B. in assets/db.json )
• "echtes" JSON: Attributnamen immer mit Anführungsstrichen

{
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" }
}

Optional: JSON Formatter & Validator

• JSON generell: https://www.json.org/json-en.html
• Formatter & Validator https://jsonformatter.curiousconcept.com/

Axios

• https://axios-http.com/
• Promise-basierter HTTP-Client für node.js und den browser
• isomorphisch: Verwendung auf Server und im Browser
  • Server-Seite: modul http
  • Browser: XMLHttpRequests (ajax)

npm install axios

HTTP GET mit Axios

import React, { Component } from 'react'
import axios from 'axios'

class Beispiel extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            posts: [],
            errorMessage: ''
        }
    }

    componentDidMount() {
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                console.log(response)
                this.setState({
                    posts: response.data
                })
            })
            .catch(error => {
                console.log(error)
                this.setState({
                    errorMessage: 'Fehler beim Laden'
                })
            })
    }
    
    render() {
        return (
            <div>
                <h2>Beiträge</h2>
                {
                    this.state.posts.length>0 &&
                    this.state.posts.map(post => <div key={post.id}>{post.title}</div>)
                }
                {
                    this.state.errorMessage &&& <div>{this.state.errorMessage}</div>
                }
            </div>
        )
    }
}

export default Beispiel

HTTP POST

import React, { Component } from 'react'
import axios from 'axios'

class Beispiel extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            name: ''
        }
    }

    handleChange = event => {
        this.setState({ name: event.target.value });
    }

    handleSubmit = event => {
        event.preventDefault();

        const user = {
            name: this.state.name
        };

        axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
			.then(response => {
				console.log(response);
				console.log(response.data);
			})
    }    
    
    render() {
        return (
            <div>
              <form onSubmit={this.handleSubmit}>
                <label>
                  Username:
                  <input type="text" name="name" onChange={this.handleChange} />
                </label>
                <button type="submit">Hinzufügen</button>
              </form>
            </div>
        )
    }
}

export default Beispiel

HTTP PUT

import React, { Component } from 'react'
import axios from 'axios'

class Beispiel extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            posts: [],
            errorMessage: ''
        }
		
		this.base_url = "http://localhost:3000"
    }

    componentDidMount() {
        axios.get(this.base_url + '/posts')
            .then(response => {
                console.log(response)
                this.setState({
                    posts: response.data
                })
            })
            .catch(error => {
                console.log(error)
                this.setState({
                    errorMessage: 'Fehler beim Laden'
                })
            })
    }
	
	handleUpdate() {
		let exampleID = 1
		axios.put(this.base_url + '/posts/' + exampleID + '/',
		{ "userId": 1, "title": "lorem", "body": "ipsum" })
		.then(response => {
		  const updatedData = data.map(ele => (ele.id === exampleID ? response.data : ele))
		  this.setState({
			  posts: updatedData
		  })	  
		})    
		.catch(error => {
			console.log(error)
		})
	}	
    
    render() {
        return (
            <div>
                <h2>Beiträge</h2>
				<button onClick={() => this.handleUpdate()}>Hinzufügen</button>
                {
                    this.state.posts.length>0 &&
                    this.state.posts.map(post => <div key={post.id}>{post.title}</div>)
                }
                {
                    this.state.errorMessage &&& <div>{this.state.errorMessage}</div>
                }
            </div>
        )
    }
}

export default Beispiel

HTTP DELETE

import React, { Component } from 'react'
import axios from 'axios'

class Beispiel extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            posts: [],
            errorMessage: ''
        }
		
		this.base_url = "http://localhost:3000"
    }

    componentDidMount() {
        axios.get(this.base_url + '/posts')
            .then(response => {
                console.log(response)
                this.setState({
                    posts: response.data
                })
            })
            .catch(error => {
                console.log(error)
                this.setState({
                    errorMessage: 'Fehler beim Laden'
                })
            })
    }
	
	handleDelete(id) {
		axios.delete(this.base_url + '/posts/' + id + '/')
		.then(response => {
		  let tempData= data.filter(ele => id != ele.id )
		  this.setState({
			  posts: tempData
		  })	  
		})    
		.catch(error => {
			console.log(error)
		})
	}
    
    render() {
        return (
            <div>
                <h2>Beiträge</h2>
                {
                    this.state.posts.length>0 &&
                    this.state.posts.map(post => (<div key={post.id}>
					{post.title}
					<span onClick={() => this.handleDelete(post.id)}>Löschen</span>
					</div>))
                }
                {
                    this.state.errorMessage &&& <div>{this.state.errorMessage}</div>
                }
            </div>
        )
    }
}

export default Beispiel