模板是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