前言
写这篇博客主要是来记录我做毕设的大致过程。毕竟是第一次自己起手做项目,以前都是在搭建完善的项目上直接上手开发
项目同步更新在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里使用mongod和mongo命令了
这里解释一下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表里事先写入这个用户