Merge pull request #919 from vvzxy/develop

Auto_Cluster_Deployer:add fronted code

eBPF_Supermarket/Auto_Cluster_Deployer/README.md

@@ -1,5 +1,3 @@
-[TOC]
-
 # Linux服务器集群的应用软件自动化部署管理工具
 
 ## 一、项目背景

eBPF_Supermarket/Auto_Cluster_Deployer/fronted/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  components: {
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>

eBPF_Supermarket/Auto_Cluster_Deployer/fronted/src/main.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import App from './App.vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import VueRouter from 'vue-router'
+import router from './router'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
+import '@fortawesome/fontawesome-free/css/all.css';
+
+
+// 关闭 Vue 的生产提示
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(ElementUI) // element ui 插件
+Vue.use(VueRouter) // 路由插件
+Vue.use(VueAxios, axios) // 使用 axios 插件
+
+// 创建 Vue 实例对象
+new Vue({
+  render: h => h(App),  // render 函数将帮助解析模板，传入的参数 h 为一个函数，该函数可用来解析 App 这个组件
+  router,
+}).$mount('#app') // 将 App.vue 组件挂载到 index.html 中的 id 为 app 的 div 标签上

eBPF_Supermarket/Auto_Cluster_Deployer/fronted/src/router/index.js

@@ -0,0 +1,81 @@
+import VueRouter from "vue-router";
+import Cookies from "js-cookie";
+
+// 引入组件
+import Login from '../views/login/Login.vue';
+import Register from '../views/register/Register.vue';
+import Home from '../views/home/Home.vue';
+import ServeManage from '../views/home/servemanage/ServeManage.vue';
+import ServesManage from '../views/home/servesmanage/ServesManage.vue';
+import DeploymentPackageManage from "../views/home/deploymentpackagemanage/DeploymentPackageManage.vue";
+import DeploymentTaskManage from "../views/home/deploymenttaskmanage/DeploymentTaskManage.vue";
+import ChangePassword from "../views/changepassword/ChangePassword.vue"
+import ServerStatusOverview from "@/views/home/serverstatusoverview/ServerStatusOverview.vue";
+// 创建路由实例
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      redirect: '/login'
+    },
+    {
+      path: '/login',
+      component: Login
+    },
+    {
+      path: '/register',
+      component: Register
+    },
+    {
+      path: '/change_password',
+      component: ChangePassword
+    },
+    {
+      path: '/home',
+      component: Home,
+      children: [
+        {
+          path: '',
+          redirect: 'serves'
+        },
+        {
+          path: 'serves',
+          component: ServeManage
+        },
+        {
+          path: 'server_groups',
+          component: ServesManage
+        },
+        {
+          path: 'deployment_packages',
+          component: DeploymentPackageManage
+        },
+        {
+          path: 'deployment_tasks',
+          component: DeploymentTaskManage
+        },
+        {
+          path: 'server_group_members',
+          component: ServerStatusOverview
+        },
+      ]
+    }
+  ]
+});
+
+// 全局前置守卫
+router.beforeEach((to, from, next) => {
+  const token = Cookies.get('token'); // 获取存储的 token
+
+  if (to.path === '/login' || to.path === '/register') {
+    next(); // 登录或注册页面无需验证
+  } else if (token) {
+    next(); // 如果 token 存在，允许导航
+  } else {
+    next('/login'); // 否则重定向到登录页面
+  }
+});
+
+
+export default router;

eBPF_Supermarket/Auto_Cluster_Deployer/fronted/src/views/changepassword/ChangePassword.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="change-password">
+    <el-card class="change-password-card">
+      <h2>修改密码</h2>
+      <el-form :model="form" :rules="rules" label-position="left" label-width="80px">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" id="username" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="当前密码" prop="old_password">
+          <el-input
+            v-model="form.old_password"
+            :type="passwordType"
+            id="old_password"
+            autocomplete="off"
+          >
+            <template #append>
+              <el-button
+                @click="togglePasswordVisibility"
+                class="password-toggle"
+                :icon="passwordType === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash'"
+              ></el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="新密码" prop="new_password">
+          <el-input
+            v-model="form.new_password"
+            :type="passwordType"
+            id="new_password"
+            autocomplete="off"
+          >
+            <template #append>
+              <el-button
+                @click="togglePasswordVisibility"
+                class="password-toggle"
+                :icon="passwordType === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash'"
+              ></el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleSubmit" :loading="loading">提交</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+<script>
+import axios from "axios";
+
+export default {
+  name: "ChangePasswordComponent",
+  data() {
+    return {
+      form: {
+        username: "",
+        old_password: "",
+        new_password: "",
+      },
+      loading: false,
+      passwordType: "password", // 控制密码的显示和隐藏
+    };
+  },
+  computed: {
+    rules() {
+      return {
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        old_password: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
+        new_password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+      };
+    }
+  },
+  methods: {
+    togglePasswordVisibility() {
+      this.passwordType = this.passwordType === "password" ? "text" : "password";
+    },
+    async handleSubmit() {
+      this.loading = true;
+      try {
+        const response = await axios.post("/api/change_password", {
+          username: this.form.username,
+          old_password: this.form.old_password,
+          new_password: this.form.new_password
+        });
+        this.$message.success("密码修改成功");
+        this.$router.push("/login");
+      } catch (error) {
+        if (error.response && error.response.status === 401) {
+          this.$message.error('当前密码错误');
+        } else {
+          this.$message.error('修改失败，请重试');
+        }
+        console.error(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    goBack() {
+      this.$router.push("/home");
+    }
+  }
+};
+</script>
+<style scoped>
+.change-password-card {
+  width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.password-toggle {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  color: #409EFF;
+}
+
+.password-toggle:hover {
+  color: #66b1ff;
+}
+
+.change-password {
+  margin-top: 100px;
+}
+</style>