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

According to the example analysis of Todo refactoring + Vue client call, I believe many inexperienced people are at a loss about this. This article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

First configure a function to add tasks.

Note that the configuration file can not help us to create files and folders locally, do not have the ability of Mini Program, so, to write the configuration file, we need to create the corresponding code directory and files.

After the code is written, how do you do local testing? Remember the SCF tool we used before? Yes, just use it.

Then use Postman to send a request:

After the test is complete, we can use the tcb command for full deployment. Note that when fully deployed, vue will also be packaged and deployed to static sites. If you only want to deploy a single cloud function, you can deploy the add function separately using the command tcb fn deploy add:

You can log in to the Cloud console to view the deployment, or use tcb fn list locally to view the list of deployed functions.

Vue client calls

Unlike the traditional way to call cloud functions in Vue, we do not need to send HTTP requests ourselves. Tencent officially encapsulates the Vue plugin: vue-provider.

Address: https://github.com/TencentCloudBase/cloudbase-vue

This plug-in has been introduced in the project we built. Modify our environment parameters in main.js and you can use it.

At the same time, in index.html, a static configuration file _ init_tcb-env.js is loaded by default, which is actually the configuration parameter of the environment. Because we have configured the environment parameters in main.js, we can simply mask this file.

After completing these configurations, we completed the function of adding tasks in Vue and tested them. However, there is a pit here. Tencent is a primary school harvester in this place. It took me an hour to harvest before I realized that the event input parameters of callFunction calls to participate in HTTP trigger calls are different, must pay attention! This is not stated in the manual.

Address of the manual: https://docs.cloudbase.net/cloud-function/how-works.html

The input parameter of the cloud function event called by callFunction is the data passed into callFunction, and there is no request for information data, so the code of the cloud function must be modified.

At this point, we will receive an error with no permission. This is because login authentication must be performed to call the cloud function. For the time being, we will log in anonymously to enable the data communication of the API. Later, we will introduce the user management server of Cloudbase in detail.

However, even using anonymous login is a trap, the instance code of login authentication in the console is wrong, and the correct code example is in the document center.

Document Center address:

Https://docs.cloudbase.net/authentication/anonymous.html

Of course, code is not enough, you also need to turn on the option to allow anonymous login in the console. However, it is generally activated by default, so we will not go into details here. After login verification, we can finally scold the junk documents written by Tencent.

After reading the above, have you mastered the method of example analysis of cloud function Todo refactoring + Vue client calls? 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.