题库

src/components/problems/index.js

 import React, { Component } from 'react';
 import './index.scss'
-import { HeaderBar, CallApp } from "@common/index"
+import { HeaderBar, CallApp, CaptchaAli } from "@common/index"
+import { isToday } from "date-fns";
+import { http } from "@/utils"
+import { Toast } from "antd-mobile";
+
 
 class Problems extends Component {
+
   state = {
     isShowAnswer: false,
-    answer: '@nishizhen：个人感觉逻辑回归和线性回归首先都是广义的线性回归，\n' +
-      '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
-      '另外线性回归在整个实数域范围内进行预测，敏感度一致，而分类范围，需要在[0,1]。逻辑回归就是一种减小预测范围，将预测值限定为[0,1]间的一种回归模型，因而对于这类问题来说，逻辑回归的鲁棒性比线性回归的要好。\n' +
-      '@乖乖癞皮狗：逻辑回归的模型本质上是一个线性回归模型，逻辑回归都是以线性回归为理论支持的。但线性回归模型无法做到sigmoid的非线性形式，sigmoid可以轻松处理0/1分类问题。\n' +
-      '                            ',
+    isShowCaptcha: false,
+    instance: null,
+    problem: {},
+  }
+
+  componentDidMount() {
+    this.getProblem()
+  }
+
+  getInstance = () => {
+
+  }
+
+  switchProblem() {
+
   }
 
+  getProblem = () => {
+    http.get(`${API.home}/m/question/${this.props.match.params.id}`)
+      .then(res => {
+        const {code, msg, data} = res.data
+        if (code === 200) {
+
+          this.setState({
+            problem: data,
+          });
+
+        } else if (code === 1) {
+          this.setState({
+            isShowCaptcha: true,
+          });
+        } else {
+          Toast.info(msg)
+        }
+      })
+  }
+
+
   render() {
-    const {isShowAnswer, answer} = this.state
+    const {isShowAnswer, problem: {quesInfo, between}, isShowCaptcha} = this.state
     return (
       <article id={'problems'}>
+        {
+          !isShowCaptcha ?
+            <>
               <HeaderBar title='机器学习' arrow={true} cart={false}></HeaderBar>
               <div className="topic">
-          1.请用python编写函数find_string，从文本中搜索并打印内容，要求支持通配符星号和问号。
-          例子：
-          >>>find_string('hello\nworld\n','wor')
-          ['wor']
-          >>>find_string('hello\nworld\n','l*d')
-          ['ld']
-          >>>find_string('hello\nworld\n','o.')
-          ['or']
+                {quesInfo && quesInfo.ques}
               </div>
               {
                 !isShowAnswer &&
@@ -42,7 +74,7 @@ class Problems extends Component {
                 <div className={`content ${isShowAnswer ? 'slideInDown' : ''}`}>
                   <div className={'title'}>解析</div>
                   <span>
-              {answer}
+                    {quesInfo.analysis}
                   </span>
                 </div>
               }
@@ -53,6 +85,11 @@ class Problems extends Component {
                   <a href="javascript:void(0);" className={'nav'}>下一题</a>
                 </div>
               </footer>
+            </>
+            : <div className="captcha-container">
+              <CaptchaAli getInstance={this.getInstance}/>
+            </div>
+        }
       </article>
     );
   }

src/components/problems/index.scss

@@ -91,6 +91,12 @@
       }
     }
   }
+
+  .captcha-container{
+    width: 80%;
+    padding-top: 40%;
+    margin: 0 auto;
+  }
 }
 
 @keyframes slideInDown {

src/router/router-config.js

@@ -337,7 +337,7 @@ export default [
   },
   //题库
   {
-    path: '/problems',
+    path: '/problems/:id',
     component: loadable(() => import('@/components/problems')),
   },
 ]