t

babel.config.js

@@ -9,6 +9,6 @@ module.exports = {
         "libraryName": "element-ui", 
         "styleLibraryName": "theme-chalk"
       }
-    ]
+    ] 
   ]
 }

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "element-ui": "^2.4.6",
     "highlight.js": "^9.12.0",
     "marked": "^0.5.0",

src/App.vue

@@ -1,11 +1,8 @@
 <template>
-  <router-view></router-view>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>
-<script>
-export default {
-  name: 'app'
-}
-</script>
 
 <style>
 * {
@@ -18,11 +15,13 @@ html, body {
   height: 100%;
 }
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  width: 100%;
+  height: 100%;
+  /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  color: #2c3e50; */
+  /* margin-top: 60px; */
 }
 </style>

src/api/blog.api.js

@@ -0,0 +1,5 @@
+import fetch from '.'
+
+export function saveBlogApi(data) {
+  return fetch('/blog/save', data)
+}

src/api/index.js

@@ -0,0 +1,23 @@
+import axios from 'axios'
+// import queryString from './../untils/querysting'
+
+const base_url = '/api'
+
+export default function fetch(url, data) {
+  return new Promise((resolve, reject) => {
+    axios.post(base_url + url, data, {
+      headers: {}
+    }).then(res => {
+      if(res.data.code === 200) {
+        resolve(res.data.data)
+      }else {
+        resolve(res.data)
+      }
+    }).catch(err => {
+      switch(err.response.status) { 
+        default:
+          alert('网络异常')
+      }
+    })
+  })
+}

src/main.js

@@ -4,7 +4,7 @@ import router from './router/router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
-Vue.use(ElementUI);
+Vue.use(ElementUI); 
 Vue.config.productionTip = false
 
 new Vue({

src/page/Markdown/Markdown.vue

@@ -3,8 +3,11 @@
     <div class="markdown-title">
       <input v-model="title" type="text" placeholder="文章标题">
     </div>
+    <div class="markdown-desc">
+      <input v-model="desc" type="text" placeholder="写点描述吧" />
+    </div>
     <div class="markdown-btn">
-      <el-button type="primary" size="small">发布文章</el-button>
+      <el-button type="primary" size="small" @click="subArticle">发布文章</el-button>
       <el-button type="danger" size="small">删除</el-button>
       <el-button size="small">保存草稿</el-button>
     </div>
@@ -21,14 +24,19 @@ import highlight from "highlight.js";
 import "./../../assets/css/simplemde.css";
 import "./../../assets/css/atom-one-dark.css";
 import {
-  button
-} from 'element-ui'
+  button,
+  Message
+} from 'element-ui';
+import {
+  saveBlogApi
+} from './../../api/blog.api.js'
 export default {
   name: "Markdown",
   data() {
     return {
-      title: "",
-      content: ""
+      title: "这是文章的title",
+      content: "",
+      desc: "这是文章的desc"
     }
   },
   component: {
@@ -59,6 +67,27 @@ export default {
       var value = smde.value();
       this.content = value
     });
+  },
+  methods: {
+    subArticle() {
+      if(!this.title || !this.content) {
+        this.$message({
+          message: '请填写完整内容',
+          type: 'warning'
+        })
+        return
+      }
+      
+      let params = {
+        title: this.title,
+        desc: this.desc,
+        content: this.content,
+        time: (new Date()).getTime()
+      }
+      saveBlogApi(params).then(res => {
+        console.log(res, 'resssss')
+      })
+    }
   }
 };
 </script>
