vue 电商项目实战笔记

weixinmingwo

已于 2022-02-20 02:42:38 修改

阅读量544

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-18 23:12:07 首次发布

本文链接：https://blog.csdn.net/weixinmingwo/article/details/123012606

版权

创建全局组件导航组件因为导航在任何页面都存在

导航写好以后去main.js引入创建全局组件

之后直接在页面使用即可

2.引入首页其他板块把页面完整的展现出来

切记图片要对路径要对 css 都要对

<template>
   <div class="">
       <NavType></NavType>
       <ListContainer></ListContainer>
       <Recommend/>
       <Rand/>
       <Like/>
       <Floor/>
       <Floor/>
       <Brand/>
   </div>
</template>

<script>
   import ListContainer from '@/pages/Home/ListContainer'
   import Recommend from '@/pages/Home/Recommend'
   import Rand from '@/pages/Home/Rand'
   import Like from '@/pages/Home/Like'
   import Floor from '@/pages/Home/Floor/index.vue'
   import Brand from '@/pages/Home/Brand/index.vue'

   export default{
       components:{
           ListContainer,
           Recommend,
           Rand,
           Like,
           Floor,
           Brand
       }
   }
</script>

<style scoped="scoped" lang="less">
</style>

3.axios的封装

src目录下创建2个文件

index.js

/* 
包含所有接口请求函数的模块
*/
import requests from './request.js'

//获取商品的三级分类列表
export const reqCategoryList = ()=>requests({url:'/product/getBaseCategoryList',method:'get'})

request.js

import axios from 'axios'

const requests = axios.create({
  baseURL: "/api", // 基础路径
  timeout: 15000   // 连接请求超时时间
})

//请求拦截器
requests.interceptors.request.use((config) => {
 
  // 必须返回配置对象
  return config
})

//响应
requests.interceptors.response.use((response) => {
  // 隐藏进度条
  // NProgress.done()
  // 返回响应体数据
  return response.data
}, (error) => {
  // 隐藏进度条
  // NProgress.done()

  // 统一处理一下错误
  alert( `请求出错: ${error.message||'未知错误'}`)

  // 后面可以选择不处理或处理
  return Promise.reject(error)
})


//对外暴露
export default requests

然后在main.js 引入

明显这样是有跨域问题的,解决办法在vue.config.js里面配置

module.exports = {
	//关闭eslint
	lintOnSave : false,
	//代理跨域
	devServer: {
	  proxy: {
	    '/api': { // 只对请求路由以/api开头的请求进行代理转发
	      target: 'http://39.98.123.211', // 转发的目标url
	      changeOrigin: true // 支持跨域
	    }
	  }
	},

}

这样就能访问接口了

4.引入进度条 nprogress

安装npm install --save nprogress

在 request.js里使用