【React】做一个百万答题小项目

• 因为这个小项目是按照开源项目实现的，所以只了解React和Redux实现方式就好，相关的引入框架和后台数据库相关暂时先不解释。（主要是没时间了，肝deadline。。。）

1.安装框架和依赖

用的是蚂蚁ant框架

npm install antd-mobile --save

然后导入样式

import {
    Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css'; 

还要安装插件

npm install  babel-plugin-import --save

相关配置

npm run eject

package.json

"babel": {
   
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", {
    "libraryName": "antd-mobile", "style": "css" }]
    ]
  }

项目数据

1. 数据导入：
   Quizzes.json文件导入数据库。首先创建数据库，右键点击表，选择导入文件，文件导入json文件，后面一键跳过就行，最后一步点击完成。
2. 创建服务器：

npm init 
cnpm install express --save
cnpm install mysql --save

创建index.js文件

3. 前端依赖
   需要安装的内容：axios,react-router-dom,redux,react-redux,

相关目录树

2.数据库配置

• sql.js
  设置连接，新建连接对象，let con = mysql.createConnection(connection);并定义promise对象查询的方法，返回为promise对象。

const mysql = require('mysql');

//配置连接
//这个自己设置哈
const connection = {
   
  host: 'localhost',
  post: '3306',
  user: 'root',
  password: 'root',
  database: 'timu'
};

//创建连接对象
//let con = mysql.createConnection(connection);

//连接
// con.connect(err => {
   
//   if (err) {
   
//     console.log('数据库连接失败');
//   } else {
   
//     console.log('数据库连接成功');
//   }
// });

//创建promise对象查询方法

function queryFn(sqlStr, arr) {
   
  //创建连接对象
  let con = mysql.createConnection(connection);
  return new Promise((resolve, reject) => {
   
    //找到了就返回并断开连接，没找到就拒绝连接
    con.query(sqlStr, arr, (error, result) => {
   
      if (error) {
   
        reject(error);
      } else {
   
        resolve(result);
        con.end()
      }
    });
  });
}

module.exports = queryFn;

3.express实现数据获取

• 通过express()前端页面的路由监听进行对应后端数据库端口的数据获取

1. 创建express对象并绑定前端页面端口，为了传输数据
2. 端口监听事件绑定过后就要进行页面URL的路由绑定，比如对这个路由'/api/rtimu/'进行数据的获取
3. 这里通过异步请求进行获取，因为获取时是跨域的页面是“8080”端口但是服务器端是“3306”所以要进行跨域请求设置res.append("Access-Control-Allow-Origin","*") res.append("Access-Control-Allow-Content-Type","*")
4. 通过sql语句进行数据库操作，这里sqlQuery的promise对象建立时就已经连接上数据库啦
5. 然后数据转成json就可以给前端的store用啦

网页服务端的index.js

var express = require('express')
var app = express()
var sqlQuery = require('./sql')

app.get('/',(req,res)=>{
   
    res.send("这是答题API服务器")
})

//如果要获取第几页的数据 就 /:page
app.get('/api/rtimu/',async (req,res)=>{
   
    //随机获取10个题目；
    //console.log(req.query)
    //跨域请求
    res.append("Access-Control-Allow-Origin","*")
    res.append("Access-Control-Allow-Content-Type","*")
    //判断存不存在 存在就是page不存在就默认设为2
    let page = req.query.page?req.query.page:2;
    let strSql = `select * from quizzes limit ${
     page*10},10`;
    //这里要用到异步
    let result = await sqlQuery(strSql)
    //console.log(result)
	//Array.from(result)从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例
    res.json(Array.from(result));


}