complete

src/api/settings/userSetting.js

@@ -0,0 +1,18 @@
+import request from "@/utils/request";
+
+export default {
+  getUserConfig() {
+    return request({
+      url: "/getUserConfig",
+      method: "GET",
+    });
+  },
+
+  setUserConfig(config) {
+    return request({
+      url: "/setUserConfig",
+      method: "POST",
+      data: config,
+    });
+  },
+};

src/components/Layout/index.vue

@@ -3,17 +3,13 @@
     <!-- Header 区域 -->
     <el-header>
       <el-row>
-        <el-menu :default-active="activeMenu"
-          background-color="#545c64"
-          text-color="#fff"
-          active-text-color="#ffd04b"
+        <el-menu :default-active="activeMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
           mode="horizontal">
-          <el-menu-item index="previews"
-            @click="handleNavigation('/previews')">预览</el-menu-item>
-          <el-menu-item index="settings"
-            @click="handleNavigation('/settings')">配置</el-menu-item>
-          <el-menu-item index="about"
-            @click="handleNavigation('/about')">关于</el-menu-item>
+          <!-- <el-menu-item index="previews"
+            @click="handleNavigation('/previews')">预览</el-menu-item> -->
+          <el-menu-item index="settings" @click="handleNavigation('/settings')">配置</el-menu-item>
+          <!-- <el-menu-item index="about"
+            @click="handleNavigation('/about')">关于</el-menu-item> -->
         </el-menu>
       </el-row>
     </el-header>

src/components/Login/login.vue

@@ -1,47 +1,30 @@
 <template>
   <div id="login-container">
-    <el-card class="login-card"
-      shadow="always">
-      <div slot="header"
-        class="clearfix">
+    <el-card class="login-card" shadow="always">
+      <div slot="header" class="clearfix">
         <span>登录</span>
       </div>
       <div class="login-form">
-        <el-form :model="form"
-          ref="form"
-          label-width="80px">
+        <el-form :model="form" ref="form" label-width="80px">
           <el-form-item label="用户名">
-            <el-input v-model="form.username"
-              autocomplete="off"
-              @keydown.enter="handleLogin"></el-input>
+            <el-input v-model="form.username" autocomplete="off" @keydown.enter="handleLogin"></el-input>
           </el-form-item>
           <el-form-item label="密码">
-            <el-input v-model="form.password"
-              type="password"
-              autocomplete="off"
+            <el-input v-model="form.password" type="password" autocomplete="off"
               @keyup.enter.native="handleLogin"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary"
-              @click="handleLogin">登录</el-button>
+            <el-button type="primary" @click="handleLogin">登录</el-button>
           </el-form-item>
         </el-form>
       </div>
-      <el-dialog title="提示"
-        :visible.sync="dialogVisible"
-        width="30%"
-        @keyup.enter.native="dialogVisible = false">
-        <span>用户名或密码错误，请重新输入。</span>
-        <span slot="footer"
-          class="dialog-footer">
-          <el-button @click="dialogVisible = false">确定</el-button>
-        </span>
-      </el-dialog>
     </el-card>
   </div>
 </template>
 
 <script>
