Shulou(Shulou.com)06/03 Report--

How to use SpringBoot and Vue to implement Web Mall application? In response to this problem, the editor summed up this article today, hoping to help more friends who want to solve this problem to find a more simple and feasible way.

Effect demonstration management background effect demonstration

Open the http://litemall.mofangdegisn.cn to display the landing page:

You can log in using the default account. When you are finished, you will go to the background management page:

You can add categories of goods, goods on shelves, user management, system management and so on in the background management page.

Demonstration of the effect of Mobile Light Mall

Use your mobile phone to open the URL http://litemall.mofangdegisn.cn/vue/index.html, you can open the Light Mall:

You can browse the goods in the Light Mall and add your favorite items to the shopping cart (payment is not supported for the time being):

Architecture diagram

Project deployment preparations get basic information from aliyun: accountId can be obtained from the security settings page, and ak information can be obtained from the security information management page. Download Fun tool: we will use the Fun tool to complete the deployment of the project. It is recommended that you download the binary executable directly. Configure Fun tool: after the download is complete, execute fun config configuration aliyun accountId, ak, region and other information. If the domain name is not licensed, region can only choose overseas clusters. If the domain name has been filed, there is no restriction. Domain name: for example, the litemall.mofangdegisn.cn domain name used in this article. Add a CNAME domain name resolution to the console where the domain name is located, fill in the record value as 1911504709953557.cn-hangzhou.fc.aliyuncs.com, and then replace 1911504709953557 here with your own accountid,cn-hangzhou with the region you configured in the previous step. Mysql: you can build your own MYSQL database, or you can use the aliyun RDS database to prepare the user name and password of MYSQL. If it is only an example of demo, you can set the rds whitelist to 0.0.0.0x0 and apply for a public network address. If it is not an example scenario, you need to configure VPC access for function calculation. You can refer to the tutorial here to configure VPC to access RDS. The example in this article is of a demo nature, so it uses a 0.0.0.0amp 0 approach. Clone project

Execute the following command to clone the project:

Git clone git@github.com:tanhe123/litemall.git

If you do not have Git installed, you can also download the code and decompress it directly by clicking Downlaoad Zip on the page:

Create a CNAME for the domain name

Add the CNAME record for the domain name we have prepared

Import database

Create a database named litemall on the MYSQL database, and then import the litemall_table.sql and litemall_data.sql files from litemall-db/sql into the database.

If you are using aliyun RDS, you can import it directly through the following methods:

Modify the configuration in template.yml

Change SPRING_DATASOURCE_DRUID_URL in template.yml to database address, SPRING_DATASOURCE_DRUID_USERNAME to database user name, SPRING_DATASOURCE_DRUID_PASSWORD to user name and password.

Finally, replace the domain name litemall.mofangdegisn.cn in template.yml with your own domain name.

Install npm dependencies for Mall Vue Manager backend + Vue Mall Mobile

For linux or mac, you can directly execute. / install.sh within the project, and this command goes to litemall-admin and litemall-vue to execute cnpm install, respectively.

Compile the Java project and deploy

If the domain name we want to use is http://litemall.mofangdegisn.cn, execute the following command:

DOMAIN= http://litemall.mofangdegisn.cn. / deploy.sh

You need to replace the above domain name with the user's own domain name. After execution, the deployment is completed.

Open the configured domain name to see the effect.

After reading this article, have you learned how to use SpringBoot and Vue to implement Web Mall applications? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel. Thank you for reading.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.