登录注册（monogodb和nodejs完成）

登录注册（monogodb和nodejs完成）

1、用express脚手架搭建项目

首先需要安装脚手架，脚手架工具安装命令

有两种安装方法：

---

全局安装后使用

- cnpm i express-generator -g
- express -e  项目名称

---

npx直接安装（需要npm版本大于5.2）

npx express -e 项目名称

​ npx的好处：避免全局安装脚手架，减少本地内存占用

安装后会自动生成一些文件，包括一个package.json 文件，所以需要安装所有的依赖

npm i 安装所有的依赖

2、前端工作

在这个项目中，nodejs和mongoosedb是作为后台支持的，还需要前端的配合。

本着前后端分离的概念，我们需要新建一个文件夹，在里面放入前端需要的html、js、css等前端静态文件，前端中主要是用ajax发送数据，并且根据后端返回的结果来进行相应的操作。

 $('.login').on('click', function () {
      $.ajax({
        url: 'http://localhost:3000/login',
        method: 'POST',//一共有四种：GET POST PUT DELETE,分别代表增删改查
        data: {
          username: $('#username').val(),
          password: $('#password').val(),
          token:getcookie('token')
        },
        success(result) {
          const data = JSON.parse(result)
          //后端通过JSON，stringfy将数据转成字符串，前端用JSON.parse将字符串转换为对象
          console.log(data);
          ......根据数据做相应的操作
        }
      })
    })

因为前端文件需要在服务器下打开。在vs code中有一个插件可以帮助我们live server

这个插件可以帮我们在服务器中打开页面

3、后端工作

首先要解决跨域问题，需要安装cors模块或其他方式解决跨域问题

以下是

1.cors解决跨域问题

cors是一个第三方的模块，安装命令：

npm i cors

安装完之后在app.js引入cors模块，并使用中间件的方式来使用

app.use(cors({
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 200
}))

2.脚手架联动性

在生成的脚手架中routes、views和app.js，具有联动性，更改是一体的，有一个更改，如在routes中增加一个login.js，那么在app.js中需要加入该路由模块

var loginRouter = require( './routes/login');

下面需要使用加入的路由模块

app.use('/',loginRouter);

因为在路由中应用了res.render，需要后端渲染

  res.render('modify',{
        data:JSON.stringify({
           info:result.info,
           status:result.status
        })

所以要增加一个views中的后端模块，上面

<%- data %>

3.mongoose操作数据库

​ 前端的数据在发送给后端后，也需要在数据库中对比并返回结果。在这里我们使用的是mongoose,它可以将Mongoose将数据库中的数据转换为JavaScript对象以供我们在应用中使用

安装命令：

npm install mongoose

1.连接数据库

首先我们需要连接数据库，代码如下

// monogoose.connect( 数据库地址，错误优先的回调函数)
//数据库地址构成，mongodb://127.0.0.1:27017/数据库名称

const mongoose = require( 'mongoose' )
const connect = {
    init () {     				mongoose.connect(`mongodb://127.0.0.1:27017/${DBNAME}`,error => {
            if(error){
                console.log(error)
            } else {
                console.log("数据库连接成功")
            }
        })
    }
}

module.exports = connect

由于不是直接对数据库进行操作，我们在操作数据库是还需要有准备工作：

存储数据步骤：定义Schema (骨架) > 创建model（模型）>Entity实例化方法。

Schema ： 一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力 钱的电板

Model ： 由Schema发布生成的模型，具有抽象属性和行为的数据库操作对 钱的样板

Entity ： 由Model创建的实体，他的操作也会影响数据库 钱

2.创建骨架Schema

const mongoose = require( 'mongoose' )

//创建骨架
//options 表示一个对象，对象中存储的是字段和字段类型
// const userSchema = new mongoose.Schema( options );

const userSchema = new mongoose.Schema({
    username:String,//代表着建立数据库中的key和对应的type
    //这里的type首字母都需要大写
    password:String
});

module.exports = userSchema

3.创建模型Model

const userModel = mongoose.model('users', userSchema)

const db = {
    user: {
        add(data) {},//增加数据
        del(data) {},//删除数据
        modify(data) {},//修改数据
        query(data) {}//查询数据

module.exports = db

4.对数据库进行操作

对应的数据库的操作有四种，其中增加数据和查询数据用的方法相似，用some检测数据库中是否有符合条件的文档

    return new Promise((resolve, reject) => {
        //用户存在，我们添加数据，并将结果返回给前端
        //用户不存在，我们不添加数据，将结果也返回给前端
        userModel.find({}, (error, docs) => {
            //console.log(docs) //结果是一个数组，数组中有所有的信息
            const user = new userModel(data)
            if (docs.length != 0) { //数据库中有数据
                const f = docs.some(item => item.username === data.username)
                if (f) { //用户名重复
                    resolve({
                        info: '用户名已重复',
                        status: 0
                    })
                } else { //用户名不存在
                    user.save(error => {
                        if (error) {
                            resolve({
                                info: error,
                                status: 1
                            })
                        } else {
                            resolve({
                                info: '存储成功',
                                status: 2
                            })
                        }
                    })
                }
            } else { // 数据库中没有数组
                user.save(error => {
                    if (error) {
                        resolve({
                            info: error,
                            status: 1
                        })
                    } else {
                        resolve({
                            info: '存储成功',
                            status: 2
                        })
                    }
                })
            }
        })
    })

其中删除和修改的方法相似，要用到数据库的主键_id,通过主键来操作数据库

    return new Promise((resolve, reject) => {
        userModel.find({}, (error, docs) => {
            if (docs.length != 0) {
                docs.map(item => {
                    if (item.username === data.username && item.password === data.password) {
                        userModel.findById(item._id, (error, doc) => {
                            doc.remove(error => {
                                if (error) {
                                    resolve({
                                        info: '注销失败',
                                        status: 0
                                    })
                                } else {
                                    resolve({
                                        info: '注销成功',
                                        status: 1
                                    })
                                }
                            })
                        })
                    }

                })
            }
        })
    })

4、后端值传递给前端

在这里使用Promise和Async,将路由中的异步改变为同步，先操作数据库得到结果后将结果返回给前端

 router.put('/modify',async (req,res,next) =>{

    const result = await db.user.modify(req.body);
        res.render('modify',{
        data:JSON.stringify({
           info:result.info,
           status:result.status
        })
    })
    })

前端的数据通过req.body传递给后端

​ 我们现在的express-generator创建的项目是高版本，它替我们完成了post请求数据的接收

​ 接收原理：

​ app.use(express.json());

​ app.use(express.urlencoded({ extended: false }));

​ 以上两行代码的作用是给req请求绑定一个body属性，然后在将数据绑定给body

​ // console.log( ‘req.body’,req.body ) // { username: xxx,password: xxx }

  const result = await db.user.modify(req.body);

result就是后端发送过来的数据