BAI_SHOP

Bai_shop project

1. Project Introduction

Project introduction: This project adopts the front -end and back -end separation development mode. Vue_api_Server is the back -end code file. Vue_shop is the front -end development code file. Vue_shop_Server is the front -end production code file. In contrast

Front -end project technology stack	illustrate
Vue	A set of gradual framework for building a user interface
Vue-router	Vue-Router is the official routing manager of Vue.js
Element-UI	Elementui Element , a set of VUE 2.0 component library prepared for developers, designers and product managers, provides supporting design resources to help your website quickly take shape
Axios	AXIOS is a promise -based HTTP library that can be used in the node.js environment and browser
ECharts	ECHARTS is simply in the process of Internet development procedures. The background database is used to realize a plug -in of data to graphics mapping

Back -end project technology stack	illustrate
Node.js	Nodejs He is a language developed in the server with C ++. You can write the background program of the website, which can be used as a server application development
Express	Express is a minimalist and flexible web application development framework based on the Node.js platform. It provides a series of powerful features to help you create various web and mobile device applications
Jwt	JSON Web Token is a JSON -based open standard for opening a statement in a network application environment
Mysql	database
Sequelize	Sequelize.js provides a simple access to MYSQL, Mariadb, Sqlite and PostgreSQL databases, to map database strips to objects, or objects to database strips. In short, it is ORM (Object-Relational-Mapper). Sequelize.js is written in JavaScript, which is suitable for Node.js environment.

File description

1.Vue_api_Server file description

• config configuration file directory
  • default.json default configuration file (which contains database configuration, JWT configuration)
• dao data access layer, store the addition, deletion, change and check operation of the database
  • The method of public access database provided by DAO.js
• models stores specific database ORM model files
• modules current project module
  • authorization.js API permission verification module
  • database.js database module (database loaded nodejs-orm2 library load)
  • passport.js is based on the login of the Passport module
  • resextra.js API Unified Return Result Interface
• node_modules project depends on a third -party module
• routes unified road
  • api provides API interface
  • mapp provides mobile app interface
  • mweb provides mobile web sites
• services service layer, business logic code is written on this layer, and data obtained through different interfaces is converted into a unified front -end data
• app.js main project entrance file
• package.json project configuration file

2.Vue_shop file description

• dist folder folder folder generated after packaging (for production environment)

  • Including css , fonts , img , js , favicon.ico and index.html
  • Just start a simple server to mount the project up, run the server, and access the default port
  • How to run the packaged Vue item: https://www.cnblogs.com/zhujiabin/p/10557982.html

• public folder folder with static resources

  • Including favicon.ico and index.html files

• src Folder Folder Folder

  • assets : Store some large resource files, such as: pictures, fonts, etc.

  • components : Store item Vue sub -component

  • plugins : element-ui components introduced by the project

  • router : project route index.js

  • tools : Project Tool Class

  • App.vue : Vue root component

  • main.js : web entrance

• Other configuration files

  • .browserslistrc : This configuration can share the target browser and Nodejs version in different front -end tools. These tools can automatically configure according to the target browser to configure the configuration according to the target browser
  • .editorconfig : Help developers define and maintain consistent coding styles between different editors and IDE
  • .eslintignore : Set files that are not verified by ESLINT ( ESLint is a plug -in and configurable JavaScript grammatical rules and code -style inspection tools))
  • .eslintrc.js : The configuration file of Eslint
  • .gitignore : Set files ignored by git
  • .prettierrc : When we use the right -click formatting, we will automatically help us to make up the symbol, but some symbols will report the grammatical errors in Eslint. What do we need?
  • babel.config.js : Babel configuration file ( Babel is a tool chain, which is mainly used to convert the code of the ECMAScript 2015+ version into a backward JavaScript syntax in order to run in the current and old version of the browser or other environments. .

3.Vue_shop_server file description

• dist folder vue_shop packaged production environment project file
• Including css , fonts , img , js , favicon.ico and index.html
  • When running the project, first delete node_modules dependency package, and then enter the vue_shop_server directory, execute npm install to re -download the new dependent package
  • After the dependency package is downloaded, execute commands nodemon app.js in the DOC window and access http://localhost:3000 can see the front -end page of the project.
• app.js file server runs the entrance file, which contains some basic configuration of the server

3. Precautions for project operation

1. Download and decompress BAI_SHOP.zip

2. Enter vue_api_server/db folder, import the mydb.sql database file under the DB folder into the MySQL database

3. After the data is imported successfully, open the default.json file in the config folder to configure db_config in it

4. Open the DOC command window, enter the vue_api_server directory, run the npm install command to load the dependencies required for the project required

5. After relying on loading, perform nodemon app.js running

6. Open a new DOC command window, enter the Vue_shop directory, run npm install command to load the dependencies required for the project

7. After relying on loading, run the npm run serve command to run the project in the current window, as prompt Compiled successfully in xxxxms , open the browser to visit localhost:8080

8. Postscript: Generally speaking, the project of the development model is successful! Note: You must have a nodejs environment first! And to install nodemon global relying code: npm install nodemon -g

If you want to mount items in the production mode, look at the Vue_SHOP file description above and Vue_shop_Server file description above. The distal folder is the file after the Vue item is packed. Just mount it to the server.