Vue使用FullCalendar实现日历/周历/月历

Vue使用FullCalendar实现日历/周历/月历

需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。

效果图

日历
在这里插入图片描述
周历
在这里插入图片描述
月历
在这里插入图片描述

安装插件
"@fullcalendar/core": "^6.1.14","@fullcalendar/daygrid": "^6.1.14","@fullcalendar/interaction": "^6.1.14","@fullcalendar/timegrid": "^6.1.14","@fullcalendar/vue": "^6.1.14","moment": "^2.30.1",
部分代码

html

<!-- 日程部分--><div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 10px;"><FullCalendar :options="calendarOptions" ref="FullCalendar"><template v-slot:eventContent='arg'><el-tooltipclass="box-item"effect="dark"placement="top-start"><template #content><span >{{ formmatTime(arg.event.start) }}~{{ formmatTime(arg.event.end) }} {{ arg.event.extendedProps.reportId }} {{ arg.event.title }}</span></template><div class="test-div" v-if="viewType!='dayGridMonth'"><div class="info-part"><div class="info-desc">{{ formmatTime(arg.event.start) }}~{{ formmatTime(arg.event.end) }}</div><div class="info-desc">{{ arg.event.extendedProps.reportId }}</div><div class="info-desc">{{ arg.event.title }}</div></div><div class="mid-block" v-if="arg.event.id == 1||arg.event.id == 5||arg.event.id == 6" :style="getStandLen(arg.event,'top')">去程</div><div class="mid-block" v-if="arg.event.id == 1||arg.event.id == 5||arg.event.id == 6" :style="getStandLen(arg.event,'mid')">工作</div><div class="mid-block" v-if="arg.event.id == 1||arg.event.id == 5||arg.event.id == 6" :style="getStandLen(arg.event,'bottom')">返程</div></div><div class="test-div test-div22" v-if="viewType=='dayGridMonth'"><div class="info-part-month" :style="{background:arg.event.backgroundColor}">{{ formmatTime(arg.event.start) }}~{{ formmatTime(arg.event.end) }}<!-- {{ arg.event.start }}~{{ arg.event.end }} --></div></div></el-tooltip></template></FullCalendar><!-- 点击会议弹窗内容 --><div v-if="selectedEvent"><el-dialog :close-on-click-modal="true" :visible="this.showDialog" @close="closeDialog()" title="日程详情"><h3>{{ this.selectedEvent.title }}</h3><p>开始时间：{{ this.selectedEvent.start }}</p><p>结束时间：{{ this.selectedEvent.end }}</p><p>内容：{{ this.selectedEvent.context }}</p><p>职位：{{ this.selectedEvent.zw }}</p><p>性别：{{ this.selectedEvent.sex }}</p><p>年龄：{{ this.selectedEvent.age }}</p></el-dialog></div>

data&&methods

