vue 静态html 请求后台接口（springboot）-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangxiaoliang666/article/details/123371441

本文展示了如何在 Vue.js 应用中使用计算属性和侦听属性。示例中，`firstName` 是一个计算属性，当其值发生变化时，会触发侦听器函数并调用 `getList()` 更新表格数据。表格展示了一个从 Spring Boot API 接口获取的数据列表，该接口通过 Axios 进行 AJAX 调用。文章强调了 Vue.js 的生态灵活性，允许开发者选择适合自己的工具库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue html

<html>
  <h1> 计算属性-vs-侦听属性 </h1>

<div id="demo">   
  <div>{{ firstName }}</div>
  <input v-model="firstName"/>
  <h4>表格</h4>


  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.message }}
    </li>
  </ul>

  <table>
    <tbody>
      <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.userId}}</td>
          <td>{{item.userName}}</td>
          <td>{{item.passWord}}</td>
          <td>{{item.message}}</td>
          <td>{{item.createTime}}</td>
      </tr>
    </tbody>
  </table>

</div>


      

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

var vue = new Vue({
  el: '#demo',
  data: {
    firstName:'',
    list :null
    },
    watch: {
      firstName:function (newValue, oldValue) {
        console.log("变化了",newValue, oldValue);
        this.getList();
        }
    },
    methods:{
      getList: function () {
        var v =this;
        axios.get('http://localhost:8082/api/1',
          {
            params:{id:'1'}
          }).then(function (response){
              console.log("正常返回：",response);
              var data = response.data;
              var code = data.code;
              if(code === '00000') {
                v.list = data.data;
              }
            }).catch(function (error) {
              console.log("报错了",error)
            })
      }
    }
});



</script>
</html>

springboot api 接口

package com.example.demo.controller;


import com.alibaba.fastjson.JSON;
import com.example.demo.common.annotations.PassToken;
import com.example.demo.common.annotations.UseToken;
import com.example.demo.common.result.ApiResult;
import com.example.demo.domin.TbUser;
import com.example.demo.request.dto.LoginDto;
import com.example.demo.request.dto.UserAddDto;
import com.example.demo.service.UserService;
import com.example.demo.utils.*;
import lombok.extern.slf4j.Slf4j;
import org.redisson.api.RBucket;
import org.redisson.api.RedissonClient;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.math.BigDecimal;
import java.util.List;

@CrossOrigin
@Slf4j
@RestController
@RequestMapping("/api")
public class TestController {

    @Autowired
    private UserService userService;


    @GetMapping("/1")
    public ApiResult<Object> getAllUser(@RequestParam("id") String id) {
        List<TbUser> users = userService.selectAllUser();
        return ApiResult.SUCCESS(users);
    }


  

}

注意api接口需要使用注解 @CrossOrigin，实现跨域。