series

  • [juejin. Cn/post / 684490…]. Vue-admin detailed note, must be hand-held project series (1)

  • [juejin.cn/post/684490… vue-admin detail note, must do the project series 2 hand in hand

  • [item address github.com/whylisa/vue…]

preface

  • Series 3 will take the project we’ve written and put it on the server, simulating the backend connection
  • We’re going to put it in PHPStudy, so it’s easy to understand. [phpstudy.php /]
  • In series three, we’re going to look at what’s wrong with putting it on a server, and then fix it.

The use of phpstudy

  • After the download is unpacked, we will go to the WWW directory and put our packaged vue file into the WWW directory
  • Then we launch phpStudy and you will see the following interface

  • The page is successfully started

All kinds of error

  • And then when we type localhost/dist in the browser, we get an error, wrong path, no CSS /js file
  • Because we configured assetsPublicPath: ‘/’ in the config/index.js file when we packaged it with WebPack, which is the default.
  • All we need to do is change it to assetsPublicPath: ‘./’
  • After that, we reenter localhost/dist, and we can access it normally
  • Then we click login, but there is no response. The console reports an error as follows:
  • The error message shows that we did not start the interface service, then we start the interface service: [image]
  • The error message 404 above is an image of the main project login page. We can see in the console that the image path and the interface are both wrong.
    • The error with the image is that when phpStudy accesses the address, the default is localhost/static/—–, and static is in the dist directory, so we need to add dist.
    • In “Picture 1”, we directly in the phpStudy “other options menu”, select “phpStudy Settings”, “port general Settings”, “website directory” added a dist, so to solve this problem, (ps: here only do simulation demo, We deal with it rather than scratching our heads.)
    • In “Picture 2”, we do not use the local agent, because proxyTable{} in the official document can only be used in the development environment. At this time, we directly change the address of all our interfaces to solve this problem, and we can log in normally. At the same time, we can configure the Axios interceptor in main.js to make it easier for us to write such long urls. (See series 1 and 2 for details) Here “Post a Code Example”
  • Picture 1:
  • Picture 2:
  • Post a code example

// Bind the Axios object to the Vue prototype
Vue.prototype.axios = axios

// Configure the interceptor to axios

// Add a request interceptor.
// You can get the axios configuration in the interceptor and modify things in the Config
axios.interceptors.request.use(function (config) {
  // What to do before sending the request
  // console.log(' ha ha, I intercepted the request ', config)
  // Configure baseURL and headers for config
  config.baseURL = 'http://localhost:8888/'
  config.headers.Authorization = localStorage.getItem('myToken')
  return config
}, function (error) {
  // What to do about the request error
  return Promise.reject(error)
})
// Configure the axios pass configuration
// axios.defaults.baseURL = 'http://localhost:3000/login'
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
Copy the code
  • So we can happily simplify our request URL as follows:
          // Send the Axios request
          const res = await this.axios({
            method: 'post'.url: 'login'./ / write directly login without having to write http://localhost:8888/login, because we had baseURL configuration
            data: this.form
          })
Copy the code

conclusion

  • The author originally wanted to use PHP to write interface, but the time is a little busy, can only wait for the follow-up…
  • This template project is not a lot of pages, we understand the infrastructure, in fact, the back is brick, whether it is responsive, or add some effects, or use H5, C3, etc., this depends on the project requirements, you will be 1, after 0 you have spectrum, that you have to refuel.
  • At the same time, project optimization, we can do some AXIOS encapsulation, components of various extraction and so on optimization, these own Baidu son, because others write very good. Check more, see more, there will always be a harvest, learn not to panic, read more,
  • The following building, will write react, small program, some JS data structure and algorithm in the classic explanation