preface

I think every time I work hard needs to be recorded by myself, so I came up with the idea of recording what I get from watching videos this month. In this process, I did not escape from problems that I could not solve as before. Although the speed of solving a problem is still a little slow, probably because I have a little axis, this aspect is not feasible and I do not know to change a direction.

There is also in this process, their own experience to a more complete development process. Why is it a relatively complete project development process, because I did not experience to cut the picture interface, I did not even how to write UI interface. The idea is to go through the UI section while I’m writing the documentation. Or go out next year and write business logic as a front-end programmer. What the hell. After reading so much, I’m going to write down some of the things I learned in this month.

You can give it a thumbs up if you find it useful, and if you want to follow the video again, you can follow this link. Don’t worry, even if you buy this course, I don’t have any commission. I just think this course is very good, and the value of the course is greater than the purchase price.

The body of the

I. Project overview

1. The technology stack

vue2 + vuex + vue-router + webpack + ES6/7 + better-scroll + stylus

2. Data interface

There are many interfaces that require a backend proxy. How to do the backend proxyThis blog postAnd the use of all interfaces is for learning. Although said interface to you posted up, but I still hope you can learn to climb others interface. Maybe the back interface fails and you can fix the problem yourself

A. anner graph API

B. Recommended playlist API (RND parameters are generated using math.random ())

C. Playlist details API

D. the singer API

E. Singer details API (SingerMid is obtained from the data returned from the singer API)

F. Leaderboard API

G. Leaderboard Details API (TopID is derived from leaderboard API)

H. Search API (I directly use the teacher’s online API, but still want to do the proxy)

I. Popular Search API

K. lyrics API (pcacheTime is generated using +new Date())

L. Play address API (Songmid parameter is the songmid of the song)

3. The instructions

Open source is not the idea of this project, mainly this project teachers do not open source, we should respect the achievements of teachers.

I will write a series of articles about this project later. If you are interested, you can pay attention to my brief book

In June, I will start to write an audio class of small procedures, compared to a project or their own hand, the interview is more advantageous.

4. Effect demonstration

To view the demo please click here (please preview in Chrome mobile mode) or use the teacher’s address

Recommended page

Singer page

Ranking page

Search page

The user page

6. Project layout

