feat: resource api debug

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@types/swiper": "^5.4.1",
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "sass": "^1.27.0",
     "sass-loader": "^10.0.4",
@@ -70,13 +71,13 @@
     "loader-utils": "^2.0.0",
     "markdown-it": "^12.0.2",
     "markdown-it-anchor": "^6.0.0",
+    "markdown-it-chain": "^1.3.0",
+    "markdown-it-container": "^3.0.0",
     "prettier": "^1.19.1",
     "transliteration": "^2.2.0",
     "typescript": "~3.9.3",
     "vue-loader": "16.0.0-beta.7",
-    "vue-template-compiler": "^2.6.12",
-    "markdown-it-chain": "^1.3.0",
-    "markdown-it-container": "^3.0.0"
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,

src/sites/config/env.ts

@@ -0,0 +1,38 @@
+type EnvConfig = {
+  baseUrl: string;
+  buildTime: number | string | undefined;
+  isPrd: boolean;
+};
+
+/**
+ * 配置编译环境和线上环境之间的切换
+ *
+ * baseUrl: 域名地址
+ */
+
+const config: EnvConfig = {
+  baseUrl: '',
+  buildTime: process.env.buildTime,
+  isPrd: true // 是否为线上
+};
+
+console.log('NODE_ENV', process.env.NODE_ENV);
+
+switch (process.env.NODE_ENV) {
+  case 'development':
+    /*
+     * 开发环境    => npm run dev
+     */
+    config.isPrd = false;
+    config.baseUrl = '/devServer';
+    // config.baseUrl = '/api' //需要代理时使用，并且放开webpack.dev中的proxy
+    break;
+  case 'production':
+    /*
+     * 线上环境 => npm run build
+     */
+    config.isPrd = true;
+    config.baseUrl = 'https://nutui-server.jd.com';
+    break;
+}
+export default config;

src/sites/doc/views/Resource.vue

@@ -9,10 +9,7 @@
   <div class="resource-content">
     <div class="resource-block">
       <h4 class="sub-title">设计资源</h4>
-      <p class="sub-desc"
-        >这里提供 NUT UI 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。你可以在这个<span class="sub-red">地址</span>中反馈对新版本
-        Sketch Symbols 组件的意见。</p
-      >
+      <p class="sub-desc">这里提供 NUT UI 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。你可以在这个<span class="sub-red">地址</span>中反馈对新版本 Sketch Symbols 组件的意见。</p>
       <div class="no-data">
         <img class="nodata-img-joy" src="../../assets/images/img-joy.png" />
         <p class="nodata-desc">敬请期待</p>
@@ -20,58 +17,17 @@
     </div>
     <div class="resource-block">
       <h4 class="sub-title">设计资源</h4>
-      <p class="sub-desc"
-        >想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui
-        官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p
-      >
+      <p class="sub-desc">想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Ant Design？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui 官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p>
       <div class="tab-box">
         <div class="tab-hd">
-          <div
-            class="tab-hd-item"
-            :class="{ active: data.activeIndex === index }"
-            v-for="(item, index) in data.tabData"
-            :key="index"
-            @click="clickTab(index)"
-          >
+          <div class="tab-hd-item" :class="{ active: data.activeIndex === index }" v-for="(item, index) in data.tabData" :key="index" @click="clickTab(index)">
             {{ item.title }}
           </div>
         </div>
         <div class="tab-bd" v-show="data.activeIndex === 0">
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">Webpack那些你不知道的事</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务Webpack那些你不知道那些你不知道那些你不知道</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
-          </div>
-          <div class="design-item">
-            <img class="img-design" src="../../assets/images/img-article.jpg" />
-            <p class="design-title">NutUI 落地实践-让组件库服务慧采协同采购业务</p>
+          <div class="design-item" v-for="item in data.articleList" :key="item.id">
+            <img class="img-design" :src="item.cover_image" />
+            <p class="design-title">{{ item.title }}</p>
           </div>
         </div>
         <div class="tab-bd" v-show="data.activeIndex === 1">
@@ -88,10 +44,7 @@
     </div>
     <div class="resource-block">
       <h4 class="sub-title">社区文章</h4>
