axios+springboot获取数据库信息

擎云java

于 2020-08-01 20:18:46 发布

阅读量506

点赞数

分类专栏： springboot 文章标签： vue java

本文链接：https://blog.csdn.net/java18343246781/article/details/107736028

版权

springboot 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1.加入依赖

 <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository  -->
    </parent>
    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.48</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>

2.entity实体类

@Data
@NoArgsConstructor
@AllArgsConstructor
@Accessors(chain = true)
@Entity
@Table(name = "tbl_user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long uid;
    private String username;
    private String password;
    private String qx;
}

3.Repository层

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

4.service层

public interface UserService {
    User selectOne(Long id);
    List<User> selectAll();
}

@Service
public class UserServiceImpl implements UserService {

    @Resource
    UserRepository userRepository;

    @Override
    public User selectOne(Long id) {
        return userRepository.getOne(id);
    }

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

5.controller

@Controller
public class UserController {
    @Resource
    UserService userService;

    @CrossOrigin
    @RequestMapping("/selectOne")
    @ResponseBody
    public String selectOne( Long id){
        User user = userService.selectOne(id);
        return ""+user;
    }

    @CrossOrigin
    @RequestMapping("/findAll")
    @ResponseBody
    public List<User> findAll(){
        List<User> users = userService.selectAll();
        System.out.println(users);
        return users;
    }

    @CrossOrigin
    @RequestMapping("/findString")
    public void findString(String name){
        System.out.println(name);
    }
}

axios方式1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://localhost/selectOne',
        params:{
            id:1
        },
    }).then(res=>{
        console.log(res)
    })
</script>
</body>
</html>

并发请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
        axios.get('http://localhost/findAll'),
        axios.get('http://localhost/selectOne?id=1')
    ]).then(
        axios.spread((res1,res2)=>{
            console.log(res1);
            console.log(res2);
        })
    )
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
<!--    axios 全局配置-->
    axios.defaults.baseURI='http://localhost';
    axios.defaults.timeout=5000;
    axios.get('/findAll').then(res=>{console.log(res)});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    let newVar=axios.create({
        baseUrl:'http://localhost',
        timeout:5000,
    });//创建axios实例
    newVar({
        url:'findAll'
    }).then(
        res=>{console.log(res)}
    )
</script>
</body>
</html>