Vue获取java后端程序返回html格式文本元素

1.场景说明

由于后端架构采用spring boot + thymeleaf,当前端vue调用后端controller层接口时,得到的是整个html文本。实际上后端只需要传送字符串给前端,后端若直接返回字符串又会报错,直接返回字符串写法:

	@CrossOrigin	
	@RequestMapping("/queryAllUsers")
	public String queryAllUsers(Model model){
		//1.调用业务方法
		List<User> list= userservice.listUser();
		return JSONUtil.toJsonStr(list);
	}

此写法会报如下错:org.thymeleaf.exceptions.TemplateInputException: Error resolving template "[{"userName":"111","userId":1,"createTim[...]","loginPass":"sdfgsdf"}]", template might not exist or might not be accessible by any of the configured Template Resolvers

2.解决方案

后端采用thymeleaf标准接口写法保证不报错,但返回给前端的是整个html网页内容,代码如下:

	@CrossOrigin	
	@RequestMapping("/queryAllUsers")
	public String queryAllUsers(Model model){
		//1.调用业务方法
		
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
下面是一个使用Vue.js和Java编写的前端向后端传递参数的例子: 前端代码(使用Vue.js): ```html <!DOCTYPE html> <html> <head> <title>Vue Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { name: '', age: '', response: '' }, methods: { sendData() { axios.post('backend.php', { name: this.name, age: this.age }) .then(response => { this.response = response.data; }) .catch(error => { console.error(error); }); } } }); </script> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="Name"> <input type="text" v-model="age" placeholder="Age"> <button @click="sendData">Send Data</button> <div>{{ response }}</div> </div> </body> </html> ``` 后端代码Java,使用Spring Boot): ```java import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @SpringBootApplication @RestController public class BackendApplication { public static void main(String[] args) { SpringApplication.run(BackendApplication.class, args); } @PostMapping("/backend.php") public String processData(@RequestBody RequestData requestData) { String name = requestData.getName(); int age = requestData.getAge(); // 处理数据,这里只是简单地将数据拼接成字符串作为响应返回 String response = "Name: " + name + ", Age: " + age; return response; } public static class RequestData { private String name; private int age; // 添加默认构造函数和getter/setter方法 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } } } ``` 在这个例子中,我们使用Vue.js在前端创建了一个简单的表单,包含了一个文本输入框用于输入姓名和年龄,并有一个按钮用于发送数据。我们使用`v-model`指令将输入框的值绑定到Vue实例的`name`和`age`属性上。 在Vue实例的`sendData`方法中,我们使用Axios库发送POST请求到后端的`/backend.php`接口,并将`name`和`age`作为请求体发送。在成功响应后,我们将后端返回的响应数据赋值给Vue实例的`response`属性,用于显示在页面上。 后端使用Spring Boot框架编写了一个简单的Java应用程序。我们创建了一个RESTful接口`/backend.php`,通过`@PostMapping`注解来处理POST请求。请求体中的数据会自动映射到`RequestData`类中的属性。在处理数据时,我们将姓名和年龄拼接成字符串作为响应返回。 请注意,需要安装Vue.js和Axios库,以及配置好Java开发环境和Spring Boot依赖。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nbman2013

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值