vue 书店管理系统

功能
书籍的增删改查

代码结构：

js/script.j核心逻辑

const app = new Vue({el: "#app",data() {return {/*** 书籍列表*/books: [{id: "1",img: 'https://bookcover.yuewen.com/qdbimg/349573/1032778366/180',name: '择日飞升',publisher: '起点中文网',price: 10,},{id: "2",img: 'https://bookcover.yuewen.com/qdbimg/349573/1031940621/180',name: '灵境行者',publisher: '起点中文网',price: 20,},{id: "3",img: 'https://bookcover.yuewen.com/qdbimg/349573/1020180183/180',name: '半仙',publisher: '起点中文网',price: 30,},],/*** 添加新书籍的信息*/bookInfo: {img: '',name: '',publisher: '',price: 0,},/*** 默认的书籍信息*/defaultInfo: {img: 'https://img0.baidu.com/it/u=367504300,1384533697&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=450',name: '未设置名称',publisher: '未设置出版社',price: 0},/*** 搜索的书籍名*/searchBookName: '',/*** 是否处在显示搜索结果中*/isSearchIng: false,/*** 搜索结果*/searchResult: []}},methods: {/*** 确定表单中的书籍信息*/confirmBookInfo() {//如果存在id说明书籍已存在是更新操作if (this.bookInfo.id)this.updateBookInfo();//如果不存在id说明是新的书籍是增加操作else this.addBookInfo();},/*** 更新书籍信息*/updateBookInfo() {const newBook = this.genBookInfo();const index = this.books.findIndex(book => book.id === newBook.id);if (index != -1) {this.books.splice(index, 1, newBook);this.reset();}else {alert("当前修改的数据已不存在");throw new Error('当前修改的数据已不存在')}},/*** 添加书记信息*/addBookInfo() {const newBook = this.genBookInfo(true);//在头部添加新书信息this.books.unshift(newBook);this.reset()},/*** 生成随机id*/uuid() {return Math.random().toString(16).substring(2);},/*** 生成书籍信息合并数据空项* @params isId 是否生成uuid */genBookInfo(isId = false) {const newBook = { ...this.bookInfo };//未填写数据使用默认数据for (const key of Object.keys(newBook)) {if (!newBook[key]) newBook[key] = this.defaultInfo[key];}if (isId) newBook['id'] = this.uuid();return newBook},/*** 编辑书籍信息*/editBookItem(index) {this.bookInfo = { ...this.books[index] };},/*** 清除表格数据*/reset() {this.bookInfo.img = '';this.bookInfo.name = '';this.bookInfo.publisher = '';this.bookInfo.price = 0;delete this.bookInfo.id},/*** 根据索引删除书籍数据*/delBookItem(id) {if (!confirm('确定删除数据')) return;const index = this.books.findIndex(book => book.id === id);if (this.isSearchIng) {const index = this.searchResult.findIndex(book => book.id === id);this.searchResult.splice(index, 1)}this.books.splice(index, 1)},/*** 查询书籍信息 - 显示查询结果*/search() {if (!this.searchBookName) throw new Error('搜索内容为空');const res = this.books.filter(book => book.name.indexOf(this.searchBookName) != -1);console.log(res);this.isSearchIng = true;this.searchResult = res;},/*** 取消搜索 - 显示全部书籍信息*/cancelSearch() {this.isSearchIng = false;this.searchBookName = '';}}
})

html/index.html

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> --><script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"type="application/javascript"></script><link rel="stylesheet" href="../css/index.css" /><link rel="stylesheet" href="../css/store.css" /><title>vue书店</title>
</head><body><div id="app"><aside><section><input v-model="searchBookName" placeholder="书名" type="text" /><button v-on:click="search">搜索</button><button v-if="isSearchIng" v-on:click="cancelSearch">取消搜索</button></section><main><table><thead><th>图片</th><th>书名</th><th>出版社</th><th>价格</th><th>操作</th></thead><tbody><tr v-for="(item,i) in isSearchIng ? searchResult : books"><td><img :src="item.img" :alt="item.img" /></td><td><span>{{item.name}}</span></td><td><span>{{item.publisher}}</span></td><td><span>{{item.price}}</span></td><td><button v-on:click="delBookItem(item.id)">删除</button><button v-on:click="editBookItem(i)">编辑</button></td></tr></tbody></table></main></aside><aside><div><p>图片</p><input v-model="bookInfo.img" type="text" /></div><div><p>书名</p><input v-model="bookInfo.name" type="text" /></div><div><p>出版社</p><input v-model="bookInfo.publisher" type="text" /></div><div><p>价格</p><input v-model="bookInfo.price" type="number" /></div><section><button v-on:click="reset">取消</button><button v-on:click="confirmBookInfo">确定</button></section></aside></div><script src="../js/script.js"></script>
</body></html>

css/index.css

div,
p,
body,
span,
a,
li,
ul,
ol,
nav,
header,
section,
article,
aside,
main,
footer,
h1,
h2,
h3,
h4,
h5,
h6 {padding: 0;margin: 0;box-sizing: border-box;
}a {text-decoration: none;
}li {list-style: none;
}:root {--primary: #51f;--second: rgb(139, 96, 248);--shadow-ms: 2px 1px 10px 3px rgb(85, 83, 83);--radius-ms: 7px;--radius-sm: 12px;--dark-color: #000;--light-color: #fff;
}.centerItems {display: flex;justify-content: center;align-items: center;
}.columnItems {display: flex;flex-direction: column;
}.radiusBox {border-radius: var(--radius-ms, 10px);box-shadow: var(--shadow-ms);
}.lightColor {color: var(--light-color);
}.darkColor {color: var(--dark-color);
}.m-1 {margin: 1vw;
}
.m-2 {margin: 2vw;
}.m-l-1 {margin-left: 1vw;
}
.m-t-1 {margin-top: 1vw;
}
.m-r-1 {margin-right: 1vw;
}
.m-b-1 {margin-bottom: 1vw;
}.m-l-2 {margin-left: 2vw;
}
.m-t-2 {margin-top: 2vw;
}
.m-r-2 {margin-right: 2vw;
}
.m-b-2 {margin-bottom: 2vw;
}.m0 {margin: 0;
}.p-1 {margin: 1vw;
}
.p-2 {margin: 2vw;
}.p-l-1 {margin-left: 1vw;
}
.p-t-1 {margin-top: 1vw;
}
.p-r-1 {margin-right: 1vw;
}
.p-b-1 {margin-bottom: 1vw;
}.p-l-2 {margin-left: 2vw;
}
.p-t-2 {margin-top: 2vw;
}
.p-r-2 {margin-right: 2vw;
}
.p-b-2 {margin-bottom: 2vw;
}.p0 {margin: 0;
}::-webkit-scrollbar {width: 0.2vw;height: 4px;background-color: rgb(114 61 248 / 25%);
}::-webkit-scrollbar-thumb {background: rgb(60 5 198);border-radius: 4px;
}

css/store.css

:root {--btn-primary: #c8caf9;
}#app {display: flex;padding: 1vh 4vw;height: 100vh;overflow: hidden;
}#app button {padding: 1vmin 1vmax;border: none;border-radius: 1vmin;background: var(--btn-primary);color: rgb(58, 3, 197);font-weight: bold;cursor: pointer;
}#app aside {padding: 1vmax;
}#app aside:first-child {flex: 3;margin-right: 2vw;
}#app aside:last-child {flex: 1;
}#app aside:first-child > section {display: flex;margin-bottom: 3vmin;
}
#app aside:first-child > section input {flex: 4;margin-right: 1vmax;padding-left: 1vmax;border: 2px solid var(--btn-primary);border-radius: 1vmin;
}
#app aside:first-child > section button {flex: 1;max-width: 10vw;margin: 0 1vmin;
}
#app aside:first-child > section button:last-child {background: #dedde8;
}
main {overflow: hidden scroll;max-height: 80vh;
}
main table {width: 100%;
}
main thead {width: 100%;background: #e1e2fe;color: #6669d7;/* 黏贴定位 始终固定在上方 */position: sticky;top: 0;
}main thead th {text-align: center;
}tbody {overflow: scroll;
}main table tr {border-bottom: 1px solid var(--btn-primary);
}main tbody tr td:first-child {width: 10vw;height: 10vw;
}
main tbody tr td:first-child img {width: 100%;height: 100%;object-fit: contain;
}main tr {padding: 1vmin 1vmax;display: flex;justify-content: space-between;align-items: center;
}
main tr h3 {display: flex;justify-content: center;align-items: center;
}main tbody td:last-child button:last-child {background-color: rgb(250, 197, 197) !important;color: rgb(188, 3, 3) !important;
}/* 右侧添加数据区域 */
#app aside:last-child > div {display: flex;flex-direction: column;align-items: flex-start;flex: 1;padding: 1vmin 1vmax;
}#app aside:last-child > div > * {margin-top: 1vmin;
}#app aside:last-child > div > p {font-size: 0.9em;transform: translate(1vmax, 100%);background-color: #fff;padding: 0 1vmin;color: #3d43f1;
}#app aside:last-child > div input {width: 100%;height: 5vmin;border: 1px solid var(--btn-primary);border-radius: 1vh;outline: var(--btn-primary);padding-left: 1vmax;
}
#app aside:last-child > section {display: flex;justify-content: space-between;
}#app aside:last-child > section button {flex: 1;margin: 1vh;
}#app aside:last-child > section button:first-child {background: #dcddf7 !important;color: #6a6ff9;
}

