[JavaScript知识库] vue 静态html 请求后台接口（springboot）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue 静态html 请求后台接口（springboot） -> 正文阅读

[JavaScript知识库]vue 静态html 请求后台接口（springboot）

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，实现跨域。