From f1f9648a06a4b38c134db8be8fe4b305dda12d9d Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Mon, 22 Jun 2020 17:13:42 +0800
Subject: [PATCH] first commit

---
 .../pc/aside/main.vue => archive/list.vue}    | 47 ++++-----
 components/layouts/mobile/main.vue            |  2 +-
 components/layouts/pc/main.vue                |  6 +-
 config/api.config.js                          | 22 +++++
 config/app.config.js                          | 36 +++++++
 nuxt.config.js                                | 29 +++---
 package-lock.json                             |  8 +-
 package.json                                  |  5 +-
 pages/index.vue                               | 25 +++++
 plugins/axios.js                              | 14 ++-
 server/index.js                               | 28 ++++++
 store/article.js                              | 98 +++++++++++++------
 store/global.js                               | 12 +--
 store/index.js                                |  4 +-
 14 files changed, 252 insertions(+), 84 deletions(-)
 rename components/{layouts/pc/aside/main.vue => archive/list.vue} (73%)
 create mode 100644 config/api.config.js
 create mode 100644 config/app.config.js
 create mode 100644 server/index.js

diff --git a/components/layouts/pc/aside/main.vue b/components/archive/list.vue
similarity index 73%
rename from components/layouts/pc/aside/main.vue
rename to components/archive/list.vue
index 6d0a040..87a345b 100644
--- a/components/layouts/pc/aside/main.vue
+++ b/components/archive/list.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="wrapper">
     <el-col :xs="24" :sm="24" :xl="24" style="margin: 0 auto;">
-      <el-col v-for="article in articles.data" :key="article.idArticle" style="padding-bottom: 1rem;">
+      <el-col v-for="article in articles.articles" :key="article.idArticle" style="padding-bottom: 1rem;">
         <el-card>
           <div class="card-body d-flex flex-column">
             <el-link @click="onRouter('article',article.articleLink)" :underline="false" style="margin-bottom: .5rem;">
@@ -36,10 +36,10 @@
       </el-col>
       <el-col>
         <div class="vertical-container text-center">
-          <el-pagination v-show="pagination.total > 10" v-model="pagination"
+          <el-pagination v-show="articles.pagination.total > 10" v-model="articles.pagination"
                          layout="prev, pager, next"
-                         :current-page="pagination.currentPage"
-                         :total="pagination.total"
+                         :current-page="articles.pagination.currentPage"
+                         :total="articles.pagination.total"
                          @current-change="currentChange">
           </el-pagination>
         </div>
@@ -49,29 +49,32 @@
 </template>
 
 <script>
