Advertisement
Qpel

3praktttt

Nov 14th, 2019
408
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. index:
  2.  
  3. import React, {Component} from 'react';
  4. import ReactDOM from 'react-dom';
  5. import App from './App';
  6.  
  7. ReactDOM.render(
  8.   <App />,
  9.   document.getElementById('app')
  10. )
  11.  
  12.  
  13.  
  14. userapicontroller:
  15.  
  16. class UserApiController {
  17.     constructor(){
  18.         this.getUsers = this.getUsers.bind(this)
  19.         this.findUser = this.findUser.bind(this)
  20.     }
  21.     _usersList(){
  22.         return [
  23.             {id: 1, name: 'Jonas', surname: 'Grybas'},
  24.             {id: 2, name: 'Ernestas', surname: 'Arlauskas'}
  25.         ]
  26.     }
  27.  
  28.     getUsers(req, res, next){
  29.         const users = this._usersList()
  30.         return res.json(users)
  31.     }
  32.     findUser(req, res, next) {
  33.         const userId = parseInt(req.body.userId) || 0
  34.         const users = this._usersList()
  35.         const amount = users.length
  36.         let result = {}
  37.         for (let i = 0; i < amount; i++) {
  38.             let user = users[i]
  39.             if(user.id == userId){
  40.                 result = user
  41.                 break
  42.             }
  43.         }
  44.         return res.json(result)
  45.        
  46.     }
  47. }
  48.  
  49. module.exports = UserApiController
  50.  
  51. server:
  52.  
  53. const express = require('express');
  54. const exphbs = require('express-handlebars')
  55. const app = express()
  56. const bodyParser = require('body-parser')
  57.  
  58. app.set('views', __dirname + '/views')
  59. app.use(bodyParser.urlencoded({extended: true}))
  60. app.use(bodyParser.json())
  61.  
  62. app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}))
  63.  
  64. app.set('view engine', 'hbs')
  65.  
  66. app.disable("x-powered-by")
  67. app.use(express.static('public'))
  68.  
  69.  
  70. const port = process.env.PORT || 3000;
  71. require('./routes')(app)
  72.  
  73. app.listen(port, () => {
  74.     console.log('Serveris paleistas porte: ' + port+ '. Sustabdymui spauskite CTRL IR C');
  75. });
  76.  
  77. routes:
  78.  
  79. const UserApiController = require('./controllers/UserApiController')
  80. const userApiController = new UserApiController()
  81.  
  82. module.exports = (app) => {
  83.     app.get('/', (req, res) => {
  84.         res.render('home')
  85.     })
  86.     app.get('/api/users', userApiController.getUsers)
  87.     app.post('/api/user', userApiController.findUser)
  88. return app
  89. }
  90.  
  91. app:
  92.  
  93.  
  94. import React, {Component} from 'react';
  95.  
  96. class App extends Component {
  97. constructor(props){
  98.     super(props)
  99.     this.onHandleUsers = this.onHandleUsers.bind(this)
  100.     this.onHandleCurrentUser = this.onHandleCurrentUser.bind(this)
  101.     this.state = {
  102.         isLoaded: false,
  103.         users: []
  104.     }
  105. }
  106.  
  107. onHandleUsers() {
  108.     fetch("http://localhost:3000/api/users")
  109.     .then(res => res.json())
  110.     .then(result => {
  111.         this.setState({
  112.             isLoaded: true,
  113.             users: result
  114.         })
  115.     })
  116.     .catch(e => console.log(e))
  117. }
  118.  
  119. onHandleCurrentUser(userId){
  120. const data = {userId: userId}
  121. fetch("http://localhost:3000/api/user", {
  122.     method: 'POST',
  123.     headers: {"Content-Type": "application/json"},
  124.     body: JSON.stringify(data)
  125. })
  126.  
  127. .then(res => res.json())
  128. .then(result => {
  129.     this.setState({
  130.         isLoaded: false,
  131.         currentUser: result
  132.     })
  133. })
  134. .catch(e => console.log(e))
  135. }
  136.  
  137. render()  {
  138.     const {currentUser} = this.state
  139.     return (
  140.         <div>
  141.             <button onClick={this.onHandleUsers}>Gauti vartotojus</button>
  142.         <ul>
  143.             {
  144.                 this.state.isLoaded && this.state.users.map(item => {
  145.                     return (
  146.                         <li>Vardas: {item.name},<br></br> pavarde: {item.surname}</li>
  147.                     )
  148.                 })
  149.             }
  150.         </ul>
  151.             <button onClick={e => this.onHandleCurrentUser(1)}>Gauti pirma vartotoja</button>
  152.             <button onClick={e => this.onHandleCurrentUser(2)}>Gauti antra vartotoja</button>
  153.             <div>
  154.                 {
  155.                     currentUser && <div>{currentUser.name} {currentUser.surname}</div>
  156.                 }
  157.             </div>
  158.  
  159.         </div>
  160.     )
  161. }
  162.  
  163. }
  164.  
  165. export default App
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement