乐趣区

关于javascript:vue-nodeexpress-mongodb-小demo搭建

jiezi

1. 首先搭建 vue 我的项目 

npm install -g @vue/cli

2. 新建一个文件夹 http_serve，我的目录构造

1）index.js 文件 

const express = require('express')
const app = express()
const apiRouter = require('./router') // 接口  数据申请的解决
app.use(apiRouter)

require('./db')
 // app.get('*', function(req, res) {//     res.send('aaa')
 // })

// app.use((req, res, next) => {//     console.log('==', req.url, req.method);
//     next();
// })

// 容许跨域拜访  发现写不写都可，因为我配置了代理
app.all('*', function(req, res, next) {console.log('容许跨域')
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 next();});

const {log} = require('console')

app.listen(process.env.PORT || 8080, function() {console.log("Listen port:8080...")
});

2) db.js 连贯 mongodb

let mongoose = require('mongoose');
var User = require('../serve_scheam/user')
    //  * 连贯
mongoose.connect('mongodb://localhost/News', {useNewUrlParser: true});

//   * 连贯胜利
mongoose.connection.on('connected', function() {console.log('Mongoose connection succuss');
});

//  * 连贯异样
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;

3) router.js 具体每个接口须要做什么操作 (增删改查)

// 解决数据库中的各个汇合的表
const express = require('express')
const app = express()
const bodyParser = require('body-parser')

// const app = require('express').express()
var News = require('../serve_scheam/newsList')
var User = require('../serve_scheam/user')

app.use(bodyParser.urlencoded({extended: true // 如果为 false 的话  就容易呈现 body: [Object: null prototype] {..},
}));
app.use(bodyParser.json()) // 解析 json 类型的申请体

var resultObj = {
    code: 200,
    data: 'success'
}

console.log('======================> 开始解决路由 router');
app.get('/User/getList', (req, res) => {console.log('========>', req)
        // res.send('66666')
        // 查找数据库
    User.find((err, data) => {if (err) {res.send(err);
        } else {res.send(data);
        }
    });
})



app.post('/News/addNews', (req, res) => {console.log('post====>', req);
    let news = new News({
        title: req.body.title ? req.body.title : '未知题目',
        content: req.body.content ? req.body.content : '未知内容',
        author: req.body.author ? req.body.author : '佚名'
    });

    news.save((err, data) => {if (err) {res.send(err);
        } else {res.send(resultObj);
        }
    });
})

module.exports = app;

5) 接下来是 serve_scheam 文件夹下
newlist 文件 

const mongooes = require('../serve_setting/db')
require('../serve_setting/db');
var monSchema = require('mongoose')


var Schema = monSchema.Schema;

var newsSchema = new Schema({
    title: String,
    content: String,
    author: String
})

module.exports = monSchema.model('News', newsSchema)

user 文件 

// goods.js

// var mongoose = require('mongoose');
var mongoose = require('../serve_setting/db');
var monSchema = require('mongoose')
var Schema = monSchema.Schema;

// 定义一个 Schema
var userSchema = new Schema({'userName': String, // 或者 'productId':{type:String}
    'passWord': String
})

// 输入 (导出)
module.exports = monSchema.model('User', userSchema); // 定义一个 good 商品模型，能够依据这个商品模型调用其 API 办法。// 这个模型定义的是数据库 dumall 的 goods 汇合数据，所以这个 model 取名 good 是对应这个汇合，连贯数据库之后，这个模型会依据名字的复数模式 "goods" 来查找数据汇合。// module.exports = mongoose.model('good',produtSchema,'goods'); 也能够前面注明链接的是数据库的 goods 汇合

下面就是咱们服务端的，如果想启动 node 服务，我是在 package.json 文件中增加
"index": "node http_serve/serve_setting/index.js"
npm run index 即可开启

上面是 vue 页面，首先对 axios 的二次封装，为了不便保护接口的对立解决，以及代理跨域（因为 vue 开启的服务端口号是 8081，而 node 开启的是 8080，所以我就在本地代理了）

3. 新建 http 文件夹，httpConfig 文件 

import axios from 'axios'
import qs from 'qs'
// import router from '../router'

/**
 * 封装 axios 的通用申请
 * @param  {string}   method     get\post\put\delete
 * @param  {string}   url       申请的接口 URL
 * @param  {object}   param     传的参数，没有则传空对象
 */
// let access_token = localStorage.getItem('access_token') ? localStorage.getItem('access_token') : 'sdsdsdsdsdsd'

axios.interceptors.request.use(config => {return config}, error => {return Promise.reject(error)
})


axios.interceptors.response.use(response => {return response}, error => {return Promise.resolve(error.response)
})

function http(url, param, Methods) {console.log(url, param, Methods);
    let method
    if (Methods) {method = Methods} else {method = 'post'}
    param = param && typeof param === 'object' ? param : {}
    const config = {
        url: url,
        method: method,
        transformRequest: [function(param) {return qs.stringify(param)
        }],
        headers: {'X-Requested-With': 'XMLHttpRequest'}
    }

    // console.log("http__param==",param);
    // post 申请时须要设定 Content-Type
    if (method === 'post') {config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
        config.data = param
    } else if (method === 'get') {config.params = param}

    return axios(config)
}

// export {
//     http
// }
export default http

2) 在 apiSetting 文件中 

import http from './httpConfig'

export default {getUserList(data) {
       return http(
           '/User/getList',
           data,
           'get',
       )
   },
   addNews(data) {
       return http(
           '/News/addNews',
           data,
           'post',
       )
   }
}

3) 跨域代理 在 vue 的根目录中新建一个 vue.congfig.js 文件夹 

// vue.config.js
let baseUrl = 'http://localhost:8080/'
console.log('====================================vue_config');
module.exports = {
    devServer: {
        open: true, // 配置主动启动浏览器
        disableHostCheck: true,
        // 配置代理
        proxy: {
            "/User": {
                target: 'http://localhost:8080/User', // 想要拜访接口域名
                changeOrigin: true, // 开启跨域, 在本地创立一个虚构服务, 而后发送申请的数据, 并同时接管申请的数据, 这样服务端和服务端进行数据交互就不会有问题
                pathRewrite: {"^/User": '', // 利用这个高空的值拼接上 target 外面的地址},
                emulateJSON: true
            },
            "/News": {
                target: 'http://localhost:8080/News',
                changeOrigin: true, 
                pathRewrite: {"^/News": '',},
                emulateJSON: true
            },
        }
    }
}

4. 页面申请的时候 

<template>
  <div>
    getNewsList
    <h1 @click="addNews"> 增加文章 </h1>
  </div>
</template>

<script>
import listApi from '../http/apiSetting'
export default {data () {
    return {list: [],
      params: {num: 3}
    }
  },
  mounted () {this.getList()
  },
  methods: {getList () {listApi.getUserList(this.params).then((res) => {console.log(res.data);

      }).catch((err) => {console.log(err);

      })
    },
    addNews () {listApi.addNews({ title: '再别康桥', content: '轻轻是分离的笙箫；夏虫也为我缄默，缄默是今晚的康桥！', author: '徐志摩'}).then((res) => {console.log(res.data);

      }).catch((err) => {console.log(err);

      })
    }
  }
}
</script>

<style>
</style>

这样就完了
开启服务: npm run index
运行：npm run serve

退出移动版