创建测试用例上传下载基础组件

account/middleware.py

@@ -5,6 +5,7 @@ import urllib
 
 from django.http import HttpResponse
 from django.utils.translation import ugettext as _
+from django.contrib import auth
 
 from utils.shortcuts import redirect_to_login
 from .models import AdminType

frontend/admin/src/components/problem/problem.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
-        <problem-sample></problem-sample>
+        <test-case-mgnt></test-case-mgnt>
     </div>
 </template>
 
 <script>
-    import problemSample from "./problemSample.vue"
+    import testCaseMgnt from "./testCaseMgnt.vue"
 
     export default({
         components: {
-            problemSample
+            testCaseMgnt
         }
     })
 </script>

frontend/admin/src/components/problem/testCaseMgnt.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <div class="col-md-12">
+            <label>{{ $t("problem.testCase") }}
+                <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
+            </label>
+            <small class="text-info">
+                请将所有测试用例打包在一个zip文件中上传，所有文件要在压缩包的根目录，且输入输出文件名要以从1开始连续数字标识要对应例如：
+                <br>1.in 1.out 2.in 2.out(普通题目)或者1.in 2.in 3.in(Special Judge)
+                <a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
+                   target="_blank">{{ $t("adminUtils.help") }}
+                </a>
+            </small>
+            <p>{{ $t("problem.uploadProgress") }}<span v-text="uploadProgress"></span>%</p>
+            <table class="table table-striped" v-if="testCaseList">
+                <tr>
+                    <td>ID</td>
+                    <td>{{ $t("adminUtils.input") }}</td>
+                    <td>{{ $t("adminUtils.output") }}</td>
+                </tr>
+                <tr v-for="testCase in testCaseList">
+                    <td>{{ $index + 1 }}</td>
+                    <td>{{ testCase.input }}</td>
+                    <td>{{ testCase.output }}</td>
+                </tr>
+            </table>
+        </div>
+        <div class="col-md-12">
+            <div class="form-group">
+                <uploader uploader-id="testCaseUploader"
+                          upload-path="/"
+                          :accept="{title: 'testcase zip', extensions: 'zip', mimeTypes: 'application/zip'}"
+                          :upload-success="uploadSuccess"
+                          :upload-error="uploadError"
+                          :upload-progress="uploadProgress">
+                </uploader>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import uploader from "../utils/uploader.vue"
+
+    export default({
+        data() {
+            return {
+                downloadUrl: "",
+                uploadProgress: 0,
+                testCaseList: []
+            }
+        },
+        components: {
+            uploader
+        },
+        methods: {
+            uploadSuccess: (f, response)=> {
+                alert("success");
+            },
+            uploadError: (f, reason)=> {
+                alert("error");
+            },
+            uploadProgress: (file, percentage)=> {
+                console.log(percentage);
+            }
+        }
+    })
+</script>

frontend/admin/src/components/utils/uploader.vue

@@ -1,48 +1,54 @@
 <template>
-    <div id="{{ uploaderid }}">
+    <div id="{{ uploaderId }}">
         <div class="btns">
-            <div id="picker"> picker</div>
+            <div id="picker">{{ $t("adminUtils.chooseFile") }}</div>
         </div>
     </div>
-
 </template>
 
 
 <script>
     import WebUploader from "webuploader"
+    import getCookie from "../../utils/cookie"
 
     export default ({
         props: {
-            uploaderid: {
-                required: true
+            uploaderId: {
+                required: true,
             },
-            uploadpath: {
-                required: false,
-                default: "/server"
+            uploadPath: {
+                required: true,
             },
             accept: {
-                required: false,
-                default(){
-                    return {
-                        title: 'Images',
-                        extensions: 'gif,jpg,jpeg,bmp,png',
-                        mimeTypes: 'image/*'
-                    }
-                }
+                required: true,
+            },
+            uploadSuccess: {
+                required: true
+            },
+            uploadProgress: {
+                required: true
+            },
+            uploadError: {
+                required: true
             }
-
         },
         attached() {
             var self = this;
             var uploader = WebUploader.create({
-                dnd: '#' + self.uploaderid,
+                dnd: '#' + self.uploaderId,
                 runtimeOrder: "html5",
                 server: self.uploadpath,
-                pick: '#' + self.uploaderid,
+                pick: '#' + self.uploaderId,
                 resize: false,
                 auto: true,
                 accept: self.accept
             });
+            uploader.on("uploadBeforeSend", (obj, data, headers)=> {
+                headers["X-CSRFToken"] = getCookie("csrftoken");
+            });
+            uploader.on("uploadSuccess", this.uploadSuccess);
+            uploader.on("uploadError", this.uploadError);
+            uploader.on("uploadProgress", this.uploadProgress);
         }
     })
 </script>

frontend/admin/src/locales.js

@@ -57,7 +57,10 @@ export default {
             addSample: "添加样例",
             fold: "折叠",
             show: "展开",
-            deleteThisSample: "删除这组样例?"
+            deleteThisSample: "删除这组样例?",
+            testCase: "测试用例",
+            uploadProgress: "上传进度",
+
         },
         adminUtils: {
             search: "搜索",
@@ -82,6 +85,13 @@ export default {
             delete: "删除",
             input: "输入",
             output: "输出",
+            download: "下载",
+            upload: "上传",
+
+            score: "分数",
+            help: "帮助",
+
+            chooseFile: "选择文件",
 
             unsupportedBrowserWarningMsg: "当前网页 <strong>不支持</strong> 你正在使用的浏览器, 为了正常的访问,请到 <a href=\"http://browsehappy.com/\"> 升级你的浏览器</a>"
         }

frontend/admin/src/main.js

@@ -8,6 +8,7 @@ import "bootstrap"
 import bootbox from "bootbox"
 
 import locale from "./locales"
+import getCookie from "./utils/cookie"
 
 import userList from "./components/account/userList.vue"
 import editUser from "./components/account/editUser.vue"
@@ -32,14 +33,6 @@ Object.keys(locale).forEach(function (lang) {
 // custom ajax
 Vue.use({
     install: function (Vue, options) {
-        function getCookie(name) {
-            var value = "; " + document.cookie;
-            var parts = value.split("; " + name + "=");
-            if (parts.length == 2) {
-                return parts.pop().split(";").shift();
-            }
-        }
-
         Vue.prototype.request = function (option) {
             var request = new XMLHttpRequest();
             request.open(option.method, option.url, true);
@@ -74,10 +67,10 @@ Vue.use({
                     request.onerror();
                 }
             };
-            request.setRequestHeader('x-requested-with', 'XMLHttpRequest');
-            if (option.method.toLowerCase() == 'post' || option.method.toLowerCase() == 'put') {
+            request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+            if (option.method.toLowerCase() != 'get') {
                 request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-                request.setRequestHeader('x-csrftoken', getCookie('csrftoken'));
+                request.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
                 request.send(JSON.stringify(option.data));
             }
             else {

frontend/admin/src/utils/cookie.js

@@ -0,0 +1,10 @@
+function getCookie(name) {
+    var value = "; " + document.cookie;
+    var parts = value.split("; " + name + "=");
+    if (parts.length == 2) {
+        return parts.pop().split(";").shift();
+    }
+}
+
+
+module.exports = getCookie;