vue2.0-axios-MongoDB-express 实现增删改查功能

附上GitHub地址 点击打开链接https://github.com/qiuwenju/vue-mongo-express
先看效果图注册功能


此时查询表单时已经有这条数据了



其他的登录和修改密码删除账号也都是这个页面 只不过提示信息不同。

首先前台部分 我们使用vue-cli脚手架搭建项目，安装好element-ui和axios 。

安装之前应当下载安装node.js
全局安装 vue-cli$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack mogo
安装依赖，走你$ cd mogo$ npm install (安装基础的依赖）

安装element-ui和axios 。npm install --save axios以及npm install --save element-ui
然后 npm run dev 运行即可，打开浏览器访问http://localhost:8080。
修改src目录下的main.js文件

import Vue from 'vue'
import router from './router'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})

到这里前台所需要的基础环境基本已经搭建完成。
然后我们先将静态页面写出来，我这里文件名为login.vue。


修改此文件<template></template>部分为：

<template>
<div class="hello">
<el-form :rules="rules" label-position="left" label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="userName" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="newPassword">
<el-input type="password" v-model="newPassword" auto-complete="off" placeholder="新密码"></el-input>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="loginAccount">登录</el-button>
<el-button type="primary" style="width:100%;" @click="createAccount">注册</el-button>
<el-button type="primary" style="width:100%;" @click="deleteAccount">删除</el-button>
<el-button type="primary" style="width:100%;" @click="updatedAccount">修改</el-button>
</el-form-item>
</el-form>
</div>
</template>

<style></style>部分修改为如下：

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-container {
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin: 0 auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
background: -ms-linear-gradient(top, #fff, #6495ed);        /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#6495ed));      /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #6495ed,#fff);   /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #6495ed);  /*Opera 11.10+*/
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
.remember {
margin: 0px 0px 35px 0px;
}
button {
margin: 20px 0 0 0 ;
}
.el-button+.el-button {
margin-left: 0;
}
</style>

<script></script>部分修改为如下：

<script>
export default {
name: 'hello',
data() {
return {
userName: '',
password: '',
newPassword: '',
rules: {
username: [
{required: false, message: '请输入账号', trigger: 'blur'},
//{ validator: validaePass }
],
password: [
{required: false, message: '请输入密码', trigger: 'blur'},
//{ validator: validaePass2 }
],
newPassword: [
{required: false, message: '请输入新密码', trigger: 'blur'},
//{ validator: validaePass2 }
]
},
checked: false
}
},
methods: {
createAccount() {
let params = {
account : this.userName,
password : this.password
}
if( params.account === "" || params.password === "") {
alert("账号和密码不能为空!")
return false
}
console.log(params)
this.$http.post('http://localhost:8088/api/login/createAccount',params)
.then((response) => {
let res = response.data
console.log(res)
alert(res.msg)
})
.catch((reject) => {
console.log(reject)
})
},
deleteAccount() {
let params = {
account : this.userName,
password : this.password
}
if( params.account === "" || params.password === "") {
alert("账号和密码不能为空!")
return false;
}
console.log(params)
this.$http.post('http://localhost:8088/api/login/deleteAccount',params)
.then((response) => {
let res = response.data
//console.log(params)
console.log(res)
alert(res.msg)
})
.catch((reject) => {
console.log(reject)
})
},
loginAccount() {
let params = {
account : this.userName,
password : this.password
}
if( params.account === "" || params.password === "") {
alert("账号和密码不能为空!")
return false;
}
this.$http.post('http://localhost:8088/api/login/loginAccount',params)
.then((response) => {
let res = response.data
console.log(res)
alert(res.msg)
console.log()
if(res.code == 1){
this.$router.push({ path: '/home' });
}
})
.catch((reject) => {
console.log(reject)
})
},
updatedAccount() {
let params = {
account : this.userName,
password : this.password,
newPassword : this.newPassword
}
if( params.account === "" || params.password === "") {
alert("账号和密码不能为空!")
return false;
}
if( params.newPassword === "" ) {
alert("新密码不能为空!")
return false;
}
this.$http.post('http://localhost:8088/api/login/updatedAccount',params)
.then((response) => {
let res = response.data
console.log(res)
alert(res.msg)
})
.catch((reject) => {
console.log(reject)
})
}
}
}
</script>

接下来后台部分 下载安装MongoDB ,

具体安装步骤  可根据这套教程一步一步安装 点
aaa0
击打开链接
安装好之后，打开任务管理器，在服务里可看到如下即可



然后再到mogo目录下打开命令行，安装mongoose以及express依赖
$ npm install --save mongoose 以及 npm install --save express
在到src目录下创建server文件夹，文件夹里面创建3个js文件分别为api.js（具体接口文件），index.js（后台服务开启入口文件），db.js（连接数据库js文件）。目录如下：



入口文件index.js代码：

const express = require('express')
const app = express()
const api = require('./api')
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')
const cors = require('cors')
app.use(cors({ origin: '*' }))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(api)
app.use(infor)
// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
// 因为是单页应用 所有请求都走/dist/index.html
app.get('*', function (req, res) {
const html = fs.readFileSync(path.resolve(__dirname, '../../index.html'), 'utf-8')
res.send(html)
})
// 监听8088端口
app.listen(8088)
console.log('success listen…………')

连接数据库db.js代码：

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,
newPassword: String
}, { collection: 'listData' });

