I am 3Y, a markdown programmer with one year CRUD experience and ten years’ experience 👨🏻💻 known as a quality octuan player all the year round

Spent a few days to build a background management page, today to share my building process, the full text of non-technical, when you blow water.

1. My front-end technology

Regular readers may know that I didn’t learn about programming until I went to college. Before that, I knew nothing about programming, even after I applied for the computer major, I never knew what it did.

In the first semester of my freshman year, I remember only offering a C++ programming course (the rest were all math). Well, of course, I don’t understand it, and I don’t know what it’s for.

When I first entered the university, I was full of unknowns and naturally wanted to play in several clubs at that time. But I couldn’t find my area of expertise in any of the clubs, and the deadline was almost up. I didn’t want to join any clubs in college, so I signed up for two: the table tennis club and the computer association.

Most of the computer society’s staff came from computer science majors. It was later discovered that the society’s main job was to “reinstall systems” for people, but that’s another story.

At that time, we had to meet certain conditions to join the computer association: our senior brother gave us a “website” and asked us to study there. After the National Day, we would check our learning progress and decide whether we were qualified to join.

That website is actually an introduction to HTML/CSS/JavaScript, it is a foreign website, I must have forgotten the exact address. But at that time, our country is idle also have nothing to do, so began to learn. I was probably at the point where I learned about CSS, simple page layouts and displaying images

At first, it was interesting: WHEN I changed the code, the color of the font changed and the image was displayed. The website that I get online at ordinary times is so come out! (much more interesting than C++)

After the National Day came back to find: assessment what is not important, as long as the registration will pass.

With a basic understanding, I didn’t pay much attention to it and didn’t keep learning. Later, I was so bored that I began to think about finding a job after graduation. I had to enrich myself in college, so I began to search various answers in Zhihu “how to start programming”.

After searching various routes in Zhihu and wasting a lot of time, I finally started watching video introduction. After I finished the JavaSE foundation, I remember that I was watching Teacher Fang Lixun’s introduction to JavaWeb, and after the front-end course, I felt that front-end HTML/CSS/JavaScript should be supplemented, so I went to find resources to learn (at that time, I believed in skills more than pressure).

The impression is to see The teacher Han Shunping’s HTML/CSS/JavaScript, at that time hit the code stage, I see a leng leng (IDE is not needed). As I learned, IT seemed that I still needed to learn AJAX/jQuery, so I went back to looking for resources, but I had already forgotten which teacher taught AJAX and jQuery.

In the process of learning, I once used pure HTML/CSS/JavaScript to imitate a certain website with the video, and made a variety of rotation graphics animation when learning jQuery. You also understand the difference between margin and padding. When I was about to graduate, I would also click BootStrap to write a simple page.

When I joined the company, the front and back ends of the technical architecture were separated. Although I pulled the front-end code, I could not understand it, and I did not learn it during the process. So much so that I didn’t touch the front end for over two years, and I was in awe of it.

2. AUSTIN front-end selection

From the moment I planned to write the Austin project, I knew I was going to write a “back office page”, but I put it off. On the one hand, I think the “back end” is my track, on the other hand, I really don’t like the “front end” and don’t want to fight.

I have thought about finding a friend to help me write, but I was soon denied by myself: I still have to give a friend demand, forget it.

When I was faced with the front end, my first thought was that there must be a framework for building a management page quickly. I don’t know myself, but someone in my circle of friends must know. So I asked for help:

I’ve been given a lot of frames by Amway, just to list the ones with high attendance.

Note: MOST of them I just glanced at, not studied. If there are any mistakes, leave a comment in the comments section and spray lightly

2.1 renren – fast

Official website: www.renren.io/guide#getdo…

The framework is separated from the front and back ends, which can also generate the corresponding CRUD code, and the front end is based on VUE and Element-UI development.

I was kind of thinking about it at the time, but considering I needed to deploy another backend and learn some VUE, I put it on hold

2.2 RuoYi

Official document: doc.ruoyi. VIP /ruoyi/

RuoYi also gives me a lot of amway, this seems to be very popular recently? I feel like I’ve been recommended, and I see it everywhere.

I briefly scanned the document and felt that it did more than Renren-Fast, and the document was complete, but I couldn’t find what I was looking for: I opened a document and I expected to see its system architecture, interaction between systems or something at the architectural level, but I couldn’t find it quickly.

A complete and complex program may not be a good thing for me, and may well mean that my learning costs will be higher. So, I also put aside.