vue 书店管理系统相关推荐

JAVA毕设项目网上书店管理系统（java+VUE+Mybatis+Maven+Mysql）
JAVA毕设项目网上书店管理系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Web ...
[附源码]计算机毕业设计JAVA网上书店管理系统
[附源码]计算机毕业设计JAVA网上书店管理系统项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Inte ...
【附源码】计算机毕业设计SSM网上书店管理系统
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
[附源码]java毕业设计网上书店管理系统
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
JAVA电子书店管理系统计算机毕业设计Mybatis+系统+数据库+调试部署
JAVA电子书店管理系统计算机毕业设计Mybatis+系统+数据库+调试部署 JAVA电子书店管理系统计算机毕业设计Mybatis+系统+数据库+调试部署本源码技术栈: 项目架构:B/S架构开发语 ...
PHP项目：基于php+thinkphp的网上书店管理系统
开发语言:PHP 数据库:MYSQL数据库应用服务:apache服务器使用框架:ThinkPHP+vue 开发工具:VScode/Dreamweaver/PhpStorm/Sublime等均可书 ...
java计算机毕业设计vue图书管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue图书管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue图书管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目架构:B ...
java计算机毕业设计vue宿舍管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue宿舍管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue宿舍管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目架构:B ...
[附源码]SSM计算机毕业设计网上书店管理系统JAVA
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...

vue 书店管理系统

vue 书店管理系统相关推荐

最新文章

热门文章