前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66Web/react-antd-zhaoping,欢迎star. 一.登录注册 页面文件结构 基础组件放在Component文件夹下面 页面组件放在Container文件夹下面 页面入口处获取用户信息,决定跳转到哪个页面 web开发模式 整体前后端交互通过JSON实现 基于cookie用户验证 expre…

前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66Web/react-antd-zhaoping,欢迎star. 一.聊天信息根据用户分组 从redux中获取到chatmsg:其中包含了所有与当前用户有关的聊天信息 与不同的用户聊天信息的chatid不同:根据chatid可将数据分到不同的数组 //按照聊天用户分组,根据 chatid const ms…

前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66Web/react-antd-zhaoping,欢迎star. 一.Socket.io基础知识     基于事件的实时双向通信库  基于websocket协议 前后端通过事件进行双向通信 配合express,快速开发实时应用 Socket.io和Ajax区别 基于不同的网络协议 注意:Socket.io…

前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66Web/react-antd-zhaoping,欢迎star. 一.信息完善 boss信息完善页前端实现 container目录下:创建bossinfo组件目录,使用actd-mobile实现信息输入列表 import React from 'react' import {NavBar, InputIt…

前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66Web/react-antd-zhaoping,欢迎star. 一.项目概述 二.需求分析        文件架构和规范 src目录:前端源码目录 server目录:后端express目录 根据功能文件夹:component,container,reducers等 router划分页面方式 进入应用时获…

前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66Web/react-antd-zhaoping,欢迎star. 一.个人中心信息展示 用户在登录后,authrouter.js中已经获取到所有的用户信息,并保存在redux:所以个人中心只需获取redux中的user数据即可 component目录下:创建user个人中心组件目录 import Reac…

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看出目前一本图书信息主要有: 图片字段 名称字段 作者字段 出版社字段 除了以上前端页面中可见的信息外,在服务器开发中还需要给每一条记录(数据)都加上下面的几个字段: 创建时间字段 更新时间字段 删除时间字段 最后完成的数据库表如下: ps:由于数据库是直接导入的,之前的数据库是没有时间字段的,所以前…

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下几个接口: 获取书籍详情信息 获取用户对书籍的喜欢状态接口 喜欢/不喜欢书籍接口 获取评论列表 写评论接口 以上的接口,有的数据可以直接从已存在的数据表中去获取,比如:书籍详情信息,而其他新接口就需要创建对应的model,然后根据model创建相应的数据表. 比如 用户对书籍的喜欢操作,可以创建li…

通过这篇 全栈项目|小书架|服务器开发-JWT 详解 文章我们对JWT有了深入的了解,那么接下来介绍JWT如何在项目中使用. 安装 $ npm install jsonwebtoken 生成 Token 将生成token的代码封装到一个函数中,方便后续调用. /** * 生成 token * @param {用户 id} uid * @param {*} scope */ const generateToken = function (uid, scope) { // 配置项中的密钥和过期时间…

个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议,本来打算用nuxt来书写,但是想学了react之后用next来写,后面会用reactSSR来重构! ❞ 博客该有的功能都有,可以写文章,可以评论,可以留言,甚至可以玩游戏(虽然还没完善),等等让你来发现. 这是一个小型的全栈项目,主要是检验并记录一下自己的学习成果 运用的技术Vue.Vue-Cli…