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

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

1.jpeg

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">登&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.导航守卫理解】

目录
相关文章
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
9天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
12天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
9天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
28 9
|
8天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
7天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
7天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
7天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
8天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。