vue3+axios+vite+ts前后端联动

有错误欢迎大家给我指正

说明：本文vue3+vite+ts+elementui，，联动后端接口，db first模式(手动创建数据库)

1.netcore webapi+net6+EF Core版本，db first模式(手动创建数据库)见：使用EF Core创建webapi接口(一)-CSDN博客

2.netcore webapi+net6+EF Core版本，codefirst模式(代码生成数据库)见：使用EF Core创建webapi接口(二)-CSDN博客

3.netcore webapi+net6+sqlsugar+vue2前后端联动版本，见：Sqlsugar+vue2实现增删改查，分页查询，net6实现_.net core 6.0 sqlsugar-CSDN博客

页面预览

1.创建项目

创建一个空文件夹用vs code打开，进入集成终端

输入vue create vue@latest

输入项目名称todo

只有TypeScript语法选是，其余都选否

cd todo

npm install

npm run dev查看是否配置成功

删除多余文件：src/assets、src/components、main.ts的第一句

2.准备

npm i axios

npm install element-plus --save

在main.ts引入element

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app=createApp(App)
app.use(ElementPlus)
app.mount('#app')

创建文件useAxios.ts引用axios

//导入axios
import axios from 'axios'

const API = axios.create({
	baseURL:'http://localhost:5220/api', //请求后端数据的基本地址
	timeout: 2000                   //请求超时设置，单位ms
})

//导出
export default API

3.主页面编写

<template>
  <div class="about">
    <div>总数据数：{{ totalCount }}</div>
    <!-- 添加框 -->
    <input @keyup.enter="addTodo" v-model="inputValue" placeholder="你要输入什么？" autofocus
      style="width: 400px;height: 30px;" />
    <el-button @click="addTodo" type="primary">添加</el-button>
    <!-- 数据展示 -->
    <el-table :data="testData.list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="title" label="Title" width="180" />
      <el-table-column label="btn">
        <template #default="{ row }">
          <el-button @click="deleteTodo(row.id)" type="primary">删除</el-button>
          <el-button @click="showInput(row.id)" type="primary">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 上一页\下一页\指定页数跳转 -->
    <el-button @click="lastPage()" type="primary">上一页</el-button>
    <el-select @change="gotoPage" v-model="pageNumber" placeholder="1" style="width: 100px">
      <el-option v-for="item in totalPage" :key="item" :label="item" :value="item" />
    </el-select>
    <el-button @click="nextPage()" type="primary">下一页</el-button>

    <div>{{ pageNumber }}/{{ totalPage }}</div>
    <!-- 修改框 -->
    <div v-show="boolShowUInput">
      <input @keyup.enter="addTodo" v-model="updateValue" placeholder="输入要修改的值" autofocus
        style="width: 150px;height: 30px;" />
      <el-button @click="updateTodo" type="primary">确认</el-button>
      <el-button @click="hideInput" type="primary">取消</el-button>
    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import API from "./hook/useAxios"

const testData = reactive({
  list: []
});
let pageNumber = ref(1)//初始页数
let PageSize = ref(5)//每页数据数
let totalPage = ref(0)//总页数
let totalCount = ref(0)//总数据数
let inputValue = ref("")//添加输入框的值
let updateValue = ref("")//修改输入框的值
let boolShowUInput = ref(false)//是否展示修改输入框
let updateId = ref(0)//修改列id

// 按页查询所有数据
function GetByPage() {
  API({
    url: '/Todo/GetByPage?PageIndex=' + pageNumber.value + '&PageSize=' + PageSize.value,
    method: 'get'
  }).then((res: any) => {
    testData.list = res.data.data
    totalCount.value = res.data.totalCount;//数据总数量
    totalPage.value = Math.ceil(res.data.totalCount / PageSize.value); // 总页数=数据总数/单页数据数，并向上取整
  }).catch((error) => {
    console.error(error);
  });;
}
// 上一页
function lastPage() {
  if (pageNumber.value > 1) {
    pageNumber.value--;
    GetByPage();
  }
}
// 下一页
function nextPage() {
  if (pageNumber.value < totalPage.value) {
    pageNumber.value++;
    GetByPage();
  }
}
// 点击下拉框选中的页数跳转
function gotoPage() {
  API({
    url: '/Todo/GetByPage?PageIndex=' + pageNumber.value + '&PageSize=' + PageSize.value,
    method: 'get'
  }).then((res: any) => {
    testData.list = res.data.data
  }).catch((error) => {
    console.error(error);
  });
}
// 删除指定行数据
function deleteTodo(id: number) {
  API({
    url: '/Todo/Delete?id=' + id,
    method: 'delete'
  }).then((res: any) => {
    GetByPage()
  }).catch((error) => {
    console.error(error);
  });
}
// 添加数据
function addTodo() {
  const title = inputValue.value.trim();//获取输入框的值并去除字符串两端的空白字符
  //检查title是否有值，为空停止
  if (!title) {
    return;
  }
  API({
    url: '/Todo/Create?Title=' + title,
    method: 'post'
  }).then((res: any) => {
    if (res.data) {
      //添加后清空输入框的值
      inputValue.value = "";
      GetByPage()
    } else {
      console.log("error");
      return false;
    }
  }).catch((error) => {
    console.error(error);
  });
}
// 修改数据
function updateTodo() {
  const title = updateValue.value.trim();//获取输入框的值并去除字符串两端的空白字符
  if (!title) {
    return;
  }
  API({
    url: '/Todo/Update?id=' + updateId.value,
    method: 'put',
    data: {
      title: title
    }
  }).then((res: any) => {
    //添加后清空
    updateValue.value = "";
    boolShowUInput.value = false;
    GetByPage()

  }).catch((error) => {
    console.error(error);
  });
}
// 展示修改框
function showInput(id: number) {
  boolShowUInput.value = true;
  updateId.value = id
}
// 隐藏修改框
function hideInput() {
  boolShowUInput.value = false;
}
onMounted(() => {
  GetByPage();
});
</script>