Vue Templates Logo Vue Templates
Vue Express Mongodb screenshot

Vue Express Mongodb

Author Avatar Theme by Xrr2016
Updated: 29 Sep 2020
590 Stars

前后端分离

Github Live Preview

Categories

Express

Overview:

The document provides a detailed example of a front-end and back-end separation project using Vue.js, Express, and MongoDB. It outlines the framework and libraries used in the project, such as Vue.js, Vue Router, Muse-UI, Axios, Express, Mongoose, and MongoDB. It covers the setup of the front-end and back-end environments, including initializing the project directories, starting the Vue.js project on port 8080, setting up the local MongoDB server, developing the back-end using Express and Mongoose, creating data models with schemas, linking to MongoDB, and setting up routes for CRUD operations. The document also delves into front-end development by installing necessary dependencies, creating components for the project, setting up front-end routes, configuring Vue.js proxyTable for cross-origin resource sharing, and handling data retrieval and interface development using Ajax requests.

Features:

  • Front-End Development: Utilizes Vue.js, Muse-UI, and Axios for creating front-end components and handling data retrieval.
  • Back-End Development: Implements Express, Mongoose, and MongoDB for setting up API routes and performing CRUD operations on the database.
  • Cross-Origin Resource Sharing (CORS) Handling: Configures Vue.js proxyTable to address cross-origin issues between front-end and back-end servers.
  • Data Modeling: Defines data models with schemas using Mongoose for structuring and accessing database information.

Installation:

  1. Install Node.js, npm or yarn, and MongoDB on your local machine.
  2. Set up the front-end environment by initializing the project directory using Vue CLI.
  3. Start the Vue.js project on port 8080.
  4. Launch the local MongoDB service.
  5. Develop the back-end by installing necessary dependencies (Express, Mongoose) using npm.
  6. Create an app.js file in the project root directory and write the code to start the Express server.
  7. Link MongoDB by adding the connection in app.js.
  8. Set up routes for CRUD operations by creating router files and defining routes for data manipulation.

Summary:

The document outlines a comprehensive example of front-end and back-end separation using Vue.js for the front end, Express for the back end, and MongoDB for the database. It covers the setup process for both front-end and back-end environments, including necessary dependencies, project initialization, API route creation, CORS handling, data modeling, and interface development. The step-by-step guide provided in the document offers insights into how to structure and develop a project with front-end and back-end separation in mind.