add web for upload remove file api and add upload remove api to api d…

…ocument (deepwel#28) add web for upload remove file api and add upload remove api to api document
nickyoungforu · Nov 28, 2017 · 2815711 · 2815711
1 parent debf6f6
commit 2815711
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 24 deletions.
diff --git a/chi_annotator/webui/static/js/core.js b/chi_annotator/webui/static/js/core.js
@@ -46,8 +46,8 @@ axios.defaults.baseURL = 'http://localhost:5000';
 var load_local_data = new Vue({
   el: '#load_local_data',
   data: {
-    message: "load local test data",
-    file_path: 'D:\\Github\\Chinese-Annotator\\chi_annotator\\data\\files\\spam_classify_chi_shuf.txt',
+    message: "fill the local data file path",
+    file_path: '',
   },
   // define methods under the `methods` object
   methods: {
@@ -76,4 +76,27 @@ var load_local_data = new Vue({
         });
     }
   }
+})
+
+var upload_remote_file = new Vue({
+  el: '#upload_remote_file',
+  data: {
+    message: "select file to do upload",
+  },
+  // define methods under the `methods` object
+  methods: {
+    upload_remote_file: function (event) {
+      // Make a request for a user with a given ID
+        axios.post('/upload_remote_file',{
+          filepath:  this.file_path,
+        })
+        .then(function (response) {
+          this.message = response.data.message
+          console.log(response);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+  }
 })
diff --git a/chi_annotator/webui/static/web_util.html b/chi_annotator/webui/static/web_util.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>anatine - a free css template</title>
     <link rel="stylesheet" href="styles.css" type="text/css" />
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
@@ -30,11 +30,11 @@ <h2>Welcome to canno chinese annotator!!</h2>
                         <a href="examples.html">Examples</a>
                     </li>
                     <li>
-						<a href="text_classification.html">Text Classification</a>
-					</li>
+                        <a href="text_classification.html">Text Classification</a>
+                    </li>
                     <li>
-						<a href="web_util.html">web api util</a>
-					</li>
+                        <a href="web_util.html">web api util</a>
+                    </li>
                 </ul>
             </nav>
 
@@ -45,26 +45,45 @@ <h2>Welcome to canno chinese annotator!!</h2>
 
             <article>
                 <h3>API Testing</h3>
-
                 <blockquote>
-                    <p>this web is for API testing, it list all API that provided by the web service backend. user can use this web site 
-                        to access the web api send GET or POST request</p>
+                    <p>this web is for API testing, it list all API that provided by the web service backend. user can use this
+                        web site to access the web api send GET or POST request</p>
                 </blockquote>
-
-
+            </article>
+            <article class="expanded">
                 <h3>Load Local Data</h3>
-                <!--<div class="article-info">Posted on <time datetime="2013-05-14">14 May</time> by <a href="#" rel="author">Joe Bloggs</a></div>-->
-                <div id="load_local_data">
-                    <label></label>
-                    <input type="text" size="50" v-model="file_path"/>
-                    <button class="formbutton" v-on:click="load_local_data_post">load local data by POST</button>
-                    <button class="formbutton" v-on:click="load_local_data_get">load local data by GET</button>
-                    <p>{{ message }}</p>
-                </div>
-
-
+                <fieldset>
+                    <form>
+                        <p>web service interface
+                            <strong>http://localhost:5000/load_local_dataset/</strong>
+                            it's function is to upload the data from local data file to Mongo DB. It support both GET and POST method</p>
+                        <div id="load_local_data">
+                            <label for="file_paht_local">local file path</label>
+                            <input type="text" name="file_paht_local" size="50" v-model="file_path" />
+                            <a href="#" class="button" v-on:click="load_local_data_post">load local data by POST</a>
+                            <a href="#" class="button" v-on:click="load_local_data_get">load local data by GET</a>
+                            <p>{{ message }}</p>
+                        </div>
+                    </form>
+                </fieldset>
+            </article>
+            <article class="expanded">
+                <h3>Upload remote file</h3>
+                <fieldset>
+                    <form action="" method=post enctype=multipart/form-data>
+                        <p>web service interface
+                            <strong>http://localhost:5000/upload_remote_file/</strong>
+                            it's function is to upload the data from data file provied by http request to Mongo DB. It only support both POST method</p>
+                        <div id="upload_remote_file">
+                            <p>
+                                <input type="file" name="file">
+                                <input class="formbutton" type="submit" value="Upload">
+                            </p>
+                            <p>{{ message }}</p>
+                        </div>
+                    </form>
+                </fieldset>
             </article>
-
 
             <footer class="clear">
                 <p>&copy; 2017 sitename.

diff --git a/docs/apis.md b/docs/apis.md
@@ -23,4 +23,10 @@
 支持post和get请求
 参数：filepath 本地文件的绝对路径
 
-功能： 将本地的文件load到Mongo数据库
+功能： 将本地的data文件中的内容存入MongoDB
+
+//upload_remote_file
+仅支持post请求
+参数：上传的file文件
+
+功能：解析上次的data文件，并将其内容存入mongoDB