从零开始,搭建一个简单的购物平台(十二)前端商城部分

27 篇文章 3 订阅
25 篇文章 2 订阅

从零开始,搭建一个简单的购物平台(十一):
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全局状态实现
 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿宇的编程之旅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值