Github StackChat

学习回顾

React和Electron结合

TypeError: fs.existsSync is not a function

在React组件里引入electron时候就会报这个错,主要原因是在React里不能引入Node.js的模块

解决方法

  1. Webpack target属性

先展开Create-React-App所有配置

npm run eject

在webpack.config.js下添加配置

// other configs...
module.exports = function(webpackEnv) {
// some configs
return {
target: 'electron-renderer', // 添加target
// other configs
}
}
  1. 预编译引入electron

在electron主进程创建窗口时加入属性

win = new BrowserWindow({
width: 1150,
height: 580,
webPreferences: {
preload: __dirname + '/renderer.js'
}
});

在renderer.js里加入

global.electron = require('electron')

在index.html引入

<script>require('./renderer.js')</script>
  1. 直接使用window引入
const electron = window.require('electron')

combineReducers的使用

import { combineReducers } from 'redux'

combineReducers函数的参数是若干个拆分完的reducer片段

export default combineReducers({
register: registerChange,
login: loginInfoChange,
})

在使用了combineReducers,state就会根据combineReducers的参数进行合并,上面的结合完的state就会变成

state = {
register: {
...
},
login: {
...
}
}

各自内部的结构就根据每个子Reducer的初始state来决定

//loginInfoChange的初始状态
const initialState = {
email: '',
password: '',
}

这样state就会被合并为

state = {
register: {
...
},
login: {
email: '',
password: '',
}
}

mongoDB操作

根据MongoDB node.js Driver的文档来看,提供了callback和promise两种方法,妥妥选择promise

Promise

promise提供了异步编程的新方法

总的来说promise本身就是一个异步操作,但它提供了更优雅的方式来控制异步

创建promise对象

new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

then方法接收resolved状态的回调函数

promise.then(function(value) {
// success
}, function(error) {
// failure
});

可以接受两个参数来接收resolve状态和reject状态,一般只指定resolve状态

链式then,then方法里如果是一个函数,则将返回值作为下一个then调用的参数,还可以是promise对象,这时后一个回调函数,就会等待该Promise对象的状态发生变化

mongonConnect
.then(db => checkRepeatEmail(db, user.email))
.then((db) => {
addUser(db, user)
response.send(SUCCESS_MESSAGE)
})

catch方法,用于接住reject发出时回调函数

mongonConnect
.then(db => checkRepeatEmail(db, user.email))
.then((db) => {
addUser(db, user)
response.send(SUCCESS_MESSAGE)
})
.catch((err) => {
if (err === 'EMAIL_EXISTING') {
response.send(EAMIL_FAILED_MESSAGE)
} else {
response.send(500)
}
})

Coding

跳出登录总结一下

  • View发出action

    • 通过redux-thunk在action中执行函数
    • action中像服务器验证账号
  • 服务器返回响应
  • 根据响应改变状态

container组件

通过react-redux的connect把方法映射到展示组件上

signInUser: () => {
dispatch(signInUser())
},

action

通过中间件在action中执行函数,来向服务器发送请求再根据服务器响应来分发状态

export const signInUser = () => (dispatch, getState) => {
const email = getState().login.email
const password = getState().login.password fetchSignIn(email, password)
.then((response) => {
if (response.status === 200) {
const path = '/home'
browserHistory.push(path)
dispatch(signInSuccess())
} else if (response.status === 400) {
dialog.showMessageBox({
title: '提示',
message: response.message,
})
dispatch(signInFail())
}
})
}

服务器端

向数据层验证数据之后返回响应

function signinForUser(user, response) {
const email = user.email
const password = user.password mongonConnect
.then(db => verifyPassword(db, email, password))
.then((message) => {
if (message === SIGNIN_SUCCESS) {
response.send(SIGNIN_SUCCESS_MESSAGE)
}
})
.catch((message) => {
if (message === USER_NO_EXIST) {
response.send(USER_NO_EXIST_MESSAGE)
} else if (message === PASSWORD_ERROR) {
response.send(PASSWORD_ERROR_MESSAGE)
}
})
}

Node.js实现PC端类微信聊天软件(四)的更多相关文章

  1. Node.js实现PC端类微信聊天软件(一)

    Github StackChat 技术栈 写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写 Elec ...

  2. Node.js实现PC端类微信聊天软件(五)

    Github StackChat 学习回顾 Socket.io 结合Express创建Socket.io服务器 const app = require('express')() const http ...

  3. Node.js实现PC端类微信聊天软件(二)

    Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router -- ...

  4. Node.js实现PC端类微信聊天软件(三)

    Github StackChat Redux学习回顾 Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适 Redux主要提供三个东西来 ...

  5. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  6. Node.js系列:Buffer类的使用

    客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...

  7. Node.js之使用Buffer类处理二进制数据

    Node.js之使用Buffer类处理二进制数据 Buffer类可以在处理TCP流或文件流时处理二进制数据,该类用来创建一个专门存放二进制数据的缓存区. 1. 创建Buffer对象 1.1 直接创建: ...

  8. react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

    一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...

  9. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

随机推荐

  1. CodeChef Tree Palindromes

    Tree Palindromes Given a tree rooted at node 1 with N nodes, each is assigned a lower case latin cha ...

  2. 导入Excel——解析Excel——优化

    package com.it.excel.excelLearn; import java.io.FileInputStream; import java.io.IOException; import ...

  3. LeetCode 865. Smallest Subtree with all the Deepest Nodes

    原题链接在这里:https://leetcode.com/problems/smallest-subtree-with-all-the-deepest-nodes/ 题目: Given a binar ...

  4. django的惰性查询

    django中的查询,在写好查询条件之后,在不调用变量的时候,sql是不会执行的,只有在调用变量的时候,才回去执行, 在一次查询之后,会把变量放进内存,下次再使用这个变量的时候就会使用内存汇总的值. ...

  5. luoguP4169 [Violet]天使玩偶/SJY摆棋子 K-Dtree

    P4169 [Violet]天使玩偶/SJY摆棋子 链接 luogu 思路 luogu以前用CDQ一直过不去. bzoj还是卡时过去的. 今天终于用k-dtree给过了. 代码 #include &l ...

  6. 计蒜客 41391.query-二维偏序+树状数组(预处理出来满足情况的gcd) (The Preliminary Contest for ICPC Asia Xuzhou 2019 I.) 2019年徐州网络赛)

    query Given a permutation pp of length nn, you are asked to answer mm queries, each query can be rep ...

  7. SQL进阶-隐式类型转换

    一.隐式类型转换 1.隐式类型转换 隐式类型转换: '; 程序可读性差,且依赖数据库的隐式转换规则,如果数据库升级,则程序可能无法正确执行: 有可能会导致索引失效: 有可能会导致意想不到的结果: 显式 ...

  8. x64汇编第一讲,Vs系列配置x64环境与x86环境

    目录 x64汇编环境配置 一丶x64环境配置 1.1 VS系列编译器配置X64Asm开发环境. 二丶Vs配置X86汇编环境. x64汇编环境配置 一丶x64环境配置 现在windows系统都是64位了 ...

  9. SpringMVC相关试题

    1.下列相关Spring自动装配的说法中,错误的是( ). (选择一项) A:在Spring配置文件中,可以通过<bean>元素的autowire属性指定自动装配方式B: autowire ...

  10. shell 编写进度条

    test.sh #!/bin/bash i= bar='' label=("|" "/" "-" "\\") ] do ...