mern结构:MongoDB+Express+React+Nodejs
体验地址:www.jingqun.top
后端
dotenv:解析.env挂载到process.env对象,主要涉及数据库和端口,登录密钥
mongoose:Mongoose对象文档模型(ODM)库,它对Node原生的MongoDB模块进行了进一步的优化封装,并提供了更多的功能。主要用来连接数据库,建模,操作文档,这个后期可以讲讲详细的使用方法
joi:数据检验,上传数据之前进行object定义的属性检测,利用validate返回error
bcrypt进行哈希加密
jsonwebtoken:在客户端和服务器之间传递身份验证信息,并支持授权和信息交换。JWT的原理基于数字签名技术,使用三个部分组成:头部、载荷和签名。
开启服务器,配置mongdb,连接mongdb,基于mongoose封装模型,根据express的router和mongoose封装post和get接口,结合joi校验,
封装的todos接口列表:
get请求:find查找sort排序date倒叙排列,之后利用数组filter找到匹配当前用户id的todos,然后发送出去,用try catch捕获错误
post请求:利用joi的object建立约束,用validate校验传来的数据,结构体获取error,如果有error返回错误信息,结构体获取数据,然后新建Todo实例,最后save保存到数据库
put请求:需要id,和post一样校验,然后利用Todo的findById传入param的id,如果不存在返回不存在,如果获取到的todo的uid不等于当前用户id,返回更新失败信息,然后把请求的数据用结构体处理,原型执行findByIdAndUpdate更新数据,把执行结果send给后端
patch请求:需要id,findById,同上捕获错误,执行findByIdAndUpdate更新完成状态
delete请求:需要id,同上捕获错误,执行findByIdAndDelete更新完成状态
封装user的接口列表
用户模型
注册,jwt登录,中间件保护接口
注册接口:
post请求:joi的object建立约束,validate校验错误,利用User原型的findOne用email检查是否存在用户,最终用结构体新建user实例,其中需要bycrypt.genSalt加盐,然后hash密码,最后save
登录接口:
post请求:joi的object建立约束,validate校验错误,利用User原型的findOne用email检查是否存在用户,利用bcrypt的compare比较获取到的user密码和输入密码,之后使用jwt的sign处理user的name和email和_id和登录密钥返回token
中间件函数,校验token,存在才能继续
获取header的token,利用jwt的verify校验密钥和token获取payload
前端
BrowerRouter:BrowserRouter本身是一个高阶组件,在内部创建一个全局的 history 对象(可以监听整个路由的变化),并将 history 作为 props 传递给 react-router 的 Router 组件(Router 组件再会将这个 history 的属性作为 context 传递给子组件)
material-ui:用到了Appbar,应用栏,Typography:控制对齐,包装,重量等的常用文本,Toolbar:工具栏组件,选项,Button组件,makeStyles把当前组件样式和全局的分开
Switch:Switch可以提高路由匹配效率(单一匹配)。
moment:处理时间的库
一共登录,注册,nav,todos,todos组件包含addtodo和listtodos,把todo和settodo传过去,
addtodo中处理表单提交,dispatch修改状态
listtodos组件中通过useEffect执行getTodos获取数据,使用map返回todo组件,携带key,用来处理标识唯一,
todo组件,
在app中导入这些组件
redux
useSelector获取应用状态 useDispatch调用actions修改状态
逻辑实现:
处理登录:e.preventDefault阻止表单自动提交,dispatch提交表单,然后清空表单数据,然后实现跳转
用户处理:USER_LOADED,jwt解密返回user,SIGN_OUT,删除token
signUp通过axios发送post请求,获取token设置到localstorage
signIn通过axios发送post请求,获取token设置到localstorage
signOut直接dispatch定义的CLEAR_TODOS返回空数组,和SIGN_OUT删除token
todo逻辑:GET_TODOS调用get返回数据,ADD_TODO调用post返回结果,UPDATE_TODO调用put返回匹配条件的数据,CHECK_TODO调用patch返回匹配条件的结果,DELETE_TODO调用delete,CLEAR_TODOS返回空
其他处理
useHistory控制路由导航,Link跳转组件,useEffect,ToastContainer处理弹出消息
用到的工具:在线MongoDB,在线postman
部署到服务器用到的命令
npm -g config set user root
安装nodemon,启动服务器
netstat -tuln
pkill node
nginx -s reload
npm un bcrypt npm i bcrypt