尚品汇注册登录实现

已于 2023-11-24 10:24:31 修改
阅读量182 收藏
点赞数 5
分类专栏： Vue2/Vue3学习心得 文章标签： 前端 javascript node.js vue.js es6 前端框架
于 2023-11-23 14:04:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Q14778209253/article/details/134506709
版权

需要源码请私我，因为该资源已存在，无法上传到我的资源中

尚硅谷课程“尚品汇”注册登录页实现

注册页

配置路由

  1. 在src目录下新建pages-组件/router-路由/
    1. 注册和登录、首页组件路由配置

    • 新建router文件夹存放路由配置信息以及暴露路由

    • 在routes文件中引入路由组件，配置路由信息并对外暴露
      在这里插入图片描述

    • 在index.js中注册路由
      在这里插入图片描述

    • 在main.js中注册路由
      在这里插入图片描述

    • 在App.vue中设置路由出口
      在这里插入图片描述

    • 最终效果：在地址栏输入对应的路由信息即可跳转在这里插入图片描述

完成静态页面

  1. 注册页面静态实现
    1. 在register.vue中
    • 框架
<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3>注册新用户
        <span class="go">我有账号，去 <a href="login.html" target="_blank">登陆</a>
        </span>
      </h3>
      <div class="content">
        <label>手机号:</label>
        <input type="text" placeholder="请输入你的手机号">
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="content">
        <label>验证码:</label>
        <input type="text" placeholder="请输入验证码">
        <button>获取验证码</button>
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="content">
        <label>登录密码:</label>
        <input type="text" placeholder="请输入你的登录密码">
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="content">
        <label>确认密码:</label>
        <input type="text" placeholder="请输入确认密码">
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="controls">
        <input name="m1" type="checkbox">
        <span>同意协议并注册《尚品汇用户协议》</span>
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="btn">
        <button>完成注册</button>
      </div>
    </div>

    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
      <div class="beian">京ICP备19006430号
      </div>
    </div>
  </div>
</template>
  • 样式(使用less预编译)
<style lang="less" scoped>
  .register-container {
    .register {
      width: 1200px;
      height: 445px;
      border: 1px solid rgb(223, 223, 223);
      margin: 0 auto;

      h3 {
        background: #ececec;
        margin: 0;
        padding: 6px 15px;
        color: #333;
        border-bottom: 1px solid #dfdfdf;
        font-size: 20.04px;
        line-height: 30.06px;

        span {
          font-size: 14px;
          float: right;

          a {
            color: #e1251b;
          }
        }
      }

      div:nth-of-type(1) {
        margin-top: 40px;
      }

      .content {
        padding-left: 390px;
        margin-bottom: 18px;
        position: relative;

        label {
          font-size: 14px;
          width: 96px;
          text-align: right;
          display: inline-block;
        }

        input {
          width: 270px;
          height: 38px;
          padding-left: 8px;
          box-sizing: border-box;
          margin-left: 5px;
          outline: none;
          border: 1px solid #999;
        }

        img {
          vertical-align: sub;
        }

        .error-msg {
          position: absolute;
          top: 100%;
          left: 495px;
          color: red;
        }
      }

      .controls {
        text-align: center;
        position: relative;

        input {
          vertical-align: middle;
        }

        .error-msg {
          position: absolute;
          top: 100%;
          left: 495px;
          color: red;
        }
      }

      .btn {
        text-align: center;
        line-height: 36px;
        margin: 17px 0 0 55px;

        button {
          outline: none;
          width: 270px;
          height: 36px;
          background: #e1251b;
          color: #fff !important;
          display: inline-block;
          font-size: 16px;
        }
      }
    }

    .copyright {
      width: 1200px;
      margin: 0 auto;
      text-align: center;
      line-height: 24px;

      ul {
        li {
          display: inline-block;
          border-right: 1px solid #e4e4e4;
          padding: 0 20px;
          margin: 15px 0;
        }
      }
    }
  }
</style>

注意：出现以下报错
在这里插入图片描述

由于使用了less语法，缺失了less-loader；安装less/less-loader依赖即可解决报错
效果：在这里插入图片描述


请求接口

  1. 接口封装
    1. 在src目录下新建api文件夹
    2. 在api目录下新建requests.js(axios二次封装)
    • 安装axios依赖
    • 封装axios

import axios from "axios";

// 对axios二次封装
const requests = axios({
  baseURL: '/api',
  timeout: 5000
})

// 设置请求拦截器
requests.interceptors.request.use((config) => {
  return config
})

// 设置响应拦截器
requests.interceptors.response.use((res) => {
  return res.data
}, (error) => {
  console.log(error);
  return Promise.reject(new Error('faile'))
})

