use vue
This commit is contained in:
parent
fe433600ae
commit
70a97be750
24
main.go
24
main.go
|
|
@ -4,7 +4,6 @@ import (
|
|||
"embed"
|
||||
"github.com/gin-gonic/gin"
|
||||
log "github.com/sirupsen/logrus"
|
||||
"html/template"
|
||||
"io/fs"
|
||||
m "k8s-manager/src"
|
||||
"net/http"
|
||||
|
|
@ -18,17 +17,17 @@ func main() {
|
|||
|
||||
r := gin.Default()
|
||||
|
||||
r.SetFuncMap(template.FuncMap{
|
||||
"inc": m.Inc,
|
||||
})
|
||||
|
||||
tmp := template.Must(template.New("").
|
||||
Funcs(template.FuncMap{
|
||||
"inc": m.Inc,
|
||||
}).
|
||||
ParseFS(f, "template/*"))
|
||||
|
||||
r.SetHTMLTemplate(tmp)
|
||||
//r.SetFuncMap(template.FuncMap{
|
||||
// "inc": m.Inc,
|
||||
//})
|
||||
//
|
||||
//tmp := template.Must(template.New("").
|
||||
// Funcs(template.FuncMap{
|
||||
// "inc": m.Inc,
|
||||
// }).
|
||||
// ParseFS(f, "template/*"))
|
||||
//
|
||||
//r.SetHTMLTemplate(tmp)
|
||||
fp, _ := fs.Sub(f, "static")
|
||||
r.StaticFS("/static", http.FS(fp))
|
||||
|
||||
|
|
@ -42,6 +41,7 @@ func main() {
|
|||
r.DELETE("/dep", m.JWTAuthMiddleware, m.CreateDeleteDeployment)
|
||||
|
||||
r.GET("/login/:username", Test)
|
||||
r.GET("/username", m.JWTAuthMiddleware, m.GetUsername)
|
||||
err := r.Run(":8000")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import (
|
|||
"encoding/json"
|
||||
"github.com/gin-gonic/gin"
|
||||
log "github.com/sirupsen/logrus"
|
||||
"github.com/thoas/go-funk"
|
||||
"net/http"
|
||||
"strings"
|
||||
)
|
||||
|
|
@ -49,18 +48,20 @@ func statusString(a *AppViewModel) string {
|
|||
}
|
||||
|
||||
func AppPage(c *gin.Context) {
|
||||
username := c.MustGet("username").(string)
|
||||
appsvm := funk.Map(GetApps(username), func(a AppModel) AppViewModel { return AppViewModel{AppModel: &a} }).([]AppViewModel)
|
||||
for i := range appsvm {
|
||||
a := &appsvm[i]
|
||||
a.Status = statusString(a)
|
||||
a.ServiceDisplayName = a.ServiceName()
|
||||
}
|
||||
vm := &AppsViewModel{
|
||||
Username: username,
|
||||
Apps: appsvm,
|
||||
}
|
||||
c.HTML(http.StatusOK, "app_view.html", vm)
|
||||
//username := c.MustGet("username").(string)
|
||||
//appsvm := funk.Map(GetApps(username), func(a AppModel) AppViewModel { return AppViewModel{AppModel: &a} }).([]AppViewModel)
|
||||
//for i := range appsvm {
|
||||
// a := &appsvm[i]
|
||||
// a.Status = statusString(a)
|
||||
// a.ServiceDisplayName = a.ServiceName()
|
||||
//}
|
||||
//vm := &AppsViewModel{
|
||||
// Username: username,
|
||||
// Apps: appsvm,
|
||||
//}
|
||||
|
||||
c.File("template/app_view.html")
|
||||
// c.HTML(http.StatusOK, "app_view.html", vm)
|
||||
}
|
||||
|
||||
func AppMiddleware(c *gin.Context) {
|
||||
|
|
@ -109,3 +110,8 @@ func GetAppsController(c *gin.Context) {
|
|||
apps := GetApps(username)
|
||||
c.JSON(http.StatusOK, apps)
|
||||
}
|
||||
|
||||
func GetUsername(c *gin.Context) {
|
||||
username := c.MustGet("username").(string)
|
||||
c.JSON(http.StatusOK, gin.H{"username": username})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,21 +4,22 @@
|
|||
<link href="static/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="static/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="static/js/axios.min.js"></script>
|
||||
<script src="static/js/vue.global.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<title>应用管理</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="container" id="app">
|
||||
|
||||
<h1>应用管理页面</h1>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="d-flex">
|
||||
<div class="align-self-start">用户名：{{ .Username }}</div>
|
||||
<!-- <div class="align-self-start">用户名：{{ .Username }}</div>-->
|
||||
<div class="ms-auto align-self-end">
|
||||
<button class="btn btn-success" onclick="showModal('')">添加应用</button>
|
||||
<button class="btn btn-success" @click="showModal(null)">添加应用</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -40,32 +41,29 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $i, $v := .Apps }}
|
||||
<tr id="app-list-{{ $v.Id }}">
|
||||
<td> {{ inc $i }}</td>
|
||||
<td class="app-field-id" style="display: none;"> {{ $v.Id }}</td>
|
||||
<td class="app-field-name"> {{ $v.AppName }}</td>
|
||||
<td class="app-field-comment"> {{ $v.Comment }}</td>
|
||||
<td class="app-field-image"> {{ $v.Image }}</td>
|
||||
<td class="app-field-cmd"> {{ $v.Command }}</td>
|
||||
<td class="app-field-env"> {{ $v.Env }}</td>
|
||||
<td class="app-field-status" id="app-status-{{ $v.Id }}"> {{ $v.Status }}</td>
|
||||
<td class="app-field-svc"> {{ $v.ServiceDisplayName }}</td>
|
||||
<td class="app-field-ports"> {{ $v.Ports }}</td>
|
||||
<tr v-for="(item, index) in apps">
|
||||
<td> {{ index + 1 }}</td>
|
||||
<td> {{ item.AppName }}</td>
|
||||
<td> {{ item.Comment }}</td>
|
||||
<td> {{ item.Image }}</td>
|
||||
<td> {{ item.Command }}</td>
|
||||
<td> {{ item.Env }}</td>
|
||||
<td> {{ item.Status }}</td>
|
||||
<td> {{ item.ServiceDisplayName }}</td>
|
||||
<td> {{ item.Ports }}</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success" onclick="startApp('{{$v.Id}}')">启动</button>
|
||||
<button class="btn btn-dark" onclick="stopApp('{{$v.Id}}')">停止</button>
|
||||
<button class="btn btn-primary" onclick="showModal('app-list-{{ $v.Id }}')">修改</button>
|
||||
<button class="btn btn-danger" onclick="deleteApp('{{ $v.Id }}')">删除</button>
|
||||
<button class="btn btn-success" @click="startApp(item)">启动</button>
|
||||
<button class="btn btn-dark" @click="stopApp(item)">停止</button>
|
||||
<button class="btn btn-primary" @click="showModal(item)">修改</button>
|
||||
<button class="btn btn-danger" @click="deleteApp(item)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr>
|
||||
|
||||
<tr v-if="apps.length == 0">
|
||||
<td colspan="7" style="text-align: center;">点击+按钮添加应用</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
|
@ -80,156 +78,142 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<input type="text" id="app-id" class="form-control" style="display: none;" disabled/>
|
||||
<input type="text" id="app-username" class="form-control" style="display: none;" disabled
|
||||
value="{{ .Username }}"/>
|
||||
|
||||
<div class="row">
|
||||
<label for="app-name" class="form-label">应用名</label>
|
||||
<input type="text" id="app-name" class="form-control"
|
||||
<input type="text" id="app-name" class="form-control" v-model="selectApp.AppName"
|
||||
placeholder="只能为字母、数字和下划线"/>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="app-image" class="form-label">镜像</label>
|
||||
<input type="text" id="app-image" class="form-control" placeholder="Docker镜像名"/>
|
||||
<input type="text" id="app-image" class="form-control" v-model="selectApp.Image"
|
||||
placeholder="Docker镜像名"/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="app-cmd" class="form-label">启动命令</label>
|
||||
<input type="text" id="app-cmd" class="form-control" placeholder="启动命令，可选"/>
|
||||
<input type="text" id="app-cmd" class="form-control" v-model="selectApp.Command"
|
||||
placeholder="启动命令，可选"/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="app-env" class="form-label">环境变量</label>
|
||||
<input type="text" id="app-env" class="form-control" placeholder="环境变量，可选"/>
|
||||
<input type="text" id="app-env" class="form-control" v-model="selectApp.Env"
|
||||
placeholder="环境变量，可选"/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="app-svc" class="form-label">服务名</label>
|
||||
<input type="text" id="app-svc" class="form-control" placeholder="服务名，可选"/>
|
||||
<input type="text" id="app-svc" class="form-control" v-model="selectApp.SvcName"
|
||||
placeholder="服务名，可选"/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<label for="app-ports" class="form-label">端口号</label>
|
||||
<input type="text" id="app-ports" class="form-control" placeholder="端口号，多个端口以逗号分隔"/>
|
||||
<input type="text" id="app-ports" class="form-control" v-model="selectApp.Ports"
|
||||
placeholder="端口号，多个端口以逗号分隔"/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label for="app-comment" class="form-label">描述</label>
|
||||
<textarea type="text" id="app-comment" class="form-control" placeholder="应用描述"></textarea>
|
||||
<textarea type="text" id="app-comment" class="form-control" v-model="selectApp.Comment"
|
||||
placeholder="应用描述"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="updateApp()">保存
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="updateApp()">保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="toast d-flex align-items-center top-0 end-0" id="success-toast">-->
|
||||
<!-- <div class="toast-body">-->
|
||||
<!-- <p id="toast-content"></p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="toast d-flex align-items-center top-0 end-0" id="success-toast">-->
|
||||
<!-- <div class="toast-body">-->
|
||||
<!-- <p id="toast-content"></p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function updateModalField(classString, value) {
|
||||
const classArray = classString.split(' ')
|
||||
for (let c of classArray) {
|
||||
if (c.startsWith("app-field-")) {
|
||||
const k = c.replace("app-field-", "app-")
|
||||
const ele = document.getElementById(k)
|
||||
if (!ele) {
|
||||
console.log("Cannot fine element ", k)
|
||||
} else {
|
||||
ele.value = value
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearModalField() {
|
||||
const id_list = ["app-id", "app-name", "app-image", "app-cmd", "app-env", "app-comment", "app-svc", "app-ports"]
|
||||
for (const k of id_list) {
|
||||
document.getElementById(k).value = ""
|
||||
const {createApp} = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
apps: [],
|
||||
blankApp: {},
|
||||
selectApp: {
|
||||
Id: "",
|
||||
AppName: "",
|
||||
UserName: "",
|
||||
Image: "",
|
||||
Command: "",
|
||||
Comment: "",
|
||||
Env: "",
|
||||
SvcName: "",
|
||||
Ports: "",
|
||||
}
|
||||
}
|
||||
|
||||
function showModal(id) {
|
||||
if (id) {
|
||||
const list_tr = document.getElementById(id)
|
||||
const values = list_tr.children
|
||||
for (let a of values) {
|
||||
updateModalField(a.className, a.innerHTML.trim())
|
||||
},
|
||||
methods: {
|
||||
showModal(a) {
|
||||
if (!a) {
|
||||
a = JSON.parse(JSON.stringify(this.blankApp))
|
||||
}
|
||||
} else {
|
||||
clearModalField()
|
||||
}
|
||||
|
||||
this.selectApp = a;
|
||||
(new bootstrap.Modal("#edit-modal")).show()
|
||||
}
|
||||
|
||||
function showToast(e) {
|
||||
// document.getElementById("toast-content").innerHTML = e.msg
|
||||
// t = new bootstrap.Toast(document.getElementById("success-toast"))
|
||||
// console.log(t)
|
||||
// t.show()
|
||||
}
|
||||
|
||||
function updateApp() {
|
||||
const id_list = ["app-id", "app-name", "app-username", "app-image", "app-cmd", "app-env", "app-comment", "app-svc", "app-ports"]
|
||||
const json_key_list = ["Id", "AppName", "UserName", "Image", "Command", "Env", "Comment", "SvcName", "Ports"]
|
||||
let appData = {}
|
||||
for (let k in id_list) {
|
||||
appData[json_key_list[k]] = document.getElementById(id_list[k]).value
|
||||
}
|
||||
if (appData['Id']) {
|
||||
appData['Id'] = parseInt(appData['Id'])
|
||||
axios.put("app", appData).then(e => {
|
||||
showToast(e.data)
|
||||
},
|
||||
startApp(item) {
|
||||
axios.post("dep?id=" + item.Id).then(e => {
|
||||
console.log(e.data)
|
||||
})
|
||||
},
|
||||
deleteApp(app) {
|
||||
axios.delete("app", {
|
||||
data: app
|
||||
}).then(e => {
|
||||
console.log(e.data)
|
||||
})
|
||||
},
|
||||
stopApp(app) {
|
||||
axios.delete("dep?id=" + app.Id).then(e => {
|
||||
console.log(e.data)
|
||||
})
|
||||
},
|
||||
updateApp() {
|
||||
let app = this.selectApp
|
||||
if (app.Id) {
|
||||
axios.put("app", app).then(e => {
|
||||
console.log(e)
|
||||
})
|
||||
} else {
|
||||
appData['Id'] = null
|
||||
axios.post("app", appData).then(e => {
|
||||
app.Id = null
|
||||
app.UserName = this.username
|
||||
axios.post("app", app).then(e => {
|
||||
console.log(e)
|
||||
showToast(e.data)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deleteApp(id) {
|
||||
axios.delete("app", {
|
||||
"data": {
|
||||
Id: parseInt(id),
|
||||
Username: document.getElementById("app-username").value
|
||||
}
|
||||
}).then(e => {
|
||||
console.log(e.data)
|
||||
showToast(e.data)
|
||||
},
|
||||
mounted() {
|
||||
this.blankApp = JSON.parse(JSON.stringify(this.selectApp))
|
||||
axios.get("username").then(r => {
|
||||
this.username = r.data.username
|
||||
})
|
||||
}
|
||||
|
||||
function startApp(id) {
|
||||
axios.post("dep?id=" + id).then(e => {
|
||||
console.log(e.data)
|
||||
axios.get("apps").then(response => {
|
||||
this.apps = response.data
|
||||
})
|
||||
}
|
||||
|
||||
function stopApp(id) {
|
||||
axios.delete("dep?id=" + id).then(e => {
|
||||
console.log(e.data)
|
||||
})
|
||||
}
|
||||
}).mount("#app")
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue