✨ Feat: 前端框架搭建完成

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "homepage": ".",
+  "proxy": "http://ali.tapme.top:8081/mock/16/chat/api/",
   "dependencies": {
     "antd": "^3.19.8",
+    "axios": "^0.19.0",
     "babel-plugin-import": "^1.12.0",
     "customize-cra": "^0.2.14",
     "less": "^3.9.0",

src/App.jsx

@@ -1,27 +1,16 @@
 import React, { Component } from "react";
-import { Route } from "react-router-dom";
+import { Route, Switch, Redirect } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import store from "./redux";
 import Login from "./pages/public/Login";
-import Main from "./pages/main";
+import Main from "./pages/Main";
+import NotFound from "./pages/public/notFound/NotFound";
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {};
-    this.checkRoute(this.props.location.pathname);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.checkRoute(nextProps.location.pathname);
-  }
-
-  checkRoute(currentPath) {
-    // if (currentPath !== "/login") {
-    //   console.log("不在登录页，跳转到登录页去");
-    //   this.props.history.replace("/login");
-    // }
   }
 
   render() {
@@ -31,8 +20,13 @@ class App extends Component {
     return (
       <Provider store={store}>
         <div className="fullScreen" style={mainStyle}>
+          <Switch>
             <Route exact path="/" component={Main} />
-          <Route exact path="/login" component={Login} />
+            <Route exact path="/public/login" component={Login} />
+            <Route exact path="/404" component={NotFound} />
+            {/* 当前面的路由都匹配不到时就会重定向到/404 */}
+            <Redirect path="/" to="/404" />
+          </Switch>
         </div>
       </Provider>
     );

src/index.jsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
-import * as serviceWorker from "./serviceWorker";
 
 const s = (
   <BrowserRouter>
@@ -12,8 +11,3 @@ const s = (
 );
 
 ReactDOM.render(s, document.getElementById("root"));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/pages/Main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+class Main extends React.Component {
+  render() {
+    return <div>这是主页</div>;
+  }
+}
+
+export default Main;

src/pages/main/index.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-
-function mapStateToProps(state) {
-  return {
-    loginInfo: state.loginInfo
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {};
-}
-
-class Main extends React.Component {
-  constructor(props) {
-    console.log(props);
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    const { token, userInfo } = this.props.loginInfo;
-    if (token == null) {
-      return <div>这是首页，你还没登陆</div>;
-    }
-    return <div>你好：{userInfo.name}</div>;
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Main);

src/pages/public/Login/index.jsx

@@ -1,10 +1,10 @@
 import React, { Component } from "react";
-import { Button, Input } from "antd";
+import { Button, Input, message } from "antd";
 import IconFont from "../../../components/IconFont";
 import styles from "./index.module.less";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
 import { changeLoginInfo } from "../../../redux/action/LoginInfoAction";
+import axios from "../../../util/httpUtil";
 
 function mapStateToProps(state) {
   return {};
@@ -12,7 +12,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    dealClick: () => dispatch(changeLoginInfo("12345", { name: "fanxb", age: "12" }))
+    updateLoginInfo: (token, userInfo) => dispatch(changeLoginInfo(token, userInfo))
   };
 }
 
@@ -32,8 +32,16 @@ class Login extends Component {
     this.setState({ password: e.target.value });
   };
 
-  login = () => {
+  submit = () => {
-    console.log("登陆了");
+    axios.post("/public/login", this.state).then(res => {
+      localStorage.setItem("token", res.token);
+      localStorage.setItem("userInfo", JSON.stringify(res.userInfo));
+      window.token = res.token;
+      window.userInfo = res.userInfo;
+      message.success("登录成功");
+      this.props.updateLoginInfo(res.token, res.userInfo);
+      this.props.history.replace("/");
+    });
   };
 
   render() {
@@ -59,10 +67,9 @@ class Login extends Component {
                 </div>
               </div>
             </div>
-            <Button type="primary" onClick={this.props.dealClick}>
+            <Button type="primary" onClick={this.submit}>
               登录
             </Button>
-            <Link to="/">回到首页</Link>
           </div>
         </div>
       </div>

src/pages/public/notFound/NotFound.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const style = {
+  "text-align": "center",
+  "padding-top": "200px"
+};
+
+const render = () => {
+  return (
+    <div style={style}>
+      404 您的页面走丢啦！ <Link to="/">返回首页</Link>
+    </div>
+  );
+};
+
+export default render;

src/redux/reducer/loginInfo.js

@@ -1,11 +1,24 @@
 import * as loginAction from "../action/LoginInfoAction";
 
-const initData = {
+function getInitData() {
-  token: null,
+  let token, userInfo;
-  userInfo: null
+  try {
+    token = localStorage.getItem("token");
+    userInfo = JSON.parse(localStorage.getItem("userInfo"));
+  } catch (e) {
+    console.error(e);
+    token = null;
+    userInfo = null;
+  }
+  window.token = token;
+  window.userInfo = userInfo;
+  return {
+    token,
+    userInfo
   };
+}
 
-const LoginStatusReducer = (state = initData, action) => {
+const LoginStatusReducer = (state = getInitData(), action) => {
   switch (action.type) {
     case loginAction.CHANGE_LOGIN_INFO:
       return { ...action.data };

src/serviceWorker.js

@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}

src/util/httpUtil.js

@@ -0,0 +1,36 @@
+import { notification } from "antd";
+import axios from "axios";
+
+//定义http实例
+const instance = axios.create({
+  //   baseURL: "http://ali.tapme.top:8081/mock/16/chat/api/",
+  headers: {
+    token: window.token
+  }
+});
+
+//实例添加拦截器
+instance.interceptors.response.use(
+  function(res) {
+    return res.data;
+  },
+  function(error) {
+    console.log(error);
+    let message, description;
+    if (error.response === undefined) {
+      message = "出问题啦";
+      description = "你的网络有问题";
+    } else {
+      message = "出问题啦:" + error.response.status;
+      description = JSON.stringify(error.response.data);
+    }
+    notification.open({
+      message,
+      description,
+      duration: 2
+    });
+    return Promise.reject(error);
+  }
+);
+
+export default instance;

yarn.lock

@@ -1945,6 +1945,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 axobject-query@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
@@ -3247,6 +3255,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -4266,6 +4281,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
@@ -5150,7 +5172,7 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0:
+is-buffer@^2.0.0, is-buffer@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
   integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==