vue+ts+node+mongoDB折腾记

前言

写这篇博客主要是来记录我做毕设的大致过程。毕竟是第一次自己起手做项目，以前都是在搭建完善的项目上直接上手开发

项目同步更新在github上：

前端：https://github.com/sue7777777/owm-fe

服务端：https://github.com/sue7777777/owm-server

-2019.2.12

起步

首先大致构想了一下项目需要的大致框架，前端方面是vue+ts，后端服务打算用node+mongodb尝试一下（第一次写）

1、前端

起初的时候使用的是vue init webpack xxx直接搭建，搭完一看，发现和自己现在正在实习的项目结构差异太大，太过冗余，如果还要再转型成ts就更复杂了。所以这里使用的是vue cli 3，生成的结构比较简洁，大概如下：

这样项目本身生成的时候就是已经转型成为ts了，不用再做过多的配置。

流程如下：

全局安装@vue/cli

npm install -g @vue/cli

安装完成之后，直接

vue ui

就可以打开vue提供的GUI界面

后面的可以参考这篇博客：@vue/cli 3.0.0图形化管理，相当人性化

完成之后，将项目推送至github上，下面是如何将本地项目推送至github仓库的流程：

1、注册github账号、绑定ssh key略过

2、在github新建一个空项目（readme.md最好也不要有

3、在本地项目终端

git init

初始化本地git仓库

git add .

将所有改动暂存

git commit -m 'init'

将暂存区的改动提交

git remote add origin git@github.com:sue7777777/online-works-management.git

添加远程仓库

ps：上面那个地址复制自你的新建的git仓库地址

最后

git push -u origin master

将提交推送至远程仓库

大功告成，刷新你的github，就可以看到你的push了

 2、数据库

采用的是node+express+mongoDB

node和express不多说，搭建的过程很大一部分可以参考这篇博客：https://blog.csdn.net/calmreason/article/details/82685249

博客里有部分说的不是很清楚，主要关于mongoDB搭建这部分：

（1）下载：https://pan.baidu.com/s/17oi6mzthXCoulvYhL4UWCw

（2）完成之后按照txt说的安装

 

（3）安装完成之后，先设置mongoDB

打开你安装的路径，如果没修改的话是 C:\Program Files\MongoDB\Server\3.4\bin

然后设置环境变量（右键我的电脑-属性-高级系统设置-环境变量），在Path下添加mongo bin的地址 C:\Program Files\MongoDB\Server\3.4\bin

完成之后你就可以在bash里使用mongod和mongo命令了

这里解释一下bin路径下的几个exe对应的命令

最重要的是mongo和mongod这两个

mongod 是整个MongoDB最核心的进程，负责数据库的创建，删除等管理操作，运行在服务器端，监听客户端的请求，提供数据服务。

mongo进程是构造一个Javascript Shell，用于跟mongod进程交互，根据mongod提供的接口对MongoDB数据库进行管理，相当于SSMS(SQL Server Management Studio)，是一个管理MongoDB的工具。

（4）设立db路径

在你想要的某个磁盘根路径下创建：data\db（不要改名字）

如： D:\data\db

然后可以在这个文件夹下打开bash，调起mongod

出现如上页面。表示链接建立成功，在27017端口，此时可以打开 http://localhost:27017/ ，如下

大功告成

（5）robot t3客户端连接mongodb

robot客户端可以提供图形化的方式让我们来更方便管理db，我们让mongod服务跑起来之后，可以在robot里面创建和管理数据库

输入一个你喜欢的名字，connect之后就会在左侧显示这个数据库

结束。

3、服务端

数据库环境配置完成，然后主要是配置服务器项目结构，为了更好的操作MongoDB，这里使用了mongoose，配置好的结构大概如下：

比较重要的几个文件夹已经在图里标注出来，其中

model文件夹主要是生成对应表的schema，并根据schema生成对应model

controller文件夹根据model来完成对应的数据库操作

routes文件夹里是服务器对接口url的解析以及请求方式

dbhandler.js是最重要的一环，它负责链接数据库，内容主要如下

var mongoose = require('mongoose'),
    DB_URL = 'mongodb://localhost:27017/OWM-db' // 这里是你数据库的端口和名字

/**
 * 连接
 */
mongoose.connect(DB_URL, {useNewUrlParser: true}, (err) => {
  if(err){
    console.log('Connection Error:' + err)
  }else{
    console.log('Connection success!') }
})

/**
  * 连接成功
  */
mongoose.connection.on('connected', function () {    
    console.log('Mongoose connection open to ' + DB_URL)
});    

/**
 * 连接异常
 */
mongoose.connection.on('error',function (err) {
    console.log('Mongoose connection error: ' + err)
});    
 
/**
 * 连接断开
 */
mongoose.connection.on('disconnected', function () {    
    console.log('Mongoose connection disconnected')
});

module.exports = mongoose

mongoose的使用主要参考了这篇博客：https://www.cnblogs.com/zhongweiv/p/mongoose.html 

以及整体参考了这个项目：https://github.com/tianya930502/node_mongodb_port

（1）配置dbhandler，连接数据库

将上面的代码拷贝，修改成自己的数据库端口和名字即可

（2）配置对应数据库表的model

如上述项目中的 model/user.js

const mongoose = require('../utils/dbhandler')

/**
 * 参数1： 需要链接的表名（mongoose会自动将这个表加一个s）
 * 参数2： 字段的类型对象（配置项）
 */
const User = mongoose.model('user', {
  username: String,
  password: String,
  isLogin: Boolean
})

// 查找
const findUser = (userInfo, callback) => {
  User.findOne(userInfo).then((res) => {
    callback(res)
  })
}

// 添加
const insertUser = (userInfo, callback) => {
  let user = new User({
    username: userInfo.username,
    password: userInfo.password,
    isLogin: false
  })
  user.save().then((res) => {
    callback(res)
  })
}

module.exports = {
  findUser,
  insertUser
}

对数据库操作的api参考mongoose的官方文档：https://mongoosejs.com/docs/api.html

（3）实现相应接口

在controller调用model对数据库的操作，添加逻辑，返回对应的数据

如上述项目里的 controller/user.js

const userModel = require('../model/user')

const login  = (req, res) => {
  let {username, password, status} = req.body
  userModel.findUser({username}, (user) => {
    if (!user) {
      res.json({
        code: 200,
        msg: '用户名不存在'
      })
    } else {
      if (user.password == password) {
        res.cookie('user', username)
        res.json({
          code: 200,
          msg: '登录成功！'
        })
      } else {
        res.json({
          code: 200,
          msg: '密码错误'
        })
      }
    }
  })
}

const register = (req, res) => {
  let {username, password} = req.body
  // 检查是否用户名已存在
  userModel.findUser({username}, (user) => {
    if (user) {
      res.json({
        code: 200,
        msg: '用户名已存在'
      })
    } else {
      userModel.insertUser({username, password},(result) => {
        !result? res.json({
          code: 200,

          msg: "error: "+err
        }) : res.json({
          code: 200,
          msg: '注册成功！'
        })
      })
    }
  })
}

module.exports = {
  login,
  register
}

（4）配置对应url

在routes里配置请求的方式和url，如上述项目里routes/user.js

var express = require('express')
var router = express.Router()

var userController = require('../controller/user')

router.post('/login', userController.login)
router.post('/register', userController.register)

module.exports = router;

（5）在app.js里配置相应路由

这样就可以把服务跑起来：

在postman里进行测试：

当然前提是你要先在数据库的users表里事先写入这个用户

 

转载于:https://www.cnblogs.com/sue7/p/10365637.html