对应内容：#13 Hitting the API | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

主要内容：

完成登录、注册表单，及其对应的逻辑
由于涉及前后端的通信，在后端实现跨域的中间件【及其重要】

1 完成表单部分的页面及其对应逻辑，修复了前面的BUG

这里ES6中的类，很多人不是很熟悉，类的属性的实现方式分两种，一种是写在constructor中的属性，一种是类字段，定义在构造函数之外的，类字段是直接赋值在类的对象实例上的，而普通属性是写在类的原型上的，因此类字段声明的函数表达式，是不需要进行this绑定的，在react官方文档中，明确说明了class 中声明的函数，要在构造函数中绑定一下this，这里要注意！！！！

这里用的是ref进行绑定，而没有使用官方文档中的setState，第二种写起来比较麻烦。

import React, { Component } from 'react';
import './Auth.css';class AuthPage extends Component  {constructor (props) {super(props);this.emailEl = React.createRef();this.passwordEl = React.createRef();this.state = {isLoginMode: true}}submitHandler = async (event) => {event.preventDefault();let email = this.emailEl.current.value;let password = this.passwordEl.current.value;if (email.trim() === "" || password.trim() === "") {return false;}const requestBody = {query: `mutation {createUser(userInput: {email: "${email}", password: "${password}"}) {_idemail}}`};if (this.state.isLoginMode) {requestBody.query = `query {login(email: "${email}", password: "${password}") {_idtokentokenExpiration}}`;}let response, data;try {response = await fetch(`http://localhost:3030/graphql`, {method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify(requestBody)});data = await response.json();} catch (error) {throw error;}}swithHandler = () => {this.setState(prevState => {return {isLoginMode: !prevState.isLoginMode};})}render () {return (<React.Fragment><h1>The Auth Page</h1><form action="" className="auth-form" onSubmit={ this.submitHandler }><div className="form-control"><label htmlFor="email">Email</label><input type="email" id="email" ref={this.emailEl} /></div><div className="form-control"><label htmlFor="password">Password</label><input type="password" id="password" ref={this.passwordEl} /></div><div className="form-action"><button type="submit">Submit</button><button type="button" onClick={this.swithHandler}>swith to {this.state.isLoginMode ? "Signup" : "Signin"}</button></div></form></React.Fragment>);}
}export default AuthPage;

Auth.css

.auth-form {width: 300px;margin: 1rem auto;
}
label, input {display: block;width: 100%;
}
.form-action button {font: inherit;
}

在后端的auth resolver中我之前的代码有一个bug，在这里进行修复：

第四行那里少了一个await，并且稍微修改了一些逻辑

2 后端实现跨域中间件

app.use((req, res, next) => {res.setHeader("Access-Control-Allow-Origin", "*");res.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");if (req.method === "OPTIONS") {return res.sendStatus(200);}next();
})

具体原因，一行两行说不清楚，请在mdn中搜索cors或跨越。

Graphql 初体验第十一章 | #13 Hitting the API（实现了登录注册表单）相关推荐

13 迷人的注册表单设计
13 迷人的注册表单设计 Gist Gravatar Kontain MOJO-Themes Ning Ping Tumblr Vimeo WordPress Wufoo Better Blogger ...
html注册表单用户体验,入口的用户体验！注册表单的设计技巧
网上挤满了各种各样的UI设计方案,事实上我们已经有一套套的方案可遵循.但!设计永无止境!哪怕是一个注册表单,也值得再细心研究.下面给出注册表单设计5个小技巧: 1.别让用户重复填写相同的内容几乎每个 ...
CentOS 初体验二十一：redis常用命令：String
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/79279403 本文出自[赵彦军的博客] 数据类型 Redis支持五种数据类型:st ...
PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
说在前面什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
Web开发（一）·期末不挂之第三章·HTML基础二（html实现表格和表单）
HTML基础二一. 表格✪✪✪ 二.表单插入表单输入标签✪✪ 多行文本域下拉菜单三.其他 label标签内联框架一. 表格✪✪✪ 插入表格: < table>< /ta ...
【项目分享~写给应届生的一篇文章】基于Web企业招聘网站 ~~ 登录注册设计
背景适合人群: 应届生推荐:可直接做为毕业设计项目,开发架构简单,按照统一的规范开发,容易上少原因:这个项目涉及到SSM三大框架,所以刚刚入门JavaWeb的同学可能不大适合,缺少太多必备的知识 ...
【项目分享~写给应届生的一篇文章】基于Web企业招聘网站 ~~ 登录注册设计2
背景适合人群: 应届生推荐:可直接做为毕业设计项目,开发架构简单,按照统一的规范开发,容易上少原因:这个项目涉及到SSM三大框架,所以刚刚入门JavaWeb的同学可能不大适合,缺少太多必备的知识 ...
html 文本框css样式,13种常用按钮、文本框、表单等CSS样式
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果. 一.按钮样式以下为引用的内容: Example So ...
【译】 WebSocket 协议第十一章——IANA 注意事项（IANA Considerations）
概述本文为 WebSocket 协议的第十一章,本文翻译的主要内容为 WebSocket 的 IANA 相关注意事项. IANA 注意事项(协议正文) 11.1 注册新 URI 协议 11.1.1 ...

Graphql 初体验第十一章 | #13 Hitting the API（实现了登录注册表单）

1 完成表单部分的页面及其对应逻辑，修复了前面的BUG

2 后端实现跨域中间件

Graphql 初体验第十一章 | #13 Hitting the API（实现了登录注册表单）相关推荐

最新文章

热门文章

Graphql 初体验 第十一章 | #13 Hitting the API（实现了登录注册表单）

1 完成表单部分的页面及其对应逻辑，修复了前面的BUG

2 后端实现跨域中间件

Graphql 初体验 第十一章 | #13 Hitting the API（实现了登录注册表单）相关推荐

最新文章

热门文章

Graphql 初体验第十一章 | #13 Hitting the API（实现了登录注册表单）

Graphql 初体验第十一章 | #13 Hitting the API（实现了登录注册表单）相关推荐