NUXT + AXIOS Solution Sample Code SepaR

Background: Because backend programs are usually not particularly good, the JS is not particularly good, the usual development model, the UI gives the static HTML to the program, the program is developed, and the static HTML is often turned to dynamically often There will be a variety of styles of disorder, and to cater to the three-day variant of the previous day, it is determined to separate with the front and rear ends. Considering the promotion of the website, you must do SEO. The front end frame selects Vue, solving the SSR to select nuXt.js, this is the background.


1. Install NodeJS
2, install Vuejs
3, install Vue-CLI
4, install nuXT

Second, create nuxt project and configure


find one you like directory as your workspace, use the command to create nuxt project


1. Creating a project

In this directory, the SHIFT is right-click, enter the command line

Perform the creation command: Vue init nuXT / Starter [firstVue] firstvue is the project name

The following will make the confirmation item name, project description, etc., because the project name does not support uppercase, I have modified it during the creation process, eventually the following picture

nuxt+axios解决前后端分离SSR的示例代码 2, execute install

After the completion is created, enter the directory, perform NPM INSTALL, download all dependencies, this process According to the network environment, it may take a few minutes, you can have a cup of tea on a toilet. As shown in


nuxt+axios解决前后端分离SSR的示例代码 3, after execution, use IDE (personal because it needs Java development, I like to use Idea, plug-ins) Open, the project catalog is shown in Figure


nuxt+axios解决前后端分离SSR的示例代码 4, running

Use the terminal command line that comes with the IDEA, performs NPM Run DEV, waiting to start success, if not reported, visit http: // localhost: 3000 , The following picture, the project is created


Third, with AXIOS to solve the SEO

nuxt+axios解决前后端分离SSR的示例代码
1, Open Index.Vue, for cleaning, retaining template content is as follows

Note: The section tag and container here must remain The content will not be rendered.


You may have noticed that there is an API.js here, all of my interfaces, and the AXIOS configuration are all here, providing the unified configuration of the API, focusing on these two files.

1 ️⃣, INDEX.VUE’s script in the script, this configuration is called before the page rendering, the rendered data can be rendered with the returned data

2️⃣, API.JS, more than good, show code nuxt+axios解决前后端分离SSR的示例代码

Import AXIOS from ‘Axios’Import QS from’ qs ‘// AXIOS Configuration 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 MEQUEST.USE ((( CONFIG) => {IFCONFIG.METHOD === ‘POST’) {config.data = qs.stringify (config.data)} Return config} (ERROR) => {RETURN Promise.reject (error)} // Return Status Judgment 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)}}}}}}}}} Overview information * / getads (params) {Return Fetch (‘/ API / AD / queryads’, params)}}}} Params) {Return Fetch (‘/ API / Area / Getall’, Params)}}



3, the setares in Index can be returned at the console output. The page rendering is as follows

This may look at the mess, see the source code
   
At this point, the page source code can be viewed to the data returned by the server. At this point, the SSR problem has OK
Source code

The above is the full content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment