zoukankan      html  css  js  c++  java
  • 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 FilesMongoDBServer3.4in

    然后设置环境变量(右键我的电脑-属性-高级系统设置-环境变量),在Path下添加mongo bin的地址 C:Program FilesMongoDBServer3.4in

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

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

    最重要的是mongo和mongod这两个

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

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

    (4)设立db路径

    在你想要的某个磁盘根路径下创建:datadb(不要改名字)

    如: D:datadb

    然后可以在这个文件夹下打开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表里事先写入这个用户

  • 相关阅读:
    SkylineGlobe for web开发是否支持IE11?
    OGC标准服务 WMS WCS WFS WPS
    SkylineGlobe TerraExplorer Pro 遇到模型显示有锯齿怎么办?
    SkylineGlobe TerraExplorer Pro 7.0 Web 控件版 第一行示例代码
    Cesium3DTileset示例
    Win7 64位系统,IE11,如何让IE的Tab强制运行64位内核?
    SkylineGlobe系列软件对机器配置要求
    VS 2015 搭建Google Test
    7种排序算法的c++实现
    哈希表应用实例
  • 原文地址:https://www.cnblogs.com/sue7/p/10365637.html
Copyright © 2011-2022 走看看