// 对外暴露
export default requests

  1. 在api目录下新建index.js(请求定制)

  2. 在vue.config.js中设置代理跨域。

  • 注意：每次写完配置文件后要重新启动服务
// 代理跨域
  devServer: {
    proxy: {
      '/api': {
        // target是目标请求URL
        target: 'http://gmall-h5-api.atguigu.cn',
      }
    }
  }
  1. 在api/index.js中定制注册页相关请求
    1. 获取验证码：
export const reqGetCode = (phone) => requests({
url: `/user/passport/sendCode/${phone}`,
method: 'GET'
 })
  1. 注册请求
// 注册请求
export const reqRegisterUser = (data) => requests({
url: '/user/passport/register',
method: 'POST',
data
})

  1. 获取注册页的表单内容

    • 在data内声明表单元素
    data() {
 return {
   // 表单数据
   // 手机号
   phone: '',
   // 验证码
   code: '',
   // 密码
   password: '',
   // 确认密码
   repassword: ''
 };
},
    • 使用v-model响应式绑定数据框，获取用户输入数据
     <input v-model="phone" type="text" placeholder="请输入你的手机号">
 <input v-model="code" type="text" placeholder="请输入验证码">
 密码与上面一致
    • 效果：在这里插入图片描述

    组件身上data属性有了响应的响应式数据。

  2. 在src目录下新建store文件夹，用于存放组件的仓库

    1. 新建user.js文件，用于存放于用户相关的信息
    // 导入获取验证码的请求
 import { reqGetCode } from '@/api/index'

 // 存放数据
 const state = {}

 // 修改state的
 const mutations = {}

 // 提交mutations，异步操作
 const actions = {
   // 获取验证码 
   // commit:占位，用于派发mutations；phone:请求的参数
   getCode({ commit }, phone) {
     let result = reqGetCode(phone)
     console.log(result);
   }
 }

 // 对state内数据的计算
 const getters = {}

 // 对外暴露
 export default {
   state,
   mutations,
   actions,
   getters
 }
    1. 在store目录下新建index.js文件，用作大仓库
       import Vue from 'vue'
 import Vuex from 'vuex'
 // 使用插件
 Vue.use(Vuex)

 // 导入小仓库
 import user from './User/user'

 // 对外暴露store的一个类的实例
 export default new Vuex.Store({
   modules: {
     // 小仓库
     user
   }
 })
    1. 在main.js中注册大仓库
       // 引入仓库
 import store from './store'

 new Vue({
   render: h => h(App),
   // 注册路由信息
   router,
   // 注册仓库
   store
 }).$mount('#app')

    效果：在这里插入图片描述


  1. 获取验证码

    • 在register.vue组件中给’获取验证码’按钮添加点击事件。在method中派发actions
      <button @click="getCode">获取验证码</button>

   methods: {
 // 获取验证码
 getCode() {
   const { phone } = this
   // 派发actions
   this.$store.dispatch('getCode', phone)
 }
 },

    效果：在这里插入图片描述

    • 将返回的验证码存到user仓库在这里插入图片描述

  1. 将仓库中的code直接显示在‘获取验证码’的input框中。在register组件中的methods方法内修改getCode方法
  // 获取验证码
  async getCode() {
  // try等待派发的actions返回成功的Promise后，直接修改code值
  try {
    const { phone } = this
    // 派发actions
    await this.$store.dispatch('getCode', phone)
    this.code = this.$store.state.user.code
    } catch (error) {
      console.log('获取失败');
    }
  }

效果：在这里插入图片描述

  1. 注册请求

    1. 在user仓库中调用注册请求
      async registerUserInfo({ commit }, data) {
  let result = await reqRegisterUser(data)
  // 当结果200代表成功
  if (result.code == 200) {
    return 'ok'
  } else {
    return Promise.reject(new Error('faile'))
  }
}
    1. 给‘完成注册’按钮添加点击事件
    • <button @click="register">完成注册</button>
    1. 在methods中写该方法
        // 注册请求
async register() {
  try {
    const { phone, code, password } = this
    // 派发注册请求的actions
    await this.$store.dispatch('registerUserInfo', { phone, code, password })
    // 注册结果返回成功后跳转到登录页面
    this.$router.push('/login')
  } catch (error) {
    console.log(error);
  }
}

    效果：在这里插入图片描述

