This project was written by me in my spare time. The App interface of the mall was mainly written by imitating the small program of snack vendors, and the rest was written by myself

Project source code (continuously updated) : gitee.com/DieHunter/m…

Techniques used:

The backend: node + express + mongo

React + ANTD management interface

Mall interface (mobile terminal) : Vue+Mint UI

Development tool: NPM

Packaging tool: Webpack

Code management: Git

Technology stack:

  • Back end (Express, Mongoose, Cors, Body-Parser, Multer, JsonWebToken, Crypto-JS, bcryptjs, Nodemailer)
  • Manage interface (React, ANTD, Axios, crypto-js, less, less-loader, React-router-dom, Events, redux)
  • Store interface (Vue, VUe-Router, Vuex, Axios, jquery, less, less-Loader, Mint-UI, Swiper)

Preparations:

Tool configuration

  1. Node installation: Download and install the NVM or directly download the NodeJS installation. If NVM is used, use the NVM

    NVM install [email protected] NVM use 12.16.1Copy the code

     

  2. Once Node is installed, look at the environment variables (right-click on my computer => Properties => Advanced System Settings => Environment Variables). If not, add the Node directory to the environment variables

  3. NPM configuration:

    npm config set registry https:/ / registry.npm.taobao.org / / set the default download address to taobao image
npm config set prefix "D:\soft\nodejs\module_global"     // Set the default path for global module installation.
npm config set cache "D:\soft\nodejs\module_cache"// Set the global module cache path
Copy the code

     

  4. Install the mongo:Download and installMongoDBEnter mongo in CMD. If the command output similar to this is displayed, the installation and configuration is successful

  5. Webpack: Use NPM to install webpack globally – CLI and Webpack

    npm i webpack webpack-cli -g 

The back-end structures,

  1. Create a new project folder. I will create server.js directly after creating the backend folder, so that I don’t need to enter the project name during NPM init
  2. Initialize the backend project with NPM init-yAnd create the file structure (as shown below)

  3. Install Express, Mongoose, CORS (handles front-end cross-domain), Body-Parser (allows modification of request types, in short, supports POST requests), Multer (enables file upload), JsonWebToken (generates one-way tokens on the back end, Transmission to the front end for verification status), Crypto-JS (request data transmission encryption), bcryptJS (password encryption), Nodemailer (send email, verification code) and other modules

At this point, a basic server is set up

Set up the server management system interface

  1. Install the create-react-app scaffolding tool globally with NPM install create-react-app -g and create the project directory
  2. Run the scaffolding tool create-react-app myapp in the project directory
  3. Webpack configuration: The react scaffolding provides sass as the default preprocessing language, so to expose the Config for the React project, run NPM run eject in the package.json file. It is best not to expose it unless necessary, the principle of WebPack packaging is to generate static resources for project dependencies, that is, if the package is not used, it does not matter.)
  4. Install ANTD (UI), AXIos (data request), crypto-js (request data transfer encryption), React-router-dom (route jump), redux (global state)
  5. Download less and less-loader, NPM install less-loader less –save
  6. Less configuration:After running eject, the eject item in package.json will disappear, and there will be a config folder in the project, which is the webpack configuration file. We open the webpack.config.js file, search for the default sass configuration item, and follow the example. Configure less, and configure less-loader (as shown in the following figure).

  7. Then build the project structure in the SRC folder

At this point, a basic server management front-end project is completed

Mall Interface building

  1. Use NPM install -g vue-cli global install VUE -CLI scaffolding tool
  2. Initialize the project with the name vue init webpack + the project
  3. Build the project directory

  4. Install vue-Router (routing), VUex (global state), AXIos (front-end request), jquery, less, less-Loader, Mint-UI (mobile UI component), swiper

The mall interface has been set up

Conclusion:

The essence of object-oriented programming is to test their understanding and cognition of abstract ideas. Although you can’t describe something, it does exist. Consider what, but not what