小米商城项目分析（上）

前言：本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。本项目前端参考 小米商城 实现，但与小米官方没有关系，若需要购买小米产品请到小米官方商城购买。

一、项目架构

使用vue": “^2.6.11"框架，用@vue/cli 4.5.9版本脚手架搭建项目，css样式结构"element-ui”:"^2.15.1" 渲染 element-ui地址，并搭配"node-sass": “^4.12.0”，“sass-loader”: “^8.0.2” CSS 预处理器，调用后台接口使用"axios": "^0.21.1"axios，“vue-router”: "^3.2.0"实现路由切换

二、项目技术栈

本项目所用到的主要技术栈有Vue-cli、vue-router、axios、sass、element-ui、vuex、axios简单封装，跨域

三、项目所有模块

首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。
实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能

四、各模块技术点

跨域
此项目涉及到‘同源策略’所以需要进行跨域，在根目录下新建一个vue.config.js，在js中Proxy处理跨域

module.exports = {
  publicPath: "./",
  devServer: {
    open: true,
    proxy: {
      "/api": {
        target: "url",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

登录
登陆模块需要使用Dialog 对话框，实现登陆输入框的显示与隐藏，对要登陆的用户名、密码进行正则验证

 data() {
    let validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (userNameRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      }
      // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
      const passwordRule = /^[a-zA-Z]\w{5,17}$/;
      if (passwordRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(
          new Error("字母开头,长度6-18之间,允许字母数字和下划线")
        );
      }
    };
    return {
      LoginUser: {
        name: "",
        pass: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },

通过改变在vuex存储的状态实现对话框的显示与隐藏

 showLogin: false, // 用于控制是否显示登录组件
  setShowLogin({ commit }, data) {
      commit("setShowLogin", data);
    },
     setShowLogin(state, data) {
      state.showLogin = data;
    },

登陆鉴权

// 全局拦截器,在进入需要用户权限的页面前校验是否已经登录
router.beforeResolve((to, from, next) => {
  const loginUser = store.state.user.user;
  // 判断路由是否设置相应校验用户权限
  if (to.meta.requireAuth) {
    if (!loginUser) {
      // 没有登录，显示登录组件
      store.dispatch("setShowLogin", true);
      if (from.name == null) {
        //此时，是在页面没有加载，直接在地址栏输入链接，进入需要登录验证的页面
        next("/");
        return;
      }
      // 终止导航
      next(false);
      return;
    }
  }
  next();
});

首页
将首页面进行组件拆分头部和底部拆分为一个组件，商品区域拆分为公共组件

全局组件的注册，在main.js中进行全局组件挂载

import MyList from './components/MyList';
Vue.component(MyList.name, MyList);

在需要的页面进行引入，传输变量

 <MyList :list="product" v-if="product.length>0"></MyList>

在全局组件进行接收

 name: "MyList",
  // list为父组件传过来的商品列表
  // isMore为是否显示“浏览更多”
  props: ["list", "isMore", "isDelete"],