By 被删

更新日期:

文章目录
  1. 1. 使用gentelella开源模板
    1. 1.1. 获取gentelella模板
    2. 1.2. 模板引入相关js和css
  2. 2. 完成登陆功能
    1. 2.1. 添加登录组件
    2. 2.2. React Router组件
    3. 2.3. 添加路由
  3. 3. 结束语

最近又重新拾起了React框架，并配合开源模板gentelella以及Redux建立了个简单的项目。《React-Redux使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录使用router完成简单登陆功能的过程。

使用gentelella开源模板

这个项目中我们使用gentelella的开源模板，故我们需要引入一些该模板的相关文件。

获取gentelella模板

  • 从github上获取源码
  • 下载后选择需要的文件放置在app/static/gentelella/文件夹中
    • lib文件夹放置相关依赖代码文件
    • build文件夹放置自定义的css和js文件

模板引入相关js和css

这里简单列出大概会用到的库和组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!--templates/index.ejs-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>运维管理系统</title>  
    <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE">
    <!-- Bootstrap -->
    <link href="./static/gentelella/lib/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="./static/gentelella/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="./static/gentelella/lib/css/iCheck/green.css" rel="stylesheet">
    <!-- Select2 -->
    <link href="./static/gentelella/lib/css/select2.min.css" rel="stylesheet">
    <!-- Switchery -->
    <link href="./static/gentelella/lib/css/switchery.min.css" rel="stylesheet">
    <!-- Datatables -->
    <link href="./static/gentelella/lib/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="./static/gentelella/lib/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="./static/gentelella/lib/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="./static/gentelella/lib/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="./static/gentelella/lib/css/scroller.bootstrap.min.css" rel="stylesheet">

    <!-- PNotify -->
    <link href="./static/gentelella/lib/css/pnotify.css" rel="stylesheet">
    <link href="./static/gentelella/lib/css/pnotify.buttons.css" rel="stylesheet">
    <link href="./static/gentelella/lib/css/pnotify.nonblock.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="./static/gentelella/build/css/custom.css" rel="stylesheet">
    <link href="./static/gentelella/build/css/common.css" rel="stylesheet"> 
  </head>
  <body class="nav-md">
    <div id="root"></div>
    <!-- built files will be auto injected -->
    <!-- jQuery -->
    <script src="./static/gentelella/lib/js/jquery.min.js"></script>
    <script src="./static/gentelella/lib/js/jquery.form.min.js"></script>
    <!-- Bootstrap -->
    <script src="./static/gentelella/lib/js/bootstrap.min.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src="./static/gentelella/lib/js/moment.min.js"></script>
    <script src="./static/gentelella/lib/js/daterangepicker.js"></script>
    <!-- iCheck -->
    <script src="./static/gentelella/lib/js/icheck.min.js"></script>
    <!-- Switchery -->
    <script src="./static/gentelella/lib/js/switchery.min.js"></script>
    <!-- Select2 -->
    <script src="./static/gentelella/lib/js/select2.full.min.js"></script>
    <!-- bootstrap-progressbar -->
    <script src="./static/gentelella/lib/js/bootstrap-progressbar.min.js"></script>
    <!-- Datatables -->
    <script src="./static/gentelella/lib/js/jquery.dataTables.min.js"></script>
    <script src="./static/gentelella/lib/js/dataTables.bootstrap.min.js"></script>
    <script src="./static/gentelella/lib/js/dataTables.buttons.min.js"></script>
    <script src="./static/gentelella/lib/js/dataTables.fixedHeader.min.js"></script>
    <script src="./static/gentelella/lib/js/dataTables.keyTable.min.js"></script>
    <script src="./static/gentelella/lib/js/dataTables.responsive.min.js"></script>
    <script src="./static/gentelella/lib/js/responsive.bootstrap.js"></script>
    <script src="./static/gentelella/lib/js/dataTables.scroller.min.js"></script>

    <!-- PNotify -->
    <script src="./static/gentelella/lib/js/pnotify.js"></script>
    <script src="./static/gentelella/lib/js/pnotify.buttons.js"></script>
    <script src="./static/gentelella/lib/js/pnotify.nonblock.js"></script>

    <!-- Echarts -->
    <script src="./static/gentelella/lib/js/echarts.min.js"></script>

    <!-- Custom Theme Scripts -->
    <script src="./static/gentelella/build/js/common.js"></script>
  </body>
</html>

完成登陆功能

添加登录组件

新建app/components/login.jsx文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// app/components/login.jsx
import React from 'react'; //导入react组件

const Login = React.createClass({
  render() {
    return (
      <div>
        <a className="hiddenanchor" id="signup"></a>
        <a className="hiddenanchor" id="signin"></a>

        <div className="login_wrapper">
          <div className="animate form login_form">
            <section className="login_content">
              <form>
                <h1>管理系统</h1>
                <div>
                  <input type="text" className="form-control" placeholder="用户名" ref="username" required />
                </div>
                <div>
                  <input type="password" className="form-control" placeholder="密码" ref="password" required />
                </div>
                <div>
                  <a className="btn btn-default submit" href="javascript:;" onClick={this.loginSubmit}>登录</a>
                </div>

                <div className="clearfix"></div>

              </form>
            </section>
          </div>

        </div>
      </div>
    );
  },
  getInitialState() {
    return {//设置默认属性
      username: '',
      password: ''
    };
  },
  contextTypes: {
    router: React.PropTypes.object
  },
  loginSubmit() {
    this.context.router.push('/index'); //使用this.content进行跳转
  },
  componentDidMount() {
    sessionStorage.removeItem('username')
    $('body').attr('class', 'login')
  }
});

module.exports = Login;

React Router组件

添加路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// index.js
import React from 'react'; //react
import ReactDOM from 'react-dom'; //react-dom
import { Router, Route, Link, hashHistory, IndexRoute, useRouterHistory } from 'react-router';
import { createHistory, createHashHistory } from 'history';
import Login from  './components/login.jsx'; //login自定义组件
import Index from  './components/index.jsx'; //index自定义组件

let history = useRouterHistory(createHashHistory)();
//将其渲染到页面上id为root的DOM元素内
ReactDOM.render(<Router history={history} >
    <Route path="/">
      <IndexRoute component={Login} />
      <Route path="index" component={Index} />
    </Route>
  </Router>, document.getElementById("root"));

页面效果图：
image

结束语

至此，我们初步完成了登陆界面以及登陆跳转，后面我们会进行登陆后页面的开发。当然这里的模板css和js本骚年使用了最简单粗暴的方法进行，其实大家也可以尝试使用import和require这些来进行注入哒。
此处查看项目代码
此处查看页面效果

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. 使用gentelella开源模板
    1. 1.1. 获取gentelella模板
    2. 1.2. 模板引入相关js和css
  2. 2. 完成登陆功能
    1. 2.1. 添加登录组件
    2. 2.2. React Router组件
    3. 2.3. 添加路由
  3. 3. 结束语