1、新增前端登陆、新增条件查询

徐振旌
1 parent 2c62a85d
Showing 7 changed files with 329 additions and 51 deletions
public/config.js
src/App.vue
src/api/api.js
src/main.js
src/router/index.js
src/views/HomeView.vue
src/views/Login.vue
 const BaseUrl = {
-    URL: "http://127.0.0.1:8080/"
+    URL: "http://127.0.0.1:8085/"
 }
 export default BaseUrl;
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
+import {onMounted} from "vue";
  
+onMounted(() => {
+  window.addEventListener('beforeunload', () => {
+    sessionStorage.removeItem('isAuthenticated')
+  })
+
+
+})
 </script>
  
 <template>
@@ -19,25 +27,6 @@ import { RouterLink, RouterView } from &#39;vue-router&#39;
     </div>
   </header> -->
  
-  <el-menu
-    default-active="1"
-    class="el-menu-demo"
-    mode="horizontal"
-    background-color="#545c64"
-    text-color="#fff"
-    active-text-color="#ffd04b"
-    
-  >
-    <!-- <el-menu-item index="1">
-      <RouterLink to="/">主页</RouterLink>
-    </el-menu-item> -->
-    <!-- <el-menu-item index="2">
-      <RouterLink to="/login.html">登录</RouterLink>
-    </el-menu-item> -->
-    
-
-  </el-menu>
-  
  
   <RouterView />
 </template>
@@ -45,3 +34,4 @@ import { RouterLink, RouterView } from &#39;vue-router&#39;
 <style scoped>
  
 </style>
+
@@ -16,3 +16,17 @@ export const deleteSNsApi = {
     url: baseUrl + '/sn/delete_sn'
 }
  
+export const getSNsByConditionApi = {
+    method: 'post',
+    url: baseUrl + '/sn/get_by_condition_sn'
+}
+
+export const listProjectSelectApi = {
+    method: 'post',
+    url: baseUrl + '/sn/list_product_select'
+}
+
+export const loginApi = {
+    method: 'post',
+    url: baseUrl + '/auth/login'
+}
 // import './assets/main.css'
  
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import Login from "../views/Login.vue";
  
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,17 +10,44 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
       meta: {
-        title: 'SN管理'
+        title: 'SN管理',
+        requiresAuth: true  // 添加这行，标记该路由需要认证
+      }
+
+    },
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login,
+      meta: {
+        requiresAuth: false // 明确表示登录页不需要认证
       }
     }
   ]
 })
  
