vue+express+mongoose搭建前后端分离的简单项目

最新推荐文章于 2023-09-04 17:38:07 发布

weixin_33895657

最新推荐文章于 2023-09-04 17:38:07 发布

阅读量909

点赞数 3

文章标签： javascript 后端前端 ViewUI

原文链接：https://juejin.im/post/5bf2a622f265da6112049f1d

版权

参考资料

工作流程

前后端分离，各自开发。这里前后端分离是这样的：前端用Vue开发静态页面，路由通过Vue-Router进行，后端用Node仅用于编写API给前端调用获取数据。
前端开发时通过Vue-Cli中提供的proxyTable进行代理，由此可跨域调用Node编写的API。
前后端各自开发完成，测试无误后，前端通过webpack打包压缩，后端拉取前端打包压缩好的文件即部署完成。

技术栈

vue-cli
vue-resource
node+express
mongodb(mongoose)

步骤

以一个简单的登录注册页面为例

1. 安装vue-cli

npm i -g vue-cli
//用淘宝镜像cnpm
复制代码

2. 新建项目

vue init webpack XXX（你想要项目的名字）
复制代码

3. npm install 安装依赖

4. npm run dev

项目跑起来，打开localhost:8080即可看到页面可在config/index.js中设置打开端口

5. 引入vue-resource

npm install vue-resource --save

然后在main.js中引入

import VueResource from 'vue-resource'

Vue.use(VueResource) 
复制代码

6. 写登录注册页面

LoginView.vue

<template>
  <div>
      <input class="form-control" id="input-email" placeholder="Account name" v-model="account">
      <input type="password" name="form-control" id="input-password" placeholder="Password" v-model="password">
      <button type="submit" class="btn btn-default" @click="login">Sign In</button>
      <button type="submit" class="btn btn-default" @click="register">Register</button>
      <button type="submit" class="btn btn-default" @click="getAllAccount">Get all accounts</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    login () {
      let params = {
        account: this.account,
        password: this.password
      }
      this.$http.post('/api/user/login', params)
        .then((response) => {
          console.log(response)
          var message = response.body.message
          if (response.body.status === 1000) {
            message = response.body.data[0].account + ' ' + message
          }
          alert(message)
        })
        .catch((reject) => {
          console.log(reject)
        })
    },
    register () {
      let params = {
        account: this.account,
        password: this.password
      }
      this.$http.post('/api/user/register', params)
        .then((response) => {
          console.log(response)
          var message = response.body.message
          if (response.body.status === 1000) {
            message = this.account + ' ' + message
          }
          alert(message)
        })
        .catch((reject) => {
          console.log(reject)
        })
    },
    getAllAccount () {
      console.log('call getAllAccount')
      this.$http.get('/api/user/all')
        .then((response) => {
          console.log(response)
        })
        .catch((reject) => {
          console.log(reject)
        })
    }
  }
}
</script>
复制代码

7. 设置路由

router/index.js如下

import Vue from 'vue'
import Router from 'vue-router'
import LoginView from '@/components/LoginView'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'LoginView',
      component: LoginView
    }
  ]
})
复制代码

这时回到浏览器，如无意外应该会出现登录注册界面，当然现在去点击登录按钮请求接口，是不行的。所以我们现在需要去搭建Node

8. 安装好node.js(省略)

9. 在项目的根目录新建一个叫server的目录，用于放置Node的东西。

进入server目录，再新建三个js文件：

index.js （入口文件）
db.js （设置数据库相关）
api.js （编写接口

server目录里安装express

npm install express –save
复制代码

10. 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');
复制代码

11. db.js

这个js文件主要用于配置mongoDB相关东西,这里使用mongoose 中间件来连接mongoDB,要先在目录内安装mongoose，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;
复制代码

11. 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

进入server目录，输 入node index命令，浏览器输入 http://localhost:3000即显示页面

输入账号和密码，并点击注册，弹出提示框，即注册成功

前端运行

前端端口是8085，后端是3000，故需要跨域处理

proxyTable: {
        '/api': {
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
        }
      }
    }
复制代码

然后返回项目目录，运行npm start,浏览器输入localhost:8085,即可看到页面，输入刚刚的注册账号和密码,点击登录

部署项目过程中遇到的坑

1.

[HPM] Error occurred while trying to proxy request...
复制代码

有时候遇到这个，并且控制台打印504错误。

我发现是后端端口没打开，进入server目录node index即可

weixin_33895657

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