SSM项目实战-前端-在Index.vue中展示第一页数据

1、util/request.js

import axios from "axios";

let request = axios.create({
    baseURL: "http://localhost:8080",
    timeout: 50000
});

export default request

2、api/schedule.js

import request from "../util/request.js";

export let getScheduleList = (queryvo) => {
    return request.get(`/schedule/${queryvo.pageNum}`,{
        params:{
            uid:queryvo.uid
        }
    })
};
export let updateSchedule=data=>{
    return request.put("/schedule",data)
}
export let saveSchedule=data=>{
    return request.post("/schedule",data)
}
export let delSchedule=id=>{
    return request.delete(`/schedule/${id}`)
}

3、Index.vue

<template>

  <el-container>
    <el-row>
      <el-button type="primary" plain @click="toAdd">新增</el-button>
    </el-row>
    <el-table :data="schedulePageInfo.list" style="width: 100%">
      <el-table-column label="编号" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.sid }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="学习计划" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否完成" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.completed ? '完成' : '未完成' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="其他操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="Shipping address">
      <el-form :model="form">
        <el-form-item label="标题">
          <el-input v-model="form.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="Zones">
          <el-radio-group v-model="form.completed">
            <el-radio :label="true">完成</el-radio>
            <el-radio :label="false">未完成</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </el-container>

</template>

<script lang="ts" setup>
import {delSchedule, getScheduleList, saveSchedule, updateSchedule} from '../api/schedule.js';
import {onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
import {userStore} from '../store/sysUserStore';

let currUser = userStore();

let dialogFormVisible = ref(false);

let form = reactive({
  id: 0,
  title: '',
  completed: false
})
let form0 = reactive({
  id: 0,
  title: '',
  completed: false
})
let resetFormData = () => {
  Object.assign(form, form0);
}
let schedulePageInfo=reactive({
  total: 0,
  list:[],
  pageNum: 1,
  pageSize: 3,
  pages: 0,
  navigatepageNums: [],
  msg: '',
})
let scheduleList = reactive([])

let queryvo=reactive({
  uid:1,
  pageNum: 1,
})

let loadData = () => {

  getScheduleList(queryvo).then(response => {
    Object.assign(schedulePageInfo, response.data.data)
  })
}

let saveOrUpdate = () => {
  if (form.id === 0) {
    save();
  } else {
    update();
  }
}

let save = async () => {
  await saveSchedule(form)
  dialogFormVisible.value = false
  resetFormData();
  loadData();
}

let toAdd = () => {
  resetFormData();
  dialogFormVisible.value = true;
}

onMounted(() => {
  queryvo.uid=currUser.uid
  queryvo.pageNum=1
  loadData();
})

let update = async () => {
  await updateSchedule(form)
  dialogFormVisible.value = false
  loadData();
}

interface scheduleList {
  id: Number
  title: string
  completed: boolean
}

const handleEdit = row => {
  dialogFormVisible.value = true;
  Object.assign(form, row);
}
const handleDelete = id => {

  ElMessageBox.confirm(
      '是否确认删除?',
      '提示',
      {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }
  )
      .then(async () => {
        await delSchedule(id)
        dialogFormVisible.value = false
        loadData();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '你取消了操作',
        })
      })
};
</script>

7、模板字符串 ``

在ES6（ECMAScript 2015）中，模板字符串是一种新的字符串类型，它使用反引号（`）来定义，可以包含嵌入式表达式（即${expression}）。模板字符串的出现为JavaScript提供了更灵活和强大的字符串处理能力。

模板字符串的主要作用包括：

格式化字符串：通过使用嵌入式表达式，可以将变量或表达式的值直接嵌入到字符串中。这使得字符串的格式化更为方便和直观。例如：
let name = "John";  
let greeting = `Hello, ${name}!`; // 输出 "Hello, John!"
多行字符串：模板字符串可以包含多行内容，这对于处理多行文本或代码非常有用。例如：
let multiLineString = `This is a   
multi-line   
string.`; // 输出一个跨越多行的字符串
字符串插值：通过使用嵌入式表达式 ${expression}，可以在字符串中插入变量或表达式的值。这使得字符串的动态生成更为简单。例如：
let name = "John";  
let message = `My name is ${name}.`; // 输出 "My name is John."
转义字符：模板字符串中，反斜杠（\）用于转义字符，可以用来表示特殊字符（如换行符、制表符等）。例如：
let escapedString = `\n represents a new line.`; // 输出 "\ represents a new line."
在实际开发项目中，模板字符串可以帮助你更方便地处理字符串，提高代码的可读性和可维护性。特别是在处理复杂的字符串逻辑时，模板字符串可以使得代码更加清晰和易于理解。