• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

使用React创建博客应用：用户登录

ngkoma • 2年前 (2022-06-05) • JavaScript

使用React创建博客应用：用户登录 第1张

在本教程系列中，您将了解如何开始使用 react 创建博客应用程序。在本教程系列的整个过程中，您将专注于如何使用 React 开发应用程序用户界面。您将在应用程序的服务器端使用node .js。

在本教程中，您将看到如何为用户注册和用户登录实现用户界面和后端。

入门

创建一个名为ReactNodeApp. 导航到项目目录并启动节点项目。

npm init

填写所需的详细信息，您应该已经package.json创建了文件。这是它的外观：

{
  "name": "react-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "roy",
  "license": "MIT"
}

您将使用 express框架为您的应用程序提供服务。使用以下命令安装 express：

npm install express --save

使用 express 框架，让我们创建监听端口地址的应用程序。在项目目录中，创建一个名为app.js. 需要里面的 express 模块app.js并创建一个应用程序。设置可以找到静态文件的应用程序的静态路径。这是它的外观：

var express = require("express");
var path = require("path");

var app = express();
app.use(express.static(path.join(__dirname,"/html")));

为应用程序分配端口号以***端口。添加以下代码以创建服务器：

app.listen(7777,function(){
    console.log("Started listening on port", 7777);
})

在项目目录中，创建一个名为html. 在 html文件夹中，创建一个名为index.html. 将以下代码添加到index.html：

<html>

<head></head>

<body>
    <div>
        Hello World
    </div>
</body>

</html>

保存上述更改并使用以下命令启动服务器：

node app.js

将您的浏览器指向 http://localhost:7777/index.html  ，您应该能够看到该index.html页面。

创建登录视图

您将使用引导程序来创建用户界面。下载并在index.html页面中包含引导程序。

<link rel="stylesheet" type="text/ css " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

index.html在页面中添加所需的 React 库。

<script src="https://fb.me/react-15.1.0.js"></script><script src="https://fb.me/react-dom -15.1.0.js "></script>

您将使用jsx创建视图。如果您不熟悉 JSX，我建议您阅读有关 React 和 JSX 的介绍性教程。

要将JSX 代码转换为javascript，您需要babel一个 JavaScript 编译器。在index.html页面中包含 babel。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

main.jsx在文件夹内创建一个名为的html文件。该文件将包含 React UI 组件。 

Signin让我们在文件中创建一个新的 React 组件main.jsx。 

class Signin extends React.Component {
}

在组件内添加一个渲染方法Signin，它将显示我们Signin组件的 UI。

class Signin extends React.Component {
    render() {
        return (
    		<form className="form-signin">
                <h2 className="form-signin-heading"> Please sign in </h2>
                <label for="inputEmail" className="sr-only"> Email address
                </label>
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
                <label for="inputPassword" className="sr-only"> Password</label>
                <input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
                <button className="btn btn-lg btn-primary btn-block" type="button"> Sign in
                </button>
            </form>
        )
    }
}

在上面的代码中，都是 HTML，只有一个区别。该 class属性已修改为className在 中使用时JSX。

组件在Signin显示时将显示render方法内的 HTML 代码。 

index.html在您将呈现Signin组件的页面中添加一个容器 div 。

<div id="app" class="container"></div>

在.  Signin_ .container_index.html

ReactDOM.render( <
    Signin / > ,
    document.getElementById('app')
);

保存上述更改并恢复节点服务器。将浏览器指向 http://localhost:7777/index.html  ，您应该能够查看登录屏幕。

使用React创建博客应用：用户登录 第2张

实施用户登录  

要实现登录过程，您需要处理输入文本onChange 事件并将文本框值保存在状态变量中。当用户单击按钮时，您将使用状态变量来读取电子邮件地址和密码文本框的值。因此，让我们将onChange事件添加到文本框中：

<label for="inputEmail" className="sr-only">Email address</label>
<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
<label for="inputPassword" className="sr-only">Password</label>
<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />

定义组件onChange中的事件Signin：

handleEmailChange(e){
    this.setState({email:e.target.value})
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

在组件的const ructor 方法中绑定上面定义的事件和状态变量：

constructor(props) {
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.state = {
      email:'',
      password:''
    };
}

定义一个onClick您将在单击按钮时调用的方法。

signIn(){
    alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);            
}

将OnClick事件添加到SignIn 按钮。

<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">登录</button>

保存上述更改并重新启动节点服务器。将浏览器指向 http://localhost:7777/index.html。输入电子邮件地址和密码，然后单击登录按钮，您应该能够看到电子邮件和密码弹出。

将数据从 React 发布到节点服务 

