创建一个jenkins-client-java + Vue前端操作数据看板的项目

您需要完成以下步骤来创建一个Jenkins + Vue的操作数据看板项目：

1. 创建一个Maven项目

   mvn archetype:generate -DgroupId=com.example -DartifactId=jenkins-dashboard -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

2. 添加以下依赖项到pom.xml文件中：

   <dependencies>
     <dependency>
       <groupId>com.offbytwo.jenkins</groupId>
       <artifactId>jenkins-client</artifactId>
       <version>0.3.10</version>
     </dependency>
     <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
     </dependency>
   </dependencies>

3. 创建一个名为“JenkinsClientService”的Java类，并添加以下代码：

   import com.offbytwo.jenkins.JenkinsServer;
   import com.offbytwo.jenkins.model.Build;
   import com.offbytwo.jenkins.model.BuildResult;
   import com.offbytwo.jenkins.model.BuildWithDetails;
   import com.offbytwo.jenkins.model.Job;
   import org.springframework.stereotype.Service;

   import java.io.IOException;
   import java.net.URI;
   import java.net.URISyntaxException;
   import java.util.List;
   import java.util.Map;
   import java.util.stream.Collectors;

   @Service
   public class JenkinsClientService {
     private JenkinsServer jenkins;

     public JenkinsClientService() throws URISyntaxException {
       jenkins = new JenkinsServer(new URI("http://localhost:8080"), "admin", "admin");
     }

     public List<String> getJobs() throws IOException {
       Map<String, Job> jobs = jenkins.getJobs();
       return jobs.values().stream().map(Job::getName).collect(Collectors.toList());
     }

     public BuildWithDetails getLastBuild(String jobName) throws IOException {
       Job job = jenkins.getJob(jobName);
       Build lastBuild = job.getLastBuild();
       return lastBuild.details();
     }

     public BuildResult getBuildResult(String jobName, int buildNumber) throws IOException {
       Job job = jenkins.getJob(jobName);
       Build build = job.getBuildByNumber(buildNumber);
       return build.details().getResult();
     }
   }

请将“http://localhost:8080”，“admin”和“admin”替换为您的Jenkins服务器URL，用户名和密码。

4. 创建一个名为“JenkinsController”的Java类，并添加以下代码：

   import com.offbytwo.jenkins.model.BuildResult;
   import com.offbytwo.jenkins.model.BuildWithDetails;
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.GetMapping;
   import org.springframework.web.bind.annotation.PathVariable;
   import org.springframework.web.bind.annotation.RestController;

   import java.io.IOException;
   import java.util.List;

   @RestController
   public class JenkinsController {
     @Autowired
     private JenkinsClientService jenkinsClient;

     @GetMapping("/jobs")
     public List<String> getJobs() throws IOException {
       return jenkinsClient.getJobs();
     }

     @GetMapping("/jobs/{jobName}/lastBuild")
     public BuildWithDetails getLastBuild(@PathVariable String jobName) throws IOException {
       return jenkinsClient.getLastBuild(jobName);
     }

     @GetMapping("/jobs/{jobName}/builds/{buildNumber}/result")
     public BuildResult getBuildResult(@PathVariable String jobName, @PathVariable int buildNumber) throws IOException {
       return jenkinsClient.getBuildResult(jobName, buildNumber);
     }
   }

5. 创建一个名为“app.js”的Vue文件，并添加以下代码：

   <template>
     <div id="app">
       <h1>Jenkins Dashboard</h1>
       <ul>
         <li v-for="job in jobs" :key="job">
           <h2>{{ job }}</h2>
           <p>Last build status: {{ getLastBuildStatus(job) }}</p>
           <button @click="buildJob(job)">Build now</button>
         </li>
       </ul>
     </div>
   </template>

   <script>
   import axios from 'axios';

   export default {
     name: 'app',
     data() {
       return {
         jobs: []
       }
     },
     mounted() {
       axios.get('/jobs')
         .then(response => {
           this.jobs = response.data;
         });
     },
     methods: {
       getLastBuildStatus(jobName) {
         axios.get(`/jobs/${jobName}/lastBuild`)
           .then(response => {
             return response.data.result;
           });
       },
       buildJob(jobName) {
         axios.post(`/jobs/${jobName}/build`)
           .then(response => {
             console.log(response.data);
           });
       }
     }
   }
   </script>

6. 创建一个名为“index.html”的文件并添加以下代码：

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Jenkins Dashboard</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="app.js"></script>
   </body>
   </html>

7. 创建一个名为“App.java”的Java类，并添加以下代码：

   import org.springframework.boot.SpringApplication;
   import org.springframework.boot.autoconfigure.SpringBootApplication;

   @SpringBootApplication
   public class App {
     public static void main(String[] args) {
       SpringApplication.run(App.class, args);
     }
   }

8. 运行以下命令启动应用程序：

   mvn spring-boot:run

现在，您已经创建了一个Jenkins + Vue操作数据看板项目。您可以通过在浏览器中打开“http://localhost:8080”来查看该应用程序。