从零开始，搭建一个简单的购物平台（十二）前端商城部分

本文最后更新于：3 个月前

从零开始，搭建一个简单的购物平台（十一）：
https://blog.csdn.net/time_____/article/details/108447234
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

从这篇文章开始对前端商城开发进行介绍，当然中间也会穿插着后端的新增模块一起介绍
效果图地址：https://gitee.com/DieHunter/myCode/tree/master/shopping/pic
效果图也附上：
主页 分类 购物车 我的 商品详情 主题区 订单详情 修改信息

由于小程序和App或移动端有差别，所以个人信息页面另做修改
本篇文章主要介绍一下准备工作和项目的搭建，在第一篇文章中已经对webpack配置以及Vue脚手架工具配置，以及其他依赖的安装进行了一个简单叙述，这里开始对准备工作做一个详细介绍，以及项目中的一些临时调整做一个说明

  • 使用vue init webpack + 项目的名字（我这里是shopclient，名称不能有大写字母） 初始化项目（一般直接全回车继续，eslink和test可选择不装）

  • 安装完成后，我们可以简单配置一下webpack，在自动生成的config文件夹下，index.js中的配置是我们使用webpack进行build和dev时用得上的配置，这里简单介绍几个常用的：
    dev属性：proxyTable，用于开发环境中的代理，解决跨域，以及使用自定义接口重定向

    proxyTable: {
        '/testApi':{//代理接口名，请求到/testApi会定向到http://127.0.0.1:1024/testApi下
            target:'http://127.0.0.1:1024',//目标域名
            changeOrigin:true,//是否允许跨域
            pathRewrite:{"^/testApi":''} // 把testApi替换成空
        }
    },

    host:’127.0.0.1’：本地dev项目服务器地址，通过127.0.0.1加端口号访问项目主页
    port:8080：本地dev项目端口，通过服务器地址加8080访问项目主页
    autoOpenBrowser：开发环境下项目编译完成后是否在默认浏览器自动打开项目
    assetsPublicPath：静态文件地址，如果写成/static则通过根目录（根据上面的配置是127.0.0.1:8080/static）+/static可访问静态文件
    build属性：index，打包后的主页路径
    assetsRoot：打包输出路径
    productionGzipExtensions：代码压缩类型，一般是[‘js’,’css’]，打包后将会压缩成min.js和min.css

  • 配置完成之后，开始下载其他依赖，用到的有， devDependencies：less，less-loader，dependencies：vue-router，axios，crypto-js，mint-ui

  • 新建以下文件夹

  • 配置 less常用的初始值，我这里是这样配置的，其中icon用的是阿里的icon，将字体和样式包下载至style，animate用的是Animate.css，transition.less是自己写的一个导航切换时的过渡动画，后面通过全局路由守卫进行切换动画，init中主要对初始样式声明变量，reset.less是设置页面默认样式

  • 配置mint-ui，在main.js下引入mint-ui和css,以及按需引入组件，我这里项目中在每个组件中按需引入，建议在全局按需引入，减少重复代码

import Vue from 'vue'
import 'mint-ui/lib/style.css'
import MintUI from 'mint-ui'

Vue.use(MintUI);
  • 配置axios请求方法拦截器，为了方便调用，我们将axios部署在Vue原型上，通过组件中的this.$axios进行调用，以下是拦截器配置，其中config是常量配置文件
import Vue from "vue";
import Axios from "axios";
import Config from "../config/config";
import { Toast, Indicator } from "mint-ui";
Axios.defaults.baseURL = Config.RequestPath; //默认请求地址
Axios.defaults.timeout = Config.RequestTimeOut; //请求超时
// 添加请求拦截器
Axios.interceptors.request.use(
  function(config) {
    Indicator.open("加载中...");
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    Indicator.close();
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
Axios.interceptors.response.use(
  function(response) {
    Indicator.close();
    // 对响应数据做点什么
    if (response.data.result != 1) {
      Toast(response.data.msg);
    }
    if (response.data.result === -999) {
      //token验证失败
    }
    return response.data;
  },
  function(error) {
    Indicator.close();
    Toast("加载失败");
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

Vue.prototype.$axios = Axios;
  • 配置vue-router，我们直接在config中添加vue-router的界面配置项，考虑到路由跳转的过渡动画，我们将router的每个界面进行了一个分级，形成这样的效果


在config文件夹中新建routeConfig，内容如下

import Home from "../page/home/home";//商品首页
import Kind from "../page/kind/kind";//分类界面
import ShopCar from "../page/shopCar/shopCar";//购物车
import Info from "../page/info/info";//个人主页
import Order from "../page/order/order";//订单管理界面
import ShopTheme from "../page/shopTheme/shopTheme";//主题界面
import ShopInfo from "../page/shopInfo/shopInfo";//商品详情
import Register from "../page/register/register";//注册界面
import UpdateInfo from "../page/updateInfo/updateInfo";//个人信息修改

export default class RouteConfig {
  static routes = [
    {
      path: "/",
      redirect: "/Home"
    },
    {
      path: "/Home",
      name: "Home",
      component: Home,
      meta: {
        index: 0
      }
    },
    {
      path: "/Kind",
      name: "Kind",
      component: Kind,
      meta: {
        index: 0
      }
    },
    {
      path: "/ShopCar",
      name: "ShopCar",
      component: ShopCar,
      meta: {
        index: 0
      }
    },
    {
      path: "/Info",
      name: "Info",
      component: Info,
      meta: {
        index: 0
      }
    },
    {
      path: "/ShopTheme",
      name: "ShopTheme",
      component: ShopTheme,
      meta: {
        index: 1
      }
    },
    {
      path: "/ShopInfo",
      name: "ShopInfo",
      component: ShopInfo,
      meta: {
        index: 2
      }
    },
    {
      path: "/Register",
      name: "Register",
      component: Register,
      meta: {
        index: 1
      }
    },
    {
      path: "/UpdateInfo",
      name: "UpdateInfo",
      component: UpdateInfo,
      meta: {
        index: 1
      }
    },
    {
      path: "/Order",
      name: "Order",
      component: Order,
      meta: {
        index: 1
      }
    }
  ];
}

在router文件夹的index下引用该配置

import Vue from 'vue'
import Router from 'vue-router'
import routeConfig from "../config/routeConfig"
const {
  routes
} = routeConfig
Vue.use(Router)
export default new Router({
  routes
})

配置全局watch监听路由跳转，在App.vue中新增watch函数监听路由

watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";//下一层，进入子页面
      } else if (to.meta.index < from.meta.index) {
        this.transitionName = "slide-right";//上一层，返回
      } else {
        this.transitionName = "fade";//同级
      }
    }
  }

到此为止，前端商城部分基本配置已完成，下一篇将介绍工具类和其他需要使用的配置，以及storage全局状态实现