图书管理借阅系统前端Vue

2024-03-06 19:27| 来源: 网络整理| 查看: 265

图书管理借阅系统 **该篇文章展示前端代码** 开发环境配置 **Mysql+MybatisPlus+Springboot+Shiro+Swagger+Element**

前端开发环境 node.js hbuilder 图书管理借阅前端所含模块的功能

1.图书借阅图书类别 2.图书借阅馆藏图书 3.借阅用户 4.借阅模块 5.借阅日志 6.借阅数据分析

对应的vue文件组成

export default { data() { //对象定义属性区 return { } }, methods: { //用户自定义方法区 }, created() { //生命周期函数、浏览器渲染时执行该函数代码 } } return { rules: { username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' } ], }, user: { username: '', password: '' } } }, methods: { login() { this.$refs['user'].validate((valid) => { if (valid) { this.$http.get('http://localhost/user/login',{ params:this.user }) .then(res=>{ if(res.data.data==null){ this.$message.error('你输入的用户名称或者密码不正确，或者账号被锁定，请联系管理员'); }else{ sessionStorage.setItem("username",res.data.data) this.$router.push('/welcome'); } }) .catch(e=>{ this.$message.error('错了哦，网络异常'); }) } }); } } } .box-card { width: 550px; height: 280px; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 10px 20px 30px #888888; } .login-form { position: absolute; bottom: 0px; width: 100%; padding: 0px 20px; box-sizing: border-box; } .el-button { display: flex; justify-content: center; width: 100%; font-weight: bold; height: 40px; font-size: 18px; border-radius: 10px; } .header-card { display: flex; justify-content: center; font-size: 18px; } .el-input { border-radius: 10px; height: 50px; font-size: 18px; border-bottom-color: green; }

在这里插入图片描述

对应的是常规的设置此处的图展示的借阅数据用到了Eacharts

export default { data() { return { xdata: [], ydata: [], data: [], list: [] } }, methods: { showEcharts() { this.$http.get('http://localhost/borrow/getBorrowCounter') .then(res => { var array = res.data.data; for (var i in array) { this.xdata.push(array[i].bname); this.ydata.push(array[i].counter); } var myEcharts2 = this.$echarts.init(document.getElementById("main2")); myEcharts2.setOption({ xAxis: { axisLabel: { interval: 0, rotate: 10 }, type: 'category', data: this.xdata }, yAxis: { type: 'value' }, series: [{ data: this.ydata, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, itemStyle: { color: "rgba(140, 41, 115, 0.58)" } }] }) }) .catch(e => { this.$message.error('错了，中国'); }) }, showRose() { this.$http.get('http://localhost/category/getCateBook') .then(res => { console.info(res); this.list = res.data.data; console.info(this.list); this.list.forEach(item => { console.info(item); var obj = { name: item['catename'], value: item['counter'] } console.info(obj); console.info(this.data); this.data.push(obj); console.info(this.data); }) var myEcharts = this.$echarts.init(document.getElementById("main")); myEcharts.setOption({ series: [{ type: 'pie', data: this.data, roseType:'area' }] }) }).catch(e => {}) } }, created() { this.showEcharts(); this.showRose(); } }

在这里插入图片描述

主要实现了 CURD 且进行数据添加和修改的特殊判断（比如对空值的传递）

首页图类别管理图书类别信息管理查询添加 }}输出数据加入组件 --> scope.row}} --> 取消保存 // 对应的选出框取消修改 export default { data() { //该属性中放置用户定义的变量，类似与类的属性定义 return { rules:{ // 定义添加表单验证规则 catename:[{ required: true, message: '请输入图书类别名称', trigger: 'blur' }] }, addDialogFlag:false, // 显示对话框标记默认是不显示 editDialogFlag:false, cname:'', tableData:[] ,// 定义表格的数组初始化表格数据 pager:{ // 封装分页对象 page:1, // 分页起始数据 limit:5, // 分页显示最大条数 total:0 // 统计记录数字 }, category:{ // 定义对象封装添加或者修改的数据 cateis:0, catename:'' } } }, methods: { update(){ this.$refs['category'].validate(valid=>{ if(valid){ this.$http.post('http://localhost/category/update',this.category) .then(res=>{ if(res.data.code==200){ this.$message({ showClose: true, message: res.data.message, type: 'success' }); this.editDialogFlag=!this.editDialogFlag // 关闭对话框 this.findPager(); // 再次调用查询 } }).cath(err=>{ this.$message.error('错了有问题') }) } }) }, // 用户自定义 save(){ this.$refs['category'].validate(valid=>{ if(valid){ this.$http.post('http://localhost/category/save',this.category) .then(res=>{ if(res.data.code==200){ this.$message({ showClose: true, message: res.data.message, // 获取返回对应的信息 type: 'success' }); this.addDialogFlag=!this.addDialogFlag // 关闭对话框 this.findPager(); // 再次调用查询 } }).cath(err=>{ this.$message.error('错了有问题') }) } }) }, editDialog(row){ // 点击改方法是打开修改对话框并不是保存 this.category=row; // 传入对应的参数 this.editDialogFlag=!this.editDialogFlag; }, addDialog(){ this.addDialogFlag=!this.addDialogFlag; }, //该标签中编写的是用户自定义的javascript方法 // 定义方法初始化表格中的数据请求 ajax axios remove(scope){ this.$http.post('http://localhost/category/remove?cateid='+scope.row.cateid) .then(res=>{ if(res.data.code==200){ this.$message({ message: res.data.message, type: 'success' }); this.findPager(); } }) }, handleSizeChange(val){ console.log('每页$(val)条'); this.pager.limit=val; this.findPager(); }, handleCurrentChange(val){ console.log('每页$(val)条'); this.pager.page=val; this.findPager(); }, findPager(){ this.$http.get('http://localhost/category/findPager',{ params:{ page:this.pager.page, limit:this.pager.limit, cname:this.cname } }).then(res=>{ console.info(res); this.tableData=res.data.data.data; this.pager.total=res.data.data.count; }) } }, created() { //vue技术的生命周期浏览器在加载当前页面渲染数据 this.findPager(); } } .el-pagination { margin-top: 10px; } .el-breadcrumb { margin-bottom: 20px; }