├ ─ ─ the README. Md ├ ─ ─ build │ ├ ─ ─ build. Js │ ├ ─ ─ check - versions. Js │ ├ ─ ─ utils. Js │ ├ ─ ─ vue - loader. Conf., js │ ├ ─ ─ webpack.base.conf.js //aliasHere configuration │ ├ ─ ─ webpack. Dev. Conf., js / / favicon can configure │ here └ ─ ─ webpack. Prod. Conf., js ├ ─ ─ the config │ ├ ─ ─ dev. The env. Js │ ├ ─ ─ index. Js │ └ ─ ─ the prod. Env. Js ├ ─ ─ index. The HTML / / entrance HTML file ├ ─ ─ package - lock. Json ├ ─ ─ package. The json ├ ─ ─ the prod. Server js ├ ─ ─ │ SRC / / source directory ├ ─ ─ App. Vue │ ├ ─ ─ the API / / interface │ │ ├ ─ ─ config. Js / / common configuration │ │ ├ ─ ─ rank. Js │ │ ├ ─ ─ how. Js │ │ ├ ─ ─ search. Js │ │ ├ ─ ─ Singer. Js │ │ └ ─ ─ song. Js │ ├ ─ ─ base / / common components │ │ ├ ─ ─ confirm / / confirm component │ │ │ └ ─ ─ confirm. Vue │ │ ├ ─ ─ dialog / / pop-up components │ │ │ ├ ─ ─ dialog. Vue │ │ │ └ ─ ─ VIP. PNG │ │ ├ ─ ─ listview / / singer list component │ │ │ └ ─ ─ listview. Vue │ │ ├ ─ ─ loading / / load component │ │ │ ├ ─ ─ Loading. GIF │ │ │ └ ─ ─ loading. The vue │ │ ├ ─ ─ no - the result / / no results component │ │ │ ├ ─ ─ no - result. Vue │ │ │ ├ ─ ─ [email protected] │ │ │ └ ─ ─ [email protected] │ │ ├ ─ ─ the progress bar / / progress bar component │ │ │ └ ─ ─ the progress - bar. Vue │ │ ├ ─ ─ the progress - circle/circular progress bar component │ │ │ └ ─ ─ the progress - circle. Vue │ │ ├ ─ ─ scroll / / rolling components (the core components) │ │ │ └ ─ ─ scroll. Vue │ │ ├ ─ ─ the search box / / search box component │ │ │ └ ─ ─ │ ├─ ├─ ├─ ├─ ├─ slider // slide ├ ─ ─ song song list / / components (for music - list component) │ │ │ ├ ─ ─ [email protected] │ │ │ ├ ─ ─ [email protected] │ │ │ ├ ─ ─ [email protected] │ │ │ ├ ─ ─ [email protected] │ │ │ ├ ─ ─ song - list. Vue │ │ │ ├ ─ ─ [email protected] │ │ │ └ ─ ─ [email protected] │ │ ├ ─ ─ switches / / Switch components (user - center components useful) │ │ │ └ ─ ─ switches. The vue │ │ └ ─ ─ top tip / / top tip component │ │ └ ─ ─ top - tip. Vue │ ├ ─ ─ common / / Storage of js, stylus, pictures, small icon │ │ ├ ─ ─ fonts / / small icon file storage location │ │ │ ├ ─ ─ music - icon. Eot │ │ │ ├ ─ ─ music - icon. SVG │ │ │ ├ ─ ─ Music - icon. The vera.ttf │ │ │ └ ─ ─ music - icon. Woff │ │ ├ ─ ─ image / / store logo and the favicon │ │ │ ├ ─ ─ the default. The PNG │ │ │ └ ─ ─ the favicon. Ico │ │ │ ├─ ├─ Cache.js // │ ├─ Cache.js // │ ├─ Cache.js //localStorage │ │ │ ├ ─ ─ config. Js │ │ │ ├ ─ ─ the dom. The js / / processing dom │ │ │ ├ ─ ─ the json. Js / / json encapsulation │ │ │ ├ ─ ─ a mixin. Js / / a mixin │ │ │ ├ ─ ─ singer. Js │ │ │ ├ ─ ─ song. Js │ │ │ └ ─ ─ utill. Js / / throttle function, To generate a random number │ │ └ ─ ─ stylus / / public style │ │ ├ ─ ─ base. The styl │ │ ├ ─ ─ icon. Styl │ │ ├ ─ ─ index. Styl │ │ ├ ─ ─ a mixin. Styl │ │ ├ ─ ─ Reset. Styl │ │ └ ─ ─ variable. The styl │ ├ ─ ─ the components / / component │ │ ├ ─ ─ the add - song / / component │ │ │ └ ─ ─ the add - song. Vue │ │ ├ ─ ─ disc / / component │ │ │ └ ─ ─ disc. Vue │ │ ├ ─ ─ the m - the header / / head component │ │ │ ├ ─ ─ [email protected] │ │ │ ├ ─ ─ [email protected] │ │ │ └ ─ ─ m - the header vue │ │ ├ ─ ─ Music - the list / / song list components (using more) │ │ │ └ ─ ─ music - list. Vue │ │ ├ ─ ─ player / / play components (core components) │ │ │ └ ─ ─ player. The vue │ │ ├ ─ ─ playlist / / play list component │ │ │ └ ─ ─ playlist. Vue │ │ ├ ─ ─ rank / / ranking component │ │ │ └ ─ ─ rank. The vue │ │ ├ ─ ─ how / / recommend component │ │ │ └ ─ ─ How the vue │ │ ├ ─ ─ the search / / search component │ │ │ └ ─ ─ search. Vue │ │ ├ ─ ─ singer / / singer component │ │ │ └ ─ ─ singer. Vue │ │ ├ ─ ─ Singer - detail / / singer details component │ │ │ └ ─ ─ singer - detail. Vue │ │ ├ ─ ─ suggest / / the list of input search content appears │ │ │ └ ─ ─ suggest. Vue │ │ ├ ─ ─ the TAB / / Routing switch component │ │ │ └ ─ ─ TAB. The vue │ │ ├ ─ ─ top the list / / list details component │ │ │ └ ─ ─ top - list. Vue │ │ └ ─ ─ the user - center/center/user component │ │ └ ─ ─ User-center. vue │ ├─ main.js // │ ├─ ├─ class.js │ ├─ class.js │ ├─ class.js │ ├─ class.js │ ├─ class.js │ ├─ class.js │ ├─ class.js │ ├─ class.js │ ├─ class.js // Set up getters │ ├─ index.js Create store │ ├ ─ ─ mutation - types. Js / / define constants of muations │ ├ ─ ─ mutations. Js / / configuration mutations │ └ ─ ─ state. The state of js / / state └ ─ ─ the static └ ─ ─ logo. PNGCopy the code

conclusion

In fact, in the end, I did not expect that I would finally finish this project. I may have set the goal too high before. Stick to a goal that you can accomplish. My classmate asked me to finish learning VUE in a month, but my learning ability is not enough to finish learning, this goal is not finished by myself. Then you should change your goal, say you can learn VUE in a month and a half by yourself. Instead of setting yourself a goal that you can’t achieve, it’s easy to give up when you think you can’t achieve it.

Giving up is easy, but holding on is hard. And the one thing you decide to do, don’t give up at the first sign of difficulty. Running away is easy. Tackling it is a brave act. The more times you avoid a problem, the less likely you are to do it well in the future. Think about why they don’t do anything well, because they can’t carry things when they are difficult, so when they are adults, they basically can’t do anything. (This quote comes from Feng Da).

I hope I can face up to the difficulties in the future. Vegetable chicken also has an eagle dream.