在客户端获得数据后，您需要将该数据发布到 Node.js 服务器方法以验证用户登录。为了发布数据，您将使用另一个名为. Axios是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。包含在页面中。axiosaxiosindex.html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在文件中的signin方法内 main.jsx，添加以下代码行以发出发布请求。

axios.post('/signin', {
  email: this.state.email,
  password: this.state.password
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

/signin该代码使用显示的参数向该方法发出一个发布请求。一旦请求成功，promise 就会在then 回调中解决。出错时，响应会记录在catch回调中。 

让我们在 Node.js 端创建一个signin方法来验证用户登录过程。在app.js文件中，创建一个名为signin.

app.post('/signin', function (req, res) {
 })

您将使用该 body-parser模块来解析从 React 客户端发布的请求。在项目中安装 body-parser模块。 

npm install body-parser --save

需要文件body-parser中的模块app.js。

var bodyParser = require("body-parser");

添加以下代码行以启用JSON解析。

app.use(bodyParser.json());

在signin方法内部，您可以解析请求，如下所示：

var user_name=req.body.email;
var password=req.body.password;

如图所示修改signin方法以验证用户登录。

app.post('/signin', function (req, res) {
  var user_name=req.body.email;
  var password=req.body.password;
  if(user_name=='admin' && password=='admin'){
      res.send('success');
  }
  else{
  	res.send('Failure');
  }
})

目前，用户凭据已被硬编码。您可以根据自己的喜好将其替换为适当的服务。

解析参数后，将根据预期的凭据对其进行验证。如果为真，则传递成功消息，否则返回失败消息。

保存上述更改并重新启动 Node.js 服务器。输入有效的用户名和密码，然后单击登录方法。根据凭据，它将返回成功或失败消息，该消息将显示在浏览器控制台中。

创建用户注册视图

创建用户注册视图的过程与您实现用户登录模块的过程非常相似。让我们从在文件中创建Signup组件开始。main.jsx

class Signup extends React.Component{
  render() {
      return (
        <div>
          <form className="form-signin">
            <h2 className="form-signin-heading">Please sign up</h2>
            <label for="inputName" className="sr-only">Name</label>
            <input type="name" onChange={this.handleNameChange} id="inputName" className="form-control" placeholder="Name" required autofocus />
            <label for="inputEmail" className="sr-only">Email address</label>
            <input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
            <label for="inputPassword" className="sr-only">Password</label>
            <input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />
            
            <button className="btn btn-lg btn-primary btn-block" onClick={this.signUp} type="button">Sign up</button>
          </form>
        </div>
        
      )
    }
}

由于注册和登录是两个不同的组件，因此您需要链接这两个组件。出于路由的目的，您将使用 react-router. 如果您不熟悉 React 中的路由，我建议您阅读React 路由教程。

包含react-router在index.html页面中。

<script src="https://npmcdn.com/react-router@3.0.2/umd/ReactRouter.min.js"></script>

定义在文件react-router中创建链接所需的变量。main.jsx

var Router = window.ReactRouter.Router;
var Route = window.ReactRouter.Route;
var hashHistory = window.ReactRouter.hashHistory;
var Link = window.ReactRouter.Link;

定义不同的应用路由和默认路由，如下图：

ReactDOM.render(
    <Router history={hashHistory}>
        <Route component={Signin} path="/"></Route>
        <Route component={Signup} path="/signup"></Route>
    </Router>,
document.getElementById('app'));

在注册组件中包含指向登录组件的链接，反之亦然。这是Signin带有注册链接的组件的渲染方法：

render() {
  return (
    <div>
      <form className="form-signin">
        <h2 className="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" className="sr-only">Email address</label>
        <input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
        <label for="inputPassword" className="sr-only">Password</label>
        <input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />
        
        <button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button>
      </form>
      <div>
        <Link to="/signup">{'Signup'}</Link>
      </div>
    </div>

  )
}

保存上述更改并重新启动 Node.js 服务器。将您的浏览器指向 http://localhost:7777/index.html  ，您应该能够看到带有注册链接的登录屏幕。单击注册链接，您应该导航到注册屏幕。

使用React创建博客应用：用户登录 第3张

实施用户注册与实施用户登录的方式类似。我将把用户注册实现留作练习。我将在本教程系列的下一部分中发布用户注册实现。

最后

在本教程系列的这一部分中，您创建并实现了登录屏幕。您还看到了如何react-router在 React 中使用来实现路由。在本教程的下一部分中，您将看到如何实现注册部分和添加帖子页面。

本教程的源代码可在GitHub 上获得。


文章目录
  • 入门
  • 创建登录视图
  • 实施用户登录
  • 将数据从 React 发布到节点服务
  • 创建用户注册视图
  • 最后

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：使用React创建博客应用：用户登录
    文章地址：https://www.weixiaolive.com/en/index.php/post/285.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云