在这里插入图片描述还是常规的CRUD 以及表单添加和修改的非法值进行拦截判断对应的难点对用户是否可以正常使用的状态进行转台的改变的监听设置一个标记值进行对应的改变

首页系统信息管理用户信息管理查询添加 }}输出数据加入组件 --> scope.row}} --> 取消保存 // 对应的选出框取消修改 export default { data() { //该属性中放置用户定义的变量，类似与类的属性定义 return { addDialogFlag:false, // 显示对话框标记默认是不显示 editDialogFlag:false, cname:'', tableData:[] ,// 定义表格的数组初始化表格数据 pager:{ // 封装分页对象 page:1, // 分页起始数据 limit:5, // 分页显示最大条数 total:0 // 统计记录数字 }, category:{ // 定义对象封装添加对象 cateis:0, catename:'' }, rules:{ uname:[{ required: true, message: '请输入用户名称', trigger: 'blur' }], password:[{ required: true, message: '请输入密码', trigger: 'blur' }], images:[{ required: true, message: '请选择头像', trigger: 'blur' }] }, user: { //定义用户对象主要封装传递的数据更改用户状态修改或者添加用户信息 uid: 0, uname: '', password: '', images: '', stats: '' }, uname: '' // pager: { //封装的分页参数 // page: 1, //分页起始数据 // limit: 5, //每页显示最大条数 // total: 0 //统计分页记录数 // }, //定义条件查询接收值的变量 // tableData: [] //定义表格中填充的数据，该数据要从后端服务中获取 } }, methods: { changeStats(row){ this.user=row; //用户定义的user对象赋值 this.$http.post('http://localhost/user/changeStats',this.user) .then(res=>{ if(res.data.data.code==200){ this.$message({ message:res.data.message, type:'success' }); this.findPager(); } }).catch(err=>{ this.$message.error('错了哦, 网络异常') }) }, update(){ this.$refs['user'].validate(valid=>{ if(valid){ this.$http.post('http://localhost/user/update',this.user) .then(res=>{ if(res.data.code==200){ this.$message({ showClose: true, message: res.data.message, type: 'success' }) this.editDialogFlag=!this.editDialogFlag // 关闭对话框 this.findPager(); // 再次调用查询 } }).cath(err=>{ this.$message.error('错了有问题') }) } }) }, // 避免出现对应的修改之后取消之后再次添加依然对值进行填充 rest(){ this.user={}; this.editDialogFlag=!this.editDialogFlag; }, // 用户自定义 save(){ this.$refs['user'].validate(valid=>{ if(valid){ this.$http.post('http://localhost/user/save',this.user) .then(res=>{ if(res.data.code==200){ this.$message({ showClose: true, message: res.data.message, // 获取返回对应的信息 type: 'success' }); this.addDialogFlag=!this.addDialogFlag // 关闭对话框 this.findPager(); // 再次调用查询 } }).cath(err=>{ this.$message.error('错了有问题') }) } }) }, // 进行数据的填充 editDialog(row){ // 点击改方法是打开修改对话框并不是保存 this.user=row; // 传入对应的参数 this.editDialogFlag=!this.editDialogFlag; }, addDialog(){ this.addDialogFlag=!this.addDialogFlag; }, //该标签中编写的是用户自定义的javascript方法 // 定义方法初始化表格中的数据请求 ajax axios remove(scope){ this.$http.post('http://localhost/user/remove?uid='+scope.row.uid) .then(res=>{ if(res.data.code==200){ this.$message({ message: res.data.message, type: 'success' }); this.findPager(); } }) }, handleSizeChange(val){ console.log('每页$(val)条'); this.pager.limit=val; this.findPager(); }, handleCurrentChange(val){ console.log('每页$(val)条'); this.pager.page=val; this.findPager(); }, findPager(){ this.$http.get('http://localhost/user/findPager',{ params:{ page:this.pager.page, limit:this.pager.limit, uname:this.uname } }).then(res=>{ console.info(res); this.tableData=res.data.data.data; this.pager.total=res.data.data.count; }) } }, created() { //vue技术的生命周期浏览器在加载当前页面渲染数据 this.findPager(); } } .el-pagination { margin-top: 10px; } .el-breadcrumb { margin-bottom: 20px; }

剩下的整体逻辑都是一样的围绕CRUD 不再进行展示源码喜欢私信提供源码

在这里插入图片描述

【本文地址】

公司简介

联系我们