Project Summary and Project Summary

Project Summary and Project Summary

I have prepared spring tricks recently. I can summarize my previous internship experiences as follows. Let's summarize the problems encountered during the development of the space.

I. background

To be honest, the technical content of developing this website is actually quite low. Both the frontend and backend are entry-level. After all, at that time (in September 2015), I was just getting started with the front-end, and I would just cut the graph. JS could only do some simple DOM operations, it is difficult to draw a focus chart scroll component by hand. The front-end of the website is mainly built by the Bootstrap + jQuery framework in the early stage. Because it is relatively brainless and simple, refer to the Bootstrap example and the domestic copy sections to copy the code, it is easy to make a page that looks like "Internet.
Later (October), the backend partner I worked with said that I didn't want to continue, so I contracted all the development tasks of the website ...... At this time, I think that my understanding of web development has increased to a level, HTML and CSS are almost the same, JS can also be a simple module, Ajax is to bring me into another world. I think the website is too simple, and the interfaces and implementation methods designed by the backend partner are in conflict with my ideas. So I made a bold decision: refactoring back-end code.
Here, we have to say that CodeIgniter is a beginner who can get started quickly. On the one hand, its documentation is very friendly to beginners, and more importantly, it is really brainless to use !! It is an MVC Framework and complies with the RESTUL style. All I need to do is fill in some business logic under the Framework (basically adding, deleting, modifying, and querying databases ).
As a result, the website has already reached a certain scale, and the number of registered users has exceeded 100. The average daily PV can barely exceed 200. BOSS said that he would like to join the payment module, however, I have never done this before. To ensure the security and reliability of the entire transaction process, I think it is still beyond my current level. In the end, I left the company after half done in the payment system.

Ii. Problems

Next, we will analyze the problems encountered during website development and the solutions, which are limited to the level. The problems may not be considered a problem in the eyes of others (SAD ).

1. frontend and backend Separation

Although CodeIgniter is suitable for developing RESTFUL APIs, due to its limited level at that time, the front and back ends are not separated. Generally, a view is directly loaded in the Controller, directly using PHP to output data to the DOM in the view is brainless.
At the beginning, there was no problem because the front-end was dominated by static pages. But as the project grows, more and more places will need to use JS for interaction. I will not use JS to find data in the DOM.
The best way is to accept background data through Ajax requests, while I am more crude and output data directly in JS:

1 var raw_data = '<?php echo json_encode($data_array); ?>',2     data = JSON.parse(raw_data);

Of course, this synchronous data transfer method is not wrong, and can reduce the number of requests, but does not meet the requirements for front-end and back-end separation. One of the reasons that prevented me from completely separating the front and back ends is data transmission between pages. Before the separation, data transmission between pages was completed in a unified way through PHP. After separation, data can only be transmitted through URLs or cookies. For example, the following code transmits parameters through urls:

