产品公司网站建设方案模板,wordpress 404错误,坪山企业网站建设,wordpress主题调用js路径一、页面示意#xff1a; 图一 图二
二、组件结构
列表组件 #xff1a;index.vue,对应图一添加组件#xff1a;add.vue#xff0c;对应图二#xff0c;用抽屉效果编辑组件#xff1a;edit.vue#xff0c;和添加组件的效果一个。
三、代码
1、列表组件: index.vue
…一、页面示意 图一 图二
二、组件结构
列表组件 index.vue,对应图一添加组件add.vue对应图二用抽屉效果编辑组件edit.vue和添加组件的效果一个。
三、代码
1、列表组件: index.vue
templateh1增删改查案例/h1div!--查询条件 --el-form :modelsearchData label-width40px :inlinetrueel-form-item label书号el-input v-modelsearchData.id //el-form-itemel-form-item label书名el-input v-modelsearchData.name //el-form-itemel-form-item label作者el-input v-modelsearchData.author //el-form-itemel-form-item label价格el-input v-modelsearchData.minprice //el-form-itemel-form-item label--el-input v-modelsearchData.maxprice //el-form-itemel-form-itemel-button typeprimary clicksearchFn查询/el-buttonel-button clickshowAdd添加/el-button/el-form-item/el-form/divdiv!-- 书籍列表 --el-table :databookData stripe stylewidth: 100%el-table-column propid label书号 width180 /el-table-column propname label书名 width180 /el-table-column propauthor label作者 /el-table-column propprice label价格 /el-table-column label类型 template #defaultscopespan{{typeObj[scope.row.type]}}/span/template/el-table-columnel-table-column label图片template #defaultscopeimg :srcscope.row.img stylewidth: 100px;height: 100px //template/el-table-columnel-table-column fixedright label操作 width120template #defaultscopeel-button link typeprimary sizesmall clickshowEdit(scope.row.id)编辑/el-buttonel-button link typeprimary sizesmall click.preventdeleteBook(scope.row.id)删除/el-button/template/el-table-column/el-tableel-drawer v-modeldrawer title添加书籍 directionrtl :before-closehandleCloseAddBook closecloseFn okokFn/AddBook/el-drawerel-drawer v-modeldrawerEdit title修改书籍 directionrtl EditBook :ideditId okeditOkFn closeeditCloseFn /EditBook/el-drawer/div
/templatescript setup
import { reactive, onMounted,ref } from vue;
import { getBooksApi, getBooksByCondationApi, deleteBookApi } from /api/crud;
import AddBook from ./Add.vue;
import EditBook from ./edit.vue;const typeObj {new:最新,hot:热卖
}// 书籍数据
let bookData reactive([]);//一、 获取书籍信息
const getBooks () {getBooksApi().then(res {if (res.data) {console.log(bookData前, bookData);// bookData res.data;bookData.length 0;bookData.push(...res.data);console.log(bookData后, bookData);}}).catch(err {console.log(获取数据出错, err);})
}
onMounted(() {getBooks();
})// 二、查询书籍
const searchData reactive({id: ,name: ,author: ,minprice: ,maxprice:
})const searchFn () {const temp {};for (const key in searchData) {if (searchData[key] ! ) {temp[key] searchData[key];}}if (temp[minprice]) {delete temp[minprice];temp[price_gte] searchData.minprice;}if (temp[maxprice]) {delete temp[maxprice];temp[price_lte] searchData.maxprice;}getBooksByCondationApi(temp).then(res {if (res.data) {bookData.length 0;bookData.push(...res.data);}})
}// 三、删除书籍
const deleteBook (id) {deleteBookApi(id).then(res {console.log(删除的返回res, res);// 删除成功后重新获取数据getBooks();})
}// 四、添加
const drawer ref(false)const handleClose (done) {ElMessageBox.confirm(Are you sure you want to close this?).then(() {done()}).catch(() {// catch error})
}// 显示添加页面
const showAdd(){drawer.valuetrue;
}const closeFn(){drawer.value false;
}const okFn(){closeFn();getBooks();
}// 五、修改
const drawerEdit ref(false);
const editId ref();//修改的书籍的id// 显示修改页面
const showEdit(id){editId.valueid;drawerEdit.valuetrue;
}const editCloseFn(){editId.value ;drawerEdit.value false;
}const editOkFn(){editCloseFn();getBooks();
}/scriptstyle langcss scoped/style
2、添加组件add.vue
templateel-form refformRef :modelnewBook label-width120px :rulesrulesel-form-item label书号 propidel-input v-modelnewBook.id //el-form-itemel-form-item label书名 propnameel-input v-modelnewBook.name //el-form-itemel-form-item label作者 propauthorel-input v-modelnewBook.author //el-form-itemel-form-item label价格 proppriceel-input v-modelnewBook.price //el-form-itemel-form-item label图片 propimgel-input v-modelnewBook.img //el-form-itemel-form-item label类型 proptype!-- el-input v-modelnewBook.type / --el-select v-modelnewBook.type classm-2 placeholder请选择书籍类型 sizelarge!-- el-option v-foritem in booktypes :keyitem.id :labelitem.name :valueitem.value / --el-option label最新 valuenew /el-option label热卖 valuehot //el-select/el-form-itemel-form-itemel-button typeprimary clickaddBookFn(formRef)添加/el-buttonel-button clickcancelFn取消/el-button/el-form-item/el-form
/templatescript setup
import { reactive, ref } from vue;
import { addBookApi,getBookTypeApi } from /api/crudconst emit defineEmits([close, ok]);const booktypes reactive([]);const getBookType () {getBookTypeApi().then(res{if(res.data){booktypes.length0;booktypes.push(...res.data);}})
}getBookType();const formRef ref();
// 定义添加的书籍
const newBook reactive({id: ,name: ,author: ,price: 0,img: ,type:
})// 表单验证的规则
const rules reactive({id: [{ required: true, message: 请输入书号, trigger: blur }],name: [{ required: true, message: 请输入书名, trigger: blur }],author: [{ required: true, message: 请输入作者, trigger: blur }],price: [{ required: true, message: 请输入价格, trigger: blur }],img: [{ required: true, message: 请输入图片地址, trigger: blur }],type: [{ required: true, message: 请输入类型, trigger: blur }],
})const addBookFn (formEl) {if (!formEl) {return;}console.log(newBook,newBook);formEl.validate((isOk) {if (isOk) {addBookApi(newBook).then(res {console.log(res);if (res.data) {// 添加成功alert(添加成功);// 关闭弹窗emit(ok);}}).catch(err {})}})}const cancelFn () {emit(close);
}/script3、编辑组件edit.vue templateel-form refformRef :modeleditBook label-width120px :rulesrulesel-form-item label书号 propidel-input v-modeleditBook.id //el-form-itemel-form-item label书名 propnameel-input v-modeleditBook.name //el-form-itemel-form-item label作者 propauthorel-input v-modeleditBook.author //el-form-itemel-form-item label价格 proppriceel-input v-modeleditBook.price //el-form-itemel-form-item label图片 propimgel-input v-modeleditBook.img //el-form-itemel-form-item label类型 proptypeel-input v-modeleditBook.type //el-form-itemel-form-itemel-button typeprimary clickeditBookFn(formRef)修改/el-buttonel-button clickcancelFn取消/el-button/el-form-item/el-form
/templatescript setup
import { reactive, ref,watch } from vue;
import { getBookDetailApi,editBookApi } from /api/crud;const props defineProps([id]);const formRef ref();// 定义修改的书籍
const editBook reactive({id: ,name: ,author: ,price: 0,img: ,type:
})// 获取当前修改的书籍信息
const getBookDetail async () {try {const res await getBookDetailApi(props.id);// editBook res.data;for(let key in editBook){editBook[key] res.data[key];}} catch (err) {console.log(服务器出错,err);}
}console.log(props,props);watch(props,(){console.log(props.id变了);getBookDetail();
},{deep:true,immediate:true})const emit defineEmits([close, ok]);// 表单验证的规则
const rules reactive({id: [{ required: true, message: 请输入书号, trigger: blur }],name: [{ required: true, message: 请输入书名, trigger: blur }],author: [{ required: true, message: 请输入作者, trigger: blur }],price: [{ required: true, message: 请输入价格, trigger: blur }],img: [{ required: true, message: 请输入图片地址, trigger: blur }],type: [{ required: true, message: 请输入类型, trigger: blur }],
})const editBookFn (formEl) {if (!formEl) {return;}formEl.validate((isOk) {if (isOk) {editBookApi(props.id,editBook).then(res {console.log(res);if (res.data) {alert(修改成功);// 关闭弹窗emit(ok);}}).catch(err {})}})}const cancelFn () {emit(close);
}/script 4、补充【api和axios封装】api/crud.jsutils/serviceMock.js
api/crud.js import service from /utils/serviceMock.js;// 获取所有书籍
export const getBooksApi ()service.get(/books);// 根据编号获取书籍详情
export const getBookDetailApi (id)service.get(/books/id);// 查询书籍
export const getBooksByCondationApi (params)service.get(/books,{params});// 删除书籍
export const deleteBookApi (id)service.delete(/books/id);// 添加书籍
export const addBookApi (data)service.post(/books,data);// 修改书籍
export const editBookApi (id,data)service.put(/books/id,data);// 获取书籍类型
export const getBookTypeApi ()service.get(/bookType);
utils/serviceMock.js
import axios from axios;
import store from /store;const service axios.create({baseURL:http://localhost:3000
})// 请求拦截器所有请求的公共业务
service.interceptors.request.use(config{store.commit(showLoading);return config;
})// 响应拦截器
service.interceptors.response.use((res){store.commit(hideLoading);// loading.close();return res;
})export default service;5、mock数据用json-server
{books: [{id: 878912,name: 水浒1,author: 施耐庵,price: 51.5,img: /src/assets/imgs/01.jpg,type: hot},{id: 878913,name: 红楼梦,author: 曹雪芹2,price: 51.8,img: /src/assets/imgs/01.jpg,type: hot},{id: 878917,name: 论语1,author: 王锐1,price: 5.38,img: /imgs/img3.jpg,type: new},{id: 878918,name: 老子,author: 李家恒,price: 54.8,img: /imgs/img4.jpg,type: new},{id: 878919,name: 孟子2,author: 李家恒,price: 54.8,img: /images/img4.jpg,type: new},{id: 878920,name: 孟子3,author: 李家恒,price: 54.8,img: /images/img4.jpg,type: new},{id: 878921,name: 孟子4,author: 李家恒,price: 54.8,img: /images/img4.jpg,type: new},{id: 878922,name: 孟子5,author: 李家恒,price: 54.8,img: /images/img4.jpg,type: new},{id: 878923,name: 孟子6,author: 李家恒,price: 54.8,img: /images/img4.jpg,type: new},{id: 01008,name: 霸道总裁爱上我,author: 曹宇,price: 9.9,img: /src/imgs/01.jpg,type: hot},{id: 01009,name: 西厢记,author: 赵蕊,price: 10.9,img: /src/assets/imgs/01.jpg,type: hot},{id: 01010,name: 钢铁是怎样炼成的,author: 奥斯特洛夫斯基,price: 11.9,img: /src/assets/imgs/02.jpg,type: hot},{id: 01011,name: 12,author: 22,price: 0,img: 1,type: hot},{id: 01012,name: 假如我是亿万富翁,author: 金莉,price: 1000,img: /src/assets/imgs/01.jpg,type: new}],
}
