谷粒学院之前台页面

模板是nuxt，是基于nodejs的模板，只包含vue，要用到elementui需要引入。

这个和ajax的区别在于ajax请求后台服务器异步获取数据（客户端渲染），以前的servlet方式就是服务端渲染

而这个也是服务端渲染，发送请求到nodejs，再由nodejs获取到服务端的数据，进行服务端渲染再把网页返回给html。

安装幻灯片插件，用于之后的banner图轮播

 

 

---

后台的cms模块做banner相关接口

---

nuxt没有axios需要npm  install   axios

然后模仿后台管理的封装axios对它进行封装，也可以不封装，会多写一些重复代码

import axios from 'axios'// 引入npm install axios下载的axios
import cookie from 'js-cookie'// 引入cookie
import Message from 'element-ui'
// import { MessageBox, Message } from 'element-ui'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:8222', // api的base_url
  timeout: 20000 // 请求超时时间
})

// request拦截器
// 第三步每次请求时使用拦截器
service.interceptors.request.use(
  config => {
    // debugger
    // 判断cookie里是否有名称为guli_token的数据
    if (cookie.get('guli_token')) {
      // 把获取到的cookie里的token字符串放到request的header里
      config.headers['token'] = cookie.get('guli_token')
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// http response 拦截器
service.interceptors.response.use(
  response => {
    // debugger
    if (response.data.code === 28004) {
      console.log('response.data.resultCode是28004')
      // 返回 错误代码-1 清除ticket信息并跳转到登录页面
      // debugger
      window.location.href = '/login'
      return
    } else {
      if (response.data.code !== 20000) {
        // 25000：订单支付中，不做任何提示
        if (response.data.code !== 25000) {
          Message({
            message: response.data.message || 'error',
            type: 'error',
            duration: 5 * 1000
          })
        }
      } else {
        return response
      }
    }
  },
  error => {
    return Promise.reject(error.response) // 返回接口返回的错误信息
  })

export default service