The second phase of the project experience on GitHub-mall-admin-web

The second phase of the project experience on GitHub-mall-admin-web

Action is worse than heart

Data visualization platform: The first phase of the project experience on GitHub-VueDataV

Try the e-commerce background management system today: mall-admin-web

Preface

When I wrote "Learning Planning from Mid-September to Mid-December", I said "First do vuepress, make a complete blog and document library; then contact vue-admin-beautiful to do the middle and back office. Finally, use DataV ( echarts, mapbox) for data visualization."

Collected on GitHub (such as awesome-github-vue , awesome-vue , awesome-vuepress ). Then the most important thing is to use. In the process of using, the relevant knowledge of the web page will be gradually completed, so as to know what it is and why it is. The demo currently used for reference is vuepress-theme-vdoing as a blog. To be used for reference are gridea as a static blog writing client, VBlog as a multi-user blog management system (springboot+springsecurity+mybatis+RESTful interface+mysql+vue+axios+elementUI+vue-echarts+mavon-editor+vue-router), vue-element-admin is the background, vue-admin-beautiful is the middle and back-end, mall-admin-web is the e-commerce back - end , newbee-mall is the front-end and back-end of the e-commerce; DataV is the data visualization;

But I didn't try it because I was afraid that it would involve too much energy, but my heart is not as good as the action. It is fine to simply run the project.

Below I will record the use process and experience.

Use process

Project Introduction

Project address: mall-admin-web

Technology stack used: vue+elementui+vuex+vue router+axios+v-charts

Technical selection

technology	Description	Official website
View	Front-end framework	https://vuejs.org/
Vue-router	Routing framework	https://router.vuejs.org/
Vuex	Global State Management Framework	https://vuex.vuejs.org/
Element	Front-end UI framework	https://element.eleme.io/
Axios	Front-end HTTP framework	https://github.com/axios/axios
v-charts	Chart framework based on Echarts	https://v-charts.js.org/
Js-cookie	cookie management tool	https://github.com/js-cookie/js-cookie
nprogress	Progress bar control	https://github.com/rstacruz/nprogress
vue-element-admin	Project scaffolding reference	https://github.com/PanJiaChen/vue-element-admin

Introduction: mall-admin-web is a front-end project of an e-commerce background management system based on Vue+Element. Mainly include commodity management, order management, membership management, promotion management, operation management, content management, statistical reports, financial management, authority management, settings and other functions. The project is the front-end part of the front-end and back-end separation project, and the back-end project malladdress: Portal .

Big guy, it's true and fraud, I'm sorry for not giving start such a clear tutorial.

initialization

First download it, not too big 1.8M.

Then open the project with vscode, yarn install.

error An unexpected error occurred: "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz: ESOCKETTIMEDOUT". 

Daily error may be caused by my settings and the version is not fixed.

Refer to the construction steps of the boss.

I plan to visit the online interface and change the value of base_api in config/dev.env.js to http://120.27.63.9:8080

Then npm run dev.

Build steps

• Download node and install: https://nodejs.org/dist/v12.14.0/node-v12.14.0-x64.msi;
• This project is a front-end and back-end separation project. To access the local access interface, a back-end environment needs to be built. For the construction, please refer to the back-end project portal ;
• There is no need to build a background environment to access the online interface, just change the config/dev.env.jsfile in the file BASE_APIto http://120.27.63.9:8080 ;
• If you are connecting to the mall-swarm microservice backend, all interfaces need to be accessed through the gateway, and you need to change the config/dev.env.jsfile BASE_APIto http://localhost:8201/mall-admin;
• Clone the source code to the local, open it with IDEA, and complete the compilation;
• Run the command in the IDEA command line: npm install, download related dependencies;
• Run the command in the IDEA command line: npm run dev, run the project;
• Visit address: http://localhost:8090 to open the background management system page;
• For the specific deployment process, please refer to: Installation and deployment of mall front-end project
• 注意: If you cannot run npm commands, you need to configure the environment variables of npm, such as adding in the path variable: C:\Users\zhenghong\AppData\Roaming\npm;
• 注意: If you encounter that npm install cannot successfully download dependencies, please refer to the one-click package deployment of front-end applications using Jenkins, that's it 6! Middle 遇到的坑part.

Project structure combing

First look at package.json.

 "dependencies": {
    
    
    "axios": "^0.18.0",
    "echarts": "^4.2.0-rc.2",
    "element-ui": "^2.3.7",
    "js-cookie": "^2.2.0",
    "normalize.css": "^8.0.0",
    "nprogress": "^0.2.0",
    "v-charts": "^1.19.0",
    "v-distpicker": "^1.0.20",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

Then look at main.js

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import VCharts from 'v-charts'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import '@/icons' // icon
import '@/permission' // permission control

Look at router/index.js and store/index.js again

It's pretty long.

Look at the views again. There are seven folders home, layout, login, oms, pms, sms, ums and a 404 component.

The big guy's tutorial is really clear, and I will do the same when I get open source projects in the future.

src - the source directory
├── api - axios network request definition
├── assets - still picture resource file
├── components - generic component package
├── icons - svg vector image files
├── router - vue-router routing configuration
├ ── store – state management of
vuex ├── styles – global css style
├── utils –
tools└── views – front-end page
├── home – home page
├── layout – general page loading framework
├── login – Login page
├── oms – order module page
├── pms – commodity module
page└── sms – marketing module page

Rendering effect

Stuck in the first step and failed. Waited for initialization for a long time.

Then use the screenshot of the online project.

http://www.macrozheng.com/admin/

The password is: macro123

Experience

This project of separating the front-end and back-end development is quite suitable for reference. The front-end uses postman to send mocks for interface simulation. The backend uses swagger2 as the interface. In the future, the back-end will be handed over to the back-end staff. I will do the front-end part, and the data will be sent by postman to simulate data or the developed api interface to send data.

Although unsuccessful, if you need to use the front and back end development in the future, you can learn from this project.

To be continued

vue-antd-admin : the technology stack vue+antdesign used

vue-admin-beautiful : the technology stack vue+elementui used

spring-boot-online-exam : The technology stack used: springboot+jpa+swagger2+jwt verification; vue+antdesign

You can try the first two. The last reference, but you need to open the back-end project with idea, so I won't start it for now.

Update address: GitHub

For more content, please pay attention: CSDN , GitHub , Nuggets