Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- index:
- import React, {Component} from 'react';
- import ReactDOM from 'react-dom';
- import App from './App';
- ReactDOM.render(
- <App />,
- document.getElementById('app')
- )
- userapicontroller:
- class UserApiController {
- constructor(){
- this.getUsers = this.getUsers.bind(this)
- this.findUser = this.findUser.bind(this)
- }
- _usersList(){
- return [
- {id: 1, name: 'Jonas', surname: 'Grybas'},
- {id: 2, name: 'Ernestas', surname: 'Arlauskas'}
- ]
- }
- getUsers(req, res, next){
- const users = this._usersList()
- return res.json(users)
- }
- findUser(req, res, next) {
- const userId = parseInt(req.body.userId) || 0
- const users = this._usersList()
- const amount = users.length
- let result = {}
- for (let i = 0; i < amount; i++) {
- let user = users[i]
- if(user.id == userId){
- result = user
- break
- }
- }
- return res.json(result)
- }
- }
- module.exports = UserApiController
- server:
- const express = require('express');
- const exphbs = require('express-handlebars')
- const app = express()
- const bodyParser = require('body-parser')
- app.set('views', __dirname + '/views')
- app.use(bodyParser.urlencoded({extended: true}))
- app.use(bodyParser.json())
- app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}))
- app.set('view engine', 'hbs')
- app.disable("x-powered-by")
- app.use(express.static('public'))
- const port = process.env.PORT || 3000;
- require('./routes')(app)
- app.listen(port, () => {
- console.log('Serveris paleistas porte: ' + port+ '. Sustabdymui spauskite CTRL IR C');
- });
- routes:
- const UserApiController = require('./controllers/UserApiController')
- const userApiController = new UserApiController()
- module.exports = (app) => {
- app.get('/', (req, res) => {
- res.render('home')
- })
- app.get('/api/users', userApiController.getUsers)
- app.post('/api/user', userApiController.findUser)
- return app
- }
- app:
- import React, {Component} from 'react';
- class App extends Component {
- constructor(props){
- super(props)
- this.onHandleUsers = this.onHandleUsers.bind(this)
- this.onHandleCurrentUser = this.onHandleCurrentUser.bind(this)
- this.state = {
- isLoaded: false,
- users: []
- }
- }
- onHandleUsers() {
- fetch("http://localhost:3000/api/users")
- .then(res => res.json())
- .then(result => {
- this.setState({
- isLoaded: true,
- users: result
- })
- })
- .catch(e => console.log(e))
- }
- onHandleCurrentUser(userId){
- const data = {userId: userId}
- fetch("http://localhost:3000/api/user", {
- method: 'POST',
- headers: {"Content-Type": "application/json"},
- body: JSON.stringify(data)
- })
- .then(res => res.json())
- .then(result => {
- this.setState({
- isLoaded: false,
- currentUser: result
- })
- })
- .catch(e => console.log(e))
- }
- render() {
- const {currentUser} = this.state
- return (
- <div>
- <button onClick={this.onHandleUsers}>Gauti vartotojus</button>
- <ul>
- {
- this.state.isLoaded && this.state.users.map(item => {
- return (
- <li>Vardas: {item.name},<br></br> pavarde: {item.surname}</li>
- )
- })
- }
- </ul>
- <button onClick={e => this.onHandleCurrentUser(1)}>Gauti pirma vartotoja</button>
- <button onClick={e => this.onHandleCurrentUser(2)}>Gauti antra vartotoja</button>
- <div>
- {
- currentUser && <div>{currentUser.name} {currentUser.surname}</div>
- }
- </div>
- </div>
- )
- }
- }
- export default App
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement