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;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内…
阅读更多...
自定义IPython启动：打造个性化的交互式编程环境

自定义IPython启动：打造个性化的交互式编程环境

自定义IPython启动&#xff1a;打造个性化的交互式编程环境 IPython&#xff0c;一个强大的交互式Python解释器&#xff0c;提供了丰富的定制选项&#xff0c;允许用户根据个人或团队的需求定制其行为和外观。设置自定义的启动命令是IPython定制功能的一部分&#xff0c;它可以…
阅读更多...
1万6千多传统文化之古代地名大全ACCESS\EXCEL数据库

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

继续采集传统文化数据&#xff0c;之前采集过《传统文化之非物质文化大全ACCESS数据库》、《名人大全古今人物ACCESS数据库》、《传统文化之民俗文化大全ACCESS数据库》&#xff0c;今天的是古代地名查询&#xff1a; 截图下方有显示“共有记录数”&#xff0c;截图包含了表的所…
阅读更多...
探索WebKit的CSS盒模型：深入理解Web布局的基石

探索WebKit的CSS盒模型：深入理解Web布局的基石

探索WebKit的CSS盒模型&#xff1a;深入理解Web布局的基石 在Web开发的世界中&#xff0c;CSS盒模型&#xff08;Box Model&#xff09;是构建网页布局的核心原理。WebKit&#xff0c;作为Safari浏览器的渲染引擎&#xff0c;对CSS盒模型有着深入而精确的支持。本文将带你深入…
阅读更多...
AtCoder Beginner Contest 363

AtCoder Beginner Contest 363

A - Piling Up 题意 不同的分数段有不同的^数量&#xff0c;Takahashi想要使得他的^数量增加&#xff0c;问他所需要的最少分数增幅。 思路 我们只需要找到下一阶段的下限。 a / 100 是本阶段 1 变成下一阶段&#xff0c;再 * 100变成下限&#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工…
阅读更多...
java中介模式

java中介模式

中介者&#xff08;Mediator&#xff09;模式是一种行为设计模式&#xff0c;它定义了一个对象来封装一组对象之间的交互。中介者对象负责控制和协调这些对象之间的交互&#xff0c;使得这些对象不需要显式地相互引用&#xff0c;从而降低它们之间的耦合。 以下是一个简单的中…
阅读更多...
修复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文件的相关信息以及如何修复这一问题。 一.什么是…
阅读更多...
android audio 相机按键音：(二)加载与修改

android audio 相机按键音：(二)加载与修改

相机按键音资源&#xff0c;加载文件路径&#xff1a; frameworks/av/services/camera/libcameraservice/CameraService.cpp 按键音&#xff0c;加载函数&#xff1a; void CameraService::loadSoundLocked(sound_kind kind) { ATRACE_CALL(); LOG1("Cam…
阅读更多...
MySQL数据库基本安装与部署

MySQL数据库基本安装与部署

目录 概念 数据库的基本概念 关系型数据库 非关系型数据库 MySQL 商业版与社区版 示例 初始化MySQL 添加系统服务 概念 数据库的基本概念 数据&#xff08;Data&#xff09; 描述事物的符号记录包括数字、文字、图形、图像、声音、档案记录等以“记录”形式按统一的…
阅读更多...
邮件安全篇：如何防止邮件泄密？

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

本文主要讨论组织内部用户违反保密规定通过邮件泄密的场景。其他场景导致邮箱泄密的问题&#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…
阅读更多...
最新文章

Copyright @ 2022~2023