node.js - 无法将 express api 连接到 nuxt 应用程序和 mongodb

Question

自从我尝试在线部署我的网络应用程序以来，已经有 10 天了。我在heroku和数字海洋之间来回走动。什么都没有解决。我在这里提出了问题，我得到的只是一篇长篇文章，其中包含我无法理解的技术术语。这是我的问题：我有一个 nuxt 应用程序，后端有 express.js，数据库是 mongodb。起初我在为我的 nuxt 应用程序配置主机和端口时遇到了麻烦。一旦我修复它，就会出现另一个问题：我没有从数据库接收数据。如果它与数据库连接或快速 api 配置有关，我不知道。

这是我的 nuxt 配置

export default {
    ssr: false,
    head: {
        titleTemplate: 'Lokazz',
        title: 'Lokazz',
        meta: [
            { charset: 'utf-8' },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            },
            {
                hid: 'description',
                name: 'description',
                content:
                    'Lokazz'
            }
        ],
        link: [
            {
                rel: 'stylesheet',
                href:
                    'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin-ext'
            }
        ]
    },

    css: [
        'swiper/dist/css/swiper.css',
        '~/static/fonts/Linearicons/Font/demo-files/demo.css',
        '~/static/fonts/font-awesome/css/font-awesome.css',
        '~/static/css/bootstrap.min.css',
        '~/assets/scss/style.scss'
    ],

    plugins: [
        { src: '~plugins/vueliate.js', ssr: false },
        { src: '~/plugins/swiper-plugin.js', ssr: false },
        { src: '~/plugins/vue-notification.js', ssr: false },
        { src: '~/plugins/axios.js'},
        { src: '~/plugins/lazyLoad.js', ssr: false },
        { src: '~/plugins/mask.js', ssr: false },
        { src: '~/plugins/toastr.js', ssr: false },
    ],


    buildModules: [
        '@nuxtjs/vuetify',
        '@nuxtjs/style-resources',
        'cookie-universal-nuxt'
    ],

    styleResources: {
        scss: './assets/scss/env.scss'
    },

    modules: ['@nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '@nuxtjs/auth-next', "bootstrap-vue/nuxt"],
    bootstrapVue: {
        bootstrapCSS: false, // here you can disable automatic bootstrapCSS in case you are loading it yourself using sass
        bootstrapVueCSS: false, // CSS that is specific to bootstrapVue components can also be disabled. That way you won't load css for modules that you don't use
       
    },

    i18n: {
        locales: [
            { code: 'en', file: 'en.json' },
        ],
        strategy: 'no_prefix',
        fallbackLocale: 'en',
        lazy: true,
        defaultLocale: 'en',
        langDir: 'lang/locales/'
    },

    router: {
        linkActiveClass: '',
        linkExactActiveClass: 'active',
    },
    server: {
        port: 8080, // default: 3000
        host: '0.0.0.0' // default: localhost
    },
    auth: {
        strategies: {
          local: {
            token: {
              property: "token",
              global: true,
            },
            redirect: {
                "login": "/account/login",
                "logout": "/",
                "home": "/page/ajouter-produit",
                "callback": false
            },
            endpoints: {
              login: { url: "/login", method: "post" },
              logout: false, //  we don't have an endpoint for our logout in our API and we just remove the token from localstorage
              user:false
            }
          }
        }
      },
};

这是我的 package.json

{
    "name": "martfury_vue",
    "version": "1.3.0",
    "description": "Martfury - Multi-purpose Ecomerce template with vuejs",
    "author": "nouthemes",
    "private": true,
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
    },
    "config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "8080"
        }
    },
}

这是我的 repository.js 文件

import Cookies from 'js-cookie';
import axios from 'axios';

const token = Cookies.get('id_token');
const baseDomain = 'https://lokazzfullapp-8t7ec.ondigitalocean.app';


export const customHeaders = {
    'Content-Type': 'application/json',
    Accept: 'application/json'
};

export const baseUrl = `${baseDomain}`;

export default axios.create({
    baseUrl,
    headers: customHeaders
});

export const serializeQuery = query => {
    return Object.keys(query)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
        .join('&');
};

我在本地进行的一个没有问题的 api 调用示例：

import Repository, { serializeQuery } from '~/repositories/Repository.js';
import { baseUrl } from '~/repositories/Repository';
import axios from 'axios'
const url = baseUrl;

export const actions = {
    async getProducts({ commit }, payload) {
        const reponse = await axios.get(url)
            .then(response => {
                commit('setProducts', response.data);
                return response.data;
            })
            .catch(error => ({ error: JSON.stringify(error) }));
        return reponse;
    },
}

这是我的 index.js（快递文件）

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose')
const cors = require('cors');
//const url = 'mongodb://localhost:27017/lokazz'
const url = 'mongodb+srv://lokazz:[e-mail]/lokazz?retryWrites=true&w=majority'
const jwt = require('jsonwebtoken')

const con = mongoose.connection

mongoose.connect(url, {useNewUrlParser:true}).then(()=>{
    const app = express();

    // middlleware
    app.use(express.json())
    app.use(cors());

    //products routes 
    const products = require('./product/product.router');
    app.use('/', products)
    //users routes
    const users = require('./user/user.router');
    app.use('/', users)
    const port =  process.env.PORT || 5000;

    app.listen(port, () => console.log(`Server started on port ${port}`));
    }).catch(error => console.log(error.reason));


con.on('open', () => {
    console.log('connected...')
})

我的目录结构

我在 api 请求后得到的错误，这意味着它没有收到任何数据。

ebd1ecd.js:2 TypeError: Cannot read properties of undefined (reading 'username')
    at f.<anonymous> (c88240c.js:1)
    at f.t._render (ebd1ecd.js:2)
    at f.r (ebd1ecd.js:2)
    at wn.get (ebd1ecd.js:2)
    at new wn (ebd1ecd.js:2)
    at t (ebd1ecd.js:2)
    at f.In.$mount (ebd1ecd.js:2)
    at init (ebd1ecd.js:2)
    at ebd1ecd.js:2
    at v (ebd1ecd.js:2)

idk 如果是 mongodb 连接集群或 api 调用的问题。

标签： node.jsmongodbvue.jsnuxt.jsdigital-ocean