创建文章页面功能全部完成

RenektonChr · Dec 15, 2020 · aa3046a · aa3046a
1 parent f43053a
commit aa3046a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -9,7 +9,7 @@ export interface ResponseType<P = {}> {
 export interface UserProps {
   isLogin: boolean;
   nickName?: string;
-  _id?: number;
+  _id?: string;
   column?: string;
   email?: string;
 }
@@ -41,9 +41,10 @@ export interface PostProps {
   title: string;
   excerpt?: string;
   content?: string;
-  image?: ImageProps;
+  image?: ImageProps | string;
   createdAt?: string;
   column: string;
+  author?: string;
 }
 const getAndCommit = async (url: string, mutationName: string, commit: Commit) => {
   const { data } = await axios.get(url)
@@ -114,6 +115,9 @@ const store = createStore<GlobalDataProps>({
     login ({ commit }, payload) {
       return postAndCommit('/user/login', 'login', commit, { ...payload })
     },
+    createPost ({ commit }, payload) {
+      return postAndCommit('/posts', 'createPost', commit, { ...payload })
+    },
     loginAndFetch ({ dispatch }, loginData) {
       return dispatch('login', loginData).then(() => {
         return dispatch('fetchCurrentUser')

diff --git a/src/view/CreatePost/index.vue b/src/view/CreatePost/index.vue
@@ -4,6 +4,7 @@
     <upload
       action="/upload"
       :beforeUpload="uploadCheck"
+      @file-uploaded="handleFileUploaded"
       class="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4 file-upload-container"
     >
       <h2>点击上传头图</h2>
@@ -49,13 +50,12 @@
 import { defineComponent, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
-import { GlobalDataProps, PostProps } from '../../store/index'
+import { GlobalDataProps, PostProps, ResponseType, ImageProps } from '../../store/index'
 import ValidateForm from '@/components/ValidateForm/index.vue'
 import ValidateInput, { RulesProp } from '@/components/ValidateInput/index.vue'
 import Upload from '../../components/Upload/index.vue'
 import { beforeUploadCheck } from '../../utils/helper'
 import CreateMessage from '../../components/CreateMessage/index'
-// import axios from 'axios'
 export default defineComponent({
   components: {
     ValidateForm,
@@ -67,23 +67,36 @@ export default defineComponent({
     const store = useStore<GlobalDataProps>()
     const titleVal = ref('')
     const contentVal = ref('')
+    let imageId = ''
     const titleRules: RulesProp = [
       { type: 'required', message: '文章标题不能为空' }
     ]
     const contentRules: RulesProp = [
       { type: 'required', message: '文章详情不能为空' }
     ]
+    const handleFileUploaded = (rawData: ResponseType<ImageProps>) => {
+      if (rawData.data._id) {
+        imageId = rawData.data._id
+      }
+    }
     const onFormSubmit = (result: boolean) => {
       if (result) {
-        const { column } = store.state.user
+        const { column, _id } = store.state.user
         if (column) {
           const newPost: PostProps = {
             title: titleVal.value,
             content: contentVal.value,
-            column
+            column,
+            author: _id
+          }
+          if (imageId) {
+            newPost.image = imageId
           }
-          store.commit('createPost', newPost)
-          router.push({ name: 'column', params: { id: column } })
+          store.dispatch('createPost', newPost).then((res) => {
+            console.log(res)
+            CreateMessage('发表成功', 'success')
+            router.push({ name: 'column', params: { id: column } })
+          })
         }
       }
     }
@@ -104,7 +117,8 @@ export default defineComponent({
       titleRules,
       contentRules,
       onFormSubmit,
-      uploadCheck
+      uploadCheck,
+      handleFileUploaded
     }
   }
 })