Shulou(Shulou.com)05/31 Report--

This article shows you how to build a SpringBoot+Vue-based Web Mall application, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Background introduction

First of all, we will introduce several more important concepts that have emerged:

Function computing (Function Compute): function computing is an event-driven service. Through function calculation, users do not need to manage the operation of the server, but only need to write code and upload. The function calculation prepares the computing resources and runs the user code in an elastic way, while the user only needs to pay according to the resources consumed by the actual code. Function to calculate more information. Fun: Fun is a tool for supporting Serverless application deployment, which can help you easily manage resources such as function computing, API gateways, log services, and so on. It assists you in developing, building, and deploying operations through a resource configuration file (template.yml). More documentation references for Fun. Litemall is a shopping mall system based on Spring Boot, Vue, WeChat Mini Programs and other technologies. It includes Spring Boot backend + Vue administrator frontend + WeChat Mini Programs user frontend + Vue Mall mobile terminal. For more reference.

Demonstrate how to migrate the three components of the mall application, namely, the Spring Boot backend, the Vue administrator front end, and the Vue Mall mobile end, to function computing.

The following is a demonstration of the effect of an application that has been applied to function calculation.

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

Preparation for project deployment

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.

The above content is how to build the Web Mall application based on SpringBoot+Vue. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.