Vue2项目练手——通用后台管理项目第六节

Vue2项目练手——通用后台管理项目

  • 用户管理页
    • table表格
      • 获取表格数据
        • 目录列表
        • user.js
        • mock.js
        • index.js
        • Users.vue
      • 新增和编辑功能
        • Users.vue
      • 删除功能
        • 使用的组件
        • Users.vue

用户管理页

table表格

使用的组件和前面的表格使用的一致。

获取表格数据

目录列表

在这里插入图片描述

user.js

import Mock from 'mockjs'// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {const search = url.split('?')[1]if (!search) {return {}}return JSON.parse('{"' +decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}')
}let List = []
const count = 200for (let i = 0; i < count; i++) {List.push(Mock.mock({id: Mock.Random.guid(),name: Mock.Random.cname(),addr: Mock.mock('@county(true)'),'age|18-60': 1,birth: Mock.Random.date(),sex: Mock.Random.integer(0, 1)}))
}export default {/*** 获取列表* 要带参数 name, page, limt; name可以不填, page,limit有默认值。* @param name, page, limit* @return {{code: number, count: number, data: *[]}}*/getUserList: config => {const { name, page = 1, limit = 20 } = param2Obj(config.url)console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)const mockList = List.filter(user => {if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return falsereturn true})const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))return {code: 20000,count: mockList.length,list: pageList}},/*** 增加用户* @param name, addr, age, birth, sex* @return {{code: number, data: {message: string}}}*/createUser: config => {const { name, addr, age, birth, sex } = JSON.parse(config.body)console.log(JSON.parse(config.body))List.unshift({id: Mock.Random.guid(),name: name,addr: addr,age: age,birth: birth,sex: sex})return {code: 20000,data: {message: '添加成功'}}},/*** 删除用户* @param id* @return {*}*/deleteUser: config => {const { id } = JSON.parse(config.body)if (!id) {return {code: -999,message: '参数不正确'}} else {List = List.filter(u => u.id !== id)return {code: 20000,message: '删除成功'}}},/*** 批量删除* @param config* @return {{code: number, data: {message: string}}}*/batchremove: config => {let { ids } = param2Obj(config.url)ids = ids.split(',')List = List.filter(u => !ids.includes(u.id))return {code: 20000,data: {message: '批量删除成功'}}},/*** 修改用户* @param id, name, addr, age, birth, sex* @return {{code: number, data: {message: string}}}*/updateUser: config => {const { id, name, addr, age, birth, sex } = JSON.parse(config.body)const sex_num = parseInt(sex)List.some(u => {if (u.id === id) {u.name = nameu.addr = addru.age = ageu.birth = birthu.sex = sex_numreturn true}})return {code: 20000,data: {message: '编辑成功'}}}
}

mock.js

新增代码：

import user from '@/api/mockServeData/user'//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)

全部代码：

import Mock from 'mockjs'
import homeApi from "@/api/mockServeData/home";
import user from '@/api/mockServeData/user'
/*//定义请求拦截
Mock.mock('/api/home/getData',function (){//拦截到请求后处理的逻辑console.log("拦截到了")
})*/
//定义请求拦截
Mock.mock('/api/home/getData',homeApi.getStatisticalData)//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)

index.js

新增代码

export const getUser=(params)=>{//返回用户列表  axios的get请求是在params中return http.get('/user/getUser',params)
}export const addUser=(data)=>{//新增用户  axios的post请求是在data中return http.post('/user/add',data)
}export const editUser=(data)=>{//编辑用户  axios的post请求是在data中return http.post('/user/edit',data)
}
export const delUser=(data)=>{//删除用户  axios的post请求是在data中return http.post('/user/del',data)
}

全部代码：

