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

附上GitHub地址点击打开链接https://github.com/qiuwenju/vue-mongo-express先看效果图注册功能此时查询表单时已经有这条数据了其他的登录和修改密码删除账号也都是这个页面只不过提示信息不同。首先前端部分我们使用vue-cli脚手架搭建项目，安装好element-ui和axios 。安装之前应当下载...

HaXhaWhaC

4211人浏览 · 2018-02-06 16:24:48

HaXhaWhaC · 2018-02-06 16:24:48 发布

附上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>

<!-- 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>
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 ,

具体安装步骤可根据这套教程一步一步安装点击打开链接

安装好之后，打开任务管理器，在服务里可看到如下即可

然后再到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，如下即为成功：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^