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

Bertha 。 2024-03-24 13:17 20阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  30.登录与注册静态组件（处理公共图片资源问题）
     *  31.注册的业务
     *  32.登录业务
 *  本人其他相关文章链接

### 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.  注册/登陆请求后组件的响应处理

1.  登陆后自动携带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">登  录</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条件以及默认跳转，否则会出现哪怕登录失败后也会跳转页面到首页的场景

## 本人其他相关文章链接 ##

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

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/70d38b7284eb4f4e9b6a12ae43faeca6.png
[vue_-day05_30._31.]: https://blog.csdn.net/a924382407/article/details/129907629
[vue_-day05_33.token_34._token_35.]: https://blog.csdn.net/a924382407/article/details/129907659
[vue_-day05_36.]: https://blog.csdn.net/a924382407/article/details/129907725