小米商城项目(下)

Posted 2021-05-18 李耀书

小米商城项目

• • • • 登录注册
      • 浏览更多
      • 项目总结

登录注册

在项目初始，我们首先要做的就是登录以及注册的逻辑业务的操作。

首先要完成的就是注册时的业务逻辑操作

在注册时，通过向后台请求数据，进行判断是否注册成功。

<template>
  <div id="register">
    <el-dialog title="注册" :visible.sync="dialog" width="20%" center>
      <el-form :model="ruleForm" status-icon ref="RefForm" :rules="rules" class="demo-ruleForm" >
        <el-form-item prop="userName">
          <el-input  prefix-icon="el-icon-user-solid"  type="text"  placeholder="请输入账号"  v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input prefix-icon="el-icon-view" type="pass" placeholder="请再次输入密码" v-model="ruleForm.pass" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" style="width: 150px" @click="submit" >注册</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import registerApi from "../api/login.js";
export default {
  name: "register",
  props: {
    show: true,
  },
  data() {
    const name = (rule, value, callback) => {
      const re = /^\\w{5,16}$/;
      if (!re.test(value)) {
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      } else {
        callback();
      }
    };
    const pass = (rule, value, callback) => {
      const re = /^\\w{6,18}$/;
      if (!re.test(value)) {
        callback(new Error("字母开头,长度6-18之间,允许字母数字和下划线"));
      } else {
        callback();
      }
    };
    // 自定义账户验证
    const user = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账户"));
      } else {
        if (value === this.cuseormName) {
          callback(new Error("账户已经注册"));
        } else {
          callback();
        }
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialog: false,
      cuseormName: "", // 自定义校验值
      ruleForm: { userName: "", password: "", pass: "", },
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: name, trigger: "blur" },
          { validator: user, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: pass, trigger: "blur" },
        ],
        pass: [
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.user();
  },
  methods: {
    /* 
      向父组件派发事件
    */
    async user() {
      const { data: res } = await registerApi.fistBynNme(
        this.ruleForm.userName
      );
      this.cuseormName = res;
    },
    shower() {
      this.dialog = true;
    },
    submit() {
      this.$refs.RefForm.validate(async (valid) => {
        if (!valid) return;
        const users = {
          userName: this.ruleForm.userName,
          password: this.ruleForm.password,
        };
        const { data: res } = await registerApi.Register(users);
        if (res.code == "001") {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          });
        } else {
          this.$notify({
            message: res.msg,
            type: "error",
          });
        }
        this.dialog = false;
      });
    },
  },
};
</script>

将注册页作为组件，通过$refs来控制组件的显示以及隐藏

注册成功后，便可以做登录操作。

<template>
  <div id="login">
    <el-dialog title="登录" :visible.sync="show" width="20%" center >
      <el-form :model="ruleForm" status-icon ref="RefForm" :rules="rules" class="demo-ruleForm" >
        <el-form-item prop="userName">
          <el-input prefix-icon="el-icon-user-solid" type="text" placeholder="请输入账号" v-model="ruleForm.userName" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="请输入密码" v-model="ruleForm.password" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" style="width: 150px" @click="submit" >登录</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import loginApi from "../api/login";
export default {
  name: "login",
  data() {
    const name = (rule, value, callback) => {
      const re = /^\\w{5,16}$/;
      if (!re.test(value)) {
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      } else {
        callback();
      }
    };
    const pass = (rule, value, callback) => {
      const re = /^\\w{6,18}$/;
      if (!re.test(value)) {
        callback(new Error("字母开头,长度6-18之间,允许字母数字和下划线"));
      } else {
        callback();
      }
    };
    return {
      show: false,
      cuseormName: "", // 自定义校验值
      ruleForm: {  password: "",  userName: "",},
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: name, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: pass, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /*
       向父组件派发事件
    */
    submit() {
      this.$refs.RefForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await loginApi.loginAPI(this.ruleForm);
        if (res.code == "001") {
          this.$notify({title: "成功",message: res.msg,type: "success", });
        } else {
          this.$notify({  message: res.msg,  type: "error", });
        }
        this.$store.commit("addUsers", res.user);
      });
      this.show = false;
    },
    hider() {
      this.show = true;
    },
  },
};
</script>
<style lang='scss' scoped>
</style>

同样登录组件也是可以通过$refs在别的组件中控制登录页的显示以及隐藏、
登录鉴权

​ 判断用户是否登录，如果登录成功，则可以进行路由的跳转，如果没有登录，则不能跳转路由。

在router.js相应的路由下

   {
        path: '/orders',
        name: 'Orders',
        component: Orders,
        meta: {
            requireAuth: true
        }
    },

在Vuex中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: "", // 登录的用户
        showLogin: false // 用于控制是否显示登录组件
    },
    getters: {
        getUser (state) {
            return state.user
        },
        getShowLogin (state) {
            return state.showLogin
        }
    },
    mutations: {
        setUser (state, data) {
            state.user = data;
        },
        setShowLogin (state, data) {
            state.showLogin = data;
        }
    },
    actions: {
        setUser ({ commit }, data) {
            commit('setUser', data);
        },
        setShowLogin ({ commit }, data) {
            commit('setShowLogin', data);
        }
    }
})

在router.js中，设置全局的路由守卫。

//路由守卫
router.beforeEach((to, from, next)=>{
    let userInfo = window.localStorage.getItem("user");
    if(to.meta.requireAuth){//如果requireAuth存在,需要页面鉴权
        if(!userInfo){
            // 没有登录，显示登录组件
            store.dispatch("setShowLogin", true);
            next(false);
            return
        }
    }
    next()
});

浏览更多

点击浏览更多按钮

<li class="last" v-if="flag" @click="more">
    <router-link to="">
       <div>浏览更多<i class="el-icon-d-arrow-right"></i></div>
        </router-link>
  </li>

 more() {
      let arr = [];
      this.phone.forEach((item) => {
        if (!arr.includes(item.category_id)) {
          arr.push(item.category_id);
        }
      });
      this.$arr.arr = arr;
      this.$router.push({ path: "/goods", query: { categoryID: arr } });
    },

这里主要用到了全局变量的使用，关于全局变量的使用，可以查看全局变量的使用

在进行数据请求时，通过对方法的封装，以及复用，节省代码，简化页面。

<template>
  <div id="Home">
    <div class="carousel"><Switc /></div>
    <div class="contentList">
      <div class="typeArea">
        <!-- 手机 -->
        <div class="list">
          <p class="listP">手机</p>
          <div class="Box">
            <img
              :src="$target + 'public/imgs/phone/phone.png'"
              alt=""
              id="img"
            />
            <!-- 组件引入 -->
            <my-list :phone="Product" :flag="flag"></my-list>
          </div>
        </div>
        <!-- 热门家电 --以上是关于小米商城项目(下)的主要内容，如果未能解决你的问题，请参考以下文章
 
 开发“小米商城官网首页”（静态页面）
 动力节点小米商城项目常见bug总结
 雷军：小米微商城系统，或撑得住马云董明珠的百亿项目
 模拟静态小米商城官网html+css
 模拟静态小米商城官网html+css
 模拟静态小米商城官网html+css