更改vue的写法，删除多余文件

package.json

@@ -5,9 +5,12 @@
   "main": "index.js",
   "dependencies": {
     "bluebird": "^3.5.5",
+    "dayjs": "^1.11.13",
+    "element-ui": "^2.15.14",
     "es3ify-loader": "^0.2.0",
     "jquery": "^1.12.4",
     "poplar-annotation": "^2.0.3",
+    "vue": "^2.6.14",
     "webpack-cli": "^3.3.1",
     "zn": "file:"
   },

src/css/common.less

@@ -12,6 +12,11 @@ body {
     padding: 0;
 }
 
+/*vue未加载好使隐藏页面*/
+[v-cloak] {
+    display: none;
+}
+
 ul,
 li {
     list-style: none;

src/css/graphDataStatistics.less

@@ -1,4 +1,60 @@
 #app {
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
+}
+
+main {
+  padding: 0px 10px;
+  box-sizing: border-box;
+}
+
+.pagination {
+  margin: 20px 0px 10px;
+}
+
+.el-pagination {
+  text-align: right;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+footer {
+  padding: 0 10px;
+}
+
+.label-item {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  border-radius: 10pt;
+  background-color: antiquewhite;
+  border: 1px solid lightblue;
+  justify-content: center;
+  margin: 15px;
+  height: fit-content;
+  width: 150px;
+  align-items: center;
+}
+
+.label-count {
+  width: 100%;
+  font-size: 16pt;
+  font-weight: bold;
+  align-content: center;
+  text-align: center;
+}
+
+.label-category {
+  width: 100%;
+  background-color: rgb(152, 175, 175);
+  border-radius: 10pt 10pt 0 0;
+  border: 1px solid lightblue;
+  font-size: 18pt;
+  font-weight: bold;
+  text-align: center;
 }

src/html/graphDataStatistics.html

@@ -5,76 +5,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>知识图谱系统</title>
-  <script src="./js/vue.js"></script>
   <link rel="stylesheet" href="./elementUI/theme-chalk/index.css">
-  <script src="./elementUI/index.js"></script>
-  <script src="./js/axios.js"></script>
-  <!-- 引入jquery -->
-  <!-- <script type="module" src="./js/home.js"></script> -->
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
   <style>
     /*vue未加载好使隐藏页面*/
-    [v-cloak] {
-      display: none;
-    }
-
-    #app {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-    }
-
-    main {
-      padding: 0px 10px;
-      box-sizing: border-box;
-    }
-
-    .pagination {
-      margin: 20px 0px 10px;
-    }
-
-    .el-pagination {
-      text-align: right;
-    }
-
-    header {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .label-item {
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      border-radius: 10pt;
-      background-color: antiquewhite;
-      border: 1px solid lightblue;
-      justify-content: center;
-      margin: 15px;
-      height: fit-content;
-      width: 150px;
-      align-items: center;
-    }
-
-    .label-count {
-      width: 100%;
-      font-size: 16pt;
-      font-weight: bold;
-      align-content: center;
-      text-align: center;
-    }
-
-    .label-category {
-      width: 100%;
-      background-color: rgb(152, 175, 175);
-      border-radius: 10pt 10pt 0 0;
-      border: 1px solid lightblue;
-      font-size: 18pt;
-      font-weight: bold;
-      text-align: center;
-    }
   </style>
 
 </head>
@@ -88,133 +22,28 @@
         </div>
         <div class="label-count">{{ item["num"] }}</div>
       </div>
-
-
     </header>
     <main>
-      <el-table :data="tableData" border style="width: 100%" show-summary>
-        <el-table-column type="index" align="center" label="序号" width="100"></el-table-column>
+      <el-table :data="tableData" border style="width: 100%" show-summary :max-height="MAX_TABLE_HEIGHT">
+        <el-table-column type="index" :index="(currentPage-1)*selectPageSize+1" align="center" label="序号"
+          width="100"></el-table-column>
         <el-table-column prop="nodeType" align="center" label="实体类型"></el-table-column>
         <el-table-column align="center" prop="nodeNum" sortable label="实体数量"></el-table-column>
         <el-table-column prop="relationType" align="center" sortable label="相关关系类型"></el-table-column>
         <el-table-column prop="relationNum" align="center" sortable label="相关关系数量"></el-table-column>
       </el-table>
-      <div class="pagination">
+    </main>
+    <footer>
+      <div class="pagination" v-if="total>10">
         <el-pagination background layout="total,sizes,prev, pager, next, jumper, ->" :total="total"
           @size-change="handleSizeChange" @current-change="handleCurrentChang"
           :page-sizes="[10, 20, 30, 40, 50, 100]"></el-pagination>
       </div>
-    </main>
+    </footer>
   </div>
-
 </body>
 <script>
-  let myChart = null
-  let timer = null //计时器标志
-  const api = {
-    getCountList: "/kg/count/getCountList",
-    getCountInfo: "/kg/count/getCountInfo"
-  }
-  const vm = new Vue({
-    el: "#app",
-    name: "graphDataStatistics",
-    data() {
-      return {
-        total: 10,
-        countInfo: {},
-        totalElements: {},
-        new_table_height: 1000,
-        currentPage: 1,
-        selectPageSize: 10,
-        tableData: [
-          {
-            nodeType: "疾病",
-            nodeNum: 5000,
-            nodeAttributeNum: 5000,
-            coefficientType: 5000,
-            coefficientNum: 5000,
-          },
-          {
-            nodeType: "症状",
-            nodeNum: 5000,
-            nodeAttributeNum: 5000,
-            coefficientType: 5000,
-            coefficientNum: 5000,
-          },
-          {
-            nodeType: "并发症",
-            nodeNum: 5000,
-            nodeAttributeNum: 5000,
-            coefficientType: 5000,
-            coefficientNum: 5000,
-          },
-        ],
-      }
-    },
-    methods: {
-      getCountList() {
-        const params = {
-          pageNo: this.currentPage,
-          pageSize: this.selectPageSize,
-        }
-        axios.post(api.getCountList, params).then((res) => {
-          const { data, code, msg } = res.data
-          if (code === '0') {
-            this.tableData = [...data.content]
-            this.total = data.totalElements
-          }
-        }).catch(e => {
-          console.log(e)
-        })
-      },
-      getCountInfo() {
-        axios.post(api.getCountInfo).then(res => {
-          const { data, code, msg } = res.data
-          if (code === '0') {
-            this.countInfo = data
-          }
-        }).catch(e => {
-          console.log(e)
-        }
-
-        )
-      },
-      paginationChange(getCurrentPages, pageSize) {
-        this.currentPage = getCurrentPages;
-        this.selectPageSize = pageSize;
-        this.getCountList(getCurrentPages, pageSize)
-      },
-      handleCurrentChang(page) {
-        this.currentPage = page
-      },
-      handleSizeChange(size) {
-        this.selectPageSize = size
-      }
-    },
-    watch: {
-      currentPage(newVal) {
-        this.getCountList()
-      },
-      selectPageSize(newVal) {
-        this.getCountList()
-      }
-    },
-    computed: {
-
-    },
-    created() {
-
-
-    },
-    mounted() {
-      this.getCountInfo()
-      this.getCountList()
-
-    },
-    destroyed() {
 
-    }
-  })
 </script>
 
 </html>

src/html/login.html

@@ -5,13 +5,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>登录</title>
-  <script src="./js/vue.js"></script>
+
   <link rel="stylesheet" href="./elementUI/theme-chalk/index.css">
-  <script src="./elementUI/index.js"></script>
+
   <style>
-    [v-cloak] {
-      display: none;
-    }
   </style>
 </head>
 
@@ -56,63 +53,7 @@
 </body>
 <script>
 
-  const vm = new Vue({
-    el: '#app',
-    name: "login",
-    data: function () {
-      return {
-        captchaUrl: "./images/CAPTCHA2x.png",
-        rules: {
-          username: [{ required: true, message: "账号是必填", trigger: 'blur' }],
-          password: [{ required: true, message: "密码是必填", trigger: 'blur' }]
-        },
-        ruleForm: { username: "", password: "", captcha: "" },
-      }
-    },
-    methods: {
-      handleSubmitForm() {
-        const ruleFormRef = this.$refs.ruleFormRef
-        ruleFormRef.validate((valid) => {
-          if (valid) {
-            if (this.ruleForm.username == "admin" && this.ruleForm.password == "admin") {
-
-              if (this.ruleForm.captcha.toLowerCase() == "xvxr") {
-                this.$message({
-                  showClose: true,
-                  message: '登录成功',
-                  type: 'success'
-                });
-                ruleFormRef.resetFields()
-                window.location.href = "./home.html"
-              } else {
-                this.$message({
-                  showClose: true,
-                  message: '验证码错误',
-                  type: 'error'
-                });
-                ruleFormRef.resetFields()
-              }
-            } else {
-              this.$message({
-                showClose: true,
-                message: '密码或者账号错误!',
-                type: 'error'
-              });
-              ruleFormRef.resetFields()
-            }
-          }
-        })
-      },
-
-    },
-    watch: {},
-    computed: {
 
-    },
-    created: function () { },
-    mounted: function () { },
-    destroyed: function () { },
-  })
 </script>
 
 </html>

src/js/graphDataStatistics.js

@@ -1,2 +1,127 @@
 require("../css/graphDataStatistics.less")
-require("./../css/common.less");
+require("./../css/common.less");
+require("element-ui/lib/theme-chalk/index.css")
+const { post, getUrlArgObject } = require('./api.js');
+
+const Vue = require("vue/dist/vue.esm.js").default;
+const ElementUI = require("element-ui/lib/index.js");
+const $ = require('jquery')
+
+Vue.use(ElementUI)
+let myChart = null
+let timer = null //计时器标志
+const api = {
+  getCountList: "/kg/count/getCountList",
+  getCountInfo: "/kg/count/getCountInfo"
+}
+const vm = new Vue({
+  el: "#app",
+  name: "graphDataStatistics",
+  data() {
+    return {
+      total: 10,
+      countInfo: {},
+      totalElements: {},
+      MAX_TABLE_HEIGHT: 1000,
+      currentPage: 1,
+      selectPageSize: 10,
+      tableData: [
+        {
+          nodeType: "疾病",
+          nodeNum: 5000,
+          nodeAttributeNum: 5000,
+          coefficientType: 5000,
+          coefficientNum: 5000,
+        },
+        {
+          nodeType: "症状",
+          nodeNum: 5000,
+          nodeAttributeNum: 5000,
+          coefficientType: 5000,
+          coefficientNum: 5000,
+        },
+        {
+          nodeType: "并发症",
+          nodeNum: 5000,
+          nodeAttributeNum: 5000,
+          coefficientType: 5000,
+          coefficientNum: 5000,
+        },
+      ],
+    }
+  },
+  methods: {
+    getCountList() {
+      const params = {
+        pageNo: this.currentPage,
+        pageSize: this.selectPageSize,
+      }
+      post(api.getCountList, params).then((res) => {
+        const { data, code, msg } = res.data
+        if (code === '0') {
+          this.tableData = [...data.content]
+          this.total = data.totalElements
+          this.$nextTick(() => {
+            this.calculateTableMaxHeight()
+          })
+        }
+      }).catch(e => {
+        console.log(e)
+      })
+    },
+    getCountInfo() {
+      post(api.getCountInfo).then(res => {
+        const { data, code, msg } = res.data
+        if (code === '0') {
+          this.countInfo = data
+          this.$nextTick(() => {
+            this.calculateTableMaxHeight()
+          })
+        }
+      }).catch(e => {
+        console.log(e)
+      }
+
+      )
+    },
+    paginationChange(getCurrentPages, pageSize) {
+      this.currentPage = getCurrentPages;
+      this.selectPageSize = pageSize;
+      this.getCountList(getCurrentPages, pageSize)
+    },
+    handleCurrentChang(page) {
+      this.currentPage = page
+    },
+    handleSizeChange(size) {
+      this.selectPageSize = size
+    },
+    calculateTableMaxHeight() {
+      // console.log("#app", $('#app').outerHeight(), $('header').outerHeight(), $('footer').outerHeight())
+      this.MAX_TABLE_HEIGHT = $('#app').outerHeight() - $('header').outerHeight() - $('footer').outerHeight() - 40
+    }
+  },
+  watch: {
+    currentPage(newVal) {
+      this.getCountList()
+    },
+    selectPageSize(newVal) {
+      this.getCountList()
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.getCountInfo()
+    this.getCountList()
+  },
+  mounted() {
+  },
+  destroyed() {
+
+  }
+})
+
+module.exports = {
+
+}

src/js/homeMini.js

@@ -1,2 +0,0 @@
-require("../css/home.less")
-require("./../css/common.less");

src/js/login.js

@@ -1,2 +1,62 @@
 require("../css/login.less")
-require("./../css/common.less");
+require("./../css/common.less");
+const Vue = require('vue/dist/vue.esm.js').default
+const ElementUI = require("element-ui/lib/index.js")
+Vue.use(ElementUI)
+const vm = new Vue({
+  el: '#app',
+  name: "login",
+  data: function () {
+    return {
+      captchaUrl: "./images/CAPTCHA.png",
+      rules: {
+        username: [{ required: true, message: "账号是必填", trigger: 'blur' }],
+        password: [{ required: true, message: "密码是必填", trigger: 'blur' }]
+      },
+      ruleForm: { username: "", password: "", captcha: "" },
+    }
+  },
+  methods: {
+    handleSubmitForm() {
+      const ruleFormRef = this.$refs.ruleFormRef
+      ruleFormRef.validate((valid) => {
+        if (valid) {
+          if (this.ruleForm.username == "admin" && this.ruleForm.password == "admin") {
+
+            if (this.ruleForm.captcha.toLowerCase() == "xvxr") {
+              this.$message({
+                showClose: true,
+                message: '登录成功',
+                type: 'success'
+              });
+              ruleFormRef.resetFields()
+              window.location.href = "./home.html"
+            } else {
+              this.$message({
+                showClose: true,
+                message: '验证码错误',
+                type: 'error'
+              });
+              ruleFormRef.resetFields()
+            }
+          } else {
+            this.$message({
+              showClose: true,
+              message: '密码或者账号错误!',
+              type: 'error'
+            });
+            ruleFormRef.resetFields()
+          }
+        }
+      })
+    },
+
+  },
+  watch: {},
+  computed: {
+
+  },
+  created: function () { },
+  mounted: function () { },
+  destroyed: function () { },
+})

webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
     login: path.resolve(__dirname, 'src/js', 'login.js'),
     home: path.resolve(__dirname, 'src/js', 'home.js'),
     knowledgeUpdate: path.resolve(__dirname, 'src/js', 'knowledgeUpdate.js'),
-    homeMini: path.resolve(__dirname, 'src/js', 'homeMini.js'),
+    graphDataStatistics: path.resolve(__dirname, 'src/js', 'graphDataStatistics.js'),
     vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
   },
   output: {
@@ -30,7 +30,9 @@ module.exports = {
   },
   resolve: {
     extensions: [".js", ".css", ".json"],
-    alias: {} //配置别名可以加快webpack查找模块的速度
+    alias: {
+      "vue$": "vue/dist/vue.esm.js", // 确保使用 ESM 版本
+    } //配置别名可以加快webpack查找模块的速度
   },
   plugins: [// 多入口的html文件用chunks这个参数来区分
     new HtmlWebpackPlugin({
@@ -59,19 +61,6 @@ module.exports = {
         collapseWhitespace: true //删除空白符与换行符
       }
     }),
-    new HtmlWebpackPlugin({
-      title: '简化更新',
-      template: path.resolve(__dirname, 'src/html', 'homeMini.html'),
-      filename: 'homeMini.html',
-      chunks: ['homeMini', 'vendor', 'common'],
-      inject: true,
-      hash: true, //防止缓存
-      minify: {
-        removeAttributeQuotes: true, //压缩 去掉引号
-        removeComments: true, //移除HTML中的注释
-        collapseWhitespace: true //删除空白符与换行符
-      }
-    }),
     new HtmlWebpackPlugin({
       title: '登录界面',
       template: path.resolve(__dirname, 'src/html', 'login.html'),