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._userPassword;
}
/**
* 密码
* @param newUserPassword
*/
set userPassword(newUserPassword:string) {
newUserPassword = newUserPassword.trim();
if (newUserPassword === '') {
throw 'The name cannot be empty';
}
this._userPassword = newUserPassword;
}
/**
* 是否可以用
* @returns
*/
get userIsOk():boolean {
return this._userIsOk;
}
/**
* 是否可以用
* @param userIsOk
*/
set userIsOk(newuserIsOk:boolean) {
this._userIsOk=newuserIsOk
}
/**
* 电子邮件
* @returns
*/
get userMail():string {
return this._userMail;
}
/**
* 电子邮件
* @param userMail
*/
set userMail(newuserMail:string) {
this._userMail=newuserMail
}
/**
* 手机号码
* @returns
*/
get userMobile():string {
return this._userMobile;
}
/**
* 手机号码
* @param userMobile
*/
set userMobile(newuserMobile:string) {
this._userMobile=newuserMobile
}
/**
* 创建时间
* @returns
*/
get createdAt():Date {
return this._createdAt;
}
/**
* 创建时间
* @param createdAt
*/
set createdAt(newCreatedAt:Date) {
this._createdAt=newCreatedAt
}
/**
* 最后更新时间
* @returns
*/
get updatedAt():Date {
return this._updatedAt;
}
/**
* 最后更新时间
* @param updatedAt
*/
set updatedAt(newupdatedAt:Date) {
this._updatedAt=newupdatedAt
}
}
export default user;
调用：
<!--
*
* _______________#########_______________________
* ______________############_____________________
* ______________#############____________________
* _____________##__###########___________________
* ____________###__######_#####__________________
* ____________###_#######___####_________________
* ___________###__##########_####________________
* __________####__###########_####_______________
* ________#####___###########__#####_____________
* _______######___###_########___#####___________
* _______#####___###___########___######_________
* ______######___###__###########___######_______
* _____######___####_##############__######______
* ____#######__#####################_#######_____
* ____#######__##############################____
* ___#######__######_#################_#######___
* ___#######__######_######_#########___######___
* ___#######____##__######___######_____######___
* ___#######________######____#####_____#####____
* ____######________#####_____#####_____####_____
* _____#####________####______#####_____###______
* ______#####______;###________###______#________
* ________##_______####________####______________
*
* @Author: geovindu
* @Date: 2024-08-26 17:55:02
* @LastEditors: geovindu
* @LastEditTime: 2024-08-28 16:28:54
* @FilePath: \vue\vuetest\src\components\tablebind.vue
* @Description: geovindu
* @lib,packpage:
*
* @IDE: vscode
* @jslib: node 20 vue.js 3.0
* @OS: windows10
* @database: mysql 8.0 sql server 2019 postgreSQL 16
* Copyright (c) geovindu 2024 by geovindu@163.com, All Rights Reserved.
-->
<template>
<div style="padding: 10px">
<ElConfigProvider :locale="zhCn">
<ElInput style="width: 300px" placeholder="请输入名称..." v-model="name" clearable></ElInput>
<ElButton type="primary" @click="search" style="margin-left: 5px">查询数据</ElButton>
<ElButton type="primary" @click="handleAdd">新增数据</ElButton>
<div style="margin: 10px 0">
<ElTable :data="paginatedData" border style="width: 100%">
<ElTableColumn prop="id" label="ID" width="20"/>
<ElTableColumn prop="userName" label="用户名" width="80"/>
<ElTableColumn prop="userReal" label="姓名" width="80"/>
<ElTableColumn prop="userPassword" label="密码"/>
<ElTableColumn prop="userIsOk" label="否可用"/>
<ElTableColumn prop="userMail" label="邮件"/>
<ElTableColumn prop="userMobile" label="手机号码"/>
<ElTableColumn prop="createdAt" label="日期" width="80"/>
<ElTableColumn label="操作">
<template #default="scope">
<ElButton type="text" size="small" @click="handleEdit(scope.row, scope.$index)">编辑</ElButton>
<ElButton type="danger" size="small" @click.prevent="remove(scope.$index)">删除</ElButton>
</template>
</ElTableColumn>
</ElTable>
<div class="pagination-block">
<ElPagination
background
layout="prev, pager, next, jumper, total, sizes"
:current-page="state.page"
:page-size="state.limit"
:page-sizes="[10, 20, 30, 40]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
<!--弹窗-->
<ElDialog v-model="dialogFormVisible" title="信息" width="40%">
<ElForm :model="form" label-width="100px" style="padding-right:30px ">
<ElFormItem label="ID">
<ElInput v-model="form.id" autocomplete="off"/>
</ElFormItem>
<ElFormItem label="用户名">
<ElInput v-model="form.userName" autocomplete="off"/>
</ElFormItem>
<ElFormItem label="姓名">
<ElInput v-model="form.userReal" autocomplete="off"/>
</ElFormItem>
<ElFormItem label="密码">
<ElInput v-model="form.userPassword" autocomplete="off"/>
</ElFormItem>
<ElFormItem label="邮件">
<ElInput v-model="form.userMail" autocomplete="off"/>
</ElFormItem>
<ElFormItem label="手机号码">
<ElInput v-model="form.userMobile" autocomplete="off"/>
</ElFormItem>
<ElFormItem label="是否可用">
<ElCheckbox v-model="form.userIsOk"/>
</ElFormItem>
<ElFormItem label="日期">
<ElDatePicker
v-model="form.createdAt"
type="date"
placeholder="Pick a day"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
:size="size"
/>
</ElFormItem>
</ElForm>
<template #footer>
<span class="dialog-footer">
<ElButton @click="dialogFormVisible = false">取消</ElButton>
<ElButton type="primary" @click="save">确认</ElButton>
</span>
</template>
</ElDialog>
</ElConfigProvider>
</div>
</template>
<script lang="ts" setup>
import { ElMessageBox,ElTable,ElButton,ElTableColumn,ElDialog,ElForm,ElFormItem,ElInput,ElDatePicker,ElConfigProvider,ElCheckbox } from "element-plus";
//https://element-plus.org/zh-CN/guide/i18n.html
import zhCn from 'element-plus/es/locale/lang/zh-cn'//中文
import {reactive, ref,computed} from "vue";
import UserinfoDataService from "../services/UserinfoDataService";
import router from "@/router"; //路由配置文件
import Crypoto from "../common/Cryptographer"; //；加密
import user from "../model/user";
const total=ref(0);
//
const state = reactive({
page: 1,
limit: 10,
});
// 计算属性用于分页
const paginatedData = computed(() => {
const start = (state.page - 1) * state.limit;
const end = start + state.limit;
total.value=tableData.value.length;
return tableData.value.slice(start, end);
});
// 改变页码
const handleCurrentChange = (e: number) => {
state.page = e;
};
// 改变页数限制
const handleSizeChange = (e: number) => {
state.limit = e;
};
//https://element-plus.org/zh-CN/component/date-picker
const size = ref<'default' | 'large' | 'small'>('default');
const shortcuts = [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: 'A week ago',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
},
},
]
const disabledDate = (time: Date) => {
return time.getTime() > Date.now()
}
//
const tableData = ref([{}]);
UserinfoDataService.getAll().then(response=>{
console.log("class处理成功情况2");
console.log(response.data);
tableData.value=response.data;
})
.catch(error=>{
console.log(error);
});
const dialogFormVisible = ref(false)
const form = reactive({
id:0,
userName:"",
userReal:"",
userPassword:"",
userIsOk:false,
userMail:"",
userMobile:"",
createdAt:""
})
//全局保存编辑的行号
const globalIndex = ref(-1)
const name = ref('')
//新增数据 设置新的空的绑值对象 打开弹窗
const handleAdd = () => {
//生成最大的ID
form.id=tableData.value.length+1;
form.userName = '';
form.userReal="";
form.userPassword = '';
form.userIsOk = false;
form.userMail="";
form.userMobile="";
form.createdAt="";
dialogFormVisible.value = true;
}
let cry=new Crypoto();
//保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
const save = () => {
if (globalIndex.value >= 0) {
//表示编辑
// tableData.value[globalIndex.value,20] = form
tableData.value.splice(globalIndex.value, 1, form); //更新当前数据
//还原回去
globalIndex.value = -1
let cry=new Crypoto();
let info=new user();
info.id=form.id;
info.userName=form.userName;
info.realName=form.userReal;
info.userPassword=cry.encrypt(form.userPassword);
info.userIsOk=form.userIsOk;
info.userMail=form.userMail;
info.userMobile=form.userMobile;
// info.updatedAt="";
console.log(info);
//UserinfoDataService.update(info.id,info); //修改成功 （密码需要加密一下)
form.userPassword=cry.encrypt(form.userPassword);
UserinfoDataService.update(form.id,form); //修改成功 （密码需要加密一下)
router.push('tablebind')
} else {
//新增
tableData.value.push(form)
tableData.value.splice(globalIndex.value, 1, form); //更新当前数据
let info=new user();
info.userName=form.userName;
info.realName=form.userReal;
info.userPassword=cry.encrypt(form.userPassword);
info.userIsOk=form.userIsOk;
info.userMail=form.userMail;
info.userMobile=form.userMobile;
form.userPassword=cry.encrypt(form.userPassword);
//UserinfoDataService.create(info); //添加不成功！（密码需要加密一下)
UserinfoDataService.create(form);
router.push('tablebind')
}
dialogFormVisible.value = false
}
//编辑数据 先赋值到表单再弹窗
const handleEdit = (row: {id:number, userName: string; userReal:string,userPassword: string; userIsOk:boolean,userMail:string,userMobile:string,createdAt:string}, index: number) => {
const newObj = Object.assign({}, row)
form.id=newObj.id;
form.userName =newObj.userName;
form.userReal=newObj.userReal;
form.userPassword=newObj.userPassword; //cry.encrypt()
form.userIsOk=newObj.userIsOk;
form.userMail=newObj.userMail; //.toLocaleDateString()
form.userMobile=newObj.userMobile;
form.createdAt=newObj.createdAt;
console.log(form);
// reactive(newObj)
//把当前编辑的行号赋值给全局保存的行号
globalIndex.value = index;
console.log(globalIndex.value);
dialogFormVisible.value = true;
}
//删除数据 从index位置开始，删除一行即可 删除前有一个提示为好
const remove = (index:any) => {
tableData.value.splice(index, 1)
// UserinfoDataService.delete(form.id) //删除
}
//查询数据有问题,需要修改
const search = () =>{
tableData.value = tableData.value.filter(v =>v.userName.includes(form.userName)) //userName.value
// UserinfoDataService.getAll(form.userName)
}
</script>还有BUG，待完善
输出：