import http from "@/utils/request";//请求首页数据
export const getData=()=>{//返回一个promise对象return http.get('/home/getData')
}export const getUser=(params)=>{//返回用户列表  axios的get请求是在params中return http.get('/user/getUser',params)
}export const addUser=(data)=>{//新增用户  axios的post请求是在data中return http.post('/user/add',data)
}export const editUser=(data)=>{//编辑用户  axios的post请求是在data中return http.post('/user/edit',data)
}
export const delUser=(data)=>{//删除用户  axios的post请求是在data中return http.post('/user/del',data)
}

Users.vue

新增代码

 <el-table:data="tableData"style="width: 100%"><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><span>{{ scope.row.sex===1?'男':'女' }}</span></template></el-table-column><el-table-columnprop="birth"label="出生日期"></el-table-column><el-table-columnprop="addr"label="地址"></el-table-column><el-table-columnprop="action"label="操作"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button></template></el-table-column></el-table>

import {getUser} from "@/api";methods:{handleEdit(row){},handleDelete(row){}},mounted() {getUser().then(({data})=>{console.log(data);this.tableData=data.list})}

全部代码：

<template><div class="manage"><el-dialogtitle="提示":visible.sync="dialogVisible"width="40%":before-close="handleClose">
<!--      用户的表单信息--><el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="form.age" placeholder="请输入年龄"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-select v-model="form.sex" placeholder="请选择"><el-option label="男" value="1"></el-option><el-option label="女" value="0"></el-option></el-select></el-form-item><el-form-item label="出生日期" prop="birth"><el-date-pickertype="date"placeholder="选择日期"v-model="form.birth" style="width: 100%;"></el-date-picker></el-form-item><el-form-item label="地址" prop="addr"><el-input v-model="form.addr" placeholder="请输入地址"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span></el-dialog><div class="manage-header"><el-button type="primary" @click="dialogVisible=true">+新增</el-button><el-table:data="tableData"style="width: 100%"><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><span>{{ scope.row.sex===1?'男':'女' }}</span></template></el-table-column><el-table-columnprop="birth"label="出生日期"></el-table-column><el-table-columnprop="addr"label="地址"></el-table-column><el-table-columnprop="action"label="操作"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button></template></el-table-column></el-table></div></div></template><script>
import {getUser} from "@/api";export default {name: "Users",data(){return {dialogVisible:false,form: {name: '',age: '',sex: '',birth: '',addr: '',},rules: {name: [{required: true, message: "请输入姓名"}],age: [{required: true, message: "请输入年龄"}],sex: [{required: true, message: "请选择性别"}],birth: [{required: true, message: "请选择出生日期"}],addr: [{required: true, message: "请输入地址"}],},tableData: [],}},methods:{//提交用户表单submit(){this.$refs.form.validate((valid)=>{if(valid){//  后续对表单数据的处理console.log(this.form)//清空表单数据this.$refs.form.resetFields()//关闭弹窗this.dialogVisible=false}})},//弹窗关闭的时候handleClose(){//清空表单this.$refs.form.resetFields()this.dialogVisible=false},cancel(){this.handleClose()},handleEdit(row){},handleDelete(row){}},mounted() {getUser().then(({data})=>{console.log(data);this.tableData=data.list})}
}
</script><style scoped></style>

新增和编辑功能

Users.vue

新增代码：

<el-select v-model="form.sex" placeholder="请选择"><el-option label="男" :value="1"></el-option><el-option label="女" :value="0"></el-option></el-select><el-form-item label="出生日期" prop="birth"><el-date-pickertype="date"placeholder="选择日期"v-model="form.birth" style="width: 100%;"value-format="yyyy-MM-DD"><!--              日期格式转变--></el-date-picker></el-form-item><span slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span><el-button type="primary" @click="handleAdd">+新增</el-button>

methods:{
//提交用户表单submit(){this.$refs.form.validate((valid)=>{if(valid){//  后续对表单数据的处理console.log(this.form)if(this.modalType===0){//新增addUser(this.form).then(()=>{//  重新获取列表结果this.getList()})}else{//  编辑处理editUser(this.form).then(()=>{//  重新获取列表结果this.getList()})}//清空表单数据this.$refs.form.resetFields()//关闭弹窗this.dialogVisible=false}})},handleEdit(row){console.log("row",row)this.modalType=1this.dialogVisible=true//注意需要对当前行数据进行深拷贝，否则会出错this.form=JSON.parse(JSON.stringify(row))},
//新增的功能handleAdd(){this.modalType=0this.dialogVisible=true}},
mounted() {this.getList()}

全部代码：

<template><div class="manage"><el-dialogtitle="提示":visible.sync="dialogVisible"width="40%":before-close="handleClose"><!--      用户的表单信息--><el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="form.age" placeholder="请输入年龄"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-select v-model="form.sex" placeholder="请选择"><el-option label="男" :value="1"></el-option><el-option label="女" :value="0"></el-option></el-select></el-form-item><el-form-item label="出生日期" prop="birth"><el-date-pickertype="date"placeholder="选择日期"v-model="form.birth" style="width: 100%;"value-format="yyyy-MM-DD"><!--              日期格式转变--></el-date-picker></el-form-item><el-form-item label="地址" prop="addr"><el-input v-model="form.addr" placeholder="请输入地址"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span></el-dialog><div class="manage-header"><el-button type="primary" @click="handleAdd">+新增</el-button><el-table:data="tableData"style="width: 100%"><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><span>{{ scope.row.sex===1?'男':'女' }}</span></template></el-table-column><el-table-columnprop="birth"label="出生日期"></el-table-column><el-table-columnprop="addr"label="地址"></el-table-column><el-table-columnprop="action"label="操作"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button></template></el-table-column></el-table></div></div></template><script>
import {addUser, getUser,editUser} from "@/api";export default {name: "Users",data(){return {dialogVisible:false,form: {name: '',age: '',sex: '',birth: '',addr: '',},rules: {name: [{required: true, message: "请输入姓名"}],age: [{required: true, message: "请输入年龄"}],sex: [{required: true, message: "请选择性别"}],birth: [{required: true, message: "请选择出生日期"}],addr: [{required: true, message: "请输入地址"}],},tableData: [],modalType:0  //0表示新增的弹窗，1表示的是编辑}},methods:{//提交用户表单submit(){this.$refs.form.validate((valid)=>{if(valid){//  后续对表单数据的处理console.log(this.form)if(this.modalType===0){//新增addUser(this.form).then(()=>{//  重新获取列表结果this.getList()})}else{//  编辑处理editUser(this.form).then(()=>{//  重新获取列表结果this.getList()})}//清空表单数据this.$refs.form.resetFields()//关闭弹窗this.dialogVisible=false}})},//弹窗关闭的时候handleClose(){//清空表单this.$refs.form.resetFields()this.dialogVisible=false},cancel(){this.handleClose()},handleEdit(row){console.log("row",row)this.modalType=1this.dialogVisible=true//注意需要对当前行数据进行深拷贝，否则会出错this.form=JSON.parse(JSON.stringify(row))},handleDelete(row){},//封装获取列表的数据getList(){//获取列表数据getUser().then(({data})=>{console.log(data);this.tableData=data.list})},//新增的功能handleAdd(){this.modalType=0this.dialogVisible=true}},mounted() {this.getList()}
}
</script><style scoped></style>

请添加图片描述

删除功能

使用的组件

在这里插入图片描述

Users.vue

新增代码：

handleDelete(row){this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {delUser({id:row.id}).then(()=>{this.$message({type: 'success',message: '删除成功!'});//  重新获取列表结果this.getList()})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},

全部代码：

<template><div class="manage"><el-dialogtitle="提示":visible.sync="dialogVisible"width="40%":before-close="handleClose"><!--      用户的表单信息--><el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px"><el-form-item label="姓名" prop="name"><el-input v-model="form.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="form.age" placeholder="请输入年龄"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-select v-model="form.sex" placeholder="请选择"><el-option label="男" :value="1"></el-option><el-option label="女" :value="0"></el-option></el-select></el-form-item><el-form-item label="出生日期" prop="birth"><el-date-pickertype="date"placeholder="选择日期"v-model="form.birth" style="width: 100%;"value-format="yyyy-MM-DD"><!--              日期格式转变--></el-date-picker></el-form-item><el-form-item label="地址" prop="addr"><el-input v-model="form.addr" placeholder="请输入地址"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></span></el-dialog><div class="manage-header"><el-button type="primary" @click="handleAdd">+新增</el-button><el-table:data="tableData"style="width: 100%"><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><span>{{ scope.row.sex===1?'男':'女' }}</span></template></el-table-column><el-table-columnprop="birth"label="出生日期"></el-table-column><el-table-columnprop="addr"label="地址"></el-table-column><el-table-columnprop="action"label="操作"><!--自定义列，使用插槽的方式，element-ui上面有提供--><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button></template></el-table-column></el-table></div></div></template><script>
import {addUser, getUser,editUser,delUser} from "@/api";export default {name: "Users",data(){return {dialogVisible:false,form: {name: '',age: '',sex: '',birth: '',addr: '',},rules: {name: [{required: true, message: "请输入姓名"}],age: [{required: true, message: "请输入年龄"}],sex: [{required: true, message: "请选择性别"}],birth: [{required: true, message: "请选择出生日期"}],addr: [{required: true, message: "请输入地址"}],},tableData: [],modalType:0  //0表示新增的弹窗，1表示的是编辑}},methods:{//提交用户表单submit(){this.$refs.form.validate((valid)=>{if(valid){//  后续对表单数据的处理console.log(this.form)if(this.modalType===0){//新增addUser(this.form).then(()=>{//  重新获取列表结果this.getList()})}else{//  编辑处理editUser(this.form).then(()=>{//  重新获取列表结果this.getList()})}//清空表单数据this.$refs.form.resetFields()//关闭弹窗this.dialogVisible=false}})},//弹窗关闭的时候handleClose(){//清空表单this.$refs.form.resetFields()this.dialogVisible=false},cancel(){this.handleClose()},handleEdit(row){console.log("row",row)this.modalType=1this.dialogVisible=true//注意需要对当前行数据进行深拷贝，否则会出错this.form=JSON.parse(JSON.stringify(row))},handleDelete(row){this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {delUser({id:row.id}).then(()=>{this.$message({type: 'success',message: '删除成功!'});//  重新获取列表结果this.getList()})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},//封装获取列表的数据getList(){//获取列表数据getUser().then(({data})=>{console.log(data);this.tableData=data.list})},//新增的功能handleAdd(){this.modalType=0this.dialogVisible=true}},mounted() {this.getList()}
}
</script><style scoped></style>

请添加图片描述
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/71748.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2023高教社杯数学建模C题思路分析 - 蔬菜类商品的自动定价与补货决策

2023高教社杯数学建模C题思路分析 - 蔬菜类商品的自动定价与补货决策

# 1 赛题 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c; 商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销售的蔬菜…
阅读更多...
2023高教社杯数学建模C题思路模型 - 蔬菜类商品的自动定价与补货决策

2023高教社杯数学建模C题思路模型 - 蔬菜类商品的自动定价与补货决策

# 1 赛题 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c; 商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销售的蔬菜…
阅读更多...
ElementUI浅尝辄止17：Progress 进度条

ElementUI浅尝辄止17：Progress 进度条

用于展示操作进度&#xff0c;告知用户当前状态和预期。 常见于操作流程进度或某项任务的状态。 1.如何使用&#xff1f; Progress 组件设置percentage属性即可&#xff0c;表示进度条对应的百分比&#xff0c;必填&#xff0c;必须在 0-100。通过 format 属性来指定进度条文字…
阅读更多...
Redis简介

Redis简介

简单来说 redis 就是一个数据库&#xff0c;不过与传统数据库不同的是 redis 的数据是存在内存中的&#xff0c;所以读写速度非常快&#xff0c;因此 redis 被广泛应用于缓存方向。另外&#xff0c;redis 也经常用来做分布式锁。redis 提供了多种数据类型来支持不同的业务场景。…
阅读更多...
内量子效率和外量子效如何测试？

内量子效率和外量子效如何测试？

碳纳米点&#xff08;CarbonNanodots&#xff09;指的是粒径尺寸小于10nm&#xff0c;并且具有荧光性质的碳球形或准球型纳米材料。和传统的金属、半导体量子点相比&#xff0c;碳纳米点具备不可比拟的优点&#xff0c;例如制备简单、成本低廉、水溶性良好、生物相容性高、毒性…
阅读更多...
初步了解android如何锁键

初步了解android如何锁键

百年三万六千日&#xff0c;光阴只有瞬息间。 手机下面的三个图形&#xff0c;正方形&#xff0c;园形&#xff0c;三角形分别的什么建&#xff1f;都起到什么功能&#xff1f; 三角形的那个叫返回键&#xff0c;就是可以返回你的上一个操作; 圆形是HOME键&#xff0c;按一下可…
阅读更多...
LeetCode 23 合并 K 个升序链表

LeetCode 23 合并 K 个升序链表

LeetCode 23 合并 K 个升序链表 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/merge-k-sorted-lists/description/ 博主Github&#xff1a;https://github.com/GDUT-Rp/LeetCode 题目&#xff1a; 给你一个链表数组…
阅读更多...
【算法专题突破】双指针 - 三数之和（7）

【算法专题突破】双指针 - 三数之和（7）

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;15. 三数之和 - 力扣&#xff08;Leetcode&#xff09; 题目就是要找出和为0的不重复的三元组&#xff0c; 注意三元组的每个元素是得不同的位置&#xff0c;那不重复又…
阅读更多...
最短路Dijkstra，spfa，图论二分图算法AYIT---ACM训练(模板版)

最短路Dijkstra，spfa，图论二分图算法AYIT---ACM训练(模板版)

文章目录 前言A - Dijkstra Algorithm0x00 算法题目0x01 算法思路0x02 代码实现 B - 最长路0x00 算法题目0x01 算法思路0x02 代码实现 C - 二分图最大匹配0x00 算法题目0x01 算法思路0x02 代码实现 D - 搭配飞行员0x00 算法题目0x01 算法思路0x02 代码实现 E - The Perfect Sta…
阅读更多...
【Ubuntu22使用过程问题记录】

【Ubuntu22使用过程问题记录】

Ubuntu22.04 使用过程问题解决方案 1 系统基本设置 1.1 输入法 增加中文输入 1、Settings -> Region & Language -> Manage Installed Languages -> 选中chinese&#xff0c;然后apply&#xff1b; 2、Settings -> Keyboard -> Input Sources -> 点号…
阅读更多...
Ceph入门到精通- 加快日志轮转

Ceph入门到精通- 加快日志轮转

提高 Ceph 组件的调试级别可能会产生大量数据。如果您几乎有完整的磁盘&#xff0c;可以通过修改 /etc/logrotate.d/ceph 中的 Ceph 日志轮转文件来加快日志轮转。Cron 作业调度程序使用此文件来调度日志轮转。 先决条件 一个正在运行的 Red Hat Ceph Storage 集群。节点的根…
阅读更多...
Ubuntu离线安装Python第三方库

Ubuntu离线安装Python第三方库

这里以安装PyYAML为例。 首先进入PyYAML官网&#xff0c;下载PyYAML-5.3.1.tar.gz安装包。 解压缩&#xff1a; tar -zxvf PyYAML-5.3.1.tar.gz解压后&#xff0c;生成一个PyYAML-5.3.1目录&#xff0c;进入该目录&#xff0c;执行以下命令进行安装&#xff1a; python set…
阅读更多...
MyBatis Plus复合主键问题解析

MyBatis Plus复合主键问题解析

引言 在数据库设计中&#xff0c;有时候需要使用复合主键来唯一标识表中的一行数据。然而&#xff0c;在使用MyBatis Plus框架时&#xff0c;处理复合主键可能会带来一些挑战和困惑。本文将为您详细介绍MyBatis Plus中复合主键的问题以及解决方案。 复合主键定义 复合主键是…
阅读更多...
vue、uniapp中动态添加绑定style、class 9种方法实现

vue、uniapp中动态添加绑定style、class 9种方法实现

9种方法介绍 直接使用静态class和style属性&#xff1a; 使用场景&#xff1a;当class和style属性是固定不变的时候&#xff0c;可以直接在模板中写死。优点&#xff1a;简单直接&#xff0c;没有额外的计算和逻辑。缺点&#xff1a;无法根据条件动态修改class和style。 使用v…
阅读更多...
SpringBatch 事务详解

SpringBatch 事务详解

Spring Batch 是一个强大的批处理框架&#xff0c;它充分利用了 Spring 框架的事务管理机制&#xff0c;以确保批处理任务的数据一致性和完整性。在 Spring Batch 中&#xff0c;事务是一项关键概念&#xff0c;这里将详细解释 Spring Batch 中的事务管理。 一、事务管理器&am…
阅读更多...
Discourse 应该保留多少备份

Discourse 应该保留多少备份

近期&#xff0c;我们在对 Discourse 进行恢复的时候&#xff0c;我们发现新的备份可能会导致不是所有的数据都能恢复到服务上。 这时候我们应该考虑让 Discourse 保留多少备份的问题&#xff1f; 在默认情况下&#xff0c;我们设置 Discourse 的备份是保留 5 个。这是官方的…
阅读更多...
ARM/X86工业级数据采集 (DAQ) 与控制产品解决方案

ARM/X86工业级数据采集 (DAQ) 与控制产品解决方案

I/O设备&#xff0c;包括信号调理模块、嵌入式PCI/PCIE卡、便携式USB模块、DAQ嵌入式计算机、模块化DAQ系统&#xff0c;以及DAQNavi/SDK软件开发包和DAQNavi/MCM设备状态监测软件。 工业I/O产品适用于各种工业自动化应用&#xff0c;从机器自动化控制、测试测量到设备状态监测…
阅读更多...
第 361 场周赛 （AC 1，第二题过了但是考试结束了）

第 361 场周赛 （AC 1，第二题过了但是考试结束了）

7020.统计对称整数的数目 思路一&#xff1a;指定区间统计对称整数 1.遍历区间2.判断该数对不对称 对称逻辑&#xff1a;首尾同时开始遍历&#xff0c;并且同时累加为两个数&#xff0c;最后判断两个数是否相等 class Solution { public:bool judge(int num){if(num<10) …
阅读更多...
剑指 Offer 24. 反转链表

剑指 Offer 24. 反转链表

剑指 Offer 24. 反转链表 迭代 class Solution {public ListNode reverseList(ListNode head) {ListNode pre null, cur head;while(cur ! null){ListNode next cur.next;cur.next pre;pre cur;cur next;}return pre;} }递归&#xff08;使用额外参数&#xff09; 和上…
阅读更多...
SpringBoot 如何优雅的进行全局异常处理？

SpringBoot 如何优雅的进行全局异常处理？

在SpringBoot的开发中&#xff0c;为了提高程序运行的鲁棒性&#xff0c;我们经常需要对各种程序异常进行处理&#xff0c;但是如果在每个出异常的地方进行单独处理的话&#xff0c;这会引入大量业务不相关的异常处理代码&#xff0c;增加了程序的耦合&#xff0c;同时未来想改…
阅读更多...
最新文章

Copyright @ 2022~2023