Nuxt + axios solves the sample code for front-end and back-end SSR separation, nuxtaxios

Nuxt + axios solves the sample code for front-end and back-end SSR separation, nuxtaxios

Background: Because back-end programmers generally do not have a good grasp of CSS and JS, the general development mode is that the UI provides static html to programmers, when static html is changed to dynamic, various style disorder often occurs, and the style requirements must be met by the superiors three times a day. Therefore, the front and back ends must be separated. Taking into account the promotion of the website, SEO must also be done. The front-end framework selects VUE to solve the problem of SSR. By the way, nuxt. js is selected, which is the background.

I. Preparations

1. Install nodejs
2. Install vuejs
3. Install vue-cli
4. Install nuxt

2. Create and configure a nuxt Project

Find your favorite directory and use the command to create a nuxt project as your workspace.

1. Create a project

In this directory, right-click shift and enter the command line

Run the CREATE command: vue init nuxt/starter [firstVue] firstVue is the project name

The following will confirm the project name, project description, and other information. Because the project name cannot be capitalized, I modified it during the creation process.

2. Run install

After the creation is complete, go to the directory and execute npm install to download all dependent items. This process may take several minutes depending on the network environment. You can have a cup of tea in the toilet. As shown in

3. Use IDE after execution (because I need to develop java at the same time, I like to use idea, and the plug-in is more convenient) to open the project directory.

4. Run

Run npm run dev with the command line provided by idea and wait until the startup is successful. If no error is reported, access http: // localhost: 3000. The project is created.

3. Work with Axios to solve SEO Problems

1. Open index. vue. For more cleansing, keep the template content as follows:

Note: The section label and container must be kept here. Otherwise, some content cannot be rendered.

You may have noticed that there is an api. js. All of my interfaces and the configuration of Axios are provided here. The unified api configuration is provided, and the focus is on these two files.
1 Tib⃣AsyncData in the index. vue script. This configuration is called before page rendering, and the returned data can be used for rendering the page.
2 cores⃣, Api. js, more useless, show code

Import axios from 'axios 'import qs from 'qs' // configure axios for axios. defaults. timeout = 5000axios. defaults. headers. post ['content-type'] = 'application/x-www-form-urlencoded; charset = UTF-8 'axios. defaults. baseURL = 'https: // api.nashi8.com/'// POST parameter serialization axios. interceptors. request. use (config) => {if (config. method = 'post') {config. data = qs. stringify (config. data)} return config}, (error) => {return Promise. reject (error)}) // returns the status of axios. interceptors. response. use (res) => {if (res. status = 200) {return res} else {return Promise. reject (res) }}, (error) =>{ return Promise. reject (error)}) export function fetch (url, params) {return new Promise (resolve, reject) =>{ axios. post (url, params ). then (res => {resolve (res. data )}). catch (error) =>{ reject (error)} export default {/*** get ad information */getAds (params) {return fetch ('/api/ad/queryADs', params)}, getAreas (params) {return fetch ('/api/area/getall', params )}}

3. Call getAreas in index to output the returned results on the console. Page rendering is as follows:

This may look messy. Check the source code.

At this point, the source code of the page can view the data returned by the server. At this point, the SSR problem is OK.

Source code download

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.