Axios通過傳統方式使用GET和POST

這裏介紹的是Axios使用傳統的方式引入依賴，通過CDN或者引入JS文件的方式，下面分別就GET好POST方式來處理

  <div class="welcomebox" id="app">
        <p id="hero"></p>
        <button @click="postAxios()">postAxios</button>
  </div>

引入CDN依賴，這裏面引入倆個模塊，其中QS是用來處理傳遞的參數的，因爲Axios默認是以JSON格式傳輸的，而我後端是使用@RequestParam來接收的，當然如果你使用@RequestBody來接收那麼就不需要了

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

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                info: null
            }
        },
        methods: {
            //POST方式
            postAxios: function () {
                var headers = {};
                headers['X-CSRF-TOKEN'] = "[[${_csrf.token}]]";
                axios({
                    method: 'post',
                    url: '/admin/rest/demo/show',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': "[[${_csrf.token}]]"
                    },
                    data: Qs.stringify({'apptype': 'APPTYPE001'})
                }).then(function (response) {
                    var jsonObject = response.data;
                    var jsonString = JSON.stringify(jsonObject)
                    document.getElementById("hero").innerHTML = "通過 axios 獲取到的json數據：" + jsonString;
                }).catch(function (error) {
                    console.log(error);
                });


            }
        },
        mounted() {
            //GET方式
            axios
                .get('/admin/rest/demo/show')
                .then(function (response) {
                    var jsonObject = response.data;
                    var jsonString = JSON.stringify(jsonObject)
                    document.getElementById("hero").innerHTML = "通過 axios 獲取到的json數據：" + jsonString;
                }).catch(function (error) { // 請求失敗處理
                console.log(error);
            });
        }
    })
</script>

後端代碼

@Slf4j
@RestController
@RequestMapping("/admin/rest/demo")
@RequiredArgsConstructor(onConstructor = @__(@Autowired))
public class Demo {

    private final SystDictService systDictService;

    @GetMapping("/show")
    public ApiResponse show() {
        List<SystDict> systDicts = systDictService.listSystDictCenter();
        return ApiResponse.ofSuccess(systDicts);
    }

    @PostMapping("/show")
    public ApiResponse show(@RequestParam( "apptype") String apptype) {
        SystDict systDictByName = systDictService.getSystDictByName(apptype);
        return ApiResponse.ofSuccess(systDictByName);
    }
}