-  import Vue from 'vue';
-  import { mapState } from 'vuex';
-
-  export default Vue.extend({
-    name: "PcAside",
-    data() {
-      return {
+  export default {
+    name: "ArticleList",
+    props: {
+      articles: {
+        type: Object
       }
     },
-    computed: {
-      ...mapState({
-        articles: state => state.article.list.data,
-        pagination: state => state.article.list.data.pagination
-      })
-    },
     methods: {
-      currentChange(p) {
-        console.log(p);
+      currentChange(page) {
+        this.$emit('currentChange', page);
+      },
+      onRouter(name, data) {
+        if ("article" === name) {
+          this.$router.push({
+            path: data
+          })
+        } else {
+          this.$router.push(
+            {
+              path: '/user/' + data
+            }
+          )
+        }
       }
-    },
-    mounted () {
     }
-  })
+  }
 </script>
 
 <style scoped>
diff --git a/components/layouts/mobile/main.vue b/components/layouts/mobile/main.vue
index 826f126..8b81654 100644
--- a/components/layouts/mobile/main.vue
+++ b/components/layouts/mobile/main.vue
@@ -17,7 +17,7 @@
   import MobileFooter from "./footer";
 
   export default {
-    name: "moblieMain",
+    name: "mobileMain",
     components: {MobileFooter, MobileHeader}
   }
 </script>
diff --git a/components/layouts/pc/main.vue b/components/layouts/pc/main.vue
index 4644c7d..4bed67e 100644
--- a/components/layouts/pc/main.vue
+++ b/components/layouts/pc/main.vue
@@ -4,7 +4,7 @@
       <header-view/>
     </el-header>
     <el-main>
-      <aside-view key="aside"/>
+      <nuxt :nuxt-child-key="$route.name" />
     </el-main>
     <el-footer>
       <footer-view/>
@@ -16,14 +16,12 @@
   import { mapState } from 'vuex'
   import HeaderView from "./header";
   import FooterView from "./footer";
-  import AsideView from './aside/main';
 
   export default {
     name: "PcMain",
     components: {
       HeaderView,
-      FooterView,
-      AsideView
+      FooterView
     },
     computed: {
       ...mapState('global', [])
diff --git a/config/api.config.js b/config/api.config.js
new file mode 100644
index 0000000..6cc4ddc
--- /dev/null
+++ b/config/api.config.js
@@ -0,0 +1,22 @@
+import { NODE_ENV } from '../environment'
+
+const apisMap = {
+  development: {
+    FE: 'http://localhost:3000',
+    BASE: 'http://localhost:8099/vertical-console',
+    CDN: '',
+    PROXY: '/proxy',
+    SOCKET: 'http://localhost:3000',
+    GRAVATAR: '/proxy/static.rymcu.com/avatar'
+  },
+  production: {
+    FE: 'https://rymcu.com',
+    BASE: 'https://api.rymcu.com',
+    CDN: 'https://cdn.rymcu.com',
+    PROXY: 'https://cdn.rymcu.com/proxy',
+    SOCKET: 'https://rymcu.com',
+    GRAVATAR: 'https://static.rymcu.com/avatar'
+  }
+}
+
+export default apisMap[NODE_ENV]
diff --git a/config/app.config.js b/config/app.config.js
new file mode 100644
index 0000000..7d4af69
--- /dev/null
+++ b/config/app.config.js
@@ -0,0 +1,36 @@
+
+export const meta = {
+  title: 'RYMCU - 嵌入式知识学习交流平台',
+  keywords: 'RYMCU,嵌入式,51,单片机,STM,STM8,STM32',
+  description: 'RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。',
+  url: 'https://rymcu.com',
+  author: 'rymcu',
+  email: 'ronger@rymcu.com'
+}
+
+export const links = {
+}
+
+export const friendLinks = {
+}
+
+export const music = {
+  id: '638949385'
+}
+
+export const fetch = {
+  delay: 888
+}
+
+export const color = {
+  primary: '#0088f5'
+}
+
+export default {
+  meta,
+  links,
+  music,
+  fetch,
+  color,
+  friendLinks
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 8ec9399..76facdc 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,3 +1,7 @@
+import appConfig from './config/app.config'
+import apiConfig from './config/api.config'
+import { isProdMode, isDevMode } from './environment'
+
 
 export default {
   /*
@@ -11,22 +15,27 @@ export default {
   render: {
     csp: true
   },
-  /*
-  ** Environment variable configuration
-  */
+  modern: true,
+  dev: isDevMode,
   env: {
-    baseUrl: 'http://127.0.0.1:8099'
+    BASE: apiConfig.BASE,
+    HOST_URL: apiConfig.SOCKET
+  },
+  cache: {
+    max: 100,
+    maxAge: 1000 * 60 * 15
   },
   /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
   head: {
-    title: 'RYMCU - 嵌入式知识学习交流平台',
+    title: appConfig.meta.title,
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
+      { hid: 'keywords', name: 'keywords', content: appConfig.meta.keywords },
+      { hid: 'description', name: 'description', content: appConfig.meta.description }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
@@ -55,7 +64,7 @@ export default {
   ** Nuxt.js modules
   */
   modules: [
-    '@nuxtjs/axios'
+    ['@nuxtjs/axios', { baseURL: apiConfig.BASE }]
   ],
   /*
   ** Build configuration
@@ -63,11 +72,5 @@ export default {
   */
   build: {
     transpile: [/^element-ui/],
-  },
-  proxy: {
-    '/api': {
-      target: 'http://localhost:8099/vertical/',
-
-    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 9521574..d2078af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1406,7 +1406,7 @@
     },
     "@nuxtjs/axios": {
       "version": "5.11.0",
-      "resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/@nuxtjs/axios/download/@nuxtjs/axios-5.11.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40nuxtjs%2Faxios%2Fdownload%2F%40nuxtjs%2Faxios-5.11.0.tgz",
       "integrity": "sha1-J9cpemnhHDkDm5ysrGHi4NDgDx8=",
       "requires": {
         "@nuxtjs/proxy": "^2.0.0",
@@ -5102,7 +5102,7 @@
     },
     "http-proxy-middleware": {
       "version": "1.0.4",
-      "resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz?cache=0&sync_timestamp=1589915551464&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-proxy-middleware%2Fdownload%2Fhttp-proxy-middleware-1.0.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.4.tgz",
       "integrity": "sha1-Ql6hd5hqDNo0+cgeyWHHGa22wqk=",
       "requires": {
         "@types/http-proxy": "^1.17.4",
@@ -5135,7 +5135,7 @@
         },
         "micromatch": {
           "version": "4.0.2",
-          "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&sync_timestamp=1588851826089&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
+          "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-4.0.2.tgz",
           "integrity": "sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=",
           "requires": {
             "braces": "^3.0.1",
@@ -5531,7 +5531,7 @@
     },
     "is-retry-allowed": {
       "version": "1.2.0",
-      "resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-retry-allowed%2Fdownload%2Fis-retry-allowed-1.2.0.tgz",
       "integrity": "sha1-13hIi9CkZmo76KFIK58rqv7eqLQ="
     },
     "is-ssh": {
diff --git a/package.json b/package.json
index 3bec48b..5889386 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,11 @@
     "@nuxtjs/axios": "^5.11.0",
     "cross-env": "^7.0.2",
     "element-ui": "^2.13.2",
+    "express": "^4.17.1",
     "nuxt": "^2.13.0",
     "vditor": "^3.3.2"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@nuxtjs/proxy": "^2.0.0"
+  }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 472175b..7070e47 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,32 @@
 <template>
   <div>
+    <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
   </div>
 </template>
+<script>
+  import ArticleList from '~/components/archive/list'
+  export default {
+    name: 'Index',
+    fetch({store}) {
+      return Promise.all([
+        store.dispatch('article/fetchList')
+      ])
+    },
+    components: {
+      ArticleList
+    },
+    computed: {
+      articles() {
+        return this.$store.state.article.list.data
+      }
+    },
+    methods: {
+      currentChangeArticle(page) {
+        this.$store.dispatch('article/fetchList', {page: page})
+      }
+    }
+  }
+</script>
 
 <style>
   .el-header {
diff --git a/plugins/axios.js b/plugins/axios.js
index 8a10a51..150eda6 100644
--- a/plugins/axios.js
+++ b/plugins/axios.js
@@ -1,5 +1,7 @@
+import apiConfig from '~/config/api.config'
+
 export default function ({ app: { $axios, $cookies } }) {
-  $axios.defaults.baseURL = process.env.baseUrl
+  $axios.defaults.baseURL = apiConfig.BASE
   $axios.defaults.timeout = 30000
   $axios.interceptors.request.use(config => {
     config.headers['X-Token'] = $cookies.get('token') || ''
@@ -11,6 +13,16 @@ export default function ({ app: { $axios, $cookies } }) {
     if (/^[4|5]/.test(response.status)) {
       return Promise.reject(response.statusText)
     }
+    let message;
+    if (typeof(response.data.data) !== 'undefined') {
+      message = response.data.data.message
+    } else if (typeof(response.data) !== 'undefined') {
+      message = response.data.message
+    }
+    console.log(message);
+    if (response.data.success) {
+      return response.data.data
+    }
     return response.data
   })
 }
diff --git a/server/index.js b/server/index.js
new file mode 100644
index 0000000..b47250d
--- /dev/null
+++ b/server/index.js
@@ -0,0 +1,28 @@
+const { Nuxt, Builder } = require('nuxt')
+
+const app = require('express')()
+const isProd = (process.env.NODE_ENV === 'production')
+const port = process.env.PORT || 3000
+
+// 用指定的配置对象实例化 Nuxt.js
+const config = require('./nuxt.config.js')
+config.dev = !isProd
+const nuxt = new Nuxt(config)
+
+// 用 Nuxt.js 渲染每个路由
+app.use(nuxt.render)
+app.set("port", port)
+
+// 在开发模式下启用编译构建和热加载
+if (config.dev) {
+  new Builder(nuxt).build()
+    .then(listen)
+} else {
+  listen()
+}
+
+function listen () {
+  // 服务端监听
+  app.listen(port, '0.0.0.0')
+  console.log('Server listening on `localhost:' + port + '`.')
+}
diff --git a/store/article.js b/store/article.js
index 60e3b71..fdced98 100644
--- a/store/article.js
+++ b/store/article.js
@@ -1,29 +1,29 @@
 import Vue from 'vue';
 import { isBrowser } from '~/environment';
 
-const ARTICLE_API_PATH = 'article';
+export const ARTICLE_API_PATH = '/api/v1/console'
 
 const getDefaultListData = () => {
   return {
-    data: [],
-    pagination: {
-      total: 0,
-      currentPage: 0
+    articles: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    list: {
+      fetching: false,
+      data: getDefaultListData()
+    },
+    detail: {
+      fetching: false,
+      data: {}
     }
   }
 }
-export const state = () => ({
-  list: {
-    fetching: false,
-    data: getDefaultListData()
-  },
-  detail: {
-    fetching: false,
-    data: {}
-  }
-})
 
-export const mutations  = () => ({
+export const mutations = {
   // 文章列表
   updateListFetching(state, action) {
     state.list.fetching = action
@@ -31,6 +31,10 @@ export const mutations  = () => ({
   updateListData(state, action) {
     state.list.data = action
   },
+  updateExistingListData(state, action) {
+    state.list.data.data.push(...action.data)
+    state.list.data.pagination = action.pagination
+  },
 
   // 文章详情
   updateDetailFetching(state, action) {
@@ -38,32 +42,66 @@ export const mutations  = () => ({
   },
   updateDetailData(state, action) {
     state.detail.data = action
-  }
-})
+  },
 
-export const actions  = () => ({
+  // 更新文章阅读全文状态
+  updateDetailRenderedState(state, action) {
+    Vue.set(
+      state.detail.data,
+      'isRenderedFullContent',
+      action == null ? true : action
+    )
+  }
+}
+
+export const actions = {
   // 获取文章列表
   fetchList({commit}, params = {}) {
-    const isRestart = !params.page || params.page === 1
-    const isLoadMore = params.page && params.page > 1
-    console.log(isRestart, isLoadMore)
+
     // 清空已有数据
-    isRestart && commit('updateListData', getDefaultListData())
+    // commit('updateListData', getDefaultListData())
     commit('updateListFetching', true)
 
     return this.$axios
-      .$get(ARTICLE_API_PATH, {params})
+      .$get(`${ARTICLE_API_PATH}/articles`, {params})
       .then(response => {
         commit('updateListFetching', false)
-        isLoadMore
-          ? commit('updateExistingListData', response.result)
-          : commit('updateListData', response.result)
-        if (isLoadMore && isBrowser) {
+        commit('updateListData', response.data)
+        if (isBrowser) {
           Vue.nextTick(() => {
-            window.scrollTo(0, 0);
+            window.scrollTo(0,0);
           })
         }
       })
       .catch(error => commit('updateListFetching', false))
+  },
+
+  // 获取文章详情
+  fetchDetail({ commit }, params = {}) {
+    const delay = fetchDelay(
+      isBrowser && isArticleDetailRoute(window.$nuxt.$route.name) ? null : 0
+    )
+    if (isBrowser) {
+      Vue.nextTick(() => {
+        scrollTo(0, 300, { easing: Easing['ease-in'] })
+      })
+    }
+    commit('updateDetailFetching', true)
+    commit('updateDetailData', {})
+    return this.$axios
+      .$get(`${ARTICLE_API_PATH}/article/${params.article_id}`)
+      .then(response => {
+        return new Promise(resolve => {
+          delay(() => {
+            commit('updateDetailData', response.result)
+            commit('updateDetailFetching', false)
+            resolve(response)
+          })
+        })
+      })
+      .catch(error => {
+        commit('updateDetailFetching', false)
+        return Promise.reject(error)
+      })
   }
-})
+}
diff --git a/store/global.js b/store/global.js
index 5f877e2..4c96108 100644
--- a/store/global.js
+++ b/store/global.js
@@ -8,14 +8,14 @@ export const state = () => ({
 })
 
 
-export const getters = () => ({
+export const getters = {
   isMobile: state => state.isMobile
-})
+}
 
-export const mutations = () => ({
+export const mutations = {
 
-})
+}
 
-export const actions = () => ({
+export const actions ={
 
-})
+}
diff --git a/store/index.js b/store/index.js
index d4a34ac..6032ba7 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,4 +1,4 @@
-export const actions = () => ({
+export const actions = {
   nuxtServerInit(store, {req}) {
     // 初始化时的全局任务
     const initFetchAppData = [
@@ -7,4 +7,4 @@ export const actions = () => ({
     ]
     return Promise.all(initFetchAppData)
   }
-})
+}