小米商城（一）

技术栈：

1. Vue
2. Vue-router路由
3. Element-ui插件
4. Vuex
5. 全局组件
6. 全局变量
7. 路由拦截
8. Axios
9. API封装
   首先是登录注册页面
   登录：
   
   注册：
   

这两个页面用到了正则校验存token数据方法，

export default {
  name: "",
  data() {
    // 正则验证
    var checkUsername = (rule, value, callback) => {
      var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/;
      API.register(this.formList.username).then((res) => {
        this.code = res.code;
      });
      if (this.code == "004") {
        return callback(new Error("用户名已经存在，不能注册"));
      }
      if (reg.test(value)) {
        // 格式正确返回true
        callback();
      } else {
        // 格式不正确
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    //密码验证
    var checkPassword = (rule, value, callback) => {
      var mobileReg = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/;
      if (mobileReg.test(value)) {
        // 格式正确返回true
        callback();
      } else {
        // 格式不正确
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    var checkPasswords = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formList.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      activeIndex: "1",
      visible: false,
      seach: "",
      loginDialogVisible: false,
      registerDialogVisible: false,
      formList: {
        username: "",
        password: "",
        passwords: "",
      },
      LoginList: {
        username: "",
        password: "",
      },
      code: 0,
      formRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: checkUsername, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" },
        ],
        passwords: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPasswords, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    addalick() {
      this.$router.push("./goods?sec=" + this.seach);
      this.seach = "";
    },
    registers() {
      this.$refs.formName.validate((valid) => {
        if (!valid) {
          return;
        }
        API.registerse({
          userName: this.formList.username,
          password: this.formList.password,
        }).then((res) => {
          console.log(res.msg);
          if ((res.msg = "注册成功")) {
            this.$notify.success({
              title: "注册成功",
              message: "这是一条成功的提示消息",
            });
            this.registerDialogVisible = false;
            return;
          } else {
            this.$notify.error({
              title: "注册错误",
              message: "这是一条错误的提示消息",
            });
            return;
          }
        });
      });
    },
    // 点击弹出框
    loginsss() {
      this.loginDialogVisible = true;
      console.log(this.loginDialogVisible);
    },
    // 取消弹出框
    bools() {
      this.loginDialogVisible = false;
    },
    // 点击确定退出登录
    visibless() {
      this.visible = false;
      this.$notify.success({
        title: "退出成功",
        message: "这是一条成功的提示消息",
      });
      this.$store.commit("visibleClick", this.visible);
    },
    // 判断是否登录
    Collection() {
      console.log(this.$store.state.trueFalse);
      if (this.$store.state.trueFalse) {
        return this.$router.push("live");
      } else {
        return (this.loginDialogVisible = true);
      }
    },
    catelist(){
      console.log(this.$store.state.trueFalse);
      if (this.$store.state.trueFalse) {
        return this.$router.push("cate");
      } else {
        return (this.loginDialogVisible = true);
      }
    }
  },
  computed: {},
  watch: {},
};

然后存token

首页布局：

点击热门、保护套、充电器按钮会出现不懂的页面这里用到了监听方法

他这个分类数据也是通过接口文档获取的 所以说只要找到相对应的接口然后进行数据渲染就可以了