理清思路回来填坑啦

ShellBin · Dec 6, 2020 · 09aea29 · 09aea29
1 parent f45d96b
commit 09aea29
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,6 @@
     "body-parser": "^1.19.0",
     "compressorjs": "^1.0.6",
     "cookie-parser": "^1.4.5",
-    "cors": "^2.8.5",
     "css-loader": "^3.2.0",
     "express": "4.16.x",
     "file-loader": "^4.2.0",

diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv=“Content-Language” content=“zh_CN”>
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+      <link rel="icon" href="data:image/ico;base64,aWNv">
     <title>收集～</title>
   </head>
   <body>

diff --git a/server/adminPage/set-task.js b/server/adminPage/set-task.js
@@ -0,0 +1,12 @@
+const config = require('../config')
+const fs = require('fs')
+const path = require('path')
+
+function setTask (req, res) {
+    if(req.cookies.token === token) {
+        const data = JSON.parse(fs.readFileSync(path.resolve(__dirname,"../data.json"), 'utf-8'))
+        // 修改 titleName
+    } else {
+
+    }
+}
diff --git a/server/config.js b/server/config.js
@@ -1,6 +1,6 @@
 module.exports = {
     http: {
-        port: 8089,
+        port: 8001,
         host: ''
     },
     fs: {

diff --git a/server/index.js b/server/index.js
@@ -2,7 +2,6 @@ const express = require('express')
 const bodyParser = require('body-parser')
 const multer = require('multer')
 const cookieParser = require('cookie-parser')
-const cors = require('cors')
 
 const config = require('./config')
 const indexPage = require('./indexPage')
@@ -14,7 +13,6 @@ const upload = multer({dest: './uploads-temp/'})
 
 server.use(bodyParser.json())
 server.use(bodyParser.urlencoded({ extended: false }))
-server.use(cors())
 server.use(cookieParser())
 
 server.listen(config.http.port)

diff --git a/server/indexPage/fetch-task.js b/server/indexPage/fetch-task.js
@@ -3,8 +3,6 @@ const fs = require('fs')
 const path = require('path')
 
 function fetchTask (req, res) {
-    console.log('user "' + req.connection.remoteAddress + '" Fetching a task now')
-
     const data = JSON.parse(fs.readFileSync(path.resolve(__dirname,"../data.json"), 'utf-8'))
 
     res.send({

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <div class="admin-view-button" @click="isAdmin = !isAdmin"><span v-show="isAdmin">返回</span><span v-show="!isAdmin">登录</span></div>
     <template v-if="!isAdmin"> <IndexPage/> </template>
     <template v-if="isAdmin"> <AdminPage/> </template>
   </div>
@@ -22,10 +23,6 @@ export default {
   },
   mounted() {
     console.log('欢迎使用')
-    if(location.hash === '#admin') {
-    //if(location.hash !== '#admin') { // 调试用途
-      this.isAdmin = true
-    }
   }
 }
 </script>
@@ -43,4 +40,10 @@ a {
   color: #42b983;
 }
 
-</style>
+.admin-view-button {
+  position: absolute;
+  right: 50px;
+  bottom: 50px;
+}
+
+</style>
diff --git a/src/main.js b/src/main.js
@@ -2,6 +2,9 @@ import Vue from 'vue'
 import App from './App'
 import axios from 'axios'
 
+// 设置后端接口的地址
+Vue.prototype.backEndHost = 'http://localhost/api/v1/'
+
 Vue.prototype.axios = axios;
 
 Vue.config.productionTip = false

diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
@@ -4,7 +4,7 @@
       <h2>管理员登录</h2>
       <h3>{{message}}</h3>
       <label>管理密码：</label>
-      <input type="password" v-model.lazy="password" style="margin: 1rem 0">
+      <input type="password" v-model.lazy="password" @keyup.enter="login" style="margin: 1rem 0">
       <button @click="login">登录</button>
     </div>
     <div id="admin_layer" v-if="isLogin">
@@ -18,6 +18,7 @@
         <h3>目前收集到的所有文件</h3>
         <button>下载所有</button>
         <p>服务器端文件将在最后一次下载后12小时内自动删除，请妥善保存文件</p>
+        <button @click="clearAllCookie">退出登录状态</button>
       </div>
     </div>
   </div>
@@ -28,47 +29,59 @@ export default {
   name: 'AdminPage',
   data () {
     return {
-      server:'http://localhost:3001/api/v1/',
+      haveToken: false,
       message: '欢迎',
       taskName:'文件',
       password: '',
-      isLogin: false, // 调试中，默认应为 false
+      isLogin: false,
       nameList: '空'
     }
   },
   mounted() {
-    if(document.cookie) {
+    this.haveToken = Boolean(document.cookie.match(/^(.*;)?\s*token\s*=\s*[^;]+(.*)?$/))
+
+    if(this.haveToken) {
       console.log('自动登录')
       this.login()
     }
   },
   methods: {
     login() {
-      if(this.password === '') {
+      if(!this.haveToken && this.password === '') {
         this.message = '请输入密码'
       } else {
         //进入登录逻辑
-        this.axios.post(this.server + 'login', {
-          pw: this.password
+        this.axios.post(this.backEndHost + 'login', {
+          pw: this.password,
+          withCredentials: true
         }).then (res => {
           if(res.data.status === 'success') {
             this.taskName = res.data.titleName
             this.message = ''
             if(res.data.nameList.length > 0){
-              this.nameList = res.data.nameList + '，共 ' + res.data.nameList.length +' 人' 
+              this.nameList = res.data.nameList + '，共 ' + res.data.nameList.length +' 人'
             }
             this.isLogin = true
-            //添加 cookie
             console.log('登录成功')
           } else {
-            this.message = '密码错误，请检查后重试'
+            this.message = '凭据无效，请检查后重试'
             //删除 cookie
+            this.clearAllCookie()
           }
         }).catch(error => {
           console.log(error)
           this.message = '网络错误'
         })
       }
+    },
+    clearAllCookie() {
+      const keys = document.cookie.match(/[^ =;]+(?=\=)/g);
+      if(keys) {
+        for(let i = keys.length; i--;) {
+          document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
+        }
+      }
+      alert('下次该输密码重新登录噜')
     }
   },
   updateTask() {

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -4,8 +4,7 @@
       <h2 class="title">"{{titleName}}" 收集</h2>
       <div class="info">
         <p class="intro">是一项仅面向 {{className}} 的轻量服务</p>
-        <p class="intro">填写信息一键提交，重命名等破事后台会帮你搞定</p>
-        <p class="intro">同时，收集文件截图的同学也可以一键打包下载全班文件</p>
+        <p class="intro">这样收集者会轻松一些（鞠躬）</p>
       </div>
 
       <div v-show="!haveStarted" class="forms">
@@ -15,8 +14,8 @@
         <input type="file" ref="file">
       </div>
 
-      <h2>状态：{{ displayStatus }}</h2>
-      <h3>{{ displayMessage }}</h3>
+      <h3>状态：{{ displayStatus }}</h3>
+      <h4>{{ displayMessage }}</h4>
 
       <div class="button start" role="button" v-show="!haveStarted" @click="uploadStart">
         <span>上传文件</span>
@@ -43,7 +42,6 @@ export default {
   name: 'IndexPage',
   data () {
     return {
-      server:'http://localhost:3001/api/v1/',
       haveAnyTask: false,
       titleName: '文件',
       className: '某校某系某班',
@@ -55,9 +53,7 @@ export default {
     }
   },
   mounted() {
-    if(location.hash !== '#admin') {
-      this.fetchTask()
-    }
+    this.fetchTask()
   },
   methods: {
     uploadStart () {
@@ -97,7 +93,7 @@ export default {
     uploadFile(file) {
       const data = new FormData()
       data.append('file', file)
-      this.axios.post(this.server + 'uploadFile', data, {
+      this.axios.post(this.backEndHost + 'uploadFile', data, {
         headers: {
           'Content-Type': 'multipart/form-data',
           'stuId': this.stuId
@@ -111,20 +107,21 @@ export default {
             this.displayStatus = '上传失败'
             this.displayMessage = '检查学号是否正确，网络是否正常'
             this.isError = true
-            console.log(error)
+            console.error(error)
           })
     },
     fetchTask () {
-      this.axios.get(this.server + 'fetchTask')
+      this.axios.get(this.backEndHost + 'fetchTask')
         .then((response) => {
           if(response.data.status === 'ok') {
+            console.log('获取到了任务')
             this.haveAnyTask = response.data.haveAnyTask
             this.titleName = response.data.titleName
             this.className = response.data.className
           } else console.log('API 内部出错')
         })
         .catch(function (error) {
-          console.log(error)
+          console.error(error)
         })
     },
     back () {
@@ -145,18 +142,18 @@ export default {
 .button {
   border: 1px solid #2c3e50;
   border-radius: 9px;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 .start {
   width: 10rem;
   margin: 2rem auto 0.7rem;
   font-size: 1.2rem;
 }
 .info {
-  margin: 1rem auto;
+  margin: 1rem auto 2rem;
 }
 .forms {
-  margin: 1.2rem auto;
+  margin: 1.2rem auto 2rem;
 }
 .intro {
   margin: 0;