登录页

  1. 完成静态页面，在login.vue组件中
    • 搭建框架
  <template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="login">
        <div class="loginform">
          <ul class="tab clearFix">
            <li>
              <a href="##" style="border-right: 0;">扫描登录</a>
            </li>
            <li>
              <a href="##" class="current">账户登录</a>
            </li>
          </ul>

          <div class="content">
            <form action="##">
              <div class="input-text clearFix">
                <span></span>
                <input type="text" placeholder="邮箱/用户名/手机号">
              </div>
              <div class="input-text clearFix">
                <span class="pwd"></span>
                <input type="text" placeholder="请输入密码">
              </div>
              <div class="setting clearFix">
                <label class="checkbox inline">
                  <input name="m1" type="checkbox" value="2" checked="">
                  自动登录
                </label>
                <span class="forget">忘记密码？</span>
              </div>
              <button class="btn">登&nbsp;&nbsp;录</button>
            </form>

            <div class="call clearFix">
              <ul>
                <li><img src="./images/qq.png" alt=""></li>
                <li><img src="./images/sina.png" alt=""></li>
                <li><img src="./images/ali.png" alt=""></li>
                <li><img src="./images/weixin.png" alt=""></li>
              </ul>
              <router-link class="register" to="/register">立即注册</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
      <div class="beian">京ICP备19006430号
      </div>
    </div>
  </div>
</template>

注意：报错图片资源加载错误在这里插入图片描述

先导入图片资源，在修改图片的src路径即可

  • 引入样式
    <style lang="less" scoped>
  .login-container {
    .login-wrap {
      height: 487px;
      background-color: #e93854;

      .login {
        width: 1200px;
        height: 487px;
        margin: 0 auto;
        background: url(./images/loginbg.png) no-repeat;
      }

      .loginform {
        width: 420px;
        height: 406px;
        box-sizing: border-box;
        background: #fff;
        float: right;
        top: 45px;
        position: relative;
        padding: 20px;

        .tab {

          li {
            width: 50%;
            float: left;
            text-align: center;

            a {
              width: 100%;
              display: block;
              height: 50px;
              line-height: 50px;
              font-size: 20px;
              font-weight: 700;
              color: #333;
              border: 1px solid #ddd;
              box-sizing: border-box;
              text-decoration: none;

            }

            .current {
              border-bottom: none;
              border-top-color: #28a3ef;
              color: #e1251b;
            }
          }
        }

        .content {
          width: 380px;
          height: 316px;
          box-sizing: border-box;
          border: 1px solid #ddd;
          border-top: none;
          padding: 18px;

          form {
            margin: 15px 0 18px 0;
            font-size: 12px;
            line-height: 18px;

            .input-text {
              margin-bottom: 16px;

              span {
                float: left;
                width: 37px;
                height: 32px;
                border: 1px solid #ccc;
                background: url(../../assets/icons.png) no-repeat -10px -201px;
                box-sizing: border-box;
                border-radius: 2px 0 0 2px;
              }

              .pwd {
                background-position: -72px -201px;
              }

              input {
                width: 302px;
                height: 32px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-left: none;
                float: left;
                padding-top: 6px;
                padding-bottom: 6px;
                font-size: 14px;
                line-height: 22px;
                padding-right: 8px;
                padding-left: 8px;

                border-radius: 0 2px 2px 0;
                outline: none;
              }
            }

            .setting {
              label {
                float: left;
              }

              .forget {
                float: right;
              }
            }

            .btn {
              background-color: #e1251b;
              padding: 6px;
              border-radius: 0;
              font-size: 16px;
              font-family: 微软雅黑;
              word-spacing: 4px;
              border: 1px solid #e1251b;
              color: #fff;
              width: 100%;
              height: 36px;
              margin-top: 25px;
              outline: none;
            }
          }

          .call {
            margin-top: 30px;

            ul {
              float: left;

              li {
                float: left;
                margin-right: 5px;
              }
            }

            .register {
              float: right;
              font-size: 15px;
              line-height: 38px;
            }

            .register:hover {
              color: #4cb9fc;
              text-decoration: underline;
            }
          }

        }
      }
    }

    .copyright {
      width: 1200px;
      margin: 0 auto;
      text-align: center;
      line-height: 24px;

      ul {
        li {
          display: inline-block;
          border-right: 1px solid #e4e4e4;
          padding: 0 20px;
          margin: 15px 0;
        }
      }
    }

  }
  </style>

效果：在这里插入图片描述

  1. 登录请求：这里因为不用接收过多的请求返回结果。所以采用不使用仓库派发actions，直接在组件中派发的方法

    1. 在main.js中导入api，注册为全局事件在这里插入图片描述

  2. 使用v-model获取用户输入,在login.vue组件methods中写登录方法，

         // 登录
 async login() {
   // 将data解构
   const { phone, password } = this
   let result = await this.$API.reqLoginUser({ phone, password })
   // 登录成功
   if (result.code == 200) {
     // 将token和name存到本地
     localStorage.setItem('TOKEN', result.data.token)
     localStorage.setItem('Name', result.data.name)
     // 跳转到首页
     this.$router.push('/')
   } else {
     console.log('登录失败');
   }
 }

    注意：登录成功后会返回一个token，存到本地

    • 未存储本地前：在这里插入图片描述

    • 登录成功后存本地结果：在这里插入图片描述

    返回值效果：在这里插入图片描述

