This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

UniCloud introduction

UniCloud is a cloud development platform based on Serverless model and JS programming provided by DCloud in cooperation with Ali Cloud and Tencent Cloud.

There are already many articles and tutorials on cloud development on the web, so I won’t go into them here. This article mainly takes you to see, in the era of cloud development, how low the cost of building a station, how high the efficiency.

Interactive topic

With cloud development, the barriers to entry for full stack engineers are suddenly very low. Do you think the term full stack is overused? Will you describe yourself as full stack on your resume?

Leave your thoughts in the comments section below!

Begin to build

Create a uniApp project

Check enable uniCloud and select Aliyun

The difference between Tencent Cloud and Ali Cloud

Given two choices, there must be a small partner will ask, why choose Ali Cloud? What’s the difference?

  • Ali cloud

50 free cloud Spaces, static web hosting for free,

  • Tencent cloud

1 free cloud space, static web hosting to pay, Tencent ecology without authentication.

Since it is nodeJS, is it difficult to authenticate with NPM’s massive package? It must be ali Cloud

Once the project is created, we need to associate the cloud space

With that done, we can create a new cloud function

Cloud function

Search from Baidu to such a wallpaper interface, from 360, hope not to seal.

  • Get Wallpaper Classification
http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAllCategories
Copy the code
  • Gets a list of wallpapers under the category
http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid=26&start=0
Copy the code

Now we create a related cloud function to transfer the request, some friends may ask, since it is a ready-made interface, front-end direct request is good? Direct front-end requests have cross-domain issues, so let’s use nodeJS cloud function to mediate.

Get wallpaper classification cloud function code

const res = await uniCloud.httpclient.request("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAllCategories", {dataType:"json"
});
return res.data
Copy the code

Get classification under the wallpaper list cloud function code

// Cid indicates the category ID
const cid = event.cid || 26;
// Start is the current pointer to the list of categories for paging
const start = event.start || 0;

const res = await uniCloud.httpclient.request("http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByCategory&cid="+cid+"&start="+start,{
        dataType:"json"
});
return res.data
Copy the code

In addition, we can also do secondary processing of the data through the cloud function, such as dump to their own cloud database or cloud storage.

Urlization of cloud functions

With the above two cloud functions complete, we can use unicloud.callFunction to make requests in the UniApp environment.

// Request wallpaper classification
uniCloud.callFunction({
        name:"getAllCategories".success: (res) = > {
                console.log(res); }})// Request a list of wallpaper categories
uniCloud.callFunction({
        name:"getAppsByCategory".data: {cid:21.start:0
        },
        success: (res) = > {
                console.log(res); }})Copy the code

Suppose we write a Flutter app in the future and want to call this cloud function as well? This is where urlization of cloud functions is needed, which simply means that a cloud function can be called outside of the UniApp environment using a normal HTTP request.

Click the cloud function domain name binding and it will automatically assign one to usbspapp.comSecondary domain name

Then we go to the detail page of a cloud function, click the edit button in the CLOUD function URL area, and set the URL request suffix to/http/getAllCategories, this address suffix can be arbitrary

After setting this up, the interface can be accessed through a common URL, you can try to request the following two URLS

// Get the classification
https://b739e39d-73fb-432d-b357-3dc97e6446c3.bspapp.com/http/getAllCategories

// Get the list of wallpapers under the category
https://b739e39d-73fb-432d-b357-3dc97e6446c3.bspapp.com/http/getAppsByCategory?cid=21&start=0
Copy the code

I’ll make a request with Postwoman (Hoppscotch) for you to see

One thing to note here is that the URL of the cloud function is different for get and POST

  • The cloud function urlalizes the GET parameter
if(event.queryStringParameters){
        start = event.queryStringParameters.start || 0;
        cid = event.queryStringParameters.cid || 26;
}
Copy the code
  • The cloud function urls the POST parameter
let bodyData = JSON.parse(event.body);
start = bodyData.start || 0;
cid = bodyData.cid || 26;
Copy the code

Another is that once urled, developers need to focus on business and resource security.

  • Security: To ensure business security, developers need to do a good job in permission control and security protection in the code to prevent unauthorized access from triggering sensitive operations.
  • Billing: With urlization enabled for cloud functions, developers can disable HTTP access support by setting the cloud function access address to null if a large number of malicious accesses are encountered and consume cloud function resources.

One – click publishing, front – end web hosting

The front end of the wallpaper station is very simple, only a single Vue page, is mainly to deal with the following things, the code is not posted, you can view the source code.

  • Request wallpaper classification cloud function
  • Request category wallpaper list cloud function
  • Pagination and pull-up load more logic
  • Download wallpapers in different resolutions

Next, we right-click on the project directory and choose Publish > Upload Site to server

Select the cloud space to which we want to deploy

When the deployment is complete, a domain name is provided by default, which means that at this point, we have spent nothing, and the site is deployed on the Internet for the world to access.

static-b739e39d-73fb-432d-b357-3dc97e6446c3.bspapp.com/#/

However, the current domain names are a little ugly and the default domain name is speed-limited, so let’s buy a domain name and resolve it.

The page hosting parameters are displayed

After the verification, the generated CNAME address is configured for domain name resolution

Now the domain name of this wallpaper site looks good wallpaper.jnsii.com/

conclusion

Based on the increasingly mature cloud development, front-end engineers can easily complete the construction of websites, use javascript to develop back-end interfaces to operate databases and so on without having to know much about servers, and all of these are still free at present.

Source code and video tutorial

This article accompanies the video tutorial and the source code address

Focus on the handsome old ape

If this article is helpful to you, please give me a like.