data() {return {//监听到的当前view模式viewType:'',//普通查询时间queryStartDate: null,//日程弹窗开关showDialog: false,//日程弹窗内容selectedEvent: null,//抽屉窗开关drawer: false,//日程内容集合meetingArr:meetingArr,calendarOptions: {allDaySlot:false,//是否在日历上方显示all-day(全天)axisFormat:'h(:mm)tt',// 加载的视图plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],// 视图类型 初始显示的视图 视图名称规则 比如dayGridPlugin去掉Plugin 加上Month或者Week或者DayinitialView: 'dayGridMonth',//dayGridMonth  timeGridWeek  timeGridDay// 语言选项  设置为中文后 部分文本会替换为中文 但是不全面locale: 'zh-cn',firstDay: 1,firstHour:1,  //无用// slotMinutes:10,//在agenda的视图中, 两个时间之间的间隔(分钟)  无用handleWindowResize:true,//是否随浏览器窗口大小变化而自动contentHeight:'600px',  //设置日历主体内容的高度,不包括header部分aspectRatio:2,//日历单元格宽高比dayMaxEvents:true,//时间中网格内容高度超出单元格高度时，是否折叠，如果选择false，则会完全展开网格内容，并自动撑开日历单元格高度eventLimit:true,// 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示selectEventOverlap:false,// 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许  无用slotEventOverlap:false,//设置视图中的事件显示是否可以重叠覆盖  有用// 配置日历头部// 按钮: prev为切换(上)下一月(/周/日)   next today 跳转到今天    // 文本: title 年月(YYYY-MM)// 按钮: dayGridMonth月 timeGridWeek周 timeGridDay日headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay',},eventTimeFormat: {// like '14:30:00'hour: "2-digit",minute: "2-digit",meridiem: false,hour12: false, // 设置时间为24小时},// 设置各种按钮的文字  默认是英文的buttonText: {today: '今天',month: '月',week: '周',day: '日',list: '表'},customButtons: {prev: {click: () => {this.prevWeekClick();}},next: {click: () => {this.nextWeekClick();}}},// 初始就存在的事件【日程内容】initialEvents: [],// 是否可拖拽editable: false,// 是否可选择添加selectable: true,datesSet:this.datesSet, //日期渲染；修改日期范围后触发// 选择时触发函数select: this.handleDateSelect,// 点击事项触发函数eventClick: this.handleEventClick,// 移动事项或者拓展事项时间触发函数eventsSet: this.handleEvents,// 全天行 的文本显示内容// allDayText: '全天',// 最小时间slotMinTime: '00:00:00',// 最大时间slotMaxTime: '23:59:59',// 是否可以进行（拖动、缩放）修改//editable: false,},};},
methods: {datesSet(info) {   //注意：该方法在页面初始化时就会触发一次console.log('间接监听view的变化',info.view.type)this.viewType = info.view.type// this.search()  //请求本页数据Message.success('当前模式'+info.view.type);},// 向前点击prevWeekClick(){let calendarApi = this.$refs['FullCalendar'].getApi();calendarApi.prev();const startTime = calendarApi.view.activeStart;const endTime = calendarApi.view.activeEnd;console.log(startTime,endTime);},// 向后点击nextWeekClick(){let calendarApi = this.$refs['FullCalendar'].getApi();calendarApi.next();const startTime = calendarApi.view.activeStart;const endTime = calendarApi.view.activeEnd;console.log(startTime,endTime);},//UTC时间去掉TformmatTime(time){const utcTimestamp = time;const date = new Date(utcTimestamp);const year = date.getUTCFullYear();const month = String(date.getUTCMonth() + 1).padStart(2, '0');const day = String(date.getUTCDate()).padStart(2, '0');const hours = String(date.getUTCHours()).padStart(2, '0');const minutes = String(date.getUTCMinutes()).padStart(2, '0');const seconds = String(date.getUTCSeconds()).padStart(2, '0');const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;return formattedDateTime},//计算距离起点时间的距离getStandLen(obj,type){let styleObj = {top:0,left:0,height:0,background:''}let startTime = new Date(obj.start).getTime();let endTime = new Date(obj.end).getTime();let specificTime = 0let intervalEndTime = 0if(type=='top'){specificTime = new Date(obj.extendedProps.topSt).getTime();intervalEndTime = new Date(obj.extendedProps.topEt).getTime();styleObj.background='rgba(204, 204, 204,0.4)'}else if(type=='mid'){specificTime = new Date(obj.extendedProps.midSt).getTime();intervalEndTime = new Date(obj.extendedProps.midEt).getTime();styleObj.background='rgba(255,255,0,0.4)'}else if(type=='bottom'){specificTime = new Date(obj.extendedProps.bottomSt).getTime();intervalEndTime = new Date(obj.extendedProps.bottomEt).getTime();styleObj.background='rgba(229, 229, 229,0.4)'}let elapsedTimePercentage = ((specificTime - startTime) / (endTime - startTime)) * 100;let intervalPercentage = ((intervalEndTime - specificTime) / (endTime - startTime)) * 100;styleObj.top = elapsedTimePercentage?elapsedTimePercentage+'%':0styleObj.height = intervalPercentage?intervalPercentage+'%':0console.log('top:'+elapsedTimePercentage);// console.log(`Percentage of time interval from 03:00:00 to 04:00:00: ${intervalPercentage.toFixed(2)}%`);return styleObj},/* 普通查询方法*/quertStart() {let calendarApi = this.$refs.FullCalendar.getApi()//非空if (this.queryStartDate != null) {// gotoDate方法是让当前视图跳转到指定日期的位置calendarApi.gotoDate(this.queryStartDate)} else {//跳转到今日calendarApi.today()}},/* 获取指定日期范围的所有日程信息 */toClick() {// 获取 FullCalendar 实例const calendar = this.$refs.FullCalendar.getApi();// 定义搜索范围的起始和结束时间const startDate = moment("2015-06-06");const endDate = moment("2028-06-08");// 获取日历中的所有事件const events = calendar.getEvents();// 根据范围条件筛选事件const filteredEvents = events.filter(event => {// 获取事件的开始时间和结束时间const eventStart = moment(event.start);const eventEnd = moment(event.end);// 判断事件是否在范围内return eventStart.isBetween(startDate, endDate, null, '[]') || eventEnd.isBetween(startDate,endDate, null, '[]');});// 处理筛选出的事件console.log(filteredEvents);},/* 点击会议弹窗具体内容*/handleEventClick(info) {// 获取点击的事件对象const event = info.event;// 更新选中的事件this.selectedEvent = {title: event.title,start: moment(event.start).format('YYYY-MM-DD HH:mm'),end: moment(event.end).format('YYYY-MM-DD HH:mm'),zw: event.extendedProps.zw,context: event.extendedProps.context,age: event.extendedProps.age,sex: event.extendedProps.sex};console.info(info)console.info(this.selectedEvent)//开启弹窗this.showDialog = true},//handleDateSelect(info){const event = info.event;console.log('信息',info)Message.success('点击日期'+info.startStr+'-'+info.endStr);},/* 关闭日程弹窗方法*/closeDialog() {this.showDialog = false},/* 申请会议按钮 */toMeetingClick() {//根据自己的业务进行处理...}},

event事件数据

const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');const formattedDate = `${year}-${month}-${day}`;
const formattedDateTomrrow = `${year}-${month}-${Number(day)+1}`
const formattedDateAfterTomrrow = `${year}-${month}-${Number(day)+2}`
const formattedDateYestoday = `${year}-${month}-${Number(day)-1}`
const formattedDateBeforeYestoday = `${year}-${month}-${Number(day)-2}`let meetingArr = [{id: 1,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDate + 'T00:00:00',end: formattedDate + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDate + 'T02:30:00',topEt:formattedDate + 'T03:00:00',//中间时段midSt:formattedDate + 'T03:30:00',midEt:formattedDate + 'T04:30:00',//结束时段bottomSt:formattedDate + 'T05:30:00',bottomEt:formattedDate + 'T06:00:00',},{id: 5,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDate + 'T01:30:00',end: formattedDate + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDate + 'T02:30:00',topEt:formattedDate + 'T03:00:00',//中间时段midSt:formattedDate + 'T03:30:00',midEt:formattedDate + 'T04:30:00',//结束时段bottomSt:formattedDate + 'T05:30:00',bottomEt:formattedDate + 'T06:00:00',},{id: 6,reportId:'SR20240527435777',title: `机器维修单`,start: formattedDate + 'T01:30:00',end: formattedDate + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// allDay:true,// 开始时段topSt:formattedDate + 'T02:30:00',topEt:formattedDate + 'T03:00:00',//中间时段midSt:formattedDate + 'T03:30:00',midEt:formattedDate + 'T04:30:00',//结束时段bottomSt:formattedDate + 'T05:30:00',bottomEt:formattedDate + 'T06:00:00',},{id: 7,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDate + 'T07:30:00',end: formattedDate + 'T08:30:00',},{id: 2,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDate + 'T13:00:00',end: formattedDate + 'T14:20:00',},{id: 3,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDate + 'T15:10:00',end: formattedDate + 'T16:10:00',},{id: 3,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDate + 'T16:00:00',end: formattedDate + 'T17:10:00',},{id: 4,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDate + 'T17:30:00',end: formattedDate + 'T18:10:00',},//明天{id: 8,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateTomrrow + 'T00:00:00',end: formattedDateTomrrow + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateTomrrow + 'T02:30:00',topEt:formattedDateTomrrow + 'T03:00:00',//中间时段midSt:formattedDateTomrrow + 'T03:30:00',midEt:formattedDateTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateTomrrow + 'T05:30:00',bottomEt:formattedDateTomrrow + 'T06:00:00',},{id: 9,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateTomrrow + 'T01:30:00',end: formattedDateTomrrow + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateTomrrow + 'T02:30:00',topEt:formattedDateTomrrow + 'T03:00:00',//中间时段midSt:formattedDateTomrrow + 'T03:30:00',midEt:formattedDateTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateTomrrow + 'T05:30:00',bottomEt:formattedDateTomrrow + 'T06:00:00',},{id: 10,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateTomrrow + 'T07:30:00',end: formattedDateTomrrow + 'T08:30:00',},{id: 11,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateTomrrow + 'T13:00:00',end: formattedDateTomrrow + 'T14:20:00',},{id: 12,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateTomrrow + 'T15:10:00',end: formattedDateTomrrow + 'T16:10:00',},{id: 13,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateTomrrow + 'T16:00:00',end: formattedDateTomrrow + 'T17:10:00',},{id: 14,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateTomrrow + 'T17:30:00',end: formattedDateTomrrow + 'T18:10:00',},//后天{id: 8,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateAfterTomrrow + 'T00:00:00',end: formattedDateAfterTomrrow + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateAfterTomrrow + 'T02:30:00',topEt:formattedDateAfterTomrrow + 'T03:00:00',//中间时段midSt:formattedDateAfterTomrrow + 'T03:30:00',midEt:formattedDateAfterTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateAfterTomrrow + 'T05:30:00',bottomEt:formattedDateAfterTomrrow + 'T06:00:00',},{id: 9,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateAfterTomrrow + 'T01:30:00',end: formattedDateAfterTomrrow + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateAfterTomrrow + 'T02:30:00',topEt:formattedDateAfterTomrrow + 'T03:00:00',//中间时段midSt:formattedDateAfterTomrrow + 'T03:30:00',midEt:formattedDateAfterTomrrow + 'T04:30:00',//结束时段bottomSt:formattedDateAfterTomrrow + 'T05:30:00',bottomEt:formattedDateAfterTomrrow + 'T06:00:00',},{id: 10,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateAfterTomrrow + 'T07:30:00',end: formattedDateAfterTomrrow + 'T08:30:00',},{id: 11,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateAfterTomrrow + 'T13:00:00',end: formattedDateAfterTomrrow + 'T14:20:00',},{id: 12,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateAfterTomrrow + 'T15:10:00',end: formattedDateAfterTomrrow + 'T16:10:00',},{id: 13,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateAfterTomrrow + 'T16:00:00',end: formattedDateAfterTomrrow + 'T17:10:00',},{id: 14,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateAfterTomrrow + 'T17:30:00',end: '2024-06-16' + 'T18:10:00',},//昨天{id: 15,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateYestoday + 'T00:00:00',end: formattedDateYestoday + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateYestoday + 'T02:30:00',topEt:formattedDateYestoday + 'T03:00:00',//中间时段midSt:formattedDateYestoday + 'T03:30:00',midEt:formattedDateYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateYestoday + 'T05:30:00',bottomEt:formattedDateYestoday + 'T06:00:00',},{id: 16,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateYestoday + 'T01:30:00',end: formattedDateYestoday + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateYestoday + 'T02:30:00',topEt:formattedDateYestoday + 'T03:00:00',//中间时段midSt:formattedDateYestoday + 'T03:30:00',midEt:formattedDateYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateYestoday + 'T05:30:00',bottomEt:formattedDateYestoday + 'T06:00:00',},{id: 17,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateYestoday + 'T07:30:00',end: formattedDateYestoday + 'T08:30:00',},{id: 18,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateYestoday + 'T13:00:00',end: formattedDateYestoday + 'T14:20:00',},{id: 19,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateYestoday + 'T15:10:00',end: formattedDateYestoday + 'T16:10:00',},{id: 20,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateYestoday + 'T16:00:00',end: formattedDateYestoday + 'T17:10:00',},{id: 21,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateYestoday + 'T17:30:00',end: formattedDateYestoday + 'T18:10:00',},//前天{id: 22,reportId:'SR20240527435908',title: `机器维修单`,start: formattedDateBeforeYestoday + 'T00:00:00',end: formattedDateBeforeYestoday + 'T23:59:59',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateBeforeYestoday + 'T02:30:00',topEt:formattedDateBeforeYestoday + 'T03:00:00',//中间时段midSt:formattedDateBeforeYestoday + 'T03:30:00',midEt:formattedDateBeforeYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateBeforeYestoday + 'T05:30:00',bottomEt:formattedDateBeforeYestoday + 'T06:00:00',},{id: 23,reportId:'SR20240527435999',title: `机器维修单`,start: formattedDateBeforeYestoday + 'T01:30:00',end: formattedDateBeforeYestoday + 'T06:30:00',context: '自定义的内容',color:'rgba(43,177,76,0.8)',textColor:'#fff',	age: 18,sex: '男',zw: '董事长',// 开始时段topSt:formattedDateBeforeYestoday + 'T02:30:00',topEt:formattedDateBeforeYestoday + 'T03:00:00',//中间时段midSt:formattedDateBeforeYestoday + 'T03:30:00',midEt:formattedDateBeforeYestoday + 'T04:30:00',//结束时段bottomSt:formattedDateBeforeYestoday + 'T05:30:00',bottomEt:formattedDateBeforeYestoday + 'T06:00:00',},{id: 24,reportId:'IN202405094357333',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateBeforeYestoday + 'T07:30:00',end: formattedDateBeforeYestoday + 'T08:30:00',},{id: 25,reportId:'IN20240509435732',title: `机器安装单`,color:'rgba(63,72,204,0.8)',start: formattedDateBeforeYestoday + 'T13:00:00',end: formattedDateBeforeYestoday + 'T14:20:00',},{id: 26,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateBeforeYestoday + 'T15:10:00',end: formattedDateBeforeYestoday + 'T16:10:00',},{id: 27,reportId:'PLF2023032415233400000111',title: `客户报修单`,color:'rgba(43,177,76,0.8)',start: formattedDateBeforeYestoday + 'T16:00:00',end: formattedDateBeforeYestoday + 'T17:10:00',},{id: 28,reportId:'CIN20240604436001',title: `合同加装单`,color:'rgba(112,146,190,0.8)',start: formattedDateBeforeYestoday + 'T17:30:00',end: formattedDateBeforeYestoday + 'T18:10:00',},
]export default meetingArr;

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

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

相关文章

MySQL学习——影响选项文件处理的命令行选项

MySQL学习——影响选项文件处理的命令行选项

大多数支持选项文件的MySQL程序都处理以下选项。因为这些选项会影响选项文件处理&#xff0c;所以必须在命令行上给出&#xff0c;而不是在选项文件中给出。为了正常工作&#xff0c;这些选项中的每一个都必须在其他选项之前给出&#xff0c;但以下情况除外&#xff1a; 打印默…
阅读更多...
力扣第二十五题——K个一组反转链表

力扣第二十五题——K个一组反转链表

内容介绍 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内…
阅读更多...
1万6千多传统文化之古代地名大全ACCESS\EXCEL数据库

1万6千多传统文化之古代地名大全ACCESS\EXCEL数据库

继续采集传统文化数据&#xff0c;之前采集过《传统文化之非物质文化大全ACCESS数据库》、《名人大全古今人物ACCESS数据库》、《传统文化之民俗文化大全ACCESS数据库》&#xff0c;今天的是古代地名查询&#xff1a; 截图下方有显示“共有记录数”&#xff0c;截图包含了表的所…
阅读更多...
IP协议和路由转发

IP协议和路由转发

文章目录 IP协议IP报头网段划分特殊的IP私有IP和公有IP IP分片 路由 IP协议 IP协议提供了一种能力&#xff0c;将数据报从A主机送到B主机&#xff0c;TCP可以保证可靠性&#xff0c;所以TCP/IP协议可以将数据可靠的从A主机送到B主机。 IP报头 4位版本号(version): 指定IP协议…
阅读更多...
Unity Shader - 2024 工具篇

Unity Shader - 2024 工具篇

目录 IDE 工具建议 IDE工具 Sublime 3 大势所趋&#xff0c;但是Sublime 使用插件还是相当的不习惯 代码跳转 Go to definite IDE 工具建议 () what is the best ide for coding shaderlab - #4 by DaveAstator - Unity Engine - Unity Discussions​​​​​​​I IDE工…
阅读更多...
修复SteamUI.dll加载失败的指南，快速修复failed to load steamui.dll

修复SteamUI.dll加载失败的指南，快速修复failed to load steamui.dll

在使用Steam平台进行游戏下载、安装和运行时&#xff0c;可能会遇到一些系统错误&#xff0c;比如“failed to load steamui.dll”。这个错误通常意味着Steam的用户界面库文件steamui.dll出现了问题。本文将详细介绍steamui.dll文件的相关信息以及如何修复这一问题。 一.什么是…
阅读更多...
邮件安全篇：如何防止邮件泄密？

邮件安全篇：如何防止邮件泄密？

本文主要讨论组织内部用户违反保密规定通过邮件泄密的场景。其他场景导致邮箱泄密的问题&#xff08;如账号被盗、邮件系统存在安全漏洞等&#xff09;不在本文的讨论范围。本文主要从邮件系架构设计、邮件数据防泄漏系统、建立健全规章制度、安全意识培训等方面分别探讨。 1. …
阅读更多...
Java响应式编程库Reactor的介绍和基本使用

Java响应式编程库Reactor的介绍和基本使用

关于响应式编程的概念和介绍可以参考： 响应式编程(Reactive Programming)是什么？ Java语言中，RxJava和Reactor是实现响应式编程的两个最流行的库，因为 Spring 5 及更高版本中，Reactor 是 Spring WebFlux 的底层实现框架，用于构建响应式 Web 应用，所以相比而言，Reactor…
阅读更多...
充电桩浪涌保护方案—保障充电设施安全稳定运行的关键

充电桩浪涌保护方案—保障充电设施安全稳定运行的关键

在当今新能源汽车蓬勃发展的时代&#xff0c;充电桩作为电动汽车的“加油站”&#xff0c;其重要性不言而喻。然而&#xff0c;由于其复杂的电气环境和暴露于户外的特点&#xff0c;充电桩容易受到浪涌的影响。浪涌可能来自雷电、电网故障、大功率设备的启停等&#xff0c;对充…
阅读更多...
JS+H5可视化广度优先算法

JS+H5可视化广度优先算法

源码在效果图后面 可标记 障碍 起始点 终点 点击寻路按钮后&#xff0c;表格上会自动出现一条蓝色最佳路径&#xff08;加了一格一格显示的动画&#xff09; 以下是效果图 橙色起点 绿色终点 红色障碍物 以下是寻路结果 源代码 <!DOCTYPE html> <html lang&quo…
阅读更多...
html+css前端作业 王者荣耀官网6个页面无js

html+css前端作业 王者荣耀官网6个页面无js

htmlcss前端作业 王者荣耀官网6个页面无js 下载地址 https://download.csdn.net/download/qq_42431718/89571150 目录1 目录2 项目视频 王者荣耀6个页面&#xff08;无js&#xff09; 页面1 页面2 页面3 页面4 页面5 页面6
阅读更多...
Camtasia2024官方下载安装激活教程+免费永久许可证秘钥激活码

Camtasia2024官方下载安装激活教程+免费永久许可证秘钥激活码

在这个数字化内容层出不穷的时代&#xff0c;视频的力量日益凸显。无论是用于教育教学、企业培训、内容创作&#xff0c;还是记录生活中的精彩瞬间&#xff0c;一款强大且易用的视频编辑软件都至关重要。今天&#xff0c;让我们一同走进 Camtasia 2024 的精彩世界&#xff0c;探…
阅读更多...
分类模型-逻辑回归和Fisher线性判别分析★★★★

分类模型-逻辑回归和Fisher线性判别分析★★★★

该博客为个人学习清风建模的学习笔记&#xff0c;部分课程可以在B站&#xff1a;【强烈推荐】清风&#xff1a;数学建模算法、编程和写作培训的视频课程以及Matlab等软件教学_哔哩哔哩_bilibili 目录 1理论 1.1逻辑回归模型 1.2线性概率模型 1.3线性判别分析 1.4两点分布…
阅读更多...
github的Codespaces是什么

github的Codespaces是什么

目录 github的Codespaces是什么 一、定义与功能 二、特点与优势 三、工作原理 四、使用场景与限制 github的Codespaces是什么 GitHub的Codespaces是一个基于云的即时开发环境，它利用容器技术为开发者提供一个完全配置好的开发环境，以便他们能够直接在浏览器或通过Visua…
阅读更多...
轻松上手微调大语言模型——QLORA篇

轻松上手微调大语言模型——QLORA篇

轻松上手微调大语言模型——QLORA篇 前言 本篇Blog是代码实战篇&#xff0c;着重于新手如何在消费级GPU上快速跑通代码&#xff0c;打造属于自己的AI大语言模型。涉及到相关技术的具体原理我会在以后的更新中一一讲解。 在本篇中我对llama-2进行微调作为示例。 先决条件 安…
阅读更多...
【成功率极高】消逝的光芒1联机显示加入的游戏不可用完美解决办法

【成功率极高】消逝的光芒1联机显示加入的游戏不可用完美解决办法

今天和朋友联机玩消逝的光芒1&#xff0c;但是总是联机有问题&#xff0c;总是莫名其妙连上又退出去。而且退出去一次之后就进不来了&#xff0c;网上查了下&#xff0c;大概有三种方法&#xff0c;我全都试了下。 发现只有一种办法有用&#xff0c;那就是不连加速器。 没错&…
阅读更多...
【你也能从零基础学会网站开发】 SQL结构化查询语言应用基础--创建表约束(table Constraints) 之 PRIMARY KEY 主键约束

【你也能从零基础学会网站开发】 SQL结构化查询语言应用基础--创建表约束(table Constraints) 之 PRIMARY KEY 主键约束

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 什么是SQL数据…
阅读更多...
《“微软蓝屏”敲响警钟：网络安全与系统稳定何去何从》

《“微软蓝屏”敲响警钟：网络安全与系统稳定何去何从》

#“微软蓝屏”事件暴露了网络安全哪些问题&#xff1f;# 近日&#xff0c;一场由微软视窗系统软件更新所引发的全球性“微软蓝屏”事件&#xff0c;犹如一场突如其来的风暴&#xff0c;以雷霆万钧之势席卷了整个科技领域。这一事件宛如一颗投入平静湖面的巨石&#xff0c;瞬间激…
阅读更多...
centos系统mysql数据库压缩备份与恢复

centos系统mysql数据库压缩备份与恢复

文章目录 压缩备份一、安装 xtrabackup二、数据库中创建一些数据三、进行压缩备份四、模拟数据丢失&#xff0c;删库五、解压缩六、数据恢复 压缩备份 一、安装 xtrabackup 确保已经安装了 xtrabackup 工具。可以从 Percona 的官方网站 获取并安装适合你系统的版本。 # 添加…
阅读更多...
Study--Oracle-07-ASM相关参数（三）

Study--Oracle-07-ASM相关参数（三）

一、ASM初始化参数 1、ASM全量参数&#xff0c;见附件 2、ASM重要参数 3、ASM权限 ASM的三大系统权限包括SYSDBA、‌SYSOPER和SYSASM。‌ SYSDBA&#xff08;‌系统管理员&#xff09;‌&#xff1a;‌这是最高级别的权限&#xff0c;‌允许用户执行所有的数据库管理任务&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023