-router.beforeEach((to,from,next)=>{//beforeEach是router的钩子函数，在进入路由前执行
-  if(to.meta.title){//判断是否有标题
-      document.title = to.meta.title
+// 路由守卫
+router.beforeEach((to, from, next) => {
+  const isAuthenticated = sessionStorage.getItem('isAuthenticated')
+
+  if (to.path === '/login' && !isAuthenticated) {
+    return next('/login')
+  }
+
+  // 需要认证但未登录 → 跳转登录页
+  if (to.meta.requiresAuth && !isAuthenticated) {
+    return next('/login')
   }
-  next()  //执行进入路由，如果不写就不会进入目标页
+
+  // 已登录但访问登录页 → 跳转首页
+  if (to.path === '/login' && isAuthenticated) {
+    return next('/')
+  }
+
+
+
+  next()
 })
  
+
 export default router
@@ -3,39 +3,108 @@
   // import { FormInstance } from 'element-plus'
   import axios from 'axios';
   import { ElMessage } from 'element-plus'
-  import { addSNsApi, getSNsApi, deleteSNsApi } from '../api/api';
+  import {addSNsApi, getSNsApi, deleteSNsApi, getSNsByConditionApi , listProjectSelectApi} from '../api/api';
  
   const addFormRef = ref()
   const deleteFormRef = ref()
+  const conditionFormRef = ref()
  
   //获取的SN内容
-  const SNsContent = ref('...')
+  const SNsContent = ref('')
  
   //当前显示的表单 1-添加SN 2-获取SN 3-删除SN
   const currForm = ref('1');
+
+  // 条件查询表单
+  const conditionForm = reactive({
+    projectName: '',
+    sns: ''
+  })
+
   const changeForm = (tab, event) => {
     currForm.value = tab.props.name;
-    //把SN数据查出来
-    if (currForm.value == 3) {
-      axios({
-          method: getSNsApi.method,
-          url: getSNsApi.url
-      }).then(response => {
-          if (response.data.code == 200) {
-            SNsContent.value = response.data.data;
+    if (currForm.value === '3') {
+      fetchProjectOptions()
+    }
+    // //把SN数据查出来
+    // if (currForm.value == 3) {
+    //   axios({
+    //       method: getSNsApi.method,
+    //       url: getSNsApi.url
+    //   }).then(response => {
+    //       if (response.data.code == 200) {
+    //         SNsContent.value = response.data.data;
+    //
+    //       } else {
+    //           ElMessage({
+    //               message: response.data.message,
+    //               type: 'error',
+    //           })
+    //       }
+    //
+    //   }).catch(err => {
+    //       ElMessage.error(err)
+    //   })
+    // }
+    //
+  }
  
-          } else {
-              ElMessage({
-                  message: response.data.message,
-                  type: 'error',
-              })
-          }
+  // 项目名称下拉选项
+  const projectOptions = ref([])
+  const loadingProjects = ref(false)
  
-      }).catch(err => {
-          ElMessage.error(err)
+  // 获取项目名称下拉列表
+  const fetchProjectOptions = async () => {
+    try {
+      loadingProjects.value = true
+      const response = await axios({
+        method: listProjectSelectApi.method,
+        url: listProjectSelectApi.url
       })
+      if (response.data.code === 200) {
+        projectOptions.value = response.data.data || []
+      }
+    } catch (err) {
+      ElMessage.error('获取项目列表失败')
+    } finally {
+      loadingProjects.value = false
     }
-    
+  }
+
+
+  // 提交条件查询
+  const submitConditionForm = async (formInstance) => {
+    if (!formInstance) return
+
+    try {
+      await formInstance.validate()
+      const response = await axios({
+        method: getSNsByConditionApi.method,
+        url: getSNsByConditionApi.url,
+        data: {
+          projectName: conditionForm.projectName,
+          sns: conditionForm.sns
+        }
+      })
+
+      if (response.data.code === 200) {
+        SNsContent.value = response.data.data
+        ElMessage.success('查询成功')
+      } else {
+        ElMessage.error(response.data.message || '查询失败')
+      }
+    } catch (err) {
+      if (err.name !== 'Error') { // 不是表单验证错误
+        ElMessage.error(err.message || '查询异常')
+      }
+    }
+  }
+
+  // 重置条件表单
+  const resetConditionForm = (formInstance) => {
+    if (!formInstance) return
+    formInstance.resetFields()
+    SNsContent.value = '...'
   }
  
  
@@ -272,14 +341,70 @@
         </el-form-item>
       </el-form>
  
-      <el-text class="mx-1" v-show="currForm == 3? true : false">
-        {{ SNsContent }}
-      </el-text>
-     
-      
+<!--      <el-text class="mx-1" v-show="currForm == 3? true : false">-->
+<!--        {{ SNsContent }}-->
+<!--      </el-text>-->
+
+      <!-- 条件查询表单 -->
+      <el-form
+          ref="conditionFormRef"
+          style="max-width: 600px"
+          :model="conditionForm"
+          label-width="auto"
+          class="demo-dynamic"
+          v-show="currForm == 3"
+      >
+        <el-form-item
+            prop="projectName"
+            label="项目名称"
+        >
+          <el-select
+              v-model="conditionForm.projectName"
+              filterable
+              clearable
+              placeholder="请选择或输入项目名称"
+              :loading="loadingProjects"
+              style="width: 100%"
+          >
+            <el-option
+                v-for="item in projectOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+            prop="sns"
+            label="设备码"
+        >
+          <el-input v-model="conditionForm.sns" placeholder="输入设备码" />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="submitConditionForm(conditionFormRef)">查询</el-button>
+          <el-button @click="resetConditionForm(conditionFormRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 查询结果显示 -->
+      <div v-show="currForm == 3" style="margin-top: 20px;">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>查询结果</span>
+            </div>
+          </template>
+          <el-text class="mx-1">
+            <pre>{{ SNsContent }}</pre>
+          </el-text>
+        </el-card>
+      </div>
+
     </el-tabs>
  
-    
+
  
   </div>
  
@@ -291,6 +416,15 @@
     margin: 0px auto;
   }
  
+  .card-header {
+    font-weight: bold;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
 </style>
  
  
+<script setup>
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { loginApi } from '../api/api'
+
+const router = useRouter()
+
+const loginFormRef = ref()
+const loading = ref(false)
+
+const loginForm = reactive({
+  username: '',
+  password: ''
+})
+
+const rules = reactive({
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+})
+
+const submitLogin = async () => {
+  try {
+    loading.value = true
+    await loginFormRef.value.validate()
+
+    const response = await axios({
+      method: loginApi.method,
+      url: loginApi.url,
+      data: {
+        username: loginForm.username,
+        password: loginForm.password
+      }
+    })
+
+    if (response.data.code === 200) {
+      ElMessage.success('登录成功')
+      // 存储登录状态
+      sessionStorage.setItem('isAuthenticated', 'true')
+      // 跳转到首页
+      router.push('/')
+    } else {
+      ElMessage.error(response.data.message || '登录失败')
+    }
+  } catch (error) {
+    ElMessage.error(error.message || '登录异常')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-container">
+    <el-card class="login-card">
+      <h2 class="login-title">SN系统登陆</h2>
+      <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          :rules="rules"
+          label-width="80px"
+          label-position="top"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="loginForm.username" placeholder="" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder=""
+              show-password
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+              type="primary"
+              @click="submitLogin"
+              :loading="loading"
+              style="width: 100%"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f2f5;
+}
+
+.login-card {
+  width: 400px;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #333;
+}
+</style>
 \ No newline at end of file