总结

  1. 重点：
    • 路由跳转传参：使用的是query和params参数
    • 代理跨域、请求定制
    • 不使用仓库，直接在组件实例中发请求
    • 出自尚硅谷“尚品汇”项目
自拍拍到鬼
关注
专栏目录
尚品汇page.html
09-15
尚品汇页面html布局
Vue项目--尚品汇（登录注册）、token存储与过期
qq_36582776的博客
01-07 2252
1.样式里也可以使用@符号代替src路径，但是需要使用~@ 2. 注册部分需要表单验证，这里暂时没做 点击发送验证码，后台会给用户手机发送一个验证码，用户填写在注册界面，提交给后台。 调接口，post 3.登录 调接口，post，参数为手机号和密码。服务器会返回用户的token作为用户的唯一标识符。我们首先将其存在vuex中，但是vuex只能暂存，刷新就丢失了。 用户点击登录以后，需要将token带给服务器，与uuid用法类似，放在请求头： 4. ...
【Vue2项目(尚品汇前台)】(六）Register登录与注册模块搭建
matmacchiato的博客
01-24 1060
在样式当中也可以使用@符号，但要加~@/
尚品汇index.css
09-14
尚品汇页面布局样式，css层叠样式
尚品汇reset.css
09-14
尚品汇重置样式表，去除一些标签自带样式
尚品汇.md
06-14
尚品汇.md
gshop_client:尚品汇前台项目PC
05-29
【标题】"gshop_client:尚品汇前台项目PC"是一个关于电商网站前端开发的项目，主要用于构建尚品汇的PC端用户界面。这个项目的核心是实现一个功能丰富的、用户体验良好的在线购物平台。 【描述】"shop-client"指的是...
06_实现watch
qq_53109172的博客
10-16 756
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
web扩展
x737510的博客
10-10 614
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 198
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 282
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 511
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 705
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 296
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
字节跳动青训营开始报名了！
窗外风景随心变幻
10-10 2300
青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生，旨在培养优秀且具有职业竞争力的开发工程师。本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向，在这个飞速发展的 AI 时代，我们将和豆包MarsCode 一起深入探索，在青训营的技术氛围中，学习 AI，使用 Al，高效写码~
如何查看GB28181流媒体平台LiveGBS中对GB28181实时视频数据统计的负载信息
10-12 488
@目录1、负载信息2、负载信息说明3、会话列表查看3.1、会话列表4、停止会话5、搭建GB28181视频直播平台1、负载信息 实时展示直播、回放、播放、录像、H265、级联等使用数目 2、负载信息说明 直播：当前推流到平台的实时视频数目 回放：当前推流到平台的回放视频数目 播放：当前观看直播和回放的在线人数之和 录像：当前正在云端录像的通道数目 H265：当前推流到平台的视频中编码为H265...
前端高频面试题2024/9/22(偏项目问题--通用后台管理系统)
qq_46617150的博客
10-11 941
前端通过ts限制数据类型，后端通过joi限制数据类型这里的这个joi是对输入数据进行限制的中间件！！
Vue3浮动按钮（FloatButton）
Mr Dear的博客
10-10 719
浮动按钮组件，支持：自定义位置；自定义尺寸；自定义类型；自定义形状；自定义图标；自定义文字描述信息；链接跳转；菜单模式；气泡卡片；徽标数等；总之，功能丰富，简单易用😁😁
JavaScript前端开发技术
Chujun123528的博客
10-12 1014
JavaScript前端开发是一个充满挑战和机遇的领域。随着技术的不断进步和用户需求的变化，前端开发者需要不断学习新知识、掌握新技能，以应对日益复杂和多样化的开发需求。同时，注重性能优化和安全实践也是前端开发不可或缺的一部分。通过不断探索和创新，我们可以为用户创造更加优质、高效和安全的Web体验。在JavaScript前端开发的学习过程中，建议从基础语法入手，逐步掌握DOM操作、事件处理、Ajax通信等核心技能。同时，关注最新的前端框架和库的发展动态，尝试将它们应用到实际项目中。
电商项目：尚品汇笔记实现数量动态管理
在尚硅谷电商项目的尚品汇笔记3中，主要讨论了如何实现购物车页面中产品数量的动态管理，特别是对于用户通过点击减号按钮（-）、加号按钮（+）以及文本框输入进行数量更改时的处理逻辑。关键知识点如下： 1. **统一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自拍拍到鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值