运行之前首先要启动mongodb (提醒:在win+r cmd内运行)
第一步开启mongodb服务器:
D:\mongodb\bin\mongod --dbpath d:\data\db
第二步打开mongodb服务
D:\mongodb\bin\mongo.exe
//开启9993端口
$ node server.js
用过React就知道.React就是针对于View层的一个库.
单纯的React在做复杂应用是比较吃力的.所以React在做复杂的应用是离不开官方的推荐的Redux(状态管理库).由于Redux上手比较困难.因为Redux中dispatch action reducer state 单身边数据流 都是比较吃力的.
做什么?
有实时聊天功能的招聘APP,接口都是真实的接口.
那些功能?
登录注册,信息完善,个人中心,牛人列表,BOSS列表,消息列表,聊天详情页.
技术栈?
React全家桶
前端支持:
antd-mobile Redux状态管理 React-router4 axios异步请求 create-react-app 第三方组件 React
后端支持:
Express Socket.io (聊天实时通讯)
Mongdb(存储)
搭建环境:
1.create-react-app
2.如何安装和使用第三方库
3.如何定制化配置
$cnpm install redux --save-dev 安装redux
$cnpm run start 启动
$ cnpm run eject 将它的配置弹出来
ES6语法:
解构赋值:
函数也可以多返回值了
- 数组解构
- 对象解构
提供类的语法糖
是prototype的语法糖
Extends继承
Constructor构造函数
ES6新出现的数据结构
Set , 元素不可重合
Map
Symbol
模块化
Import import{}
Export ,Export default
Node现在还不支持,还需要用require来加载文件.
ES6自带了模块化机制 告别seajs和require.js
装饰器
Async await
其他特性
Promise
迭代器和生成器
代理Proxy
Express + mongodb
Express + mongodb开发web后台接口
Express开发web接口
非关系型数据库mongodb 存储的是类似于json的数据.
使用nodejs的mongoose模块链接和操作mongodb
Express基于nodejs,快速,开发,极简的web开发框架.
$: cnpm install express --save-dev 安装express
express最简单的使用:
server.js
const express = require('express');
// 新建app
const app = express();
app.get('/',function(req,res){
res.send('<h1>Hello World</h1>');
})
app.listen(9993,function() {
console.log('Node app start at port 9993');
})
启动express
进入server.js目录下
$:node server.js
如果遇见
将$:node server.js 重新跑一下
server.js
app.get('/data',function(req,res){
res.json({name:'bin',age:20});
})
解决一个问题:
每次修改完server.js以后我们都需要手动 control + c 然后再node server.js 这样繁琐.
解决:
安装:$ cnpm install nodemon -g
然后不在用
$node server.js
而用:
$nodemon server.js
Express使用
当我们的模块复杂以后,我们使用模块 app.use
res.send res.json res.sendfile响应不同的内容
Mongodb + mongoose
非关系型数据库
官网 [图片上传失败...(image-8928a5-1524225217093)] 下载安装mongodb
mongodb与express配合时候最好的一个库是mongoose
安装mongoose
$: cnpm install mongoose --save-dev
启动mongodb(教程看的是菜鸟教程-mongodb)
是菜鸟教程-mongodb
第一步开启mongodb服务器:
D:\mongodb\bin\mongod --dbpath d:\data\db
第二步打开mongodb服务
D:\mongodb\bin\mongo.exe
如何使用这个库:
例子
server.js
//连接mongodb
const DB_URL = 'mongodb://localhost:27017';
mongoose.connect(DB_URL);
//如果连接成功打印一个字符串
mongoose.connection.on('connected',function(){
console.log('mongo connect success!!');
})
运行这个脚本(在server目录下)
nodemon server.js
mongodb里面是一个集合或者说文档.如何用
//如果没有这个immoc它会自己生成一个
const DB_URL = 'mongodb://localhost:27017/immoc';
mongoose操作mongodb,存储的就是json,相对于mysql来说,要易用很多.
新增数据
//类似于mysql的表,mongo里有文档,字段的概念
const User = mongoose.model('user',new mongoose.Schema({
user : { type: String, require: true },
age : {type:Number,require:true}
}))
User.create({
user : 'zhangbin',
age : 20
},function (err,doc) {
if(!err){
console.log(doc);
} else {
console.log(err);
}
})
mongoose基本操作
const express = require('express');
const mongoose = require('mongoose');
//连接mongodb 并且使用imooc这个集合 如果没有这个集合会自动给我们建
const DB_URL = 'mongodb://localhost:27017/imooc';
mongoose.connect(DB_URL);
//如果连接成功打印一个字符串
mongoose.connection.on('connected',function(){
console.log('mongo connect success!!');
})
//类似于mysql的表,mongo里有文档,字段的概念
const User = mongoose.model('user',new mongoose.Schema({
user : { type: String, require: true },
age : {type:Number,require:true}
}))
更新数据
User.update({'user':'xiaoming'},{'$set':{'age':32}},function (err,doc) {
console.log(doc);
})
删除数据
User.remove({user : 'binbin'},function (err,doc) {
console.log(doc);
})
User.create({
user : 'binbin',
age : 20
},function (err,doc) {
if(!err){
console.log(doc);
} else {
console.log(err);
}
})
回顾React基础知识
React是什么?
使用React实现组件化
React进阶使用
React是什么?
帮助你构建UI库,其实就是常说的mvc中的view库.
一切皆是组件
全部是使用ES6语法,最新版本16
React是什么?
render返回的值是输出JSX语法,会把JSX转成js执行.
class写成classname
变量要用{}包裹
同时可以在一个js文件写2个类
import React from 'react';
class App extends React.Component {
render(){
const name = 'bin';
return (
<div>
<h1>superman:{name}</h1>
<HH></HH>
</div>
);
}
}
class HH extends React.Component {
render() {
const name = 'Gao';
return (
<h1>superman:{name}</h1>
);
}
}
export default App;
我们在开发的时候应该使用一个chrom提供给我们的插件:
antd-mobile组件库
蚂蚁金服出品的UI组件库
安装
$ cnpm install antd-mobile --save-dev
解释: $ cnpm install antd-mobile@next --save-dev 这个是安装最新版的
按需加载:安装插件
$ cnpm install babel-plugin-import --save-dev
app.js
import React from 'react';
import {Button} from 'antd-mobile';
// import 'antd-mobile/dist/antd-mobile.css'; 这个不在需要
package.json
在
"babel": {
"presets": [
"react-app"
],
"plugins" : [
["import", {"libraryName":"antd-mobile","style":"css"}]
]
},
增加
"plugins" : [
["import", {"libraryName":"antd-mobile","style":"css"}]
]
于是就是按需加载了
并且react-native也是用的这个antd-mobile UI库
兼容Web和ReactNative
常用的组件:
Import后可以直接使用
Layout布局组件
表单组件 数据展示组件 选择器
操作组件
Redux基础知识
Redux是什么?
Redux核心概念?
Redux实战
Redux是什么?
Redux是专注于状态管理的库
Redux专注状态管理和react解耦.
单一状态,单向数据流.
核心概念:store state action reducer
我们来拿李云龙的独立团来说:
人少的时候,无论兵器和人员的变更,都是setState
发展为千人大团时候,老李决定,军事和生活分开.
所有状态归为赵政委管理(redux)管理, 自己只打仗(view显示)
赵政委(redux)有什么能力?
老赵有一个保险箱(store),所有人的状态,在哪里都有记录(state)
需要改变的时候,需要告诉专员(dispatch)要干什么(action)
处理变化的人(reducer)拿到state和action,生成新的state.
走马上任
首先通过reducer新建store,随时通过store.getState获取状态.
需要状态变更,store.dispatch(action)来修改状态
Reducer函数接收state和action,返回新的state,可以用store.subscribe监听mei每次修改.
Redux独自最基本的使用
import { createStore } from "redux";
//新建store
//通过reducer建立
//根据老的state,和action生成新的state
function counter(state=0,action) {
switch (action.type) {
case '加机关枪':
return state+1;
case '减机关枪':
return state-1;
default:
return 10;
}
}
//新建store
const store = createStore(counter);
const init = store.getState();
console.log(init);
function listener() {
const current = store.getState();
console.log(`现在有机枪${current}把~`);
}
store.subscribe(listener);
//派发事件 传递action
store.dispatch({ type: '加机关枪' });
store.dispatch({ type: '加机关枪' });
store.dispatch({ type: '加机关枪' });
console.log(store.getState());
Redux如何与React一起使用?
把store.dispatch()方法传递给组件,内部可以调用修改状态.
Subscribe订阅render()函数,每次修改都重新渲染.
Redux相关内容,移到单独的文件index.redux.js单独管理.
更进一步
处理异步
调试工具
更优雅的和react结合.
redux处理异步,需要redux-thunk插件
Npm install redux-devtools-extension 并且开启
使用react-redux优雅的链接react和redux
安装
$ cnpm install redux-thunk --save-dev
安装完成后,需要applyMiddleware开启thunk中间件
现在Action是返回对象,安装这个插件以后可以返回函数.使用dispatch提交action
怎么开启applyMiddleware?
在index.js下
import { createStore , applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
先创建store时候
const store = createStore(counter,applyMiddleware(thunk));
异步action
// 这个是异步函数,一般是返回对象的,这里是返回的一个异步函数. 因为安装了redux-thunk插件
export function addGunAsync() {
return dispatch=>{
setTimeout(() => {
dispatch(addGun())
}, 2000);
}
}
引用
import { counter, addGun, removeGun, addGunAsync} from './index.redux';
注入
function render() {
ReactDOM.render(<App store={store} addGUN={addGun} removeGun={removeGun} addGunAsync={addGunAsync}/>, document.getElementById('root'));
}
获取属性
const addGunAsync = this.props.addGunAsync;
render(){
const store = this.props.store;
const num = store.getState();
const addGun = this.props.addGUN;
const removeGun = this.props.removeGun;
const addGunAsync = this.props.addGunAsync;
return (
<div>
<h1>现在有机枪{num}把!</h1>
<Button onClick={() => store.dispatch(addGun())}>申请武器</Button>
<Button onClick={() => store.dispatch(removeGun())}>上交武器</Button>
<Button onClick={() => store.dispatch(addGunAsync())}>脱2天申请武器</Button>
</div>
)
}
调试工具
在chrom下扩展更多程序
在商店搜索 redux
重新开一个页面,F12就会出现新扩展的程序redux
如何使用:
第一步,引入compose
import { createStore , applyMiddleware, compose } from 'redux';
将
const store = createStore(counter, applyMiddleware(thunk));
改为
const store = createStore(counter,compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension():f=>f //前提是安装了Redux DevTools
));
运行界面:
老赵能力用起来很麻烦,为了方便管理.使用魏和尚来负责链接.
1.首先安装插件
$: cnpm install react-redux --save-dev
2.忘记subscribe 记住reducer action dispatch即可.
3.React-redux提供Provider和connect2个接口来链接.
React-redux具体使用
Provider组件在应用最外层,传入store即可,只用一次.
更新代码
在index.js
import { Provider } from 'react-redux';
将
function render() {
ReactDOM.render(<App store={store} addGUN={addGun} removeGun={removeGun} addGunAsync={addGunAsync}/>, document.getElementById('root'));
}
render();
//状态改变.就重新执行以下render
store.subscribe(render);
注释掉.
新增
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Connect在组件内部负责从外部获取组件需要的参数.
Connect可以用装饰器的方式来写.
在app.js
// export default App;
import React from "react";
import { Button } from 'antd-mobile';
import { addGun, removeGun, addGunAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends React.Component {
// constructor(props) {
// super(props);
// }
render(){
// const store = this.props.store;
// const num = store.getState();
const num = this.props.num;
const addGun = this.props.addGun;
const removeGun = this.props.removeGun;
const addGunAsync = this.props.addGunAsync;
return (
<div>
<h1>现在有机枪{num}把!</h1>
<Button onClick={addGun}>申请武器</Button>
<Button onClick={removeGun}>上交武器</Button>
<Button onClick={addGunAsync}>脱2天申请武器</Button>
</div>
)
}
}
const mapStatetoProps = (state)=>{
return {num : state}
};
const actionCreators = { addGun, removeGun, addGunAsync};
App = connect(mapStatetoProps, actionCreators)(App);
export default App;
Connect可以用装饰器的方式来写
但是需要一个插件(前提是create-react-app需要弹出个性化配置)
$ cnpm run eject 将它的配置弹出来
安装插件
$ cnpm install babel-plugin-transform-decorators-legacy --save-dev
在package.json在给刚才安装的插件配置上.
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
],
"transform-decorators-legacy"
]
由于有了Connect这个插件,
可以将
const mapStatetoProps = (state) => {
return { num: state }
};
const actionCreators = { addGun, removeGun, addGunAsync };
App = connect(mapStatetoProps, actionCreators)(App);
改为
@connect(state => ({num: state}),
{ addGun, removeGun, addGunAsync }
)
React后序?
什么数据应该放在React里面
Redux管理ajax
Redux管理聊天数据
