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

短命女 2022-12-05 00:55 154阅读 0赞

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

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

**由于小程序和App或移动端有差别，所以个人信息页面另做修改  
本篇文章主要介绍一下准备工作和项目的搭建，在[第一篇文章][Link 1]中已经对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**
 *  **新建以下文件夹**  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 8][]
 *  **配置****less常用的初始值，我这里是这样配置的，其中icon用的是[阿里的icon][icon]，将字体和样式包下载至style，animate用的是[Animate.css][]，transition.less是自己写的一个导航切换时的过渡动画，后面通过全局路由守卫进行切换动画，init中主要对初始样式声明变量，reset.less是设置页面默认样式**  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 9][]
 *  **配置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的每个界面进行了一个分级，形成这样的效果**
    
    ![20200910143036709.gif][]  
    **在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全局状态实现**

[https_blog.csdn.net_time_article_details_108447234]: https://blog.csdn.net/time_____/article/details/108447234
[https_gitee.com_DieHunter_myCode_tree_master_shopping]: https://gitee.com/DieHunter/myCode/tree/master/shopping
[https_gitee.com_DieHunter_myCode_tree_master_shopping_pic]: https://gitee.com/DieHunter/myCode/tree/master/shopping/pic
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200908163819434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200908163935796.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200908164056168.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200908164210585.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200908164247803.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020090816433148.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200908164544345.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 7]: /images/20221123/5523776d764241a5864c4ad6716d9b9d.png
[Link 1]: https://blog.csdn.net/time_____/article/details/105191286
[proxyTable]: https://www.webpackjs.com/configuration/dev-server/#devserver-proxy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 8]: /images/20221123/415348bc30a842a187b0782d2d4efc9a.png
[icon]: https://www.iconfont.cn/
[Animate.css]: https://animate.style/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpbWVfX19fXw_size_16_color_FFFFFF_t_70 9]: /images/20221123/a3f1f529daae493cb0cd49a65195da8d.png
[20200910143036709.gif]: /images/20221123/9bb9257c226c417c8dac9fd30617f6f8.png