/************** 定义模型Model **************/
const Models = {
Login: mongoose.model('Login', loginSchema)
}

module.exports = Models

具体接口文件api.js代码：

const models = require('./db').Login
const express = require('express')
const router = express.Router()
//const util = require("util")//可以使用 util.inspect 代替 JSON.stringify

/************** 创建(create) 读取(get) 更新(update) 删除(delete) **************/

// 创建账号接口
router.post('/api/login/createAccount', (req, res) => {
// 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')
let newAccount = new models({
account: req.body.account,
password: req.body.password
})
//查询该账号是否已经被注册
models.count({"account": newAccount.account },(err,docs) => {
if(err) {
console.log("Error:" + err)
res.send(err)
}else {
//console.log("Docs:" + docs)
if(docs>=1){
//账号已经被注册，注册失败，返回code = 2
console.log("注册失败")
res.send({code:2,msg:'账号已经存在了，不能再次注册'})
}else{
// 账号未注册,保存数据newAccount数据进mongoDB，注册成功,返回code=1
newAccount.save((err, data) => {
//console.log('set')
if (err) {
res.send(err)
} else {
console.log("注册成功")
res.send({code:1,msg:'恭喜您，账号创建成功了'})
}
})
}
}
})
});
// 删除账号接口
router.post('/api/login/deleteAccount', (req, res) => {
// 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')
//console.log("delete:" + req.body.account)
//查询该账号是否已经注册
models.count({"account": req.body.account },(err,docs) => {
if(err) {
console.log("Error:" + err)
res.send(err)
}else {
//console.log("Docs:" + docs)
if(docs>=1){
// 若注册，在mongoDB中删除该条数据，返回code = -1
models.remove({"account": req.body.account },(err) => {
//console.log('delete')
if (err) return handleError(err);
});
console.log("删除成功")
res.send({code:-1,msg:'账号已被删除'});
}else{
// 若还未注册，删除失败,返回code = -2，
console.log("删除失败")
res.send({code:-2,msg:'账号还未注册，不能删除'});
}
}
})
});
// 登录接口
router.post('/api/login/loginAccount', (req, res) => {
// 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')
let newAccount = new models({
account: req.body.account,
password: req.body.password
})
console.log("login:" + req.body.account)
console.log(newAccount)
//查询该账号是否存在
models.findOne({"account": req.body.account },(err,docs) => {
if(err) {
console.log("Error:" + err)
res.send(err)
}else {
console.log("Docs:" + docs)
if(!docs == ""){
// 若存在，再验证账号密码是否正确
//console.log('该验证账号和密码是否正确了')
if(docs.account === newAccount.account && docs.password === newAccount.password ){
// 登录成功，返回code = 1
console.log('登录成功')
//可以使用 util.inspect 代替 JSON.stringify
//res.send(util.inspect(res,{depth:null}))
res.send({code:1,msg:'恭喜你，登录成功了'})
}else {
// 登录失败，密码错误，返回code = -1
console.log({status:'登录失败', msg :'密码错误'})
res.send({code:-1,msg:'密码错误，请重新输入'})
}
}else{
// 若不存在，登录失败，返回code = -2
console.log({status:'登录失败', msg :'账号不存在'})
res.send({code:-2,msg:'账号不存在，请先注册账号'})
}
}
})
});
// 更新密码接口
router.post('/api/login/updatedAccount', (req, res) => {
// 这里的req.body能够使用就在index.js中引入了const bodyParser = require('body-parser')
let newAccount = new models({
account: req.body.account,
password: req.body.password,
newPassword: req.body.newPassword
})
console.log("login:" + req.body.account)
console.log(newAccount)
//查询该账号是否存在
models.findOne({"account": req.body.account },(err,docs) => {
if(err) {
console.log("Error:" + err)
res.send(err)
}else {
console.log("Docs:" + docs)
let currId = docs._id
if(!docs == ""){
// 若存在，再验证账号密码是否正确
//console.log('该验证账号和密码是否正确了')
if(docs.account === newAccount.account && docs.password === newAccount.password ){
// 登录成功
console.log('登录成功')
//判断新密码是否与旧密码一致
if(docs.password === newAccount.newPassword) {
//更新密码失败，新密码与旧密码一致，不能修改，返回code = -1
res.send({code:-1,msg:'修改密码失败，新密码与旧密不能一致'})
}else {
models.update({_id:currId},{password:newAccount.newPassword},(err) => {
    if(err){
      console.log(err);
    }else{
      console.log("更新密码成功");
res.send({code:1,msg:'恭喜你，密码更新成功了'})
    }
})
}
}else {
// 更新密码失败，密码错误，返回code = -2
console.log({status:'更新密码失败', msg :'密码错误'})
res.send({code:-2,msg:'登录密码错误，不能修改密码'})
}
}else{
// 若不存在，登录失败，更新密码失败，返回code = -3
console.log({status:'登录失败', msg :'账号不存在'})
res.send({code:-3,msg:'账号不存在，请先注册账号'})
}
}
})
});

module.exports = router

注: 前台访问这些接口时，后台需要打开服务，即在server目录下打开命令行 ，运行node index.js，如下即为成功：