前言
本次分享主要是介绍如何利用Node、MongoDB等技术构建web应用，项目如何构建，新技术分享。目标是实现用户的注册登录和用户信息的修改
技术栈
- vue-cli
- vue-router
- node(express)
- mongodb(mongoose)
- element-ui
步骤
- npm安装脚手架并创建vue项目此处省略
- 写登录页面login.vue
<template>
<div>
<el-form ref="form" :model="form" label-width="80px" style="width: 500px; margin: 20px auto">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.pass"></el-input>
</el-form-item>
<el-button type="default" @click="dialog.visible = true">注册</el-button>
<el-button type="primary" @click="onLogin">登录</el-button>
</el-form>
<el-dialog
:title="dialog.title"
:visible.sync="dialog.visible"
width="50%">
<el-form ref="dialog" :model="dialog.form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="dialog.form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="dialog.form.pass"></el-input>
</el-form-item>
<el-form-item label="确认密码">
<el-input v-model="dialog.form.confirmpass"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.visible = false">取 消</el-button>
<el-button type="primary" @click="onRegister">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'login',
data() {
return {
form: {
name: '',
pass: ''
},
dialog: {
title: '注册',
visible: false,
form: {
name: '',
pass: '',
confirmpass: ''
}
}
}
},
methods: {
// 登录
onLogin() {
},
// 注册
onRegister() {
}
}
}
</script>
3.创建serve文件夹，并按照下面顺序创建文件，用于放服务端代码
- index.js （入口文件）
- db.js （设置数据库相关）
- api.js （编写接口
在serve文件夹下安装express
cnpm install express --save
- index.js
// 引入编写好的api
const api = require('./api');
// 引入文件模块
const fs = require('fs');
// 引入处理路径的模块
const path = require('path');
// 引入处理post数据的模块
const bodyParser = require('body-parser')
// 引入Express
const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(api);
// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
// 因为是单页应用 所有请求都走/dist/index.html
app.get('*', function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
res.send(html)
})
// 监听3000端口
app.listen(3000);
console.log('success listen 3000');
5.db.js
/*Schema、Model、Entity或者Documents的关系请牢记，
Schema生成Model，Model创造Entity，
Model和Entity都可对数据库操作造成影响
，但Model比Entity更具操作性。*/
const mongoose = require('mongoose');
// 连接数据库 如果不自己创建 默认test数据库会自动生成
mongoose.connect('mongodb://localhost/test');
// 为这次连接绑定事件
const db = mongoose.connection;
db.once('error',() => console.log('Mongo connection error'));
db.once('open',() => console.log('Mongo connection successed'));
/************** 定义模式loginSchema **************/
const loginSchema = mongoose.Schema({
account : String,
password : String
});
/************** 定义模型Model **************/
const Models = {
Login : mongoose.model('Login',loginSchema)
}
module.exports = Models;
6.api.js
// 可能是我的node版本问题，不用严格模式使用ES6语法会报错
"use strict";
const models = require('./db');
const express = require('express');
const router = express.Router();
/************** 创建(create) 读取(get) 更新(update) 删除(delete) **************/
// 创建账号接口
router.post('/api/user/register',(req,res) => {
// 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')
models.Login.find({account: req.body.account}, (err,data) => {
if (err) {
console.log(err)
// res.send(err);
let newAccount = new models.Login({
account : req.body.account,
password : req.body.password
});
// 保存数据newAccount数据进mongoDB
newAccount.save((err,data) => {
if (err) {
res.send({'status': 1001, 'message': 'Fail to register!', 'data': err});
} else {
res.send({'status': 1000, 'message': 'Register successfully!'});
}
});
} else {
console.log(data)
if (data.length > 0) {
res.send({'status': 1001, 'message': 'The account is already registered!'});
} else {
let newAccount = new models.Login({
account : req.body.account,
password : req.body.password
});
// 保存数据newAccount数据进mongoDB
newAccount.save((err,data) => {
if (err) {
res.send({'status': 1001, 'message': 'Fail to register!', 'data': err});
} else {
res.send({'status': 1000, 'message': 'Register successfully!'});
}
});
}
}
});
// let newAccount = new models.Login({
// account : req.body.account,
// password : req.body.password
// });
// // 保存数据newAccount数据进mongoDB
// newAccount.save((err,data) => {
// if (err) {
// res.send(err);
// } else {
// res.send({'status': 1000, 'message': 'Register successfully!'});
// }
// });
});
// 获取已有账号接口
router.post('/api/user/login',(req,res) => {
// 通过模型去查找数据库
models.Login.find({account: req.body.account, password: req.body.password}, (err,data) => {
if (err) {
// res.send(err);
res.send({'status': 1001, 'message': 'The account is not existed!', 'data': err});
} else {
console.log(data)
if (data.length > 0) {
res.send({'status': 1000, 'message': 'Login successfully!', 'data': data});
} else {
res.send({'status': 1001, 'message': 'The account is not existed!', 'data': err});
}
}
});
});
// 获取所有账号接口
router.get('/api/user/all',(req,res) => {
// 通过模型去查找数据库
models.Login.find((err,data) => {
if (err) {
res.send(err);
} else {
res.send(data);
}
});
});
module.exports = router;
- 启动数据库 先启动mongod.exe
- 启动后台服务 node index
