尚硅谷-React项目-硅谷直聘
2024-05-03 19:19:11
day01
1. 项目开发准备
1). 项目描述: 整体业务功能/功能模块/主体的技术/开发模式
2). 技术选型: 数据展现/用户交互/组件化, 后端, 前后台交互, 模块化, 项目构建/工程化, 其它
3). API接口: 接口的4个组成部分, 接口文档, 对/调/测接口
2. git管理项目的常用操作
1). 创建本地仓库创建.gitignore配置文件git initgit add *git commit -m "xxx"
2). 创建github远程仓库New Repository指定名称创建
3). 将本地仓库推送到远程仓库git remote add origin https://github.com/zxfjd3g/170612_JSAdvance.git 关联远程仓库git push origin master4). push本地的更新 git add *git commit -m "xxx"git push origin master5). pull远程的更新git pull origin master6). 克隆github上的项目:git clone https://github.com/zxfjd3g/xxx.git
3. 搭建项目
1). 使用create-react-app脚手架创建模板项目(工程化)
2). 引入antd-mobile, 并实现按需打包和自定义主题
3). 引入react-router-dom(v4): HashRouter/Route/Switchhistory: push()/replace()
4). 引入reduxredux/react-redux/redux-thunkredux: createStore()/combineReducers()/applyMiddleware()react-redux: <Provider store={store}> / connect()(Xxx)4个重要模块: reducers/store/actions/action-types
4. 登陆/注册界面
1). 创建3个1级路由: main/login/register
2). 完成登陆/注册的静态组件antd组件: NavBar/WingBlank/WhiteSpace/List/InputItem/Radio/Button路由跳转: this.props.history.replace('/login')收集表单输入数据: state/onChange/变量属性名
5. 实现简单后台
1). 使用webstorm创建基于node+express的后台应用
2). 根据需求编写后台路由
3). 使用postman测试后台接口
4). 使用nodemon实现后台应用的自动重启动
5). 路由回调函数的3步: 读取请求参数/处理/返回响应数据
day02
1. 使用mongoose操作数据库
1). 连接数据库
2). 定义schema和Model
3). 通过Model函数对象或Model的实例的方法对集合数据进行CRUD操作
2. 注册/登陆后台处理
1). models.js连接数据库: mongoose.connect(url)定义文档结构: schema定义操作集合的model: UserModel
2). routes/index.js根据接口编写路由的定义注册: 流程登陆: 流程响应数据结构: {code: 0, data: user}, {code: 1, msg: 'xxx'}
3. 注册/登陆前台处理
1). ajaxajax请求函数(通用): 使用axios库, 返回的是promise对象后台接口请求函数: 针对具体接口定义的ajax请求函数, 返回的是promise对象代理: 跨域问题/配置代理解决await/async: 同步编码方式实现异步ajax请求
2). reduxstore.js生成并暴露一个store管理对象reducers.js包含n个reducer函数根据老state和指定action来产生返回一个新的stateactions.js包含n个action creator函数同步action: 返回一个action对象({type: 'XXX', data: xxx})异步action: 返回一个函数: disptach => {执行异步代理, 结束时dispatch一个同步action}action-types.jsaction的type名称常量
3). componentUI组件: 组件内部没有使用任何redux相关的API通过props接收容器组件传入的从redux获取数据数据类型: 一般和函数容器组件connect(state => ({user: state.user}),{action1, action2})(UI组件)
day03
1. 实现user信息完善功能
1). 用户信息完善界面路由组件: 组件: dashen-info/laoban-info/header-selector界面: Navbar/List/Grid/InputItem/Button/TextareaItem收集用户输入数据: onChange监听/state 注册2级路由: 在main路由组件
2). 登陆/注册成功后的跳转路由计算定义工具函数计算逻辑分析
3). 后台路由处理
4). 前台接口请求函数
5). 前台reduxaction-types异步action/同步actionreducer
6). 前台组件UI组件包装生成容器组件读取状态数据更新状态
2. 搭建整体界面(上)
1). 登陆状态维护后台将userid保存到cookie中前台读取cookie中的useridredux中管理user信息状态2). 实现自动登陆整体逻辑分析ajax请求根据cookie中的userid查询获取对应的user信息
day04
1. 搭建整体界面(下)
封装导航路由相关数据(数组/对象)
抽取底部导航组件
非路由组件使用路由组件API
2. 个人中心
读取user信息显示
退出登陆
3. 用户列表
为大神/老板列表组件抽取用户列表组件
异步读取指定类型用户列表数据后台路由apireduxcomponent
4. socket.io
实现实时聊天的库
包装的H5 WebSocket和轮询---> 兼容性/编码简洁性
包含2个包:socket.io: 用于服务器端socket.io-client: 用于客户端
基本思想: 远程自定义事件机制on(name, function(data){}): 绑定监听emit(name, data): 发送消息io: 服务器端核心的管理对象socket: 客户端与服务器的连接对象
day05
1. 聊天组件功能:
后台接口
chat静态组件
发送消息与接收消息
获取消息列表显示
接收消息显示
完善列表显示
day06
1. 消息列表
对消息进行分组保存, 且只保存每个组最后一条消息
对于对象容器和数组容器的选择
数组排序
2. 未读消息数量显示
每个组的未读数量统计
总未读数量统计显示
查看消息后, 更新未读数量
3. 自定义redux和react-redux
理解redux模块1). redux模块整体是一个对象模块2). 内部包含几个函数createStore(reducers) // reducers: function(state, action){ return newState}combineReducers(reducers) // reducers: {reducer1, reducer2} 返回: function(state, action){ return newState}applyMiddleware() // 暂不实现3). store对象的功能getState() // 返回当前statedispatch(action) // 分发action: 调用reducers()得到新的总state, 执行所有已注册的监听函数subscibe(listener) // 订阅监听: 将监听函数保存起来
理解react-redux模块1). react-redux模块整体是一个对象模块2). 包含2个重要属性: Provider和connect3). Provider值: 组件类作用: 向所有容器子组件提供全局store对象使用: <Provider store={store}><Xxx/></Provider>4). connect值: 高阶函数作用: 包装组件生成容器组件, 让被包装组件能与redux进行通信使用: connect(mapStateToProps, mapDispatchToProps)(Xxx)
尚硅谷-React项目-硅谷直聘相关推荐
- react项目之直聘
#项目说明1 此项目是一个前后台分离的招聘的SPA,包括前端应用和后台应用2 包括用户注册/登录,大神/老板列表,实时聊天等模块3 前端:使用了React全家桶.ES6.Webpack等技术,构建页面 ...
- React-项目实战-硅谷直聘
课程介绍 本套视频是尚硅谷前端学科项目:<<硅谷直聘>> 课堂实录 . 该项目是基于新版本 React 的全栈项目,此项目为一个前后台分离的招聘的 SPA, 包括前端应用和后 ...
- React直聘项目（一）：客户端基本配置
目录 前言: 客户端: 准备工作 项目(前端)源码目录设计 引入 antd-mo: 下载组件包:npm install antd-mobile --save 页面处理: 解决移动端点击的延迟: 实现组 ...
- 尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
- Java web 2022跟学尚硅谷书城项目完整开源分享
Java web 2022跟学尚硅谷书城项目完整开源分享 项目介绍 项目类图 sql建表和添加数据 界面展示 用户登录界面 用户注册界面 首页 添加购物车 我的购物车 我的订单 功能说明 项目介绍 跟 ...
- 尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
- 「尚硅谷与腾讯云官方合作」硅谷课堂项目视频发布
硅谷课堂是尚硅谷与腾讯云官方合作的项目,是一款基于微信公众号B2C模式的在线学习平台.项目包含后台系统和微信公众号部分,采用前后端分离开发模式. 本套项目教程针对有一定开发经验的Java程序员精心打造 ...
- 【YY笔记】React.入门（尚硅谷React教程笔记）
前言 教程链接:尚硅谷React技术全家桶全套完整版:天禹老师讲得挺好,感谢免费分享教程 笔记用OneNote记的,不想重写了,但是想保留格式就只能用图片传上来--很烦 可能会有一些疏漏和小白的地方, ...
- B站尚硅谷React入门教程
视频链接:React全家桶(技术栈) 第1章:React入门 1.1. React简介 1.1.1 官网 英文官网: https://reactjs.org/ 中文官网: https://react. ...
最新文章
- java图片序列化_Java中的强大武器——对象的序列化
- awstats CGI模式下动态生成页面缓慢的改进
- http://q.cnblogs.com/q/54251/
- python语言特点有哪些-Python是什么？Python有什么特点？
- Bluetooth ATT介绍
- 手把手教你Homestead安装，并填坑！！
- C语言学习之有一个3X4的二维数组,要求用指向元素的指针变量输出二维数组各元素的值
- 三种通用应用层协议protobuf、thrift、avro对比
- Angular jasmine如何从detectChange触发refreshView进而执行到Component的hook实现
- 中国的程序员为什么这么辛苦？
- python学籍管理系统 flask_taskday05-Python之flask学习 web开发最基本的需要（特别详细且适用）...
- ListView与GridView优化
- mysql 删除创建表分区_创建,增加，删除mysql表分区
- 004、SVN更新改密码
- python3语法学习第四天--序列
- Linux shell脚本编写
- 我打算学计算机学英语,英语人教版八年级上册我打算学习计算机科学.doc
- “荣光医院”急救中心 73 问答
- 28种美女最漂亮的拍照姿势
- C语言人物复杂移动与异步输入