实现登录

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@element-plus/icons": "^0.0.11",
         "axios": "^0.24.0",
+        "blueimp-md5": "^2.19.0",
         "core-js": "^3.6.5",
         "element-plus": "^1.2.0-beta.5",
         "moment": "^2.29.1",
@@ -3609,6 +3610,11 @@
       "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
       "dev": true
     },
+    "node_modules/blueimp-md5": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+    },
     "node_modules/bn.js": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz",
@@ -18342,6 +18348,11 @@
       "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
       "dev": true
     },
+    "blueimp-md5": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+    },
     "bn.js": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/bn.js/download/bn.js-5.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
     "axios": "^0.24.0",
+    "blueimp-md5": "^2.19.0",
     "core-js": "^3.6.5",
     "element-plus": "^1.2.0-beta.5",
     "moment": "^2.29.1",

src/utils/baseUrl.js

@@ -1,3 +1,3 @@
-const baseUrl = "http://localhost:8090/"
+//const baseUrl = "http://localhost:8090/"
-//const baseUrl = "http://192.168.31.113:8090/"
+const baseUrl = "http://36.5.61.1:8081/"
 export default baseUrl;

src/views/Home.vue

@@ -29,20 +29,59 @@
           <div style="height: 100%; margin-right: 10px;
                       display: flex; flex-direction: column;justify-content: center;align-items: flex-end;">
             <span
-                style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">{{ staffName }}</span>
+                style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 14px;font-weight: bold; ">
+              {{staffName }}</span>
             <span style="color: #606266; font-family: 'Segoe UI',sans-serif;font-size: 12px;">{{ staffUsername }}</span>
 
           </div>
         </div>
       </div>
 
-      <div style="width: 100%;flex: 1;background-color: #409EFF">
+      <div style="width: 100%;flex: 1;">
-
+        <div id="" class="tableBar">
+          <table cellspacing="" cellpadding="">
+            <tr>
+              <th>项目名称</th>
+              <th>合同额（万）</th>
+              <th>重要程度</th>
+              <th>项目分类</th>
+              <th>项目类型</th>
+              <th>项目进度</th>
+              <th>操作</th>
+            </tr>
+            <tr v-for="item in tableData.list">
+              <td style="color: #409EFF;">{{ item.name }}</td>
+              <td>{{ item.price + '万' }}</td>
+              <td>{{ item.important }}</td>
+              <td>{{ item.classification }}</td>
+              <td>{{ item.type }}</td>
+              <td>
+                <el-progress :text-inside="true" :stroke-width="18" :status="item.schedule === 100 ? 'success' : ''"
+                             :percentage="item.schedule"></el-progress>
+              </td>
+              <td>
+                <button type="button">结项</button>
+              </td>
+            </tr>
+          </table>
+          <!-- 分页 -->
+          <el-pagination
+              @current-change="handleCurrentChange"
+              @size-change="handleSizeChange"
+              :current-page="currentPage"
+              :page-sizes="[5, 10, 15, 20]"
+              :page-size="tableData.perPage"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="12"
+              style="float: right;margin-top: 20px;">
+          </el-pagination>
+        </div>
       </div>
     </div>
-  </div>
 
+  </div>
 </template>
+
 <script setup>
 </script>
 <script>
@@ -58,20 +97,126 @@ export default {
   data() {
     return {
       staffName: '刘金龙',
-      staffUsername: 'liujinlong'
+      staffUsername: 'liujinlong',
+
+      tableData: {
+        count: 100,
+        currentPage: 1,
+        perPage: 10,
+        list: [{
+          name: 'OTC研发项目',
+          price: 100,
+          important: '非A类',
+          classification: '外包项目',
+          type: '工作量结算类',
+          schedule: 0
+        },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 50
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: '教育电商项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          },
+          {
+            name: 'OTC研发项目',
+            price: 100,
+            important: '非A类',
+            classification: '研发项目',
+            type: '纯研发类',
+            schedule: 100
+          }
+        ]
+      }
     }
   },
   mounted() {
 
   },
   methods: {
+
     logout() {
-      router.push({path: '/login'})
+      request({
+        url: 'staff/logout',
+        method: 'post',
+      }).then(response => {
+        router.push({path: '/login'})
+      }).catch(function (error) {
+        console.log(error)
+      })
+
     },
+    // 选择一页显示多少条数据
+    handleSizeChange(val) {
+
+    },
+    // 选择当前的是第几页
+    handleCurrentChange(val) {
+
+    },
+
   }
 }
 </script>
 <style>
+
 .home {
   height: 100%;
   max-height: 100%;
@@ -79,6 +224,39 @@ export default {
   max-width: 100%;
 }
 
+
+.tableBar {
+  width: 1000px;
+}
+
+.tableBar table {
+  width: 100%;
+  border-bottom: 1px solid red;
+  border-collapse: collapse;
+}
+
+.tableBar table tr th {
+  font-weight: bolder;
+}
+
+.tableBar table tr {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid #ddd;
+  text-align: center;
+}
+
+.tableBar table button {
+  color: #FFF;
+  background-color: #409EFF;
+  border-color: #409EFF;
+  padding: 5px 20px;
+  border: none;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+
 .icon-quit {
   color: #606266;
 }
@@ -95,6 +273,7 @@ div.div-quitButton {
 div.div-quitButton:hover {
   cursor: pointer;
 }
+
 div.div-quitButton:hover > .icon-quit {
   color: #409EFF;
 }

src/views/Login.vue

@@ -27,7 +27,6 @@
     </div>
   </div>
 
-
 </template>
 <script setup>
 import {User, Key} from '@element-plus/icons'
@@ -35,6 +34,7 @@ import {reactive, ref} from 'vue'
 import request from '@/utils/request'
 import router from '@/router'
 import baseUrl from "@/utils/baseUrl";
+import md5 from 'blueimp-md5'
 
 const axios = require("axios");
 
@@ -47,27 +47,25 @@ const loginForm = reactive({
 console.log(localStorage.getItem('token'))
 
 const onSubmit = () => {
-  router.push({path: '/'})
+  let param = {
-  // let param = new FormData()
+    staffUsername: loginForm.username.trim(),
-  // param.append('id', loginForm.username.trim())
+    staffPassword: md5(loginForm.password.trim())
-  // param.append('password', loginForm.password.trim())
+  }
-  // axios.post(baseUrl + 'api/login', param).then(function (response) {
+
-  //   if (response.data === 'error') {
+  axios.post(baseUrl + 'staff/login', param).then(function (response) {
-  //     console.log(response.data)
+    if (response.data === 'error') {
-  //     showAlert.value = true
+      console.log(response.data)
-  //   } else {
+      showAlert.value = true
-  //     localStorage.setItem('seller_id', param.get('id'))
+    } else {
-  //     localStorage.setItem('token', response.data)
+      console.log(response.data)
-  //     localStorage.setItem('expire', new Date().getTime().toString())
+      localStorage.setItem('token', response.data.data.Token)
-  //     if (param.get('id') === 'admin')
+      localStorage.setItem('expire', new Date().getTime().toString())
-  //       router.push({path: '/TrainManage'})
+      router.push({path: '/'})
-  //     else
+    }
-  //       router.push({path: '/'})
+
-  //   }
+  }).catch(function (error) {
-  //
+    console.log(error);
-  // }).catch(function (error) {
+  });
-  //   console.log(error);
-  // });
 }
 </script>
 <script>