summary:

The project is written using vue2+vuex+JavaScript,

This project uses cookie authentication, which requires us to carry the cookie in the request header every time we request

So we need to configure cross-domain:

Vue3:

server: {
​
•    host: '0.0.0.0',
​
•    port: 8080,
​
•    open: **true**,
​
•    proxy: {
​
•      '/login': {
​
•        target: 'http://XXXX.com/manage', //actual request address
​
•        changeOrigin: **true**,
​
•        rewrite: (path) => path.replace(/^\/login/, '')
​
•      }
​
•    }
​
  }

Vue2:

dev: {
​
 
​
•    // Paths
​
•    assetsSubDirectory: 'static',
​
•    assetsPublicPath: '/',
​
•    proxyTable: {
​
•      "/api":{
​
•          target:"http://XXXXX.com/manage",
​
•          changeOrigin:**true**,
​
•          pathRewrite:{
​
•            "^/api":""
​
•          }
​
•      }
​
•    },

First encapsulate axios, add the base address, set the pre-interceptor and post-interceptor,

Then you can customize the method of the request interface

We also need to manually set up a login guard,

When the login is successful, the current time and the expiration time are stored locally.

Calculate whether it expires when the route jumps, log in again when it expires, and jump normally if it does not expire.

Global configuration in main.js:

router.beforeEach((to, from, next) => {
    if (to.path == '/') {
        return next()
    }
    document.title = to.meta.title
    var Token = JSON.parse(localStorage.getItem('HappyMall'))
    var nowTime = Date.now()
    if (!Token || nowTime - Token.time >= Token.during) {
        ElMessage.warning('please log in first!')
        return next('/')
    }
    next()
})

Log in:

This page is relatively simple, just call the back-end interface with the username and password when you click on the login.

front page:

There is no difficulty in this page, just call the interface in mounted or created

commodity:

List:

You can call the interface in mounted or created.

Pagination:

Using the paging component of elementUi, you can call the interface after changing pageNum and pageSize in the callback functions of current-page and pagesize.

search:

Use a drop-down list for the type, change the value to change the type, bind a value to the search box, and pass the value and type to the search box when you click on the search to render when the data is returned.

Add to:

Category selection:

First, when the page is opened, you need to obtain a list of the first-level categories, and then select the first-level category to obtain the second-level category under the corresponding category.

File Upload:

Use the Upload component in elementUi, put the upload path in the active attribute, and also set the name attribute to upload_file, and add the returned uri to the object when adding it in the on-success callback function.

Rich Text Editor:

Just use the QuillEditor component

Click to upload

When the object with the added data is passed to the backend, it can be added successfully

Check:

When you click the view button of each item in the list, you can jump to the viewing page with the id of the current item, upload the id in the mounted of the viewing page to get the product details, and get the first-level category according to the parentCategoryId in the acquired data. Obtain the secondary category according to categoryId, and then put the data on the page, and put the obtained detail data on the page. Under the action of v-model, the corresponding primary and secondary categories will be automatically selected, and the obtained detail data will be included There is a detail, which is the data in the added rich text editor, which requires v-html to parse

edit:

It is enough to combine add and view, and call the same interface as editing, but the details are that the parameters for adding and uploading do not have product IDs, and the editing interface needs to upload product IDs. Data is added at the end of the item

Category page:

View subcategories:

Click the View button to pass the value, get the details, and fill in the page.

edit:

You need to get the category id. After the modification, click Finish to call the interface, and upload the category id and the modified name.

Pagination:

The back-end interface of the classification has no paging function, so only one front-end paging can be done. First, get all the data and put it on the page.

Then, through the calculation of pageNum and pageSize, you can get the data of the corresponding number of pieces. When the pageNum and pageSize change during paging, you can recalculate. The following is my calculation process, for reference only

categoryList.value = [];
​
      for (
​
         *let* i = (obj2.pageNum - 1) * obj2.pageSize;
​
        i < obj2.pageNum * obj2.pageSize;
​
        i++
​
     ) {
​
        if (categoryList1.value[i] == undefined) {
​
         return;
​
        } else {
​
         categoryList.value.push(categoryList1.value[i]);
​
        }
​
      }

Order:

search:

Pass the value of the search box to the backend to return the value and then render the page

Paging: Use the paging component of elementUi, change pageNum and pageSize in the callback functions of current-page and pagesize, and then call the interface.

Check:

When you click the view of each item, take the id of the item and request the interface to render.

user:

List:

You can call the interface rendering in mounted or created

Pagination:

Using the paging component of elementUi, you can call the interface after changing pageNum and pageSize in the callback functions of current-page and pagesize.