As a blogger for Baidu programming, Yunluo writes code like this

» WordPress » As a blogger for Baidu programming, Yunluo writes code like this

Some time ago, the function of article posters seemed to be very popular. Today, Yunluo also wants to write the code for this function. By the way, let's show you how Yunluo usually writes code?

作为一名面向百度编程的博客主,云落是这样写代码的-极客公园

preface

There are many bloggers like Yunluo who have never learned programming seriously before. They can write code in Baidu Baidu again. Today Yunluo shows us how Yunluo can use Baidu to write his own code, taking the article poster function as an example

Code not moved, Baidu first

Since we want to do the function of article poster, we should first look at the keyword [article poster] on Baidu, and then look at what a finished article poster looks like, what factors and characteristics it has, and so on.

Analyze functional features

Entertainment found a website with article poster function, and then I experienced this function, then we can draw the following characteristics:

1: It is started by clicking, so there should be a click event;
2: After clicking, there will be a pop-up window, so there should be a pop-up window function;
3: After clicking, there is a circle animation in the pop-up window, so there may be an ajax operation;
4: There are two lists in the pop-up window, one shows the content of the poster, and the other shows the operation button;
5: The content of the article poster consists of the article title, the article abstract, the article picture, and the two-dimensional code of the article link;
6: Click the download button to turn the content of the article poster into a picture and download it

The above is basically the characteristics of an article poster. Many article posters on other websites have the same functions. Let's do it for these characteristics.

Determine technical direction

Jian has analyzed the functional characteristics and they are beginning to determine the technical direction. A good direction can help us reduce a lot of work. First click the pop-up window, which we all know is the function of js, so we must first use js to write. Then a similar ajax operation appears in the middle, which may need the help of back-end PHP to extract the article title. The article content can be solved by using back-end PHP and front-end js. Next, we will start to split the target, and then solve the problem of one target for one target.

solve the problem

1. In view of the above features, we will solve them one by one. First, click the event. Here I use Jquery's $.click() Event.

2. Pop up window function Because this is a function that many websites have, it directly calls my website's fancybox pop-up function, which is mainly used to pop up pictures, but other things can also be used to pop up.

3. Ajax is a built-in method of Jquery, which is very simple, but I prefer to use the simplified version $.post() perhaps $.get() I don't know whether this is useful or not, so let's put it in the back.

4. In case of pop-up demonstration, we can use grid In terms of layout, Yunluo directly refers to a lightweight CSS framework.

5. Get the article title, article summary, article image. One can be obtained from the background using Ajax, and the other can be obtained directly from the front page. Of course, the front end can solve the problem. Try not to use the back end. This uses Jquery's $('#id').text() The content can be obtained, and the image is also processed in the same way. The summary is also very simple here. It is to obtain the content of the article, and then truncate it based on the number of words. Generally, the summary on the poster is just a few words. In addition, the image here also needs to be modified for the web page. The first image obtained may not be the article image, but may be the logo of the website, So it may be the second picture. Of course, it depends on the specific situation. Then, we can directly use qrcode.js to generate the QR code. This application is very extensive, so it has a lot of content to search and is easy to use.

6. The last point is that this function is the real core. The operation of clicking to download is actually very simple, and the key is the process of turning web pages into pictures. Baidu found that similar solutions are basically solved by using Canvas, or precisely using a front-end library html2canvas.js. We will talk about how to use it later.

Verify the code process

One article does not focus on code. Here we focus on how to write such code, so the specific results are not discussed here. Here we focus on the process.

If you are not sure whether a piece of code can be executed or not, you can try it. If it is a short js code, you can run it in the console in F12 under the browser to see whether there are results.

In the process of verification, try to reduce the use of variables. Yunluo recommends using the control variable method. In short, try not to use variables in the test code. For example, if you do pop-up code in the experiment, do not use the code to get the title. You can write it manually. When the code is confirmed to be OK after debugging, Then freeze it. In short, don't change it. ┗(^0^)┓

In addition, when writing code, try to use carriage returns to highlight the currently debugged code separately. Other irrelevant or frozen codes can be left far behind, such as the following
Code Group A

Debugging modified code

Code Group C

Identify core issues

In my understanding, if there is a piece of code that is the most painful and difficult to do, then I think that this code is the core of this function. Of course, if you say that all the codes are very painful, then I don't say it.

I think the sixth point of the above summary is the core. After Baidu's back and forth search, I found that the hole of html2Canvas is not small. There are several problems, one is the problem of cross domain images, one is the problem of blurred images, and the other is the problem of image dislocation. Since this article is only to make functions, not a finished product, it is mainly to solve the problem of cross domain images.

solve the problem

Baidu found that the problem of cross domain images can be solved by using the base64 image format. I don't know whether this is true or not, so I must use code verification to test it.

I took a screenshot of the poster containing the pictures of the external chain, and found that the pictures were missing and the words were still there, indicating that the external chain pictures failed to take pictures. Then I replaced the external pictures with base64 pictures, and interpreted them again. I found that the pictures were effective, so that using base64 pictures could really solve the cross domain problem of pictures, and then started various Baidu searches

20 minutes later.....

All kinds of failures, forget it, I'd better change my mind.

As I said before, we try to use the front end to solve the problems that the front end can solve. If the front end can't solve the problems, we can add the back end to support them. The cross domain problem is actually relative to the front end, but the back end PHP does not. So we use PHP to solve the problem. Directly use the file_get_contents() function to obtain the remote image, and then convert it to base64. The operation is to obtain the image link from the foreground, and then send it to the back end through ajax. The back end obtains the image URL sent to the front end, and then converts it to base64 format, and then returns it to the front end as the ajax result. This can solve the problem of cross domain images.

After using PHP to solve the problem of cross domain images, I suddenly found that the images of my website are all from Alibaba Cloud OSS. OSS seems to support cross domain settings. OSS looked at it in the background, and it is true. You can directly use wildcards to solve cross domain settings, Then I took a look at Qiniu Cloud and Tencent Cloud, which seems to support this cross domain problem....

OK, let's summarize the cross domain problem. If you have permission to set cross domain problems on the server side of the image, try to solve them on the server side. If you can't solve them, you can use PHP to convert images to base64 format to solve cross domain problems.

Postscript

This article uses voice input method, so if there are errors, please do not pay attention to these details. Since the computer is not turned on, the demo code will not be posted

--End--

Post reply

Your email address will not be disclosed. Required items have been used * tagging

9 Replies to "As a blogger for Baidu programming, Yunluo writes code like this"

  1. Boss, my website has changed its domain name, which has led to chaos in the background. The pictures can't be displayed, and I don't know how to set them up. There is no solution. One more thing, boss, the blog emolg is very beautiful recently. If you are interested in making one, it's OK to pay for it, because you can use your habits to be reassured