1 function getDataFromURL () {2 var url = location. href, 3 queryString = url. replace (/^ [^?] *\? /Ig ,''). split ('#') [0], 4 queries = {}; 5 queryString. replace (/([^ & =] +) = ([^ &] *)/g, function (match, key, value, input) {6 key = decodeURIComponent (key); 7 value = decodeURIComponent (value); 8 if (! (Key in queries) {9 queries [key] = value; 10} else if (Array. isArray (queries [key]) {11 queries [key]. push (value); 12} else {13 queries [key] = [queries [key], value]; 14} 15}) 16 return queries; 17} 18 // suppose my current location. href = 'B .html? Name = alpha & sex = male '. After executing the above function, we will get: 19 {20 name: 'alpha', 21 sex: 'male' 22}

2. upload images and large files

Because the website needs to display the site, users must upload a large number of high-definition images, which requires certain transmission of images.
In the beginning, the form was roughly used for direct submission:

1 <form method="POST", action="action.php" enctype="multipart/form-data"></form>

The result is that if the uploaded image is large, you have to wait for a long time and have no idea about the upload progress. After the upload is complete, you can directly jump to another page, you cannot upload multiple images on the same page. As a result, the entire upload process has no user experience.
The later improvement solution is to introduce a third-party plug-in AjaxFileUpload, which solves the problem of multiple uploads on a single page and can directly load the image after the upload is complete, but the progress is unknown. Therefore, I think it is necessary to write an upload tool that can display the progress.
Most of the upload progress bar plug-ins on the Internet use flash, while HTML5 supports FormData objects. Therefore, you can use FormData to upload files through Ajax to slice the files. The related code is already on github.
In fact, I calculated the upload speed through [upload speed = Part Size/Ajax request sending and callback time difference], so this is actually a pseudo speed. For small files, the progress is not smooth enough.

3. Site Management

The logic of site management is as follows: the user fills in the site information and submits it to the Administrator for review in the background. If the review is approved, the site information will be published directly on the website. If the review fails, the user needs to modify the site information, site users who pass the review can also modify the site information, but must review the information after submission.
Because users who pass the review can also modify the site information, in order not to affect the published site, this requires the establishment of two tables space and space_tmp, store the site information that passes the review and the site information that is being reviewed or failed. All audits are completed in the space_tmp table. The space table only copies the corresponding site information from the space_tmp table to the space table when a certain site in the space_tmp table is approved, read Only.
Another problem is the storage of site information, such as the activities suitable for the storage site and the type of the venue. I did this:

Obviously, this will cause a lot of redundancy, and the database will increase a lot of unnecessary volume. Because the activity type and site type are fixed, it would be better to create a special activity table and type table and then join them.

4. Site Search

I am very ugly about the field search algorithm. Here, I want to talk about the problem of delayed loading of resources. The following is the main code used for delayed loading:

1 // container is the jQuery object, containerHeight is the container height, and threshold is the threshold value of 2 container. scroll (function () {3 var scrollTop = container. scrollTop (); 4 var scrollHeight = container [0]. scrollHeight; 5 if (scrollHeight-(scrollTop + containerHeight) <threshold) {6 // getNewData7} 8 })

There are many confusing values here. First, let's look at the attributes of JS native. (The following tests are based on Chrome and box-sizing is content-box. The width of content is the value of width ):
Client-related values include clientWidth, clientHeight, clientTop, and clientLeft. clientWidth includes content and padding, excluding border. If a scroll bar exists, the width of the scroll bar is reduced to 15 PX ). ClientTop is actually the value of border-top-width (excluding the Unit ).
There are also four offset-related items. offsetTop indicates the distance between the outer side of the element border and the inner side of the located parent container border. offsetWidth indicates the sum of border, padding, and content.
There are also four values related to scroll. Among them, scrollWidth is clientWidth plus overflow width, and scrollTop is the height of the volume above the scroll bar.
In jQuery, more attributes and methods are displayed.
The scrollTop () method is essentially no different from the native scrollTop method. The offet () method obtains the position of an element relative to the document and returns left and top.
In addition, there is a js native method getBoundingClientRect (), which obtains the distance from the DOM element to the visible range of the browser (excluding the section rolled up by the document) and returns an Object, this object has six attributes: top, lef, right, bottom, width, and height. The top, left, and CSS attributes have similar understandings, width and height are the width and height of the element, but the understanding of right, bottom and CSS is a little different. Right refers to the distance between the right boundary of an element and the leftmost of the window. bottom refers to the distance between the bottom boundary of an element and the top of the window. This function has better compatibility.

Iii. Summary

In short, through this project, I have truly entered the front-end pitfalls. It is still commemorative. Although the entire website does not seem to have any bright spots, after all, it is done by one person from start to end, so it is a kind of physical activity.
Ya space is still quite promising, but it has been a whole year since I left, and the website does not seem to have any improvement. The big framework is the one I set up earlier, it seems that there is still a shortage of people.
It's easy to write. It's just a diary.