Build a simple shopping platform from scratch (1)

I wrote this project in my spare time. The App interface of the mall is mainly written by imitating the small program of snack vendors , and the rest are written by myself.

Project source code (continuous update): https://gitee.com/DieHunter/myCode/tree/master/shopping

Technology used:

Backend : node+express+MongoDB

Management interface : react+antd

Store interface (mobile terminal): Vue+Mint UI

Development tools: npm

Packaging tool : webpack

Code management : git

Technology stack :

• （（Express ， mongoose ， cors ， body-parser ， multer ， jsonwebtoken ， crypto-js ， bcryptjs ， nodemailer）
• 管理界面（react，antd，axios，crypto-js，less，less-loader，react-router-dom，events，redux）
• Shop interface (vue, vue-router, vuex, axios, jquery, less, less-loader, mint-ui, swiper)

Ready to work:

Tool configuration

1. Node installation: download and install nvm or directly download nodejs installation, if you use nvm, use

   nvm install [email protected]
   nvm use 12.16.1

    

2. After node is installed, check the environment variables (right click 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    //将默认下载地址设置为淘宝镜像
   npm config set prefix "D:\soft\nodejs\module_global"     //设置全局模块安装默认路径（后面直接将路径放到环境变量，可以直接使用）
   npm config set cache "D:\soft\nodejs\module_cache"//设置全局模块缓存路径

    

4. Install mongoDB: download and install MongoDB , configure environment variables like node, enter mongo in cmd, if something like this appears, it means the installation and configuration are successful
   

5. webpack: install webpack-cli and webpack globally using npm

   npm i webpack webpack-cli -g 

Back-end construction

1. Create a new project folder , I create server.js (entry file) directly after creating the backend folder here, so that you don’t need to enter the project name when npm init
2. Use npm init -y to initialize the back-end project and create a file structure (as shown below)
   
3.  Install express, mongoose, cors (handling front-end cross-domain), body-parser (allowing to modify request types, in short, supporting post requests), multer (enable file uploading to be supported), jsonwebtoken (back-end generation of one-way token, 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

So far, a basic server has been built

Server management system interface construction

1. Use npm install create-react-app -g to install the create-react-app scaffolding tool globally and create a new project directory
2. Run the scaffolding tool create-react-app myapp (project name) in the project directory
3. Configure webpack : you need to use less here. The default preprocessing language provided by react scaffolding is sass, so you need to expose the config of the react project.
   Before exposing an eject in the package.json file under our project, run npm run eject( Note: This operation is irreversible. If it is not necessary, it is best not to expose it. The principle of webpack packaging is to generate static resources from the dependencies of the project, that is, if the package is not used, it will not have any impact)
4. Install antd (ui), axios (data request), crypto-js (request data transmission encryption), react-router-dom (route jump), redux (global state)
5. 下载less和less-loader,
   npm install less-loader less --save
6. Configuration less: After running eject, the eject item in package.json will disappear. At this time, there will be an extra config folder in the project, which is the configuration file of webpack. We open the webpack.config.js file and find the default configuration by searching. Configure the sass configuration items according to the gourd drawing, configure less, and similarly configure less-loader (as shown below)
   
7. Then build the project structure in the src folder
   

So far, a basic server-side management front-end project is completed

Store interface construction

1. Use npm install -g vue-cli to install vue-cli scaffolding tools globally
2. Initialize the project with vue init webpack + project name
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 (carousel plug-in)

The mall interface is built

to sum up:

The essence of object-oriented programming is actually to test one’s own understanding and cognition of abstract ideas. Although you can’t describe some things, they do exist. Consider what is there, not what.