About the Author
Author name: 1_bit
Introduction: CSDN blog expert, TOP5 blog star in 2020, signed author of Blue Bridge. In 15-16, he was broadcast live on the Internet, leading a group of programmers to embark on the road of programmers. Welcome everyone to join me and consult me for relevant information. If you are confused, you will find the answer.
Items stored in: https://editor.ivx.cn/?showall=1#10699167 need to be looking at direct imitation
Learn how to make a beautiful web page resume
without coding in 1 hour (1) In 1 hour, how can I complete the webpage production of NetEase Cloud Music Homework without coding? (IVX Part 2)
Earn 300 yuan per hour, and help people make a chicken web page without coding [IVX Actual Combat Part 3]
Note: Picture resources can be privately chatted with bit brother~ welcome to private chat, enthusiastic blogger bit brother
1. First look at the target work before knowing what to do
1.1 To make it easier for you to make money, I will introduce the solution that comes with IVX and make a project in minutes
👸Xiaoyuan: Bit brother, bit brother, someone came to me to take the order again. Since the last time I used IVX to take the order, I feel that I have discovered the wealth password. 😂
🐶1_bit: What? You don't want to ask me to help you again.
👸Xiaoyuan: Help and learn, so that I can also improve. 😋
🐶1_bit: You gave me another reason that I cannot refuse.
👸Xiaoyuan: Thank you bit brother. 😋
🐶1_bit: What do you do this time?
👸Xiaoyuan: To be a resource sharing platform, that is, to record web systems such as software, videos, books and documents, and then ask me to help him operate it. I think I will be very comfortable to publish directly on ivx, hahaha , Give 1,000 yuan.
🐶1_bit: OK, it's the entire site, complete?
🐶1_bit: But you have used IVX for so long, do you know what IVX is?
👸Xiaoyuan: Is it an editor?
🐶1_bit: emmm, it seems you remember this; IVX is a programming language.
👸Xiaoyuan: What? Is it a language without a code? 😂
🐶1_bit: Of course, you don’t understand sign language? Sign language is also a language.
👸Xiaoyuan: Suddenly I realized it. 😂
🐶1_bit: The characteristic of IVX is to remove the traditional code and use a simpler drawing method to draw the application, and if you want to convert the application you draw into code, then IVX comes with a compiler, or an interpreter , Convert the program you draw into code, so that you can get both, isn’t it cool?
👸Xiaoyuan: Hahaha, do you mean that I can simply get an application and the code of this application?
🐶1_bit: Yes, so what do you say about the editor of IVX?
👸Xiaoyuan: Hahaha, it's a programming language. 😂
🐶1_bit: I just said so much, are you still not sure? It's an IDE!
👸Xiaoyuan: What is IDE?
🐶1_bit: You don’t even understand IDE? The full name of IDE is Integrated Development Environment, which means to provide the necessary program support for user development. Now the online environment of IVX is provided. I just said that there is a compiler, development interface, preview, and release functions. So what should this online editor be called specifically?
👸Xiaoyuan: It’s called IDE...😂
🐶1_bit: You finally understand. So the site you made this time, didn't you say that you want to publish it on the IVX private cloud for easy maintenance? So IVX even has the functions that you officially deploy. Of course, it can be called IDE, and it is more powerful than conventional IDEs, get it.
👸Xiaoyuan: Understood, let’s get started now.
🐶1_bit: Why is it convenient for you to make money? Let me tell you a few cheats. Maybe you can use it next time you receive an order.
👸Xiaoyuan: What cheats?
🐶1_bit: IVX comes with its own solutions, such as "enterprise large and medium-sized platform/WebApp solutions", "enterprise office OA system solutions", "enterprise marketing/small programs/H5 solutions", "intelligent Internet of Things/BI solutions" ", "Smart city/park solution", you can go directly to IVX to find it, so you don't have to trouble me, you can use it directly, won't you earn thousands of dollars every minute?
👸Xiaoyuan: Hahaha, you just don't want me to find you.
🐶1_bit: Hahaha, you can also say that you use Huawei, platform, Poly and other companies to do it for them, and they will find it very affordable.
🐶1_bit: Because these platforms are also using IVX, understand?
👸Xiaoyuan: I see, I will pick up the order now, hahaha. Wealth password Wealth password. 😎
1.2 Started with excitement
🐶1_bit: Alright, let’s officially start. Now I will show you the picture. Let's make a homepage first.
👸Xiaoyuan: Well, it needs a search function and a page to share resources.
🐶1_bit: Just click on the share resource to share; then let’s take a look at the share resource page.
👸Xiaoyuan: Well, yes, you need a resource title, display cover image, URL address of this resource and what type it is.
🐶1_bit: Finally, I will show you the search interface.
👸Xiaoyuan: Is it all right to search for input content? Wow, there is also a record of the number of views, thank you big brother, hahaha.
Two, page production
2.1 It's easy to make the title bar of the homepage without coding
🐶1_bit: First, let's make the page. The first one is the home page. We open the IVX online editor https://editor.ivx.cn/ , create a project called the resource management system, and select relative positioning.
👸Xiaoyuan: It has been built.
🐶1_bit: Then we select the screen as the middle screen, click on the front desk in the object tree, and click on the page in the component bar on the left to create a new page. The created page 1 is renamed as the home page.
👸Xiaoyuan: I understand.
🐶1_bit: Let’s first analyze the title bar that we need to make first. As shown in the figure below, this is a row arrangement. In this arrangement, the blue box selects the picture and the green box selects the text box. It is extremely easy to create this title bar.
👸Xiaoyuan: Just create a line first, right? Then first add a picture in the line, and then add a text; so that the logo part is finished? 😂
🐶1_bit: Yes. We select the home page in the object tree, and then find the row in the component bar on the left and click to add it, and rename the behavior title.
👸Xiaoyuan: Then create an image in the title, right?
🐶1_bit: Then I found that this row has a background color that is not very beautiful, and the picture exceeds the size of this row. At this time, we click on the row, and the component box of the row will appear on the left. Click the height in the component box and set it to Package, then the height of this line will change with the maximum height of the content, that is to say, the height of this line will be equal to the maximum height of this content.
👸Xiaoyuan: But the maximum height of this picture should be set too?
🐶1_bit: Then set the image width to 6% at this time, and the height will also change at this time.
👸Xiaoyuan: Then set the background color and left margin. Setting the margin will produce a set distance from the left element; finally, set the background color to white.
🐶1_bit: You should also set the vertical level of this row to be centered, so that it can be displayed all in the center, otherwise it will be unsightly.
👸Xiaoyuan: It's set, it's not a big problem. At this time, a text should be added to it. Click the title and click the text in the left component bar to add it.
🐶1_bit: Then click on this dividing line.
🐶1_bit: Then click the dividing line in the object tree, change the attribute to vertical, and set the length and thickness.
👸Xiaoyuan: Then start adding text in the same way? 😫
🐶1_bit: Yes, we directly add text, change the content, and set the left margin to 10.
👸Xiaoyuan: Then you can start assigning a few texts, right?
👸Xiaoyuan: After copying, modify the text and solve it. 😂
🐶1_bit: Finally, we create a new row here, set the width to 50%, and then set the horizontal alignment to the right and the vertical to the center. At this time, we can create a button in this row to display it directly to the right, we Changing the text content and background of the button completes the production of the title bar.
👸Xiaoyuan: Solve, click this line, and then click a button to add it.
🐶1_bit: Just change the background of the row and the text of the button.
👸Xiaoyuan: You also need to change the rounded corner setting, and it will be solved by changing it a bit smaller. Below the button's property bar, you can change the small value. 😎
🐶1_bit: At this time, let's change the background color of that page. Since the color of the title bar is white, the background is not easy to love the color of the title bar of the book. Let's change the background now, which will make it stand out.
👸Xiaoyuan: I changed the background color to #FAF9F8, it looks more comfortable.
2.2 After completing the homepage search box, half of the functions are completed
🐶1_bit: Then we will continue to create new page content now.
🐶1_bit: At this time, we create a new line and name it the search box, create a new line under the search box and name it content, set the width of the content line to 80%, and set the horizontal alignment of the search box to center, so that the content line will be displayed in the center.
👸Xiaoyuan: What's next?
🐶1_bit: Next, we create two rows in the content row, one row is used to store the ivx logo, and there is a search box.
👸Xiaoyuan: First create a line, rename it to logo, set the horizontal to align to the center, set the background color to transparent, add a picture in it, and upload the ivx logo picture.
🐶1_bit: What's next?
👸Xiaoyuan: Next, create a row, add an input box and a button, set the rounded corners, their width, and the background color to be transparent. 😎
🐶1_bit: Then the home page is ready.
2.3 Complete the main search page
👸Xiaoyuan: Next is to make a search page, right?
🐶1_bit: Yes, the search page is easy to make, let’s take a look at the search page first.
👸Xiaoyuan: Is this the same step? Just assign the search box directly and just drop it up? 😂
🐶1_bit: Simple, right?
👸Xiaoyuan: In fact, it is to create a new page called the result page, then change the background color to #FAF9F8, then discard the previous title bar, and then assign the input box and the search button to modify the size. 😎
🐶1_bit: Yes, it is fine. What to do next?
👸Xiaoyuan: They all use repeated knowledge, and it’s super simple. In fact, just continue to create a row and rename the result block. The row contains another row and rename the result block background, but the width of the result block background is 80%, the horizontal alignment of the outer row is set to center, so that it can be centered. Modify the background color of the inner row to white, so that there is a contrast.
🐶1_bit: How to make the inside?
👸Xiaoyuan: In fact, this should be analyzed as shown in the figure below. This is a column. Because it is stored vertically, this column will account for a percentage of the overall width, and then the first element of this column is a picture. Set this picture The width of is 100%, so that it will not exceed the line; then the next element is a text, and then add a line, this line has 3 texts, the first text is a number, such as 200, the second text is Browse, the third text is the date; the last is a line, there is a view button in this navigation, the view button is stored on the right side of the entire line, that is to say, set the horizontal alignment of this line to the right.
🐶1_bit: The analysis is good, how can I do it?
👸Xiaoyuan: First, we need to change the height of the content block or the background of the content block to wrap, and then create a row. This row is named the content block with a width of 18%, and then a column is created in the content block row to store the main elements , Named as detailed content, the height of this column is directly set to 100%.
🐶1_bit: Keep adding elements.
Add a line directly, name this line time, and then add an additional text to this line.
🐶1_bit: It's almost a bit, come on. 😎
👸Xiaoyuan: Finally, add a view line. Add a view button to this line. It's very simple; but I don't know how to make the shadow of the arc.
🐶1_bit: Little problem, first we need to set the rounded corners and border line properties of this border.
🐶1_bit: Then give the value in the shadow setting.
👸Xiaoyuan: That's it, it's solved.
Three, establish a database and back-end services
3.1 Try to create simulation data
🐶1_bit: Now we start to build the database?
🐶1_bit: Since it is a complete site, there must be a database.
👸Xiaoyuan: Hahaha, I almost forgot.
🐶1_bit: First, we first create an object array for the object. Click on the front desk, find the object number in the lower part of the component bar on the left, click to create it, and name the object value as the resource content.
👸Xiaoyuan: What do you do next?
🐶1_bit: We click on the plus sign, just like Excel, which elements are used to create this column, and what is the type; the first data ID, the type is numeric; and then the data of the matching type is created in turn, and the browse is also numeric. Others are strings.
🐶1_bit: In the above information, the target address is the resource address to jump to after clicking, and the aspect picture is the address of the picture.
👸 Xiaoyuan: I see.
🐶1_bit: Then we can click the plus sign to add specific values to these fields (data IDs are collectively referred to as fields).
👸 Xiaoyuan: Solve.
3.2 Press and use the analog data output page
🐶1_bit: Next, we add a for loop to the result page, add it to the result content row, and put the content block under this for loop creation.
👸Xiaoyuan: Why add this?
🐶1_bit: Because many of our data are similar, you don't need to display them one by one, which is too tiring; you can use loops to repeatedly create content with the same attributes, as long as you modify these title names.
👸Xiaoyuan: I see, I understand.
🐶1_bit: At this time, we click the for loop, click the arrow of the data source in the property panel, and select the value of the object array of resource content.
🐶1_bit: Next, we need to bind data to these specific content values. Next, we click on the picture, select the address of the material as the content generated by the loop, and select the current data 1 in the property panel. This current data 1 refers to the current data obtained after the loop, and then the value is selected as the cover image.
👸Xiaoyuan: The same goes for other data, right?
👸Xiaoyuan: Then I understand. I select the text title, then also select the current data, select the title, and everything else is the same. 😎
🐶1_bit: So have you finished your selection?
👸Xiaoyuan: It's over.
🐶1_bit: Then you can preview it.
👸Xiaoyuan: Hahaha, I output all the values I filled in the resource content.
🐶1_bit: I think there is one more thing you didn't write.
👸Xiaoyuan: What is it?
🐶1_bit: Just click to view to jump.
👸Xiaoyuan: Yes, I really forgot.
🐶1_bit: We click the button, click the event, select the trigger as click in the panel that appears, and select the object as the foreground.
🐶1_bit: Then we choose the action to be performed to open the external link, and then the target address can set the target address of the current data 1.
👸Xiaoyuan: Hahaha, it's out, and you can jump by clicking to view it, perfect.
3.3 Can't wait to create a database first
🐶1_bit: After the simulation data is used up, we need to use the real data.
👸Xiaoyuan: Yes, I can’t wait.
🐶1_bit: Let's create a database first. Click on the background to create a private database to be used as the storage of resource data, and rename it to the resource database.
🐶1_bit: Then click on the field to create a title.
🐶1_bit: Next, create columns corresponding to that resource content one by one. If there are columns that exist by default, you do not need to create them again.
🐶1_bit: Then we continue to add data and fill the value of the resource content array here.
👸 Xiaoyuan: Solve.
3.4 Another key point to create a service
🐶1_bit: Next, we have the data, and we add services to it to read database data.
👸Xiaoyuan: What is the service?
🐶1_bit: The service is the specific back-end logic. What kind of data we want and what kind of data we need to extract all need services.
👸Xiaoyuan: Well, that's how it is.
🐶1_bit: We click on the background, find the service on the right to create it, and change the service name to read data.
🐶1_bit: Then we click on the object in the service list to select the resource database, and the action is output.
👸Xiaoyuan: What do you do next?
🐶1_bit: This is very simple, we select the content that needs to be output in the output column, and then set the specific what to do after reading the data in the completion callback, just select the object as the current service, and then customize the setting value. It's ok; the custom return result directly sets the return content as the output result, and the result is the value of the object array.
👸Xiaoyuan: How can the data be displayed on the front desk?
🐶1_bit: We only need to pass the data when the result page is displayed.
👸Xiaoyuan: You haven't said how to deliver it.
👸Xiaoyuan: The next step is to select the trigger event as click, select the object as the data submission service, and then select the submitted content in turn, is it ok?
🐶1_bit: Yes, and then we set this callback and set it back to the front page of the front desk, and then we can search.
👸Xiaoyuan: Perfect, I tried it and there is no problem, then how can I achieve search?
3.6 Come on! Complete the final search function
🐶1_bit: Of course, it is also to create a service. The ivx service is very powerful. You can complete background operations without coding.
👸Xiaoyuan: I feel it, so what do I do? 😎
🐶1_bit: This step is unexpectedly simple for you. We click to read data, add a parameter in the read data data service, named the search keyword, and then the type is a string, and then the data action will be inserted The selection criteria can be replaced with the title containing the search keywords.
👸Xiaoyuan: That’s it?
🐶1_bit: Of course, some other operations need to be added. We click on the front desk and create a new variable called the search keyword.
🐶1_bit: Then in the foreground, set the content of this search box to this variable.
🐶1_bit: Of course, you need to jump when you click the search button. At this time, just add a jump action to the result page.
🐶1_bit: Then on the results page, find the event; when we call the service action, the parameter we just added for the service will automatically appear, just set this parameter to the search keyword just now.
👸Xiaoyuan: What I added just now appeared in my search test.
🐶1_bit: The remaining functions you want are added by yourself. My project is here. You can directly look at my editing interface to know how I did it.
👸Xiaoyuan: It's alright, pretty good. 😎 😎 😎