Thiết kế website giá rẻ

Question

I have created a web app using Spring Boot and React. When I try to create users. back is a success. But sending that request from the front end displays an error.

react-> Users.js

```import { useState } from "react";
    import axios from 'axios';
    import Header from "../component/Header";
    function Users() {
    
        const [userName, setUserName] = useState("");
        const [password, setPassword] = useState("");
        const [email, setEmail] = useState("");
        const [address, setAddress] = useState("");
        const [role, setRole] = useState("");
    
        function handleUserName(event){
            setUserName(event.target.value);
        }
        function handlePassword(event){
            setPassword(event.target.data);
        }
        function handleEmail(event){
            setEmail(event.target.data);
        }
        function handleAddress(event){
            setAddress(event.target.data);
        }
        function handleUserRole(event){
            setRole(event.target.data);
        }
        function getUsers(event){
            event.preventDefault();
            axios.get("http://localhost:8080/users")
            .then(function(response){
                console.log(response);
            })
            .catch(function(error){
                console.log(error);
            })
        }
    
        // create
        function createUser(event) {
            event.preventDefault();
            const data = {
                **username: userName,
                password: password,
                email: email,
                address: address,
                role: role**
            }
            axios.post("http://localhost:8080/user", data)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    // end-create
    
        return (
            <div className="users">
                <Header />
                <h1>Users Page</h1>
                <div className="row">
                    {/* create */}
                    <div className="col-4">
                        <h1>Register Users</h1>
                        <form onSubmit={createUser}>
                            <div>
                                <label>User Name</label>
                                <input type="text" onChange={handleUserName} required />
                            </div>
                            <div>
                                <label>Password</label>
                                <input type="password" onChange={handlePassword} required />
                            </div>
                            <div>
                                <label>Email</label>
                                <input type="email" onChange={handleEmail} required />
                            </div>
                            <div>
                                <label>Address</label>
                                <input type="address" onChange={handleAddress} required/>
                            </div>
                            <div>
                                <label>Role</label>
                                <input type="address" onChange={handleUserRole} required/>
                                {/* <select className="form-select" value={role} onChange={handleUserRole} aria-label="Default select example">
                                    <option selected value="">Open this select menu</option>
                                    <option value="1">Administrator</option>
                                    <option value="2">Manager</option>
                                    <option value="3">Cashier</option>
                                    <option value="3">Technical Support</option>
                                </select>
                                <p>Selected option: {role}</p> */}
                            </div>
                            <button type="submit" className="btn btn-success">Register</button>
                        </form>
                        <button type="button" className="btn btn-primary" onClick={getUsers}>Get User</button>
                    </div>
                    {/* end-create */}
                    <div className="col-8">
                        {/* Table */}
                    </div>
                </div>
            </div>
        )
    }
    export default Users;```

UserContoller.java

package com.ijse.coursework.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.ijse.coursework.dto.UserDto;
import com.ijse.coursework.entity.User;
import com.ijse.coursework.service.UserService;

@RestController
@CrossOrigin(origins = "*")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public List<User> getAllUsers(){
        return userService.getAllUsers();
    }

    @GetMapping("/user/{id}")
    public User getUserById(Long id){
        return userService.getUserById(id);
    }

    @PostMapping("/user")
    public User createUser(@RequestBody UserDto userDto){
        User user = new User();
        user.setUsername(userDto.getUsername());
        user.setPassword(userDto.getPassword());
        user.setEmail(userDto.getEmail());
        user.setAddress(userDto.getAddress());
        user.setRole(userDto.getRole());
        return userService.createUser(user);
    }

    @PutMapping("/user/{id}")
    public  User updateUser(@PathVariable Long id, @RequestBody UserDto userDto){
        User user1 = new User();
        user1.setUsername(userDto.getUsername());  
        user1.setPassword(userDto.getPassword());
        user1.setEmail(userDto.getEmail());
        user1.setAddress(userDto.getAddress());
        user1.setRole(userDto.getRole());
        return userService.updateUser(id, user1);
    }

    @DeleteMapping("/user/{id}")
    public void deleteUser(@PathVariable Long id){
        userService.deleteUser(id);
    }
}

UerDto.java

package com.ijse.coursework.dto;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class UserDto {
    private Long id;
    private String username;
    private String password;
    private String email;
    private String address;
    private String role;
}

entity->User.java

package com.ijse.coursework.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Entity
@Getter
@Setter
@ToString
public class User {
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;

    @Column(unique = true)
    private String username;

    // @Column(nullable = false)
    private String password;

    // @Column(nullable = false)
    private String email;

    private String address;

    @Column(unique = true)
    private String role;
}

UserService.java

package com.ijse.coursework.service;

import java.util.List;

import org.springframework.stereotype.Service;

import com.ijse.coursework.entity.User;

@Service
public interface UserService {
    List<User> getAllUsers();

    User getUserById(Long id);

    User createUser(User user);

    User updateUser(Long id, User user);
    
    void deleteUser(Long id);
}

UserServiceImpl.java

package com.ijse.coursework.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ijse.coursework.entity.User;
import com.ijse.coursework.repository.UserRepository;
import com.ijse.coursework.service.UserService;

@Service
public class UserServiceImpl implements UserService{

    @Autowired 
    private UserRepository userRepository;

    @Override
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @Override
    public User getUserById(Long id) {
        return userRepository.findById(id).orElse(null);
    }

    @Override
    public User createUser(User user) {
        return userRepository.save(user);
    }

    @Override
    public User updateUser(Long id, User user) {
        User existUser  =  userRepository.findById(id).orElse(user);
        if(existUser!=null){
            existUser.setUsername(user.getUsername());
            existUser.setPassword(user.getPassword());
            existUser.setEmail(user.getEmail());
            existUser.setAddress(user.getAddress());
            existUser.setRole(user.getRole());
            return userRepository.save(existUser);
        }else{
            return null;
        }

    }

    @Override
    public void deleteUser(Long id) {
        userRepository.deleteById(id);
    }
}

UserRepository.java

package com.ijse.coursework.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.ijse.coursework.entity.User;

@Repository
public interface UserRepository extends JpaRepository<User, Long>{
    
}

Error->
Users.js:48
POST http://localhost:8080/user 500 (Internal Server Error)

AxiosError {message: ‘Request failed with status code 500’, name: ‘AxiosError’, code: ‘ERR_BAD_RESPONSE’, config: {…}, request: XMLHttpRequest, …}
code
:
“ERR_BAD_RESPONSE”
config
:
{transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message
:
“Request failed with status code 500”
name
:
“AxiosError”
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
:
{data: {…}, status: 500, statusText: ”, headers: {…}, config: {…}, …}
[[Prototype]]
:
Error

Thiết kế website giá rẻ

Danh mục

I am create springBoot and react app. It has post request for save data back end is success. front end has internal server error