vue中连接mongodb

$一、手写服务器$

以下文件可以写一起，不过为了方便管理，建议分开写
1、创建api-server文件夹（文件夹名字随意，根据个人喜好）
（1）.新建api-servers文件

const path = require("path")
const express = require("express")
const app = express()
const mongoose = require("mongoose")
const CartsModel = require("./mongodb/CartsModule")

app.use(express.static(path.resolve(__dirname,"../../")))

app.get("/",(req,res)=>{
    res.sendFile(path.resolve(__dirname,"../../","index.html"))
})

app.get("/api/carts",(req,res)=>{
    // res.header('Access-Control-Allow-Origin', '*'); //这个表示任意域名都可以访问，这样写不能携带cookie了。
    res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); //这样写，只有www.baidu.com 可以访问。
    res.header('Access-Control-Allow-Credentials', true); // 允许服务器端发送Cookie数据
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法
    CartsModel.findOne({"userid":2},(err,results)=>{
    res.json(results)
    })
})

// 监听
app.listen(666,(error)=>{
    console.log("server is ready on port 666")
})

（2）新建mongodb文件夹
\qquad ①.新建数据库配置文件MongoConfig

	const mongoose = require("mongoose")
	const DbUrl = "mongodb://localhost:27017/myshop"
// 建立连接
mongoose.connect(DbUrl,{useNewUrlParser:true})

mongoose.connection.on("connected",(error)=>{
    console.log("mongodb连接成功")
})

module.exports = mongoose

\qquad ②.新建模块文件，例如购物车模块

const mongoose = require("./MongoConfig")
const Schema = mongoose.Schema

let CartsSchema = new Schema({
    "userid" : {type:Number},
    "totalPrice" : {type:Number},
    "checked" : {type:Boolean},
    "shops":{type:Object}
})

let CartsModel = mongoose.model("carts",CartsSchema)

module.exports = CartsModel

2、创建apis文件夹（同上）
\qquad 创建接口文件，如购物车数据的接口文件（ShopCartsApi）

import {CARTURL} from "../commons/AjaxURLSchema"

export default  {
    // 通过用户的编号来获取carts信息
    // @param: cb 返回的数据
    getShopCartsInfoByUserId(cb){
       fetch(CARTURL).then(res=>{
           res.json().then(data=>{
               cb(data)
           })
       })
    }
}

3、创建commons文件夹（同上）
\qquad 创建类似于ajax效果的文件，用来连接端口传递数据（ajaxUrlSchema）

export const CARTURL = "http://localhost:666/api/carts"

4、在页面组件引入连接端口的文件

<script>
    import ShopCartsApi from "../apis/ShopCartsApi"
    import JdCartsHeader from "../components/JdCarts/JdCartsHeader";
    import JdCartsShopList from "../components/JdCarts/JdCartsShopList";
    import JdCartsFooter from "../components/JdCarts/JdCartsFooter";
    export default {
        name: "JdCarts",
        components: {JdCartsFooter, JdCartsShopList, JdCartsHeader},
        data(){
            return {
                totalPrice:0,
                cartInfo:[],
                checked:true
            }
        },
        methods:{
            // 初始化数据
            _initData(){
              ShopCartsApi.getShopCartsInfoByUserId(data=>{
                this.cartInfo = data;
                console.log(this.cartInfo)
                this._counteCarts(data)
            })
        },
        // 创建完成后调用初始化方法，获取数据
        created(){
            this._initData()
        },
    }
</script>

$二、express自动生成$

// 全局安装
npm install express -g

// 测试是否安装成功
express -h

// 安装如果出现问题，则运行
npm install express-generator -g

// 项目中安装express模块
npm install express --save-dev

$或者直接拿WebStorm生成exprsee项目$

生成结果：

（1).新建文件夹data用来存放数据，比如存放首页的数据建indexdata.js
（2).在文件夹routes中新建相应的js文件将indexdata.js引入，若存在跨域，加入以下代码：

// 这样写，表示任意域名都可以访问，这样写不能携带cookie了。
res.header('Access-Control-Allow-Origin', '*'); 

// 这样写，只有www.baidu.com 可以访问（可以根据自己情况改成自己的地址）
res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); 

// 允许服务器端发送Cookie数据
res.header('Access-Control-Allow-Credentials', true); 

res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

// 设置方法
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

（3).在views文件夹的app.js中引入在routes中新建的js文件
（4).后台与前端建立连接
\qquad ①.在脚手架文件中的src中新建commons文件夹，创建类似于ajax效果的文件，用来连接端口传递数据（ajaxUrlSchema）

// 默认端口号为3000
export const CARTURL = "http://localhost:3000/api/carts"

\qquad ②.在src文件夹下新建apis文件夹，用来获取数据
创建接口文件
例如 购物车数据的接口文件（ShopCartsApi）

import {CARTURL} from "../commons/AjaxURLSchema"

export default  {
    // 通过用户的编号来获取carts信息
    // @param: cb 返回的数据
    getShopCartsInfoByUserId(cb){
       fetch(CARTURL).then(res=>{
           res.json().then(data=>{
               cb(data)
           })
       })
    }
}

例如 
import {indexURL} from '../commons/ajaxURLdata'
export default {
    // 获取首页轮播图图片数据
    // @param: cb 返回的数据
    getSliderImg(calb){
        fetch(indexURL).then(res=> {
            res.json().then(data => {
                calb(data)
            })
        })
    },
}

$就是这么简单！$ ✌️✌️✌️