Project
Project Address: HTTPS: //github.com/k-water/Co ...
apart from anything else, first put the code, which is a practice vue project study, which used the basic thing when it comes to the Internet, and what vue family bucket ah, of course, this is the first attempt, there may be a lot of imperfections, exhibitions, please point like a Star, to mention one issue or something (funny face serious ~)
Due
This project is a personal project, the main function is to implement a web version of the address book, basic functions
Additions and deletions to change search contacts
Contact group
Import and export of contact information
Well. . . .
Why this project generated it?
In fact, what you want is a practiced hand, because there is no practice experienced a complete project, coupled with what they learn, practice is feeling just do not learn anything, because in practice, you can look at the document stepped seen less than a lot of the pit (of course, maybe his sometimes short-circuit, resulting in wrong, funny quack)
above based on the coding so he started this project.
Snail
The project lasted for quite a long time, with their own written off, probably more than two months, I am embarrassed to say ...
probably from the beginning of the winter vacation, then just started learning vue, saw a few days after the document began with handwriting, experience a 从0到1的过程.
Of course, after doing now I feel it is pretty cool.
The first commit
Page layout
based on doing a directory, then the first question beginning of page layout design, because I know that their aesthetic and design capabilities, so I looked online, and finally imitate google contacts layout.
There is a problem, when I write a page, if you do not know how the layout of the color, I will be a headache, so the first step is to find a mimic.
Then, he probably ... long like this (I know you want to Tucao)
A Brief History of bitterness
ah, then, began to write a background is not supported, pure front-end, and then their own mock test data, is currently experiencing a lot of pits in the process of writing, tangled for a long time, ask the brothers, eventually resolved , but which really want to laugh and to cry, he stayed behind to say.
During the winter holidays, I finished writing the business logic and the front page of the test, after school, I want to "do something", and that has no contact with the front end of the background is not so cool, so started to write the interface background, I chose JAVA.
Since I was the front vue-clibuilding project, then I do not want to mix foreground and write, so I chose to separate the front and rear end (I do not know what to do is not, wrong please correct me), provides the interface background, front-end for data rendering.
Google and ask yourself after senior, decided servletto deal with the request of the front, so, here began servlet learning, (almost boring). After writing a few demo, I feel feasible, it is a movement into the project.
Loris is not, before this, there is a problem, the data storage ah word brother. So to use the database, I chose MySQL.
Hey, I began to learn sql statement.
It followed by integration testing, various tests, a variety of fill hole ....
Project structure
front end
Above, it seems that a lot of nonsense, talk about the structure of this project, technology is mainly used in the front end of vue family bucket
view
vuex
view-cli
view-router
view-resource
element-ui
Which used the page switching router to achieve, on router, official documents also described, of course, may some respects is not very clear, but the problems encountered online issue have mentioned, stackoverflow there are corresponding questions and answers, no problem, here is a simple application.
Data management uses vuex, she did not learn vuex when data are independent components that communicate to his son a little difficult sometimes want, but ultimately through more complex ways, want to see, you can roll back in my github above commit, then learn vuex still feel Bang Bang clatter. vuex is a one-way data flow, all the data are present in the store, not much talk here, and I say well, ha ha ha.
Then the data request is vue-resource plugins, mainly used the get and post, of course vue official recommendation now is axios.
UI which also applies hungry it's component library, save a lot of things, of course, it also takes energy to learn, after all, slag slag understanding of this framework is not deep enough.
The directory structure is the following Jiang Zi
Then I do not know what to talk about, what problems are welcome to communicate with me to explore.email：[email protected]
Backstage
There are aspects of the background with
JAVA
MySQL
Servlet
MySQL is mainly used to store data, there are two tables, when I designed a store contact information for other storage groups.
Servlet used to request the main reception, and processing returns relevant data, tomcat do back-office services.
Ah, the background is not talked about too much, he is also new to the project is structured as follows:
Show
Here put on projects address
https: //github.com/k-water/Co ...
Online Presence: http://119.29.151.195/contacts/
your own experience of it, I will not put a plan.
Well, here to talk about my experiences and bug repair process.
Like you can read on.
bug experience
Practice can be a bug, this sentence is correct.
In the beginning, new to vue thought, I feel pretty good, very convenient two-way data binding, the wording is very simple, in love with him.
So, the first pit is about two-way data binding. Here is my story
Two-way data binding
In the Add Contact this component, I wrote a form form, and the binding data with v-model, all data on an object that is this.forminside.
Then this form is global, let us say, I add, modify this form should be used when the data inside.
At first, I was very naive, directly find the corresponding data, and then assign him to a temporary variable, similar to the following
this.tempObj = this.formThen add, modify, when there is a problem, what is the problem?
All data have been updated to be the last modified data, look at the time ignorant of the force.
This point toss me a long time is not it, finally figured out.
First of all, this assignment in the past, the code phrase above, just 对象cited, the MDN relevant explanation, still follow the original this.formcan not get away, which is the only object here 浅拷贝, plus vue data is two-way binding, so , you know it.
You modify the time, vue detects a change in your data ( vue用的是Object.defineProperty()), the corresponding data will be updated.
At that time, I wa bang started to cry, (kidding)
actually solve also some reference to the above method, since the direct assignment is a reference that is a shallow copy, then we use a deep copy of her original one that object does not matter on the line , and this will solve the problems of data updates, as follows:
Toss this thing for a long time, almost a week and realized his basic JavaScript is not solid, the final settlement is still quite happy (in spite of himself).
================================================== ============
funny dividing line
bug encountered in the process or find many, here outlined his own deeply impressed, others not anything in detail.
Where there is still a toss story servers, and it is quite interesting, I learned a lot, at least on the server and a preliminary understanding, are interested can find me talk.
to sum up
Finish this project, in which the process was quite difficult, after all, learning by doing, but in the end to complete or very happy, finally has a process from the project 0-1. Although only a small practice hand project, but for now I feel good.
I hope I can continue to refuel, hope you can give a star.
Finally, thanks to this process has been enthusiastic to help me answer a senior, I have been harassed ah, ha ha, thanks!
This is the brother of Github , very fast hardware oh.