-      <p class="sub-desc"
-        >想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Nut Ui？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui
-        官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p
-      >
+      <p class="sub-desc">想要了解 Nut Ui 设计体系背后的故事？如何才能更好的应用 Nut Ui？你可以查阅下述我们为你精挑细选的文章。也欢迎关注Nut Ui 官方专栏，这里常有关于Nut Ui 设计体系下相关话题内容的最新分享和讨论.</p>
       <ul class="article-box">
         <li class="article-item">
           <a class="article-link">
@@ -109,9 +62,10 @@
   <doc-footer></doc-footer>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, reactive } from 'vue';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
+import { ArticleApiService } from '@/sites/service/ArticleApiService';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -119,26 +73,39 @@ export default defineComponent({
     [Footer.name]: Footer
   },
   setup() {
+    const articleList: any[] = [];
     const data = reactive({
+      articleList,
       tabData: [
         {
           title: '全部文章'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验'
-        },
-        {
-          title: '性能体验'
         }
+        // {
+        //   title: '性能体验'
+        // },
+        // {
+        //   title: '性能体验'
+        // },
+        // {
+        //   title: '性能体验'
+        // },
+        // {
+        //   title: '性能体验'
+        // }
       ],
       activeIndex: 0
     });
+    onMounted(() => {
+      console.log('mounted');
+      const articleApiService = new ArticleApiService();
+      articleApiService.getArticle().then(res => {
+        if (res?.state == 0) {
+          console.log(res.value);
+          data.articleList = res.value.list as any[];
+        }
+      });
+    });
+
     const clickTab = (index: number) => {
       console.log('22', index);
       data.activeIndex = index;

src/sites/service/ArticleApiService.ts

@@ -0,0 +1,23 @@
+import { HttpClient } from './HttpClient';
+
+export class ArticleApiService {
+  private httpClient: HttpClient;
+
+  constructor() {
+    this.httpClient = new HttpClient();
+  }
+  /**
+   * 获取nutui文章
+   * @returns
+   * @memberof ArticleApiService
+   */
+  getArticle() {
+    return this.httpClient.request('/devServer/server/api/document/search', 'get', {
+      keyword: 'nutui',
+      page: 1,
+      per_page: 100,
+      order: 'time',
+      field: '""'
+    });
+  }
+}

src/sites/service/HttpClient.ts

@@ -0,0 +1,59 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+export class HttpClient {
+  private checkStatus(response: AxiosResponse<any>): ResponseData {
+    const resData: ResponseData = {
+      state: 0,
+      value: {},
+      message: ''
+    };
+    // 如果http状态码正常，则直接返回数据
+    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
+      // 如果不需要除了data之外的数据，可以直接 return response.data
+      resData.value = response.data;
+    }
+    return resData;
+  }
+  /**
+   * request请求
+   * @param {string} url url
+   * @param {string} method get|post
+   * @param {*} [params] 请求参数
+   */
+  public async request(url: string, method: string, params: any): Promise<ResponseData | null> {
+    const defaultHeaders = {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    };
+    const headers = Object.assign(defaultHeaders, params.header);
+    try {
+      const options = {
+        method,
+        url,
+        data: params,
+        params: params,
+        timeout: 1000 * 30,
+        withCredentials: true,
+        crossDomain: true,
+        headers
+      };
+
+      const res = await axios(options as AxiosRequestConfig);
+      return this.checkStatus(res);
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  }
+}
+
+/**
+ * 响应对象
+ * @param {number} state 0 成功 1失败
+ * @param {any} value 接口响应数据
+ * @param {string} message 服务器响应信息msg
+ */
+interface ResponseData {
+  state: number;
+  value?: any;
+  message: string;
+}

vue.config.js

@@ -7,7 +7,16 @@ module.exports = {
   devServer: {
     host: '0.0.0.0',
     disableHostCheck: true,
-    open: true
+    open: true,
+    proxy: {
+      '/devServer': {
+        target: 'https://jelly.jd.com',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/devServer': ''
+        }
+      }
+    }
   },
   css: {
     loaderOptions: {