优化

.env.production

@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-# VUE_APP_BASE_API = '/'
+ VUE_APP_BASE_API = '/access-control/'
 

src/api/user.js

@@ -3,7 +3,6 @@ import request from '@/utils/request'
 export function login(data) {
   return request({
     url: '/ncjtEntranceGuard/loginAdmin',
-    // url: '/vue-element-admin/user/login',
     method: 'post',
     data
   })
@@ -12,7 +11,6 @@ export function login(data) {
 export function getInfo(token) {
   return request({
     url: '/ncjtEntranceGuard/getInfoAdmin',
-    // url: '/vue-element-admin/user/info',
     method: 'get',
     params: { token }
   })

src/main.js

@@ -20,19 +20,6 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
-/**
- * If you don't want to use mock-server
- * you want to use MockJs for mock api
- * you can execute: mockXHR()
- *
- * Currently MockJs will be used in the production environment,
- * please remove it before going online ! ! !
- */
-// if (process.env.NODE_ENV === 'production') {
-//   const { mockXHR } = require('../mock')
-//   mockXHR()
-// }
-
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
 })

src/router/index.js

@@ -12,32 +12,7 @@ import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
 import nestedRouter from './modules/nested'
 
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    noCache: true                if set true, the page will no be cached(default is false)
-    affix: true                  if set true, the tag will affix in the tags-view
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
 
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
 export const constantRoutes = [
   {
     path: '/redirect',

src/utils/request.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import {
-  MessageBox,
   Message
 } from 'element-ui'
 import store from '@/store'
@@ -8,71 +7,37 @@ import {
   getToken
 } from '@/utils/auth'
 
-// create an axios instance
+
 const service = axios.create({
-  // baseURL: "https://chtech.ncjti.edu.cn/access-control/", // 打包使用的URL
-  baseURL: process.env.VUE_APP_BASE_API, // 本机开发使用的URL url = base url + request url
-  // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  baseURL: process.env.VUE_APP_BASE_API,
+  timeout: 15000
 })
 
-// request interceptor
+// 请求拦截器
 service.interceptors.request.use(
   config => {
-    // do something before request is sent
-
     if (store.getters.token) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
       config.headers['X-Token'] = getToken()
     }
     return config
   },
   error => {
-    // do something with request error
-    console.log(error) // for debug
+
+    console.log(error)
     return Promise.reject(error)
   }
 )
 
-// response interceptor
+// 响应拦截器
 service.interceptors.response.use(
-  /**
-   * If you want to get http information such as headers or status
-   * Please return  response => response
-   */
-
-  /**
-   * Determine the request status by custom code
-   * Here is just an example
-   * You can also judge the status by HTTP Status Code
-   */
   response => {
     const res = response.data
-
-    // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 200) {
       Message({
         message: res.error || 'Error',
         type: 'error',
-        duration: 5 * 1000
+        duration: 5 * 100
       })
-
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again',
-          'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
-      }
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res
@@ -83,7 +48,7 @@ service.interceptors.response.use(
     Message({
       message: error.message,
       type: 'error',
-      duration: 5 * 1000
+      duration: 5 * 2000
     })
     // return Promise.resolve()
     return Promise.reject(error)

src/views/accessRecords/index.vue

@@ -62,13 +62,6 @@
       <el-button type="primary" size="mini" class="button" @click="handleFilter"
         >查询</el-button
       >
-      <el-button
-        type="primary"
-        size="mini"
-        class="button"
-        @click="refreshGetList"
-        >刷新</el-button
-      >
     </div>
 
     <!-- 表格区域 -->
@@ -197,10 +190,6 @@ export default {
         }
       );
     },
-    refreshGetList() {
-      //刷新页面
-      this.$router.go(0);
-    },
     handleChangeFilter(e) {
       if (e == null) {
         // 清空时间
@@ -307,7 +296,7 @@ export default {
   }
 
   .button {
-    margin-left: 10px;
+    margin-left: 30px;
   }
 }
 

src/views/deviceManagement/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="body">
-    <!-- 头部区域 -->
 
+    <!-- 头部区域 -->
     <div class="head">
       <div class="head-img">
         <img src="../../../public/images/img-1.png" />
@@ -10,12 +10,14 @@
     </div>
 
     <!-- 添加按钮区域 -->
-
     <div class="switch">
       <div class="switch-button">
         <el-row>
-          <el-button type="primary" size="small" @click="handleCreate"
-            ><img src="../../../public/images/img-3.png" />添加
+          <el-button
+            type="primary"
+            size="small"
+            @click="handleCreate"
+          ><img src="../../../public/images/img-3.png" />添加
           </el-button>
         </el-row>
       </div>
@@ -24,64 +26,78 @@
     <!-- 表格区域 -->
     <div class="form">
       <el-table :data="list">
-        <el-table-column label="序列号" align="center">
-          <template slot-scope="{ row }">
-            <span>{{ row.serialNumber }}</span>
-          </template>
+        <el-table-column
+          label="序列号"
+          align="center"
+          prop="serialNumber"
+        >
         </el-table-column>
 
-        <el-table-column label="名称" width="300px" align="center">
-          <template slot-scope="{ row }">
-            <span>{{ row.name }}</span>
-          </template>
+        <el-table-column
+          label="名称"
+          width="300px"
+          align="center"
+          prop="name"
+        >
         </el-table-column>
 
-        <el-table-column label="厂家" align="center">
-          <template slot-scope="{ row }">
-            <span>{{ row.manufacturer }}</span>
-          </template>
+        <el-table-column
+          label="厂家"
+          align="center"
+          prop="manufacturer"
+        >
         </el-table-column>
 
-        <el-table-column label="型号" align="center">
-          <template slot-scope="{ row }">
-            <span>{{ row.model }}</span>
-          </template>
+        <el-table-column
+          label="型号"
+          align="center"
+          prop="model"
+        >
         </el-table-column>
 
-        <el-table-column label="IP地址" align="center">
-          <template slot-scope="{ row }">
-            <span>{{ row.ipAddress }}</span>
-          </template>
+        <el-table-column
+          label="IP地址"
+          align="center"
+          prop="ipAddress"
+        >
         </el-table-column>
 
-        <el-table-column label="开关" align="center">
-          <template slot-scope="scope">
+        <el-table-column
+          label="开关"
+          align="center"
+        >
+          <template slot-scope="{ row }">
             <el-switch
-              v-model="scope.row.status"
+              v-model="row.status"
               active-color="#3BAAFD"
               inactive-color="#CCCCCC"
               :active-value="1"
               :inactive-value="0"
               disabled
-              @click.native="changeSwitch(scope.row)"
+              @click.native="changeSwitch(row)"
             >
             </el-switch>
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="180px" align="center">
+        <el-table-column
+          label="操作"
+          width="180px"
+          align="center"
+        >
           <template slot-scope="{ row, $index }">
-            <el-button type="text" size="small" @click="handleUpdate(row)"
-              >编辑</el-button
-            >
+            <el-button
+              type="text"
+              size="small"
+              @click="handleUpdate(row)"
+            >编辑</el-button>
 
             <el-button
-              @click="handleDelete(row, $index)"
               type="text"
               size="small"
               class="button"
-              ><img src="../../../public/images/img-2.png" />删除</el-button
-            >
+              @click="handleDelete(row)"
+            ><img src="../../../public/images/img-2.png" />删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -100,14 +116,18 @@
       </div>
     </div>
 
-    <!-- 添加编辑按钮弹窗区域 -->
+    <!-- 添加编辑弹窗区域 -->
     <el-dialog
       :title="textMap[dialogStatus]"
       :visible.sync="dialogVisible"
       width="30%"
       center
     >
-      <el-form ref="dataForm" :model="temp" :rules="rules">
+      <el-form
+        ref="dataForm"
+        :model="temp"
+        :rules="rules"
+      >
         <el-form-item
           style="white-space: pre"
           label="序列号："
@@ -187,8 +207,7 @@
         <el-button
           type="primary"
           @click="dialogStatus === 'create' ? createData() : updateData()"
-          >确 定</el-button
-        >
+        >确 定</el-button>
         <el-button @click="dialogVisible = false">取 消</el-button>
       </span>
     </el-dialog>
@@ -252,25 +271,15 @@ export default {
     this.getList();
   },
   methods: {
+    // 获取列表数据
     getList() {
       fetchList(this.listQuery).then((response) => {
+        console.log(response);
         this.list = response.data;
         this.total = response.total;
       });
     },
-    handleDelete(row, index) {
-      if (confirm("是否删除？")) {
-        deletDevice({ id: row.id }).then(() => {
-          this.$notify({
-            title: "删除成功",
-            type: "success",
-            duration: 2000,
-          });
-          this.list.splice(index, 1);
-        });
-      }
-      this.getList();
-    },
+    // 重置表单为空
     resetTemp() {
       this.temp = {
         id: undefined,
@@ -282,6 +291,7 @@ export default {
         status: "1",
       };
     },
+    // 添加按钮回调
     handleCreate() {
       this.resetTemp();
       this.dialogStatus = "create";
@@ -290,6 +300,7 @@ export default {
         this.$refs["dataForm"].clearValidate();
       });
     },
+    // 编辑按钮回调
     handleUpdate(row) {
       this.temp = Object.assign({}, row); // copy obj
       this.dialogStatus = "update";
@@ -298,37 +309,51 @@ export default {
         this.$refs["dataForm"].clearValidate();
       });
     },
+    // 删除按钮回调
+    handleDelete(row) {
+      this.$confirm(`此操作将永久删除 ${row.name}, 是否继续?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deletDevice({ id: row.id }).then(() => {
+            this.getList();
+            this.$notify({
+              title: "删除成功",
+              type: "success",
+              duration: 2000,
+            });
+          });
+        })
+        .catch(() => {
+          this.$message.info("已取消删除");
+        });
+    },
+    // 添加设备请求
     createData() {
       this.$refs["dataForm"].validate((valid) => {
         if (valid) {
           createDevice(this.temp).then(() => {
-            this.list.push({
-              serialNumber: this.temp.serialNumber,
-              name: this.temp.name,
-              manufacturer: this.temp.manufacturer,
-              model: this.temp.model,
-              ipAddress: this.temp.ipAddress,
-              status: this.temp.status,
-            });
             this.dialogVisible = false;
             this.$notify({
               title: "添加成功",
               type: "success",
               duration: 1500,
             });
+            this.getList();
           });
         }
       });
-      this.getList();
     },
+    // 编辑设备请求
     updateData() {
       this.$refs["dataForm"].validate((valid) => {
         if (valid) {
           const tempData = Object.assign({}, this.temp);
           updateDevice(tempData).then(() => {
-            const index = this.list.findIndex((v) => v.id === this.temp.id);
-            this.list.splice(index, 1, this.temp);
             this.dialogVisible = false;
+            this.getList();
             this.$notify({
               title: "编辑成功",
               type: "success",
@@ -338,17 +363,15 @@ export default {
         }
       });
     },
+    // 更换开关状态
     changeSwitch(row) {
+      // console.log(row);
       this.temp = Object.assign({}, row);
       if (this.temp.status == 0) {
         if (confirm("确定开启设备吗？")) {
-          updateDevice({ id: this.temp.id, status: this.temp.status }).then(
-            () => {
-              const index = this.list.findIndex((v) => v.id === this.temp.id);
-              this.temp.status = 1;
-              this.list.splice(index, 1, this.temp);
-            }
-          );
+          updateDevice({ id: this.temp.id, status: 1 }).then(() => {
+            this.getList();
+          });
           this.$notify({
             title: "开启成功",
             type: "success",
@@ -357,13 +380,9 @@ export default {
         }
       } else {
         if (confirm("确定关闭设备吗？")) {
-          updateDevice({ id: this.temp.id, status: this.temp.status }).then(
-            () => {
-              const index = this.list.findIndex((v) => v.id === this.temp.id);
-              this.temp.status = 0;
-              this.list.splice(index, 1, this.temp);
-            }
-          );
+          updateDevice({ id: this.temp.id, status: 0 }).then(() => {
+            this.getList();
+          });
           this.$notify({
             title: "关闭成功",
             type: "success",

src/views/login/index.vue

@@ -21,7 +21,10 @@
           autocomplete="on"
         >
           <label>
-            <el-form-item class="login-form-item" prop="username">
+            <el-form-item
+              class="login-form-item"
+              prop="username"
+            >
               <span><img src="../../../public/images/denglu.png" /></span>
 
               <el-input
@@ -34,7 +37,10 @@
             </el-form-item>
           </label>
           <label>
-            <el-form-item class="login-form-item" prop="password">
+            <el-form-item
+              class="login-form-item"
+              prop="password"
+            >
               <span><img src="../../../public/images/mima.png" /></span>
 
               <el-input
@@ -58,8 +64,7 @@
               type="primary"
               @click.native.prevent="handleLogin"
               class="login-form-button"
-              >登录</el-button
-            >
+            >登录</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -68,12 +73,8 @@
 </template>
 
 <script>
-import { validUsername } from "@/utils/validate";
-import SocialSign from "./components/SocialSignin";
-
 export default {
   name: "Login",
-  components: { SocialSign },
   data() {
     const validateUsername = (rule, value, callback) => {
       if (value.length < 5) {
@@ -104,8 +105,6 @@ export default {
       },
       capsTooltip: false,
       loading: false,
-      redirect: undefined,
-      otherQuery: {},
     };
   },
   // watch: {
@@ -146,8 +145,7 @@ export default {
             .dispatch("user/login", this.loginForm)
             .then(() => {
               this.$router.push({
-                path: this.redirect || "/",
-                query: this.otherQuery,
+                path: "/",
               });
               this.loading = false;
             })

vue.config.js

@@ -8,26 +8,14 @@ function resolve(dir) {
 
 const name = defaultSettings.title || '门禁设备管理平台' // page title
 
-// If your port is set to 80,
-// use administrator privileges to execute the command line.
-// For example, Mac: sudo npm run
-// You can change the port by the following method:
-// port = 9527 npm run dev OR npm run dev --port = 9527
-const port = process.env.port || process.env.npm_config_port || 9527 // dev port
+const port = process.env.port || process.env.npm_config_port || 9527
 
-// All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
-  publicPath: './',
+  publicPath: '/access-control/ncjtEntranceGuard/',
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  // lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,  //关闭eslint校验
   productionSourceMap: false,
   devServer: {
     port: port,
@@ -36,11 +24,12 @@ module.exports = {
       warnings: false,
       errors: true
     },
-    // before: require('./mock/mock-server.js')
+    // before: require('./mock/mock-server.js'),
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
         // target: 'http://192.168.31.162:8280',
-        target: 'http://127.0.0.1:8280',
+        // target: 'http://127.0.0.1:8280',
+        target: 'https://chtech.ncjti.edu.cn/access-control',
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -49,8 +38,6 @@ module.exports = {
     }
   },
   configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
     name: name,
     resolve: {
       alias: {
@@ -59,22 +46,16 @@ module.exports = {
     }
   },
   chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    // it can improve the speed of the first screen, it is recommended to turn on preload
     config.plugin('preload').tap(() => [
       {
         rel: 'preload',
-        // to ignore runtime.js
-        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
         include: 'initial'
       }
     ])
 
-    // when there are many pages, it will cause too many meaningless requests
     config.plugins.delete('prefetch')
 
-    // set svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
@@ -98,7 +79,6 @@ module.exports = {
             .plugin('ScriptExtHtmlWebpackPlugin')
             .after('html')
             .use('script-ext-html-webpack-plugin', [{
-              // `runtime` must same as runtimeChunk name. default is `runtime`
               inline: /runtime\..*\.js$/
             }])
             .end()
@@ -126,7 +106,6 @@ module.exports = {
                 }
               }
             })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
           config.optimization.runtimeChunk('single')
         }
       )