【第8章】Vue之第一个案例程序(前后端交互)

---

前言

接下来我们通过简单的前后端交互来完成界面数据的加载。

---

一、前端

1. 安装axios

npm install axios

2. 使用axios

安装完以后，就可以像使用vue组件一样使用axios发起请求了

import axios from 'axios'

3. axios.vue

<!-- 组合式 API -->
<script setup>
import { axiosGetAll,axiosSearch } from '@/api/axios.js'
import { ref, onMounted } from 'vue'

const axiosList = ref([])
const searchConditions=ref({
    category:'',
    state:''
})

async function getAll() {
    axiosList.value = await axiosGetAll();
};
getAll();
async function search() {
	//searchConditions.value也可以用,但是打印出来的数据会看起来很奇怪
    axiosList.value = await axiosSearch({...searchConditions.value});
};
</script>
<template>
    文章分类: <input type="text" v-model="searchConditions.category">

    发布状态: <input type="text" v-model="searchConditions.state">

    <button @click="search">搜索</button>

    <br />
    <br />
    <table border="1 solid" colspa="0" cellspacing="0">
        <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="axios, index in axiosList">
            <td>{{ axios.title }}</td>
            <td>{{ axios.category }}</td>
            <td>{{ axios.time }}</td>
            <td>{{ axios.state }}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</template>

4. request.js

import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 1000,
    headers: { 'X-Custom-Header': 'foobar' }
});
//给自定义的 axios 实例添加拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    console.error(error);
    return Promise.reject(error);
  });
  export default instance;

5. axios.js

import request from '@/utils/request.js'

export function axiosGetAll(){
    return  request.get('/axios/getAll');
}
export function axiosSearch(conditions){
    return request.get('/axios/search',{params:conditions});
}

二、后端

1.controller

package org.example.springboot3.bigevent.controller;

import jakarta.servlet.http.HttpServletResponse;
import org.example.springboot3.bigevent.entity.Axios;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

/**
 * Create by zjg on 2024/6/8
 */
@RestController
@RequestMapping("/axios")
@CrossOrigin//支持跨域
public class AxiosController {
    private List<Axios> articleList = new ArrayList<>();

    {
        articleList.add(new Axios("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));
        articleList.add(new Axios("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));
        articleList.add(new Axios("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));
    }

    //新增文章
    @PostMapping("/add")
    public String add(@RequestBody Axios article) {
        articleList.add(article);
        return "新增成功";
    }

    //获取所有文章信息
    @GetMapping("/getAll")
    public List<Axios> getAll(HttpServletResponse response) {
        return articleList;
    }

    //根据文章分类和发布状态搜索
    @GetMapping("/search")
    public List<Axios> search(String category, String state) {
        return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
    }
}

2.entity

package org.example.springboot3.bigevent.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * Create by zjg on 2024/6/8
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Axios {
    private String title;
    private String category;
    private String time;
    private String state;
}

三、结果

1. 列表查询

2. 条件查询

---

总结

回到顶部

前端这些语法呦，用的不太习惯，只能多敲多用，加强练习了。