剧场模式
首页前后端分离React & Redux 实现注册登录认证系统

React & Redux 实现注册登录认证系统 #4 页面与路由搭建

下载源码hfpp2012发布于React2016 次点击播放时长:08:35
2

http://getbootstrap.com/docs/4.1/examples/navbars/

http://www.bootcdn.cn/

<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">

client/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import NavigationBar from './components/NavigationBar';
import registerServiceWorker from './registerServiceWorker';

import logger from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';

import { BrowserRouter as Router } from 'react-router-dom';
import routes from './routes';

import { createStore, applyMiddleware } from 'redux';

import rootReducer from './reducers';

import { Provider } from 'react-redux';

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(thunk, logger)
  )
);

ReactDOM.render(
  <Provider store={ store }>
    <Router routes={ routes }>
      <div>
        <NavigationBar />
        { routes }
      </div>
    </Router>
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

client/src/routes.js

import React from 'react';

import { Route } from 'react-router-dom';

import App from './components/App';

import SignupPage from './components/signup/SignupPage';

export default (
  <div className="container">
    <Route exact path="/" component={ App } />
    <Route path="/signup" component={ SignupPage } />
  </div>
)

client/src/components/NavigationBar.js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class NavigationBar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-light bg-light mb-3">
        <div className="container">
          <Link className="navbar-brand" to="/">ReduxLogin</Link>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarsExample05">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item">
                <Link className="nav-link" to="/signup">Sign Up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

export default NavigationBar;

client/src/components/signup/SignupPage.js

import React, { Component } from 'react';

class SignupPage extends Component {
  render() {
    return (
      <div>
        <h1>Signup Page</h1>
      </div>
    );
  }
}

export default SignupPage;

client/src/components/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="jumbotron">
        <h1>Hi</h1>
      </div>
    );
  }
}

export default App;
0 条回复
暂无回复~~
支付宝付款
微信扫码打赏

加我微信:15014006126

加 QQ 群:697272886(1 群)

加 QQ 群:856141852(2 群)

播放列表目录

1FreeReact & Redux 实现注册登录认证系统 #1 课程介绍

2FreeReact & Redux 实现注册登录认证系统 #2 搭建前端代码

3FreeReact & Redux 实现注册登录认证系统 #3 搭建后端框架

FreeReact & Redux 实现注册登录认证系统 #4 页面与路由搭建

5FreeReact & Redux 实现注册登录认证系统 #5 实现注册页面

6ProReact & Redux 实现注册登录认证系统 #6 使用 axios 发送请求

7ProReact & Redux 实现注册登录认证系统 #7 后端验证数据

8ProReact & Redux 实现注册登录认证系统 #8 前端显示表单验证错误

9ProReact & Redux 实现注册登录认证系统 #9 react-router 路由跳转

10ProReact & Redux 实现注册登录认证系统 #10 react-router 另外两种路由跳转的方法

11ProReact & Redux 实现注册登录认证系统 #11 显示 flash 消息 part 1

12ProReact & Redux 实现注册登录认证系统 #12 显示 flash 消息 part 2

13ProReact & Redux 实现注册登录认证系统 #13 显示 flash 消息 part 3

14ProReact & Redux 实现注册登录认证系统 #14 PostgreSQL 数据库的安装与使用

15ProReact & Redux 实现注册登录认证系统 #15 用 knex 写迁移脚本来创建数据库表

16ProReact & Redux 实现注册登录认证系统 #16 bookshelf 的介绍与使用

17ProReact & Redux 实现注册登录认证系统 #17 在数据库中保存用户注册信息

18ProReact & Redux 实现注册登录认证系统 #18 服务器端唯一性验证

19ProReact & Redux 实现注册登录认证系统 #19 客户端唯一性验证

20ProReact & Redux 实现注册登录认证系统 #20 登录表单页面

21ProReact & Redux 实现注册登录认证系统 #21 实现登录功能

22ProReact & Redux 实现注册登录认证系统 #22 登录功能后端实现

23ProReact & Redux 实现注册登录认证系统 #23 什么是 session、cookies、jwt

24ProReact & Redux 实现注册登录认证系统 #24 服务器响应 jwt 给浏览器

25ProReact & Redux 实现注册登录认证系统 #25 保存 jwt 到 localStorage 和设置 axios 默认的头部信息

26ProReact & Redux 实现注册登录认证系统 #26 把 localStorage 的 token 保存到 Reducer 中

27ProReact & Redux 实现注册登录认证系统 #27 登录状态显示注销按钮

28ProReact & Redux 实现注册登录认证系统 #28 实现退出功能

29ProReact & Redux 实现注册登录认证系统 #29 新增一个需要登录才能访问的组件

30ProReact & Redux 实现注册登录认证系统 #30 后端服务器验证 jwt

31ProReact & Redux 实现注册登录认证系统 #31 用高阶组件来保护客户端路由(完结)

相似的视频
React & Redux 实现注册登录认证系统 #20 登录表单页面

React & Redux 实现注册登录认证系统 #20 登录表单页面

Pro播放时长:06:22

2166 次点击

React & Redux 实现注册登录认证系统 #2 搭建前端代码

React & Redux 实现注册登录认证系统 #2 搭建前端代码

免费播放时长:06:05

2432 次点击

React & Redux 实现注册登录认证系统 #3 搭建后端框架

React & Redux 实现注册登录认证系统 #3 搭建后端框架

免费播放时长:06:47

2268 次点击

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:11

Top