Vue version of new Bee mall

In October 2019, I uploaded all the source code of the new Bee Mall project in GitHub open source repository. It has been about half a year now. If you are interested, you can go to know about the mall project developed by Spring Boot technology stack.

  • newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall
  • newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall

Newbee-mall has created a code repository on GitHub and in China’s code cloud. If you are slow to access GitHub, you are advised to check out the project on Gitee.

Of course, the main character of this article is not the mall project, but the second version of this project: new Bee Mall Vue version.

I was there earlier

“Newbee-mall open source” 1000 Star Get! Warehouse Star number broke thousands! Record

and

Newbee-mall is the most popular Spring Boot project on GitHub, I also want to do a pretty boy!

Two article introduces the new bee mall of the future planning and development of Vue version, I also didn’t break your word, this a few months have also been developed, but due to work, basic it is free time would like to work for development, so the progress is not very fast, now has already finished most of the page style and function of logic.

Original new Bee Mall:

At first there was only a PC side of the page, now after joining the Vue version, the new bee mall show more rich form, the new bee mall became like this:

From left to right: three pages of the backstage management system page, PC page and Vue version of the new Bee Mall.

In addition to the proliferation of presentation forms and product lines, the technology stack has also been added to Vue, and the development model has changed to the front and back end separation model.

Let’s get everyone up to speed

We are in the final stages of development, but the completion of development does not mean the project is complete, there are still some details and bugs to fix.

The development was originally planned to be completed by the end of April, but due to the recent busy work, it needs to be postponed for a period of time. It is expected to meet everyone in May, and all the source code involved in the front and back end will be put into the GitHub open source warehouse by then.

QQ communication group of recently and have some friends in Vue version of the velocity, the relationship between the content of this article open out the main is the synchronization of the new bees mall Vue version of the schedule information, also is to let everyone know about the things, in the process of some details about the project and development process behind me have the time, I’m going to organize it a little bit so that you can not only use it, but also see other aspects of it.

Current main job is to test and change, the following is the content of two tests in the process of development, mainly with a few other friends test, the test content is more, here just list a part of the problem, including some of the questions on a page and the function of bugs, some of them are already solved, some are still pending.

The content of the following two paragraphs is basically the original draft after sorting out the test results, including the screenshots of the problems and the description of the problems, which may not be particularly consistent with the layout of the article, mainly to let you have a look at the problems in the development process.

First test

Home page style error (unaligned)

  • Status: Changed
  • Repeat logic: open the home page to appear

The home page search bar style blocks the top display of the banner image

  • Status: Changed
  • Repeat logic: open the home page will appear, the search bar is not transparent, it is recommended to change to translucent

The Logo on the login page is incorrect

  • Status: Changed

Unable to change password

  • Status: Changed
  • Repeat logic: When the account management page is displayed, the password cannot be entered and no input box is displayed

The details field on the product details page is displayed incorrectly

  • Status: Changed
  • Repeat logic: open the details page to appear, details should read the content field

Shopping cart items should support selection logic

  • Status: Changed
  • Repeat logic: Items in the shopping cart page have no selection logic

The order generation page has no data and cannot generate an order

  • Status: Changed
  • Repeat logic: If no address is added, the corresponding information cannot be read and an error message is displayed

Product search list page, no response after switching sorting mode

  • Status: Changed
  • Repeat logic: click different sorting methods on the product search results page, the page data is the same

Product details page click “Buy now” button no response

  • Status: Changed
  • Repeat logic: click “buy now” on the product details page and an error message will appear on the console

Provincial and urban data are not perfect

  • Status: Not modified
  • Repeat logic: when adding or editing a user address page, select a province or region with only one piece of data

The page fails to be displayed after the new IP address is added

  • Status: Changed
  • Repeat logic: After adding the user’s address, jump to the address list page, in this case to the Order generation page

Duplicate order data appears in the order list

  • Status: Changed
  • Repeat logic: if the user has placed an order, it will appear when entering the order list page and double the order data will appear on the page

The Confirm Order button should not appear on the Order Details page

  • Status: Not modified
  • Repeat logic: the “Confirm order” button is operated in the management background and should not appear on this page

Cancel order popup text error

  • Status: Changed
  • Repeat logic: Click the “Cancel order” button on the order details page, and the copy is “Delete Order”

The above is the result of the first test. There are a lot of problems and bugs that were not noticed during the development. After that, modification and adjustment were carried out. The first test is mainly to make all the processes and logic go through, but failed, some functions can not be used, still need to continue to improve, of course, there are some style problems to be dealt with, these need time, look forward to the second test.

Second test

The 8 ICONS on the home page need to be changed

  • Status: Changed

The homepage search box and copy need to be modified

  • Status: Changed

The home page lacks the “new product online” module

  • Status: Not modified

There are only two modules for hot selling products, new products and recommended products at present

When you log in to the registration page and click the trigger to switch the font of the page, the trigger area is too large

  • Status: Changed

The profile pictures on the personal center page are not unified

  • Status: Changed

Category Page Icon

  • Status: Changed

Login page slider validation issues

  • Status: Changed
  • Repeat logic: When you enter the login page, you can see that the return command will be triggered when you slide the slider on the mobile browser, and it is directly returned, so it is difficult to complete the slider verification

A blank page appears after the search box is clicked

  • Status: Changed
  • Repeat logic: a blank page will appear after clicking the search box at the top of the homepage or category page

When the address is edited, the original “province” will not be displayed

  • Status: Not modified
  • Repeat logic: When editing the address information, you need to select the provincial information

There is a selection box in the address bar, and the selection cannot be cancelled

  • Status: Not modified
  • Repeat logic: enter the address management page you can see, did not enter the order process, just simple management address, there is no need to select the box

The ordering process is abnormal after the address change operation

  • Status: Changed
  • Repeat logic: select goods for settlement operation, click the address on the page of order generation and select a data in the address list for modification. After modification, return to the page of order generation, and blank data appears on the page

The cancel order popup keeps showing

  • Status: Not modified
  • Repeat logic: click the “Cancel order” button on the order details page, and then swipe left or click the back button. At this time, the details page is no longer there, and the pop-up box still exists

Above for a second test results, and the first test interval 20 days or so, this time is can go through all the processes and logic, only the part does not affect the main issues that need to be correct, also revised a lot of UI style, in general can be a wave of the actual online tests, but there are still some problems need to be correct.

conclusion

Next, of course, is to continue development, testing and fixing problems may take a bit of time, mainly to myself, to everyone, I put an incomplete or problematic code into the open source warehouse, this is certainly not a good practice, I try to give the perfect content to everyone.

Of course, the above is just the result of my internal test with some friends, of course, there will be other questions, after open source, everyone continue to ask me questions.

We can first pay attention to the current mall project warehouse Newbee-Mall in GitHub, Vue version of the development test will be open source to GitHub, then won’t get lost oh!

Recent open source projects I have maintained:

Spring Boot Open source e-commerce project (including mall terminal and background management system) : github.com/newbee-ltd/…

Spring Boot + Vue Back-end separation mall project: github.com/newbee-ltd/…

In addition to indicate the reprint/source, all for the author’s original, welcome to reprint, but without the consent of the author must retain this statement, and give the original link in the obvious position of the article page, otherwise reserve the right to pursue legal responsibility.

Thank you for watching, I am 13, the article first appeared in my public account “programmer’s Short story”.