SpringBoot定时任务---集成quartz实现定时任务（单实例和分布式两种方式)

package tech.pdai.springboot.quartz.cluster.manager;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.quartz.CronScheduleBuilder;
import org.quartz.CronTrigger;
import org.quartz.DateBuilder;
import org.quartz.DateBuilder.IntervalUnit;
import org.quartz.Job;
import org.quartz.JobBuilder;
import org.quartz.JobDetail;
import org.quartz.JobExecutionContext;
import org.quartz.JobKey;
import org.quartz.Scheduler;
import org.quartz.SchedulerException;
import org.quartz.SimpleScheduleBuilder;
import org.quartz.Trigger;
import org.quartz.TriggerBuilder;
import org.quartz.TriggerKey;
import org.quartz.impl.matchers.GroupMatcher;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.quartz.QuartzJobBean;
import org.springframework.stereotype.Component;
import tech.pdai.springboot.quartz.cluster.entity.JobDetails;

/**
 * ;author pdai
 */
;Component
public class QuartzManager {

    ;Autowired
    private Scheduler sched;

    /**
     * 创建or更新任务;存在则更新不存在创建
     *
     * ;param jobClass     任务类
     * ;param jobName      任务名称
     * ;param jobGroupName 任务组名称
     * ;param jobCron      cron表达式
     */
    public void addOrUpdateJob(Class<? extends QuartzJobBean> jobClass, String jobName, String jobGroupName, String jobCron) {
        try {
            TriggerKey triggerKey = TriggerKey.triggerKey(jobName, jobGroupName);
            CronTrigger trigger = (CronTrigger) sched.getTrigger(triggerKey);
            if (trigger==null) {
                addJob(jobClass, jobName, jobGroupName, jobCron);
            } else {
                if (trigger.getCronExpression().equals(jobCron)) {
                    return;
                }
                updateJob(jobName, jobGroupName, jobCron);
            }
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    /**
     * 增加一个job
     *
     * ;param jobClass     任务实现类
     * ;param jobName      任务名称
     * ;param jobGroupName 任务组名
     * ;param jobCron      cron表达式(如;0/5 * * * * ? )
     */
    public void addJob(Class<? extends QuartzJobBean> jobClass, String jobName, String jobGroupName, String jobCron) {
        try {
            JobDetail jobDetail = JobBuilder.newJob(jobClass).withIdentity(jobName, jobGroupName).build();
            Trigger trigger = TriggerBuilder.newTrigger().withIdentity(jobName, jobGroupName)
                    .startAt(DateBuilder.futureDate(1, IntervalUnit.SECOND))
                    .withSchedule(CronScheduleBuilder.cronSchedule(jobCron)).startNow().build();

            sched.scheduleJob(jobDetail, trigger);
            if (!sched.isShutdown()) {
                sched.start();
            }
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    /**
     * ;param jobClass
     * ;param jobName
     * ;param jobGroupName
     * ;param jobTime
     */
    public void addJob(Class<? extends Job> jobClass, String jobName, String jobGroupName, int jobTime) {
        addJob(jobClass, jobName, jobGroupName, jobTime, -1);
    }

    public void addJob(Class<? extends Job> jobClass, String jobName, String jobGroupName, int jobTime, int jobTimes) {
        try {
            JobDetail jobDetail = JobBuilder.newJob(jobClass).withIdentity(jobName, jobGroupName)// 任务名称和组构成任务key
                    .build();
            // 使用simpleTrigger规则
            Trigger trigger;
            if (jobTimes < 0) {
                trigger = TriggerBuilder.newTrigger().withIdentity(jobName, jobGroupName)
                        .withSchedule(SimpleScheduleBuilder.repeatSecondlyForever(1).withIntervalInSeconds(jobTime))
                        .startNow().build();
            } else {
                trigger = TriggerBuilder
                        .newTrigger().withIdentity(jobName, jobGroupName).withSchedule(SimpleScheduleBuilder
                                .repeatSecondlyForever(1).withIntervalInSeconds(jobTime).withRepeatCount(jobTimes))
                        .startNow().build();
            }
            sched.scheduleJob(jobDetail, trigger);
            if (!sched.isShutdown()) {
                sched.start();
            }
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    public void updateJob(String jobName, String jobGroupName, String jobTime) {
        try {
            TriggerKey triggerKey = TriggerKey.triggerKey(jobName, jobGroupName);
            CronTrigger trigger = (CronTrigger) sched.getTrigger(triggerKey);
            trigger = trigger.getTriggerBuilder().withIdentity(triggerKey)
                    .withSchedule(CronScheduleBuilder.cronSchedule(jobTime)).build();
            // 重启触发器
            sched.rescheduleJob(triggerKey, trigger);
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    /**
     * 删除任务一个job
     *
     * ;param jobName      任务名称
     * ;param jobGroupName 任务组名
     */
    public void deleteJob(String jobName, String jobGroupName) {
        try {
            sched.pauseTrigger(TriggerKey.triggerKey(jobName, jobGroupName));
            sched.unscheduleJob(TriggerKey.triggerKey(jobName, jobGroupName));
            sched.deleteJob(new JobKey(jobName, jobGroupName));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 暂停一个job
     *
     * ;param jobName
     * ;param jobGroupName
     */
    public void pauseJob(String jobName, String jobGroupName) {
        try {
            JobKey jobKey = JobKey.jobKey(jobName, jobGroupName);
            sched.pauseJob(jobKey);
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    /**
     * 恢复一个job
     *
     * ;param jobName
     * ;param jobGroupName
     */
    public void resumeJob(String jobName, String jobGroupName) {
        try {
            JobKey jobKey = JobKey.jobKey(jobName, jobGroupName);
            sched.resumeJob(jobKey);
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    /**
     * 立即执行一个job
     *
     * ;param jobName
     * ;param jobGroupName
     */
    public void runAJobNow(String jobName, String jobGroupName) {
        try {
            JobKey jobKey = JobKey.jobKey(jobName, jobGroupName);
            sched.triggerJob(jobKey);
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
    }

    public PageInfo<JobDetails> queryAllJobBean(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<JobDetails> jobList = null;
        try {
            GroupMatcher<JobKey> matcher = GroupMatcher.anyJobGroup();
            Set<JobKey> jobKeys = sched.getJobKeys(matcher);
            jobList = new ArrayList<>();
            for (JobKey jobKey : jobKeys) {
                List<? extends Trigger> triggers = sched.getTriggersOfJob(jobKey);
                for (Trigger trigger : triggers) {
                    JobDetails jobDetails = new JobDetails();
                    if (trigger instanceof CronTrigger) {
                        CronTrigger cronTrigger = (CronTrigger) trigger;
                        jobDetails.setCronExpression(cronTrigger.getCronExpression());
                        jobDetails.setTimeZone(cronTrigger.getTimeZone().getDisplayName());
                    }
                    jobDetails.setTriggerGroupName(trigger.getKey().getName());
                    jobDetails.setTriggerName(trigger.getKey().getGroup());
                    jobDetails.setJobGroupName(jobKey.getGroup());
                    jobDetails.setJobName(jobKey.getName());
                    jobDetails.setStartTime(trigger.getStartTime());
                    jobDetails.setJobClassName(sched.getJobDetail(jobKey).getJobClass().getName());
                    jobDetails.setNextFireTime(trigger.getNextFireTime());
                    jobDetails.setPreviousFireTime(trigger.getPreviousFireTime());
                    jobDetails.setStatus(sched.getTriggerState(trigger.getKey()).name());
                    jobList.add(jobDetails);
                }
            }
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
        return new PageInfo<>(jobList);
    }

    /**
     * 获取所有计划中的任务列表
     *
     * ;return
     */
    public List<Map<String, Object>> queryAllJob() {
        List<Map<String, Object>> jobList = null;
        try {
            GroupMatcher<JobKey> matcher = GroupMatcher.anyJobGroup();
            Set<JobKey> jobKeys = sched.getJobKeys(matcher);
            jobList = new ArrayList<>();
            for (JobKey jobKey : jobKeys) {
                List<? extends Trigger> triggers = sched.getTriggersOfJob(jobKey);
                for (Trigger trigger : triggers) {
                    Map<String, Object> map = new HashMap<>();
                    map.put(;jobName;, jobKey.getName());
                    map.put(;jobGroupName;, jobKey.getGroup());
                    map.put(;description;, ;trigger:; ; trigger.getKey());
                    Trigger.TriggerState triggerState = sched.getTriggerState(trigger.getKey());
                    map.put(;jobStatus;, triggerState.name());
                    if (trigger instanceof CronTrigger) {
                        CronTrigger cronTrigger = (CronTrigger) trigger;
                        String cronExpression = cronTrigger.getCronExpression();
                        map.put(;jobTime;, cronExpression);
                    }
                    jobList.add(map);
                }
            }
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
        return jobList;
    }

    /**
     * 获取所有正在运行的job
     *
     * ;return
     */
    public List<Map<String, Object>> queryRunJon() {
        List<Map<String, Object>> jobList = null;
        try {
            List<JobExecutionContext> executingJobs = sched.getCurrentlyExecutingJobs();
            jobList = new ArrayList<>(executingJobs.size());
            for (JobExecutionContext executingJob : executingJobs) {
                Map<String, Object> map = new HashMap<>();
                JobDetail jobDetail = executingJob.getJobDetail();
                JobKey jobKey = jobDetail.getKey();
                Trigger trigger = executingJob.getTrigger();
                map.put(;jobName;, jobKey.getName());
                map.put(;jobGroupName;, jobKey.getGroup());
                map.put(;description;, ;trigger:; ; trigger.getKey());
                Trigger.TriggerState triggerState = sched.getTriggerState(trigger.getKey());
                map.put(;jobStatus;, triggerState.name());
                if (trigger instanceof CronTrigger) {
                    CronTrigger cronTrigger = (CronTrigger) trigger;
                    String cronExpression = cronTrigger.getCronExpression();
                    map.put(;jobTime;, cronExpression);
                }
                jobList.add(map);
            }
        } catch (SchedulerException e) {
            e.printStackTrace();
        }
        return jobList;
    }
}
复制代码

package tech.pdai.springboot.quartz.cluster.controller;

import java.util.HashMap;
import java.util.Map;

import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.quartz.QuartzJobBean;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import tech.pdai.springboot.quartz.cluster.entity.JobDetails;
import tech.pdai.springboot.quartz.cluster.manager.QuartzManager;


/**
 * ;author pdai
 */
;RestController
;RequestMapping(value = ;/job;)
public class JobController {

    ;Autowired
    private QuartzManager qtzManager;

    ;SuppressWarnings(;unchecked;)
    private static Class<? extends QuartzJobBean> getClass(String classname) throws Exception {
        Class<?> class1 = Class.forName(classname);
        return (Class<? extends QuartzJobBean>) class1;
    }

    /**
     * ;param jobClassName
     * ;param jobGroupName
     * ;param cronExpression
     * ;throws Exception
     */
    ;PostMapping(value = ;/addjob;)
    public void addjob(;RequestParam(value = ;jobClassName;) String jobClassName,
                       ;RequestParam(value = ;jobGroupName;) String jobGroupName,
                       ;RequestParam(value = ;cronExpression;) String cronExpression) throws Exception {
        qtzManager.addOrUpdateJob(getClass(jobClassName), jobClassName, jobGroupName, cronExpression);
    }

    /**
     * ;param jobClassName
     * ;param jobGroupName
     * ;throws Exception
     */
    ;PostMapping(value = ;/pausejob;)
    public void pausejob(;RequestParam(value = ;jobClassName;) String jobClassName,
                         ;RequestParam(value = ;jobGroupName;) String jobGroupName) throws Exception {
        qtzManager.pauseJob(jobClassName, jobGroupName);
    }

    /**
     * ;param jobClassName
     * ;param jobGroupName
     * ;throws Exception
     */
    ;PostMapping(value = ;/resumejob;)
    public void resumejob(;RequestParam(value = ;jobClassName;) String jobClassName,
                          ;RequestParam(value = ;jobGroupName;) String jobGroupName) throws Exception {
        qtzManager.resumeJob(jobClassName, jobGroupName);
    }

    /**
     * ;param jobClassName
     * ;param jobGroupName
     * ;param cronExpression
     * ;throws Exception
     */
    ;PostMapping(value = ;/reschedulejob;)
    public void rescheduleJob(;RequestParam(value = ;jobClassName;) String jobClassName,
                              ;RequestParam(value = ;jobGroupName;) String jobGroupName,
                              ;RequestParam(value = ;cronExpression;) String cronExpression) throws Exception {
        qtzManager.addOrUpdateJob(getClass(jobClassName), jobClassName, jobGroupName, cronExpression);
    }

    /**
     * ;param jobClassName
     * ;param jobGroupName
     * ;throws Exception
     */
    ;PostMapping(value = ;/deletejob;)
    public void deletejob(;RequestParam(value = ;jobClassName;) String jobClassName,
                          ;RequestParam(value = ;jobGroupName;) String jobGroupName) throws Exception {
        qtzManager.deleteJob(jobClassName, jobGroupName);
    }

    /**
     * ;param pageNum
     * ;param pageSize
     * ;return
     */
    ;GetMapping(value = ;/queryjob;)
    public Map<String, Object> queryjob(;RequestParam(value = ;pageNum;) Integer pageNum,
                                        ;RequestParam(value = ;pageSize;) Integer pageSize) {
        PageInfo<JobDetails> jobAndTrigger = qtzManager.queryAllJobBean(pageNum, pageSize);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put(;JobAndTrigger;, jobAndTrigger);
        map.put(;number;, jobAndTrigger.getTotal());
        return map;
    }
}
复制代码

package tech.pdai.springboot.quartz.cluster.job;

import java.util.Date;

import lombok.extern.slf4j.Slf4j;
import org.quartz.JobExecutionContext;
import org.quartz.JobExecutionException;
import org.springframework.scheduling.quartz.QuartzJobBean;

;Slf4j
public class HelloJob extends QuartzJobBean {

    ;Override
    protected void executeInternal(JobExecutionContext context) throws JobExecutionException {
        // get parameters
        context.getJobDetail().getJobDataMap().forEach(
                (k, v) -> log.info(;param, key:{}, value:{};, k, v)
        );
        // your logics
        log.info(;Hello Job执行时间: ; ; new Date());
    }
}
复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset=;UTF-8;>
	<title>QuartzDemo</title>
	<link rel=;stylesheet; href=;https://unpkg.com/element-ui;2.0.5/lib/theme-chalk/index.css;>
	<script src=;https://unpkg.com/vue/dist/vue.js;></script>
	<script src=;http://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js;></script>
	<script src=;https://unpkg.com/element-ui;2.0.5/lib/index.js;></script>
	
	<style>      
      #top {
	      background:#20A0FF;
	      padding:5px;
	      Overflow:hidden
      }
	</style>
	
</head>
<body>
    <div id=;test;>		        

		<div id=;top;>			
				<el-button type=;text; ;click=;search; style=;color:white;>查询</el-button>	
				<el-button type=;text; ;click=;handleadd; style=;color:white;>添加</el-button>	
			</span>						
		</div>	
				
		<br/>

        <div style=;margin-top:15px;>	

		  <el-table
		    ref=;testTable;		  
		    :data=;tableData;
		    style=;width:100%
		    border
		    >
		    <el-table-column
		      prop=;status;
		      label=;任务状态;
		      sortable
		      show-overflow-tooltip>
		    </el-table-column>
		    
		    <el-table-column
		      prop=;jobName;
		      label=;任务名称;
		      sortable
		      show-overflow-tooltip>
		    </el-table-column>
		    
		    <el-table-column
		      prop=;jobGroupName;
		      label=;任务所在组;
		      sortable>
		    </el-table-column>
		    
   		    <el-table-column
		      prop=;jobClassName;
		      label=;任务类名;
		      sortable>
		    </el-table-column>
		    
   		    <el-table-column
		      prop=;triggerName;
		      label=;触发器名称;
		      sortable>
		    </el-table-column>
		    
		    <el-table-column
		      prop=;triggerGroupName;
		      label=;触发器所在组;
		      sortable>
		    </el-table-column>
		    
		    <el-table-column
		      prop=;cronExpression;
		      label=;表达式;
		      sortable>
		    </el-table-column>
		    
		    <el-table-column
		      prop=;timeZone;
		      label=;时区;
		      sortable>
		    </el-table-column>
		    
	        <el-table-column label=;操作; width=;300;>
		      <template scope=;scope;>
		      	<el-button
		          size=;small;
		          type=;warning;
		          ;click=;handlePause(scope.$index, scope.row);>暂停</el-button>
		          
		        <el-button
		          size=;small;
		          type=;info;
		          ;click=;handleResume(scope.$index, scope.row);>恢复</el-button>
		          
		        <el-button
		          size=;small;
		          type=;danger;
		          ;click=;handleDelete(scope.$index, scope.row);>删除</el-button>
		          
		        <el-button
		          size=;small;
		          type=;success;
		          ;click=;handleUpdate(scope.$index, scope.row);>修改</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  
		  <div align=;center;>
			  <el-pagination
			      ;size-change=;handleSizeChange;
			      ;current-change=;handleCurrentChange;
			      :current-page=;currentPage;
			      :page-sizes=;[10, 20, 30, 40];
			      :page-size=;pagesize;
			      layout=;total, sizes, prev, pager, next, jumper;
			      :total=;totalCount;>
			  </el-pagination>
		  </div>
		</div> 
		
		<el-dialog title=;添加任务; :visible.sync=;dialogFormVisible;>
		  <el-form :model=;form;>
		    <el-form-item label=;任务名称; label-width=;120px; style=;width:35%>
		      <el-input v-model=;form.jobName; auto-complete=;off;></el-input>
		    </el-form-item>	    
		    <el-form-item label=;任务分组; label-width=;120px; style=;width:35%>
		      <el-input v-model=;form.jobGroup; auto-complete=;off;></el-input>
		    </el-form-item>
		    <el-form-item label=;表达式; label-width=;120px; style=;width:35%>
		      <el-input v-model=;form.cronExpression; auto-complete=;off;></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot=;footer; class=;dialog-footer;>
		    <el-button ;click=;dialogFormVisible = false;>取 消</el-button>
		    <el-button type=;primary; ;click=;add;>确 定</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog title=;修改任务; :visible.sync=;updateFormVisible;>
		  <el-form :model=;updateform;>
		    <el-form-item label=;表达式; label-width=;120px; style=;width:35%>
		      <el-input v-model=;updateform.cronExpression; auto-complete=;off;></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot=;footer; class=;dialog-footer;>
		    <el-button ;click=;updateFormVisible = false;>取 消</el-button>
		    <el-button type=;primary; ;click=;update;>确 定</el-button>
		  </div>
		</el-dialog>
		
    </div>
	
    <footer align=;center;>
        <p>&copy; Quartz 任务管理</p>
    </footer>

	<script>
	var vue = new Vue({			
			el:;#test;,
		    data: {		  
		    	//表格当前页数据
		    	tableData: [],
		        
		        //请求的URL
		        url:;job/queryjob;,
		        
		        //默认每页数据量
		        pagesize: 10,		        
		        
		        //当前页码
		        currentPage: 1,
		        
		        //查询的页码
		        start: 1,
		        
		        //默认数据总数
		        totalCount: 1000,
		        
		        //添加对话框默认可见性
		        dialogFormVisible: false,
		        
		        //修改对话框默认可见性
		        updateFormVisible: false,
		        
		        //提交的表单
		        form: {
		        	jobName: ;;,
		        	jobGroup: ;;,
		        	cronExpression: ;;,
		          },
		          
		        updateform: {
		        	jobName: ;;,
		        	jobGroup: ;;,
		        	cronExpression: ;;,
		        },
		    },

		    methods: {
		    	
		        //从服务器读取数据
				loadData: function(pageNum, pageSize){					
					this.$http.get(;job/queryjob?; ; ;pageNum=; ;  pageNum ; ;&pageSize=; ; pageSize).then(function(res){
						console.log(res)
                		this.tableData = res.body.JobAndTrigger.list;
                		this.totalCount = res.body.number;
                	},function(){
                  		console.log(;failed;);
                	});					
				},			    		        
				      
		        //单行删除
			    handleDelete: function(index, row) {
					this.$http.post(;job/deletejob;,{;jobClassName;:row.jobName,;jobGroupName;:row.jobGroupName},{emulateJSON: true}).then(function(res){
						this.loadData( this.currentPage, this.pagesize);
		            },function(){
		                console.log(;failed;);
		            });
		        },
		        
		        //暂停任务
		        handlePause: function(index, row){
		        	this.$http.post(;job/pausejob;,{;jobClassName;:row.jobName,;jobGroupName;:row.jobGroupName},{emulateJSON: true}).then(function(res){
						this.loadData( this.currentPage, this.pagesize);
		            },function(){
		                console.log(;failed;);
		            });
		        },
		        
		        //恢复任务
		        handleResume: function(index, row){
		        	this.$http.post(;job/resumejob;,{;jobClassName;:row.jobName,;jobGroupName;:row.jobGroupName},{emulateJSON: true}).then(function(res){
						this.loadData( this.currentPage, this.pagesize);
		            },function(){
		                console.log(;failed;);
		            });
		        },
		        
		        //搜索
		        search: function(){
		        	this.loadData(this.currentPage, this.pagesize);
		        },
		        
		        //弹出对话框
		        handleadd: function(){		                
		            this.dialogFormVisible = true;	              
		        },
		        
		        //添加
		        add: function(){
		        	this.$http.post(;job/addjob;,{;jobClassName;:this.form.jobName,;jobGroupName;:this.form.jobGroup,;cronExpression;:this.form.cronExpression},{emulateJSON: true}).then(function(res){
        				this.loadData(this.currentPage, this.pagesize);
        				this.dialogFormVisible = false;
                    },function(){
                        console.log(;failed;);
                    });
		        },
		        
		        //更新
		        handleUpdate: function(index, row){
		        	console.log(row)
		        	this.updateFormVisible = true;
		        	this.updateform.jobName = row.jobClassName;
		        	this.updateform.jobGroup = row.jobGroupName;
		        },
		        
		        //更新任务
		        update: function(){
		        	this.$http.post
		        	(;job/reschedulejob;,
		        			{;jobClassName;:this.updateform.jobName,
		        			 ;jobGroupName;:this.updateform.jobGroup,
		        			 ;cronExpression;:this.updateform.cronExpression
		        			 },{emulateJSON: true}
		        	).then(function(res){
		        		this.loadData(this.currentPage, this.pagesize);
        				this.updateFormVisible = false;
		        	},function(){
                        console.log(;failed;);
                    });
		    
		        },
		      
		        //每页显示数据量变更
		        handleSizeChange: function(val) {
		            this.pagesize = val;
		            this.loadData(this.currentPage, this.pagesize);
		        },
		        
		        //页码变更
		        handleCurrentChange: function(val) {
		            this.currentPage = val;
		            this.loadData(this.currentPage, this.pagesize);
		        },	      
		        		        
		    },	    
		    
		    
		  });
	
		  //载入数据
    	  vue.loadData(vue.currentPage, vue.pagesize);
	</script>  
	
</body>
</html>
复制代码