Start from scratch, build a simple shopping platform (12) Front-end mall part

From scratch, build a simple shopping platform (11):
https://blog.csdn.net/time_____/article/details/108447234
Project source code (continuous update): https://gitee.com/DieHunter/myCode /tree/master/shopping

Starting from this article, we will introduce the development of the front-end mall. Of course, the new modules in the back-end will be introduced together. The
rendering address: https://gitee.com/DieHunter/myCode/tree/master/shopping/pic
renderings Also attached:
Homepage Category Shopping Cart My Product Details Subject Area Order Details Modify Information

Due to the difference between the applet and the App or mobile terminal, the personal information page has been modified.
This article mainly introduces the preparation work and project construction. In the first article , the webpack configuration and Vue scaffolding tool configuration, as well as other dependencies A brief description of the installation of, here is a detailed introduction to the preparation work, as well as some temporary adjustments in the project to make an explanation

Use vue init webpack + the name of the project (I am shopclient here, and the name cannot have uppercase letters) Initialize the project (generally just press Enter to continue, eslink and test can choose not to install)
After the installation is complete, we can simply configure webpack. Under the automatically generated config folder, the configuration in index.js is the configuration we use when we use webpack for build and dev. Here are a few commonly used ones:
dev Attribute: proxyTable , used for proxy in the development environment, to solve cross-domain, and use custom interface redirection
```
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': local dev project server address, access the project homepage through 127.0.0.1 plus port number
port: 8080: local dev project port, access the project homepage through server address plus 8080
autoOpenBrowser: after the project is compiled in the development environment Whether to automatically open the project
assetsPublicPath in the default browser : static file address, if written as /static, through the root directory (127.0.0.1:8080/static according to the above configuration) +/static can access the static file
build attribute: index, after packaging Homepage path
assetsRoot: Package output path
productionGzipExtensions: Code compression type, generally ['js','css'], after packaging, it will be compressed into min.js and min.css
After the configuration is complete, start downloading other dependencies, which are used, devDependencies: less, less-loader, dependencies: vue-router, axios, crypto-js, mint-ui
Create the following folder
Configure the initial value commonly used by less. I configured it like this. The icon uses Ali’s icon to download the font and style package to style. The animate uses Animate.css , and transition.less is a navigation switch written by myself. The transition animation at time, the switch animation will be performed by the global routing guard later. In init, variables are mainly declared for the initial style, and reset.less is to set the default style of the page
Configure mint-ui, introduce mint-ui and css under main.js, and introduce components on demand. In my project, I introduce on demand in each component. It is recommended to introduce on demand globally to reduce duplicate code
```
import Vue from 'vue'
import 'mint-ui/lib/style.css'
import MintUI from 'mint-ui'

Vue.use(MintUI);
```

Configure the axios request method interceptor. In order to facilitate the call, we deploy axios on the Vue prototype and call it through this.$axios in the component. The following is the interceptor configuration, where config is the constant configuration file

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;

To configure vue-router, we directly add the interface configuration items of vue-router in config. Considering the transition animation of route jump, we have carried out a grading for each interface of router to form such an effect

Create a new routeConfig in the config folder with the following content

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
      }
    }
  ];
}

Reference the configuration under the index of the router folder

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
})

Configure the global watch to monitor the route jump, and add the watch function to monitor the route in App.vue

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";//同级
      }
    }
  }

So far, the basic configuration of the front-end mall has been completed. The next article will introduce the tool class and other configurations that need to be used, as well as the implementation of the storage global state.

Start from scratch, build a simple shopping platform (12) Front-end mall part

Guess you like