vue.js3+element-plus+typescript add,edit,del,search

vite.config.ts

server: {
  cors: true, // 默认启用并允许任何源
  host: '0.0.0.0', // 这个用于启动
  port: 5110, // 指定启动端口
  open: true, //启动后是否自动打开浏览器  
  proxy: {
      '/api': {
        target: 'http://localhost:8081/',  //实际请求地址，数据库的rest APIs
        changeOrigin: true      
      },
 }

数据来源于前面文章的介绍的方式

import axios from "axios";

/* eslint-disable class UserinfoDataService*/
/**
 * Userinfo Rest API
 * 和前文章的各数据操作，可以用其一任一种
 */
class UserinfoDataService
{


  /**
   * 查看所有记录    getAll():Promise<any> {
   * @returns 
   */ 
  getAllData(){
    
    axios.get('/api/userinfos')
    .then(response=>{
        console.log(response.data);
        return response.data;
    })
    .catch(error=>{
        console.log(error);
        return null
    });
    //console.log(axios.get("/tutorials"));
   // return axios.get("/api/tutorials");// http.get("/tutorials");//



  }

/**
 * 2 查询所有记录
 */
getAll(): Promise<any>{

  return axios.get("/api/userinfos");// http.get("/tutorials");//
}

/**
 * 登录
 * @param userName 
 * @param userPassword 
 * @returns 
 */
userlogin(userName:any,userPassword:any):Promise<any> 
{
  return axios.get(`/api/userinfos/?userName=${userName}&userPassword=${userPassword}`);
}

  /**
   * 查询一条记录
   * @param id 
   * @returns 
   */
  get(id: any): Promise<any> {
    console.log(id);
    
    return axios.get(`/api/userinfos/${id}`);//http.get(`/api/tutorials/${id}`);
  }
  /**
   * 添加
   * @param data 
   * @returns 
   */
  create(data: any): Promise<any> {



    return axios.post("/api/userinfos", data);
  }
  /**
   * 更新
   * @param id 
   * @param data 
   * @returns 
   */
  update(id: any, data: any): Promise<any> {
    return axios.put(`/api/userinfos/${id}`, data);
  }


  /**
   * 删除
   * @param id 
   * @returns 
   */
  delete(id: any): Promise<any> {
    return axios.delete(`/api/userinfos/${id}`);
  }

  /**
   *删除所有
   * @returns 
   */
  deleteAll(): Promise<any> {
    return axios.delete(`/api/api/userinfos`);
  }
  /**
   * 查找
   * @param username 
   * @returns 
   */
  findByTitle(username: string): Promise<any> {
    return axios.get(`/api/userinfos?username=${username}`);
  }
}

export default new UserinfoDataService();

/**
 * 用户实体类
 * https://www.typescripttutorial.net/typescript-tutorial/typescript-getters-setters/
 * https://www.typescriptlang.org/docs/handbook/2/classes.html
 */
class user
{

    /**
     * id
     */
    private _id: number;

    /**
     * 用户名
     */
    private _userName: string;
    /**
     * 真实姓名
     */
    private _userReal: string;
    /**
     * 密码
     */
    private _userPassword:string;
    /**
     * 是否可以用
     */
    private _userIsOk:boolean;
    /**
     * 电子邮件
     */
    private _userMail:string;
    /**
     * 手机号码
     */
    private _userMobile:string;
    /**
     * 创建时间
     */
    private _createdAt:Date;
    /**
     * 最后更新时间
     */
    private _updatedAt:Date;


     /**
   * ID
   * @returns 
   */
    get id():number {
        return this._id;
    }
    
    /**
     * ID
     * @param id 
     */
    set id(newid:number) {  
    
      this._id=newid
    }
    
      /**
       * 用户名
       * @returns 
       */
      get userName():string {
          return this._userName;
      }
    
      /**
       * 用户名
       * @param newuserName 
       */
      set userName(newuserName:string) {
        newuserName = newuserName.trim();
          if (newuserName === '') {
              throw 'The name cannot be empty';
          }
          this._userName = newuserName;
      }
    
       /**
       * 真实姓名
       * @returns 
       */
        get realName():string {
            return this._userReal;
        }
    
    /**
     * 真实姓名
     * @param newRealName 
     */
    
    set realName(newRealName:string) {
      newRealName = newRealName.trim();
        if (newRealName === '') {
            throw 'The name cannot be empty';
        }
        this._userReal = newRealName;
      }
    
      /**
       * 密码
       * @returns 
       */
      get userPassword():string {
        return this.