+import api from "@/api/settings/userSetting";
+
 export default {
   data() {
     return {
@@ -49,13 +32,23 @@ export default {
         username: '',
         password: ''
       },
-      dialogVisible: false
+      conf: {}
     };
   },
+  created() {
+    this.getUserConfig();
+  },
   methods: {
+    getUserConfig() {
+      api.getUserConfig().then(res => {
+        this.conf = res.conf;
+      })
+    },
+
     handleLogin() {
       const { username, password } = this.form;
-      if (username === 'admin' && password === 'admin') {
+      const conf = this.conf;
+      if (username === conf.username && password === conf.password) {
         const loading = this.$loading({
           lock: true,
           text: 'Loading',
@@ -64,11 +57,12 @@ export default {
         });
         setTimeout(() => {
           loading.close();
-          this.$router.push({ name: 'previews' }); // 登录成功，跳转到主页
+          sessionStorage.setItem("isFromLoginPage", "true");
+          this.$router.push("/settings");
 
         }, 1000);
       } else {
-        this.dialogVisible = true; // 显示错误提示
+        this.$message.error('用户名或密码错误');
       }
     }
   }

src/router/index.js

@@ -2,9 +2,17 @@ import Layout from "@/components/Layout/index.vue";
 import Login from "@/components/Login/login.vue";
 import Vue from "vue";
 import Router from "vue-router";
+
+const originalPush = Router.prototype.push;
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch((err) => {
+    if (err.name !== "NavigationDuplicated") throw err;
+  });
+};
+
 Vue.use(Router);
 
-export default new Router({
+const router = new Router({
   mode: "history",
   routes: [
     {
@@ -14,22 +22,13 @@ export default new Router({
     {
       path: "/login",
       name: "Login",
-      component: Login, // 登录页面
-    },
-    {
-      path: "/previews",
-      component: Layout, // 使用 Layout 布局组件
-      children: [
-        {
-          path: "",
-          name: "previews",
-          component: () => import("@/views/previews/index.vue"),
-        },
-      ],
+      component: Login,
+      meta: { isLoginPage: true }, // 标记为登录页
     },
     {
       path: "/settings",
-      component: Layout, // 使用 Layout 布局组件
+      component: Layout,
+      meta: { isLoginPage: false }, // 非登录页
       children: [
         {
           path: "",
@@ -38,20 +37,35 @@ export default new Router({
         },
       ],
     },
-    {
-      path: "/about",
-      component: Layout, // 使用 Layout 布局组件
-      children: [
-        {
-          path: "",
-          name: "about",
-          component: () => import("@/views/about/index.vue"),
-        },
-      ],
-    },
     {
       path: "*",
-      redirect: "/login", // 匹配所有未定义的路由，重定向到登录页
+      redirect: "/login", // 未定义路由跳登录
     },
   ],
 });
+
+// 定义合法跳转的标记键名
+const LEGAL_JUMP_FLAG = "isFromLoginPage";
+
+router.beforeEach((to, from, next) => {
+  document.title = to.meta.title || "默认标题";
+
+  // 1. 访问登录页：清空标记（重置状态）
+  if (to.meta.isLoginPage) {
+    sessionStorage.removeItem(LEGAL_JUMP_FLAG);
+    next();
+    return;
+  }
+
+  // 2. 访问非登录页：校验是否从登录页合法跳转
+  const isFromLogin = sessionStorage.getItem(LEGAL_JUMP_FLAG) === "true";
+  if (isFromLogin) {
+    // 合法跳转：正常访问
+    next();
+  } else {
+    // 非法访问（直接输入URL）：强制跳登录页
+    next("/login");
+  }
+});
+
+export default router;

src/utils/request.js

@@ -8,7 +8,7 @@ import axios from "axios";
   * 不同的接口配置不同（有的要token,有的不要token）
 */
 const request = axios.create({
-  baseURL: "http://192.168.1.105:5000",
+  baseURL: "/api",
   timeout: 5000, // 请求超时：当5s没有响应就会结束请求
 });
 

src/views/settings/components/netSetting.vue

@@ -31,8 +31,7 @@
 
 
     <el-row class="button-row">
-      <el-button @click="setConfig"
-        type="primary">保存设置 </el-button>
+      <el-button @click="setConfig" type="primary">保存设置 </el-button>
 
       <el-button @click="getConfig">重置设置</el-button>
     </el-row>
@@ -53,7 +52,7 @@ export default {
   data() {
     return {
       configForm: {
-        conf: []
+        conf: {}
       },
     }
   },
@@ -67,6 +66,8 @@ export default {
     getConfig() {
       api.getConfig().then((res) => {
         this.configForm = res
+        console.log(res);
+
       })
     },
     setConfig() {

src/views/settings/components/sysSetting.vue

@@ -2,50 +2,35 @@
   <div class="sysSetting">
     <h3 class="settings_title">系统重启</h3>
     <el-divider></el-divider>
-    <el-button type="primary"
-      plain
-      @click="restart">
+    <el-button type="primary" plain @click="restart">
       点击重启<i class="el-icon-refresh el-icon--right"></i>
     </el-button>
 
     <h3 class="settings_title">设备配置</h3>
     <el-divider></el-divider>
 
-    <div class="item"
-      style="margin-bottom: 25px;">
+    <div class="item" style="margin-bottom: 25px;">
       <span class="item_title">设备ID:</span>
-      <el-input placeholder="请输入设备ID"
-        v-model="configForm.conf.deviceid"
-        clearable
-        class="item_content">
+      <el-input placeholder="请输入设备ID" v-model="configForm.conf.deviceid" clearable class="item_content">
       </el-input>
     </div>
 
-    <div class="item"
-      style="margin-bottom: 25px;">
+    <div class="item" style="margin-bottom: 25px;">
       <span class="item_title">数据保存间隔(h):</span>
-      <el-input placeholder="请输入时间间隔"
-        v-model="configForm.conf.antenna"
-        clearable
-        class="item_content">
+      <el-input placeholder="请输入时间间隔" v-model="configForm.conf.antenna" clearable class="item_content">
       </el-input>
     </div>
 
-    <div class="item"
-      style="margin-bottom: 25px;">
+    <div class="item" style="margin-bottom: 25px;">
       <span class="item_title">断网重启间隔(h):</span>
-      <el-input placeholder="请输入断网重启间隔"
-        v-model="configForm.conf.autoresetint"
-        clearable
-        class="item_content">
+      <el-input placeholder="请输入断网重启间隔" v-model="configForm.conf.autoresetint" clearable class="item_content">
       </el-input>
     </div>
 
 
 
     <el-row class="button-row">
-      <el-button @click="setConfig"
-        type="primary">保存设置 </el-button>
+      <el-button @click="setConfig" type="primary">保存设置 </el-button>
 
       <el-button @click="getConfig">重置设置</el-button>
     </el-row>
@@ -61,7 +46,7 @@ export default {
   data() {
     return {
       configForm: {
-        conf: []
+        conf: {}
       },
     }
   },

src/views/settings/components/userSetting.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="userSetting">
+    <h3 class="settings_title">更改密码</h3>
+    <el-divider></el-divider>
+
+    <div class="item" style="margin-bottom: 25px;">
+      <span class="item_title">输入密码:</span>
+      <el-input placeholder="请输入更改的密码" v-model="password" clearable class="item_content" show-password>
+      </el-input>
+    </div>
+
+    <div class="item" style="margin-bottom: 25px;">
+      <span class="item_title">再次输入:</span>
+      <el-input placeholder="请再次输入更改的密码" v-model="repassword" clearable class="item_content" show-password>
+      </el-input>
+    </div>
+    <el-row class="button-row">
+      <el-button @click="setUserConfig" type="primary">更改密码</el-button>
+
+      <el-button @click="reset">重置输入</el-button>
+    </el-row>
+
+  </div>
+</template>
+<script>
+import api from "@/api/settings/userSetting";
+export default {
+  data() {
+    return {
+      form: {
+        conf: {
+          username: 'admin',
+          password: 'admin'
+        }
+      },
+      password: '',
+      repassword: ''
+    }
+  },
+  mounted() {
+  },
+  computed: {
+
+  },
+  methods: {
+    setUserConfig() {
+      if (this.password !== this.repassword) {
+        this.$message.error('两次输入的密码不一致,请重新输入');
+        this.reset();
+        return;
+      }
+      this.form.conf.password = this.password;
+      api.setUserConfig(this.form).then(res => {
+        console.log(res);
+        this.$message.success('密码修改成功');
+        this.reset();
+      })
+    },
+
+    reset() {
+      this.password = '';
+      this.repassword = '';
+    }
+  },
+}
+</script>
+<style scoped>
+.userSetting {
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.userSetting::-webkit-scrollbar {
+  display: none;
+}
+
+.item {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.item_title {
+  width: 150px;
+  text-align: right;
+}
+
+.item_content {
+  margin-left: 15px;
+  width: 200px;
+}
+
+.button-row {
+  display: flex;
+  justify-content: flex-end;
+  /* 将按钮排布到右侧 */
+  align-items: flex-end;
+  /* 将按钮放到容器底部 */
+  position: relative;
+  margin-top: 50px;
+  /* 保证按钮排在最底部 */
+  margin-bottom: 30vh;
+  /* 按钮距离底部有一定间距 */
+}
+</style>

src/views/settings/index.vue

@@ -1,11 +1,7 @@
 <template>
   <el-container style="height: 100%;">
-    <el-aside width="250px"
-      style="background-color: rgb(238, 241, 246)">
-      <el-menu unique-opened
-        @select="handleSelect"
-        active-text-color="black"
-        :default-active="selectIndex">
+    <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
+      <el-menu unique-opened @select="handleSelect" active-text-color="black" :default-active="selectIndex">
 
         <el-menu-item index="sys_setting">
           <i class="el-icon-s-platform"></i>系统设置
@@ -13,6 +9,9 @@
         <el-menu-item index="net_setting">
           <i class="el-icon-s-tools"></i>网络设置
         </el-menu-item>
+        <el-menu-item index="user_setting">
+          <i class="el-icon-user-solid"></i>用户设置
+        </el-menu-item>
 
       </el-menu>
     </el-aside>
@@ -22,6 +21,7 @@
         <el-card style="height: 99%;">
           <sysSetting v-if="selectIndex == 'sys_setting'" />
           <netSetting v-else-if="selectIndex == 'net_setting'" />
+          <userSetting v-else-if="selectIndex == 'user_setting'" />
         </el-card>
       </el-main>
     </el-container>
@@ -32,6 +32,8 @@
 <script>
 import netSetting from "./components/netSetting";
 import sysSetting from "./components/sysSetting";
+import userSetting from "./components/userSetting";
+
 export default {
   data() {
     return {
@@ -39,7 +41,7 @@ export default {
     }
   },
   components: {
-    sysSetting, netSetting
+    sysSetting, netSetting, userSetting
   },
   methods: {
     //处理选中菜单

vue.config.js

@@ -15,7 +15,7 @@ module.exports = defineConfig({
     open: true,
     proxy: {
       "/api": {
-        target: "http://127.0.0.0:5000", // 请求代理地址用来解决跨域
+        target: "http://192.168.1.104:5000", // 请求代理地址用来解决跨域
       },
     },
   },