首先，您需要
创建一个
Vue项目并安装必要的依赖。您可以按照以下步骤进行操作：
1.
打开终端并进入您要
创建Vue项目的
目录。
2.
运行以下命令
创建一个新的
Vue项目：
```
vue create my-jenkins-app
```
3. 安装axios和
vue-router依赖：
```
cd my-jenkins-app
npm install axios
vue-router --save
```
4. 在src
目录下
创建一个名为“api”的
文件夹，并
创建一个名为“jenkins.js”的
文件。
5. 在jenkins.js
文件中添加以下代码：
```
import axios from 'axios';
const API_URL = 'http://your-jenkins-server-url/api';
export default {
getJobs() {
return axios.get(`${API_URL}/json`);
},
buildJob(jobName) {
return axios.post(`${API_URL}/job/${jobName}/build`);
}
}
```
请将“your-jenkins-server-url”替换为您的Jenkins服务器的URL。
6. 在src
目录下
创建一个名为“views”的
文件夹，并
创建一个名为“Jobs.
vue”的
文件。
7. 在Jobs.
vue文件中添加以下代码：
```
<template>
<div>
<h1>Jobs</h1>
<ul>
<
li v-for="job in jobs" :key="job.name">
<router-
link :to="{ name: 'job', params: { jobName: job.name } }">{{ job.name }}</router-
link>
<button @c
lick="buildJob(job.name)">Build</button>
</
li>
</ul>
</div>
</template>
<script>
import jenkinsApi from '@/api/jenkins';
export default {
name: 'Jobs',
data() {
return {
jobs: []
};
},
created() {
jenkinsApi.getJobs()
.then(response => {
this.jobs = response.data.jobs;
});
},
methods: {
buildJob(jobName) {
jenkinsApi.buildJob(jobName);
}
}
};
</script>
```
8. 在src
目录下
创建一个名为“Job.
vue”的
文件。
9. 在Job.
vue文件中添加以下代码：
```
<template>
<div>
<h1>{{ jobName }}</h1>
<button @c
lick="buildJob">Build</button>
</div>
</template>
<script>
import jenkinsApi from '@/api/jenkins';
export default {
name: 'Job',
props: {
jobName: {
type: String,
required: true
}
},
methods: {
buildJob() {
jenkinsApi.buildJob(this.jobName);
}
}
};
</script>
```
10. 在src
目录下
创建一个名为“router.js”的
文件，并添加以下代码：
```
import
Vue from '
vue';
import Router from '
vue-router';
import Jobs from '@/views/Jobs.
vue';
import Job from '@/views/Job.
vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'jobs',
component: Jobs
},
{
path: '/job/:jobName',
name: 'job',
component: Job,
props: true
}
]
});
```
11. 在src
目录下
创建一个名为“main.js”的
文件，并添加以下代码：
```
import
Vue from '
vue';
import App from './App.
vue';
import router from './router';
Vue.config.productionTip = false;
new
Vue({
router,
render: h => h(App),
}).$mount('#app');
```
12. 在src
目录下
创建一个名为“App.
vue”的
文件，并添加以下代码：
```
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
```
现在，您已经
创建了一个使用axios调用Jenkins API的
Vue应用程序。您可以通过
运行以下命令启动该应用程序：
```
npm run serve
```
然后，在
浏览器中
打开“http://localhost:8080”查看该应用程序。
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
