The Vue + TypeScript front-end project can connect to the back-end interface through the following steps:
The number of elements is defined in advance, such as:
interface Operation{
id:number；
name:string；
action:string；
status:boolean；
}
const dataList = ref<Operation[]>([]);
It is necessary to write the corresponding interface in the background. It is better to write a universal one. Of course, the efficiency may not be high, but it saves trouble.
If you already have the environment, please ignore it.
1. First, install the axios library in the project. It can be installed using the following command:
npm install axios
2. Create a utils directory in the project to store code related to the backend interface.
3. Create an api.ts file in the utils directory to define the URL and request method of the backend interface. For example:
import axios from 'axios';
const baseURL = 'http://localhost:8080/api';
export const getUserList = () => axios.get(`${baseURL}/user/list`);
export const deleteUser = (id: number) => axios.delete(`${baseURL}/user/${id}`);
export const updateUser = (id: number, data: any) => axios.put(`${baseURL}/user/${id}`, data);
In this file, we use the axios library to define three methods, namely getting the user list, deleting users and updating user information. The URLs of these methods all start with baseURL and can be modified according to your own needs.
4. Introduce defined interface methods into components and use them to obtain or modify background data. For example:
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList" :key="user.id">
<td>{
{ user.id }}</td>
<td>{
{ user.name }}</td>
<td>{
{ user.age }}</td>
<td>
<button @click="deleteUser(user.id)">Delete</button>
<button @click="updateUser(user.id, { name: 'New Name', age: 20 })">Update</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { getUserList, deleteUser, updateUser } from '@/utils/api';
export default defineComponent({
setup() {
const userList = ref([]);
const fetchUserList = async () => {
const res = await getUserList();
userList.value = res.data;
};
const deleteUser = async (id: number) => {
await deleteUser(id);
await fetchUserList();
};
const updateUser = async (id: number, data: any) => {
await updateUser(id, data);
await fetchUserList();
};
onMounted(() => {
fetchUserList();
});
return {
userList,
deleteUser,
updateUser,
};
},
});
</script>
In this example, we use the defineComponent function to create a Vue component and define three methods in the setup function: fetchUserList, deleteUser and updateUser. Among them, the fetchUserList method is used to obtain the user list and assign the obtained data to the userList variable; the deleteUser and updateUser methods are used to delete and update user information respectively, and re-obtain the user list after the operation is completed.
Finally, in the component's template, we use the userList variable to render the user list and add corresponding click events to the delete and update buttons. When the button is clicked, the corresponding method will be called