vue尚品汇商城项目-day05【30.登录与注册静态组件（处理公共图片资源问题）+31.注册的业务+登录业务】

30.登录与注册静态组件（处理公共图片资源问题）

• 登录与注册的静态组件
• assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放在assets文件夹里的静态资源，在webpack打包时，会把此静态资源当作一个模块，打包到JS文件中。
• 在CSS样式中也可以使用@符号【src别名】，切记在前面加上~

修改代码：

在assets/新建images/文件夹，并把共用图片icons.png放在里面；

同时删除src/pages/Home/ListContainer/images路径下的icons.png图片

src/pages/Login/index.vue

background: url(~@/assets/images/icons.png) no-repeat -10px -201px;

src/pages/Home/ListContainer/index.vue

background-image: url(~@/assets/images/icons.png);

注意点1：把共用的图片icons.png放在目录下assets/images/，在CSS中使用时写成~@/xxx/icons.png，即可使用。

31.注册的业务

重难点说明

1. 注册/登陆请求后组件的响应处理

2. 登陆后自动携带token数据

• 注册业务|登录业务中表单验证先不处理【最后一天统一处理】
• 获取验证码的接口
• 注册—通过数据库存储用户信息（名字、密码）

修改代码：

src/api/index.js

//获取验证码
//URL:/api/user/passport/sendCode/{phone}  method:get
export const getCode = (phone)=>requests({url:`/user/passport/sendCode/${phone}`,method:'get'});
//注册
//url:/api/user/passport/register  method:post    phone code password
export const registerUser = (params)=>requests({url: `/user/passport/register`,method: 'post', data: params});

src/store/index.js

把注册js和登录js合并到一起，统一叫用户模块业务

src/store/loginAndRegister/index.js

import {getCode, registerUser} from "@/api";

//Login+register模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {
    //获取验证码
    async getCode({commit}, phone) {
        let response = await getCode(phone);
        console.log("******获取验证码-response:{}", response);
        if (response.code == 200) {
            commit('GET_CODE', response.data);
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error("fail"))
        }
    },
    //用户注册
    async registerUser({commit}, data) {
        let response = await registerUser(data);
        console.log("******注册用户-response:{}", response);

        if (response.code == 200) {
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error("fail"))
        }
    },
}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {
    GET_CODE(state, code) {
        state.code = code;
    }
}
//state代表仓库中的数据
const state = {
    code: ''
}
//getters理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}

//创建并暴露store
export default {
    actions,
    mutations,
    state,
    getters
}

src/pages/Register/index.vue

<input type="text" placeholder="请输入你的手机号" v-model="phone">
<button style="width: 100px; height: 38px" @click="getCode">获取验证码</button>
<input type="password" placeholder="请输入你的登录密码" v-model="password">
<input type="password" placeholder="请输入确认密码" v-model="passwordConfirm">
<input name="m1" type="checkbox" v-model="checkedAgreement">

data() {
      return {
        // 收集表单数据--手机号
        phone: '',
        //验证码
        code: '',
        //密码
        password: '',
        //确认密码
        passwordConfirm: '',
        //是否同意
        checkedAgreement: true,
      }
    },
    methods: {
      //获取验证码
      async getCode() {
        try {
          //成功
          //如果获取到验证码
          const {phone} = this;
          phone && await this.$store.dispatch('getCode', phone);
          //将组件的code属性值变为仓库中验证码[验证码直接自己填写了]
          this.code = this.$store.state.user.code;
        } catch (error) {
          //失败
          alert(error.message)
        }
      },
      //用户注册
      async registerUser() {
        try {
           //成功
          //全部表单验证成功，在向服务器发请求，进行祖册
          //只要有一个表单没有成功，不会发请求
          const {phone, code, password, passwordConfirm} = this
          phone && code && password==passwordConfirm && await this.$store.dispatch('registerUser', {phone, password, code})
          //注册成功进行路由的跳转
          this.$router.push('/login')
        } catch (error) {
           //失败
           alert(error.message)
        }
      },
    },

32.登录业务

• 登录—登陆成功的时候，后台为了区分你这个用户是谁-服务器下发token【令牌：唯一标识符】

修改代码：

src/api/index.js

//登录
//URL:/api/user/passport/login  method:post phone password
export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'});

src/store/loginAndRegister/index.js

import {reqUserLogin} from "@/api";

//用户登录
async reqUserLogin({commit}, data) {
        let response = await reqUserLogin(data);
        console.log("******登录用户-response:{}", response);
        //服务器下发token，用户唯一标识符(uuid)
        //将来经常通过带token找服务器要用户信息进行展示
        if (response.code == 200) {
            //用户已经登录成功且获取到token
            commit('REQ_USER_LOGIN', response.data.token);
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error(response.message))
        }
    },
    
REQ_USER_LOGIN(state, token) {
        state.token = token;
    },  
    
 token: '',    

src/pages/Login/index.vue

<button class="btn" @click.prevent="reqUserLogin">登&nbsp;&nbsp;录</button>

methods: {
      //登录的回调函数
      async reqUserLogin() {
        try {
           //成功
          const {phone, password} = this;
          phone && password && await this.$store.dispatch('reqUserLogin',{phone, password});
          this.$router.push("/home");
        } catch (error) {
           //失败
           alert(error.message)
        }
      }
    }

注意点1：vuex存储的数据不是持久化的，一刷新页面就没了。

注意点2：登录接口会返回一个token令牌，这个是后端生成的，跟咱之前前端生成的uuid不一样。

注意点3：给登录按钮绑定事件时，要清除form上面的action条件以及默认跳转，否则会出现哪怕登录失败后也会跳转页面到首页的场景

<form action="##">  改为 <form>
<button class="btn" @click.prevent="reqUserLogin">登&nbsp;&nbsp;录</button>

本人其他相关文章链接

1.vue尚品汇商城项目-day05【30.登录与注册静态组件（处理公共图片资源问题）+31.注册的业务+登录业务】
2.vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
3.vue尚品汇商城项目-day05【36.导航守卫理解】