2.3 the Vue related

vue-element-admin

Panjiachen.github. IO/vue-Element…

Vue Antd Admin

IO/vue-ANTD-ad… iczer.gize. IO /vue-antd-ad…

Ant Design Pro

The official document: pro.antdv.com/docs/gettin…

The rate of recommendation of these projects is also very high. From the introduction of the first line, I basically know that I need to learn the grammar of Vue, but I am too lazy and put it on hold.

2.4 layui

Several people have recommended Layui to me after hearing that I know jQuery. I thought I had heard of this framework before, but never understood it. However, when I found it, it was no longer maintained

GitHub address: github.com/sentsin/lay…

I’ll take a quick look at the documentation. Actually, it has a corresponding set of “grammars”, which requires some learning cost, but is not high.

The first impression is similar to the BootStrap I wrote before. I don’t like it very much. I feel that if I want to access it, I still need to write more codes by myself.

2.5 other

And small partners or recommended I see articles recommendation: x – admin/D2admin/smartchart/JEECG – BOOT/Dcat – admin/iview – admin, etc., etc., in there was still something depends on PHP/Python

Overall, I still feel that these frameworks have a certain learning cost (I’m extremely lazy). Maybe I need to deploy the back end, maybe I need to learn the framework syntax of the front end, maybe I need to learn Vue

In case you’re wondering what I ended up choosing as Austin’s front end, I’ve already sifted through so many. Before Posting, I want to say this: If you want to look good and be flexible, you have to learn Vue. Many of the frameworks I was recommended for were vUe-based changes, and I’m pretty sure there were plenty of vUe-based and useful backends I didn’t know about.

Note: I’m referring to people like me who don’t know the front end (if you already know the front end, you can say anything right)

AMIS framework

I ended up with Amis as a front for Austin. This framework was recommended by only one of my friends in my moments. When I opened the document for the first time, it really surprised me

IO /amis/ zh-cn /…

It’s a low-code front-end framework: Amis renders json into its React component

It took me half a day to skim through the documentation and get a rough idea of the JSON structure (which, to be honest, is pretty good), then I went to GitHub and found a template and started straight away. The readme was pretty short.

GitHub:github.com/aisuda/amis…

Another benefit of this front-end low-code tool is that you can use the visual editor to drag and drop JSON code, and then paste the generated code directly to your own location, which is really quite convenient.

Aida.github. IO /amis…

4. Feel the use

There’s really nothing to talk about, just dragging around to get a page and then looking at the document when you call the API.

In this process, I also went to see the evaluation of this framework, found that baidu internal many systems use this framework to build pages, but also see Bigo has online use of this framework to build background. With tier 1/2 companies using the framework online, I don’t think it’s a problem.

In general, I did not spend much time on the actual coding of Austin background this time. I was changing JSON configuration and checking documents. I arrived at the library at 2pm on Saturday, set up a new GitHub repository, built a rough page before the library closed at 6pm, and then worked on it during my spare time on Sunday and felt it was ready to use

Austin-amis Warehouse address: github.com/ZhongFuChen…

The irony of the Amis low code framework during construction is that it is inflexible. The return value of our interface needs to conform to its body structure, which becomes extremely difficult to handle when we have nested JSON, forms cannot be echoed with expressions, and so on.

It’s not perfect and will probably require me to compromise with some strange postures, don’t ask me why the interface returned with a layer Map

Anyway, it didn’t take me much time to put together a readable admin page (CRUD is ready)

5, summary

At present build good front end can use, also can use a little bit, will gradually improve its configuration and function behind. I have the function of link tracking behind, certainly in the background to provide the data after cleaning to the background for query, but it will not spend a long time to talk about the front end of this matter.

I’ve always positioned myself on the back end of the code, as far as the front end I can learn, but I don’t want to. I don’t know. Maximize your profits. I might have benefited more from spending my preschool time on the back end. The front and back ends are basically separated now, and I don’t get much opportunity to write the front end at the company.

The next post will most likely be on distributed timing task framework. I found my progress is ok, so I should have no problem getting a 4.0 this quarter.

Now that you’ve seen it, a “like” is not too much, is it? I’m 3y. See you in the next video.

Follow my wechat public number [Java3y] in addition to technology I will also talk about some daily, some words can only say quietly ~ [line interview + write Java project from zero] continuous high intensity update! O star!!!!! Original is not easy!! Three times!!

Austin project source code Gitee link: gitee.com/austin

Austin project source code on GitHub: github.com/austin