ecommerce management system Download - ecommerce management system Source code download

ecommerce management system

Other categories

1.0.0

Download

Element backend management system

An e-commerce backend management system based on Vue, using a front-end and back-end separation development model. The front-end technology stacks used in the project include Vue, vue-router, Element-UI, Axios, Echarts, etc.

Technology selection

Front-end technology stack:

Vue
Vue-router
Element-UI
Axios
Echarts

business function

Technical points related to functions

1. User login

After the user successfully logs in, the client remembers and maintains his login status through sessionStorage and token .
Control user access permissions through route navigation guard router.beforeEach . Prevent users who are not logged in from trying to access other pages than the login page through the URL.

2.Home page layout

layout
- Implement the page layout of the homepage through the Element-UI component library.
- Use <el-menu> to implement the side navigation bar, and add the activePath attribute to sessionStorage to keep the navigation bar highlighted.
- The icon in the side navigation bar uses Iconfont Alibaba vector icon library.
data request
- Request interface data through Axios and add a token to the axios request interceptor to ensure the permission to obtain data.
- Use the NProgress progress bar to display page loading (data request) progress.

3. User management-user list

Use <el-form> to add user forms, customize form verification rules, and implement form reset and pre-verification before submission.
Use slot-scope to get component data and customize rendering templates.

4.Permission management

role list
- Use a three-layer v-for loop to render the first, second, and third-level permissions of the role respectively.
- Use the <el-tree> tree control to display a list of role-assignable permissions.
Permission list

5.Commodity management

Product list
- Use the global filter Vue.filter to customize the display format of Date objects.
Add product
- Use the <el-steps> step bar component to guide users to fill in the add product form according to the process.
- Use the <el-upload> component to allow users to upload product images.
- Use vue-quill-editor rich text editor to allow users to fill in product content.
- Use <el-form> to complete the product adding form, customize form verification rules, and implement pre-verification before form submission.
Classification parameters
Product classification
- Use vue-table-with-tree-grid tree table component to display first, second and third level product classification.

6. Order management-order list

Use the <el-timeline> timeline component to display the logistics information of the order.

7. Data statistics-data reports

Use Echarts to display user source data reports.

Project dependencies

Running dependencies

axios => Send request
echarts => charts
element-ui => Element-UI component library
lodash => deep copy and object merging
nprogress => progress bar
vue-quill-editor => Rich text editor
vue-table-with-tree-grid => tree table

Development dependencies

babel => ES6 syntax conversion
eslint/babel-eslint => syntax check
sass/sass-loader => sass syntax
babel-plugin-transform-remove-console => Remove console from production environment
@babel/plugin-syntax-dynamic-import => Lazy loading of routes

Project optimization

1. Generate packaging report

View packaging reports through the Vue UI visualization panel and analyze how to optimize/compress files that are too large.

2. Configure Webpack

Specify different packaging entry files for development mode and release mode through chainWebpack
1. Development mode entry file src/main-dev.js
2. Release mode entry file src/main-prod.js
In the production environment, some third-party libraries that are too large will be introduced using CDN
By default, third-party dependency packages imported through the import syntax will eventually be packaged and merged into the same file, resulting in the problem that the single file size is too large after successful packaging.
In order to solve the above problems, you can configure the dependencies that need to load external CDN resources through the externals node of Webpack. Any third-party dependency packages declared in externals will not be packaged.

Customize the homepage content of different environments through plug-ins (for example, use import to import dependent packages in development mode, and use CDN to import in release mode)

 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} )

 <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >

3. Lazy loading of routes

When packaging projects, js packages that are too large will affect page loading speed.
Use @babel/plugin-syntax-dynamic-import plug-in and change the routing to load on demand. The corresponding component will be loaded only when the route is accessed.