react项目实战三 登录注册页面与数据库连接

ps：此部分（第二部分）的代码，提交简介为second commit

源码地址

https://github.com/TH226/react-muke

需要引入依赖库

npm install body-parser --save  接收post请求返回的参数
npm install utility --save   MD5加密库
npm install prop-types --save 属性验证库

目录结构

react-muke
    │  .gitignore
    │  package-lock.json
    │  package.json
    │  README.md
    │  
    ├─config
    │          
    ├─public
    │      
    ├─scripts
    |
    │    后端服务配置  
    ├─server
    │      model.js
    │      server.js
    │      user.js
    │      
    └─src
        │  config.js
        │  index.css
        │  index.js  根页面
        │  reducer.js  将多个reducer函数合并
        │  util.js  工具类
        │  
        ├─component
        │  ├─authroute 
        │  │      authroute.js 检测用户是否登陆，未登录进行路由的跳转
        │  │      
        │  ├─logo  登录页面logo组件
        │  │      job.png
        │  │      logo.css
        │  │      logo.js
        ├─container
        │  ├─login  登录页面组件
        │  │      login.js
        │  │      
        │  └─register 注册页面组件
        │          register.js
        │          
        └─redux
                user.redux.js 负责对state状态的改变
                

1、数据文件的建立

在model.js中连接数据库以及创建表

const mongoose = require('mongoose')
//连接mongo 并且使用imooc这个集合
const DB_URL = 'mongodb://localhost:27017/imooc-chat'
mongoose.connect(DB_URL)
mongoose.connection.on('connected',function(){
    console.log('mongo connect success');
    
})

const models = {
    user:{
        'user':{'type':String,'require':true},
        'pwd':{'type':String,'require':true},
        'type':{'type':String,'require':true},
        //头像
        'avatar':{type:String},
        //个人/职位简介
        'desc':{'type':String},
        //职位名
        'title':{'type':String},
        //如果是boss还有两个字段
        'company':{'type':String},
        'money':{'type':String}
    },
    chat:{

    }
}

//创建所有对象的数据映射
for(let m in models){
    //m 为模型的名字，类似于表名，后边的参数类似于表中的字段
    mongoose.model(m,new mongoose.Schema(models[m]))
}

//暴露出接口
module.exports = {
    getModel:function(name){
        //获取名字为 name参数 所代表的数据
        return mongoose.model(name)
    }
}

2、登录注册注册功能的实现

在user.js中书写登录注册功能

const express = require('express')
const Router = express.Router()
const model = require('./model')
const User = model.getModel('user')
const utils = require('utility')

//用户相关的
Router.get('/list',function(req,res){
    User.find({},function(err,doc){
        return res.json(doc)
    })
})
//登陆
Router.post('/login',function(req,res){
    const {user,pwd} = req.body
    User.findOne({user:user},_filter,function(err,doc){
        if(!doc){
            return res.json({code:1,msg:'用户名或者密码错误'})
        }
        res.cookie('userid',doc._id)
        return res.json({code:0,data:doc})
    })
    
})
//注册功能
Router.post('/register',function(req,res){
    const {user,pwd,type} = req.body
    // console.log("req.body",req.body);
    
    User.findOne({user},function(err,doc){
        //如果查询到，说明当前用户已经存在
        if(doc){//表示用户不存在，为0表示存在
            //code为1
            return res.json({code:1,msg:'用户名重复'})
        }
        //如果不存在，就创建一个新的
        User.create({user,pwd:md5Pwd(pwd),type},function(e,d){
            if(e){
                return res.json({code:1,msg:'后端出错了'})
            }
            return res.json({code:0})
        })
    })
})
Router.get('/info',function(req,res){
    return res.json({code:1})
})

//密码加盐，让密码更加复杂，不易被破解
function md5Pwd(pwd){
    const salt = 'th_is_good_5555dsd54567!2##~!ww'
    return utils.md5(utils.md5(pwd+salt))
}

//用来暴露此页面的接口（加上之后，才可以调用）
module.exports = Router

3、在server.js中新增接收post请求返回参数的配置

const express = require('express')
const userRouter = require('./user')
const bodyParser = require('body-parser')
const cookieParser = require('cookie-parser')

//新建app
const app = express()
app.use(cookieParser())
app.use(bodyParser())
app.use('/user',userRouter)

app.listen(9093,function(){
    console.log('start 9093');
    
})

4、login页面的数据交由redux管理

通过配置connect来实现对state数据的传递
import {connect} from 'react-redux'
通过配置装饰器可以使用装饰器的写法
@connect(
    state=>state.user,
    {login}
)

5、register页面的数据处理

register页面与login页面类似