axios java基本使用
一 javaweb
1.1 pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.webrx</groupId>
<artifactId>mw01</artifactId>
<version>1.0</version>
<packaging>war</packaging>
<properties>
<maven.compiler.source>17</maven.compiler.source>
<maven.compiler.target>17</maven.compiler.target>
<java.version>17</java.version>
</properties>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.10.0</version>
<configuration>
<source>17</source>
<target>17</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
</plugins>
</build>
</project>
1.2 index.html
src/main/webapp/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>玉灵 QQ:7031633 Email:webrx@126.com</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h3>hello world maven web中文效果</h3>
<script>
//ajax get
// 为给定 ID 的 user 创建请求
axios.get('/show?id=12345&name=显示器').then(function (res) {
console.log(res.data);
}).catch(function (err) {
console.log(err);
});
axios.get('/show',{
params:{
id:111,
name:'食品'
}
}).then(function (res) {
console.log(res.data);
}).catch(function (err) {
console.log(err);
});
axios.post('/show',{
id:888,
name:'服装',
a:10,
b:200,
c:3000
}).then(function (res) {
console.log(res.data);
}).catch(function (err) {
console.log(err);
});
let id = 666
let name = '李四六'
axios({
method:'post',
url:'/show',
data:{
id,name
}
}).then(res=>console.log(res.data)).catch(e=>console.log(e));
</script>
</body>
</html>
1.3 servlet
/*
* Copyright (c) 2006, 2022, webrx.cn All rights reserved.
*
*/
package cn.webrx.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
/**
* <p>Project: mw01 - Show
* <p>Powered by webrx On 2022-02-28 20:03:51
* <p>Created by IntelliJ IDEA
*
* @author webrx [webrx@126.com]
* @version 1.0
* @since 17
*/
@WebServlet("/show")
public class Show extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
req.getReader().lines().forEach(System.out::println);
int id = 12;
String nn = "书籍";
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
String msg = "{\"id\":"+id+",\"name\":\""+nn+"\"}";
System.out.println(msg);
//out.print(msg);
out.flush();
out.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int id = Integer.parseInt(req.getParameter("id"));
String nn = req.getParameter("name");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
String msg = "{\"id\":"+id+",\"name\":\""+nn+"\"}";
out.print(msg);
out.flush();
out.close();
}
}
二 springboot
2.1 pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.4</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>cn.webrx</groupId>
<artifactId>sbootajax</artifactId>
<version>1.0</version>
<properties>
<maven.compiler.source>17</maven.compiler.source>
<maven.compiler.target>17</maven.compiler.target>
<java.version>17</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.13.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
2.2 thymeleaf模板
src/main/resources/templates/index.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>玉灵 QQ:7031633 Email:webrx@126.com</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
axios({
url:'/show2/33/44',
method:'post',
data: {id:33,name:'李四'}
//data:{}
}).then(res=>console.log(res.data)).catch(e=>console.log(e));
</script>
</body>
</html>
2.3 主程序App
/*
* Copyright (c) 2006, 2022, webrx.cn All rights reserved.
*
*/
package cn.webrx;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* <p>Project: sbootajax - App
* <p>Powered by webrx On 2022-02-28 23:59:17
* <p>Created by IntelliJ IDEA
*
* @author webrx [webrx@126.com]
* @version 1.0
* @since 17
*/
@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class,args);
}
}
2.4 控制器
/*
* Copyright (c) 2006, 2022, webrx.cn All rights reserved.
*
*/
package cn.webrx.controller;
import cn.webrx.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
/**
* <p>Project: sbootajax - IndexController
* <p>Powered by webrx On 2022-02-28 23:59:52
* <p>Created by IntelliJ IDEA
*
* @author webrx [webrx@126.com]
* @version 1.0
* @since 17
*/
@Controller
public class IndexController {
@RequestMapping
public String index() {
return "index";
}
@PostMapping("/show/{id}/{num}") @ResponseBody
public void show(@PathVariable("id") int id, @PathVariable("num") int num, @RequestBody Map<String,Object> map){
System.out.println(id);
System.out.println(num);
System.out.println(map);
}
@PostMapping("/show2/{id}/{num}") @ResponseBody
public Map<String,Object> show2(@PathVariable("id") int id, @PathVariable("num") int num, @RequestBody User user){
System.out.println(id);
System.out.println(num);
System.out.println(user.getId());
System.out.println(user.getName());
Map<String,Object> map = new HashMap<String, Object>();
map.put("id",id);
map.put("num",num);
map.put("user",user);
return map;
}
}