Starting from scratch using VUE-CLI to build a simple music website (ii)

1, using Vue-router to achieve page jump

After the program can run normally, we need to configure the route to implement the local refresh of the page, this function will be used to implement the site page jump.

Open the program directory and go to "src\router\index.js", and you can see that the program has configured a route and its associated components.

This introduces "Vue-router" and creates a new router object with an routes property in it, an array of objects. Each object of the routes has the following properties:

Path: Indicates what path the program currently needs to render, "/" as the default path, that is, when the program is opened.

Name: This is designed to use Vue-link, when the page is set up with the Vue-link tag and the To property specifies a name, it will match the name value here to specify the route of the jump.

Component: The component used to render the page, where the HelloWorld component is used.

Is Vue.app, the above router-view is used to render the page, the rendering rule is, according to the program's current path, such as now "localhost:8080/", will call the name "Hello" route, The HelloWorld component is selected based on its component property, so Router-view is rendered as a Src\components\hellowordl.vue component. As for Vue-link, because the Vue-link function is to jump, compiled in fact, the equivalent of a tag, to the property is also equivalent to the href of a tag, so by setting its to property, you can choose different routes, so that the Router-view rendering into different components. Here is an example of my project:

Vue.app

Router\index.js

The Vue.app page has three vue-link,to properties that point to three different addresses that match the name in Index.js, and when the user clicks on the corresponding Vue-link, the page address changes, and the corresponding route responds, finding the phase based on the component value defined by the route And then render the Router-view in Vue-app to achieve the effect of a partial refresh.

2. Use Vue-resource to return the JSON data in the background and get

First modify the Dev-server.js in the build directory and add the following code:

Here Musicdata.json is a data I wrote, will be used to return to the front page, the following is the Musicdata.json data:

Each time you modify the JSON data, or the contents of a file underneath the build directory, you need to re-execute the npm run dev command. JSON data before using it is best to check whether there are errors, there are many online testing tools, or the project can not run. Continue to look at the code added in Dev-server.js, assign the requested JSON file to AppData, then get the data in it and assign the value to MUSIC01. The request path and the successful callback function are then set using the Get method provided by the router object under the Express module. Finally App.use ('/api ', apiroutes) indicates that this path is used to provide data, and when we visit "/api/musicdata", we will return the Musicdata data to us.

Reference Blog: http://blog.csdn.net/weiweismile123/article/details/70210934

Here is the page to send the request and then get the data and use, Mainpage.vue (the main page of the project):

In the created phase (a more detailed article on the Vue life cycle, you can view the blog: 1190000008010666) send a GET request, the address is a defined "/api/musicdata", and then call its then method, which is used to execute the callback function, Using the obtained response data, the above example assigns the Response.body.data to This.music01,template using the returned MUSIC01 object data: , the MUSIC01 under the Coverpath (music cover path) assigned to SRC, open the browser to view the results, has successfully read the data.

One thing to note here is the problem with the path to the page. Because music contains data such as MP3 and pictures, Vue provides a static folder for us to store static resources, so that when our project is deployed to the server, the static resources that are dependent on the project are not invalidated. So put the picture and music files in the static, and then the JSON data in the "Coverpath" set to "/static/data/cover/(Original Version). jpg", so that the data can be obtained successfully.

Starting from scratch using VUE-CLI to build a simple music website (ii)