@@ -67,7 +96,7 @@ export default {
 .markdown {
   width: 100%;
   height: 100%;
-  .markdown-title {
+  .markdown-title, .markdown-desc {
     width: 100%;
     height: 45px;
     border-bottom: 1px solid #f1f1f1;
@@ -81,6 +110,13 @@ export default {
       padding-left: 20px;
     }
   }
+  .markdown-desc {
+    height: 30px;
+    input {
+      box-sizing: border-box;
+      font-size: 14px;
+    }
+  }
   .markdown-main {
     box-sizing: border-box;
     width: 100%;

src/router/router.js

@@ -21,6 +21,7 @@ export default new Router({
       path: '/home',
       component: Home,
       children: [
+        {path: '', component: Markdown},
         {path: 'markdown', component: Markdown},
         {path: 'article/:id', component: Article}
       ]

src/untils/querysting.js

@@ -0,0 +1,168 @@
+// QueryString
+// ---------------
+// This module provides utilities for dealing with query strings.
+//
+// Thanks to:
+//  - http://nodejs.org/docs/v0.4.7/api/querystring.html
+//  - http://developer.yahoo.com/yui/3/api/QueryString.html
+//  - https://github.com/lifesinger/dew/tree/master/lib/querystring
+
+var QueryString = exports;
+
+// The escape/unescape function used by stringify/parse, provided so that it
+// could be overridden if necessary. This is important in cases where
+// non-standard delimiters are used, if the delimiters would not normally be
+// handled properly by the built-in (en|de)codeURIComponent functions.
+QueryString.escape = encodeURIComponent;
+
+QueryString.unescape = function (s) {
+  // The + character is interpreted as a space on the server side as well as
+  // generated by forms with spaces in their fields.
+  return decodeURIComponent(s.replace(/\+/g, ' '));
+};
+
+/**
+ * Serialize an object to a query string. Optionally override the default
+ * separator and assignment characters.
+ *
+ * stringify({foo: 'bar'})
+ *   // returns 'foo=bar'
+ *
+ * stringify({foo: 'bar', baz: 'bob'}, ';', ':')
+ *   // returns 'foo:bar;baz:bob'
+ */
+QueryString.stringify = function (obj, sep, eq, arrayKey) {
+  if (!isPlainObject(obj)) return '';
+
+  sep = sep || '&';
+  eq = eq || '=';
+  arrayKey = arrayKey || false;
+
+  var buf = [],
+    key, val;
+  var escape = QueryString.escape;
+
+  for (key in obj) {
+    if (!hasOwnProperty.call(obj, key)) continue;
+
+    val = obj[key];
+    key = QueryString.escape(key);
+
+    // val is primitive value
+    if (isPrimitive(val)) {
+      buf.push(key, eq, escape(val + ''), sep);
+    }
+    // val is not empty array
+    else if (isArray(val) && val.length) {
+      for (var i = 0; i < val.length; i++) {
+        if (isPrimitive(val[i])) {
+          buf.push(
+            key,
+            (arrayKey ? escape('[]') : '') + eq,
+            escape(val[i] + ''),
+            sep);
+        }
+      }
+    }
+    // ignore other cases, including empty array, Function, RegExp, Date etc.
+    else {
+      buf.push(key, eq, sep);
+    }
+  }
+
+  buf.pop();
+  return buf.join('');
+};
+
+/**
+ * Deserialize a query string to an object. Optionally override the default
+ * separator and assignment characters.
+ *
+ * parse('a=b&c=d')
+ *   // returns {a: 'b', c: 'c'}
+ */
+QueryString.parse = function (str, sep, eq) {
+  if (typeof str === 'undefined') {
+    str = document.location.search
+  }
+  var ret = {};
+
+  if (typeof str !== 'string' || trim(str).length === 0) {
+    return ret;
+  }
+
+  // remove ^?
+  str = str.replace(/^\?/, '');
+
+  var pairs = str.split(sep || '&');
+  eq = eq || '=';
+  var unescape = QueryString.unescape;
+
+  for (var i = 0; i < pairs.length; i++) {
+
+    var pair = pairs[i].split(eq);
+    var key = unescape(trim(pair[0]));
+    var val = unescape(trim(pair.slice(1).join(eq)));
+
+    var m = key.match(/^(\w+)\[\]$/);
+    if (m && m[1]) {
+      key = m[1];
+    }
+
+    if (hasOwnProperty.call(ret, key)) {
+      if (!isArray(ret[key])) {
+        ret[key] = [ret[key]];
+      }
+      ret[key].push(val);
+    } else {
+      ret[key] = m ? [val] : val;
+    }
+  }
+
+  return ret;
+};
+
+// Helpers
+
+var toString = Object.prototype.toString;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var isArray = Array.isArray || function (val) {
+  return toString.call(val) === '[object Array]';
+};
+var trim = String.prototype.trim ?
+  function (str) {
+    return (str == null) ?
+      '' :
+      String.prototype.trim.call(str);
+  } :
+  function (str) {
+    return (str == null) ?
+      '' :
+      str.toString().replace(/^\s+/, '').replace(/\s+$/, '');
+  };
+
+/**
+ * Checks to see if an object is a plain object (created using "{}" or
+ * "new Object()" or "new FunctionClass()").
+ */
+function isPlainObject(o) {
+  /**
+   * NOTES:
+   * isPlainObject(node = document.getElementById("xx")) -> false
+   * toString.call(node):
+   *   ie678 === '[object Object]', other === '[object HTMLElement]'
+   * 'isPrototypeOf' in node:
+   *   ie678 === false, other === true
+   */
+  return o &&
+    toString.call(o) === '[object Object]' &&
+    'isPrototypeOf' in o;
+}
+
+/**
+ * If the type of o is null, undefined, number, string, boolean,
+ * return true.
+ */
+function isPrimitive(o) {
+  return o !== Object(o);
+}

vue.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  devServer: {
+    host: 'localhost',
+    port: 8080,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3333',
+        pathRewrite: {
+          '^/api': 'http://localhost:3333'
+        },
+        changeOrigin: false
+      }
+    }
+  }
+}