Vue移动端系列 =＞ [02] 登陆注册

最新推荐文章于 2023-08-18 21:27:04 发布
最新推荐文章于 2023-08-18 21:27:04 发布
阅读量932 收藏 10
点赞数 2
分类专栏： # 【Vue2移动端项目】 文章标签： vue vue移动端 vueWebApp vant eslint
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/109452036
版权

二、登录注册

目标

  • 能实现登录页面的布局
  • 能实现基本登录功能
  • 能掌握 Vant 中 Toast 提示组件的使用
  • 能理解 API 请求模块的封装
  • 能理解发送验证码的实现思路
  • 能理解 Vant Form 实现表单验证的使用

准备

创建组件并配置路由

1、创建 src/views/login.vue 并写入以下内容

<template>
  <div class="login">登录页面</div>
</template>

<script>
export default {
  name: 'Login',
}
</script>
<style scoped lang="less"></style>

2、然后在 src/router/index.js 中配置登录页的路由表

{
  path: '/login',
  name: 'login',
  component: () => import('@/views/login')
}

最后，访问 /login 查看是否能访问到登录页面。

在styles里创建vant-reset.less设置样式

  • 这里需要给外面的div设置类名
  • 并且给样式设置/deep/
.login .van-nav-bar {
  background-color: #3396fc;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}

布局结构

这里主要使用到三个 Vant 组件：

一个经验：使用组件库中的现有组件快速布局，再慢慢调整细节，效率更高（刚开始可能会感觉有点麻烦，越用越熟，慢慢的就有了自己的思想）。

  1. 登陆基本结构
<van-nav-bar title="登录" />
<van-form @submit="onSubmit">
    <van-field
               name="用户名"
               placeholder="用户名"
               />
    <van-field
               type="password"
               name="密码"
               placeholder="密码"
               />
    <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
  1. 定义onSubmit方法
onSubmit (values) {
    console.log('submit', values)
}

布局样式

完成图标显示

写样式的原则：将公共样式写到全局（src/styles/index.less），将局部样式写到组件内部。

1、src/styles/index.less

body {
  background-color: #f5f7f9;
}

.page-nav-bar {
  background-color: #3296fa;
  .van-nav-bar__title {
    color: #fff;
  }
}

2、src/views/login/index.vue

<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="登录" />
    <!-- /导航栏 -->

    <!-- 登录表单 -->
    <van-form @submit="onSubmit">
      <van-field
        name="用户名"
        placeholder="请输入手机号"
      >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
       <!-- 第二种方法
        <template #left-icon>
        	<i class="iconfont iconshouji"></i>
        </template>
         --> 
      </van-field>
      <van-field
        type="password"
        name="验证码"
        placeholder="请输入验证码"
      >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-button class="send-sms-btn" round size="small" type="default">发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <!-- /登录表单 -->
  </div>
</template>
<script>
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>
<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>

实现基本登录功能

实现输入框的双向绑定，封装登陆请求方法

思路：

  • 注册点击登录的事件
  • 获取表单数据（根据接口要求使用 v-model 绑定）
  • 表单验证
  • 发请求提交
  • 根据请求结果做下一步处理

一、根据接口要求绑定获取表单数据

1、在登录页面组件的实例选项 data 中添加 user 数据字段

...
data () {
  return {
    user: {
      mobile: '',
      code: ''
    }
  }
}

2、在表单中使用 v-model 绑定对应数据

<!-- van-cell-group 仅仅是提供了一个上下外边框，能看到包裹的区域 -->
<van-cell-group>
  <van-field
    v-model="user.mobile"
    required
    clearable
    label="手机号"
    placeholder="请输入手机号"
  />
  <van-field
    v-model="user.code"
    type="number"
    label="验证码"
    placeholder="请输入验证码"
    required
  />
</van-cell-group>

最后测试。

一个小技巧：使用 VueDevtools 调试工具查看是否绑定成功。

二、请求登录

1、创建 src/api/user.js 封装请求方法

/**
 * 用户相关的请求模块
 */
import request from "@/utils/request"
/**
 * 用户登录
 */
export const login = data => {
  return request({
    method: 'POST',
    url: '/app/v1_0/authorizations',
    data
  })
}

// 正确方法
// const login = (data) => {
//    return request({
//        method: 'POST',
//        url: '/app/v1_0/authorizations',
//        data,
//    });
//};

//export default login;
export default {login};

2、引入login请求方法

import { login } from '@/api/user.js'

3、完善表单提交事件函数

async onSubmit () {
    const user = this.user
    try {
        const res = await login(user)
        console.log('登录成功', res)
    } catch (err) {
        if (err.response.status === 400) {
            console.log('登录失败', err)
        }
    }
}

最后测试。

登录状态提示

Vant 中内置了Toast 轻提示组件，可以实现移动端常见的提示效果。

// 简单文字提示
Toast("提示内容");

// loading 转圈圈提示
Toast.loading({
  duration: 0, // 持续展示 toast
  message: "加载中...",
  forbidClick: true // 是否禁止背景点击
});

// 成功提示
Ttoast.success("成功文案");

// 失败提示
Toast.fail("失败文案");

提示：在组件中可以直接通过 this.$toast 调用。

另外需要注意的是：Toast 默认采用单例模式，即同一时间只会存在一个 Toast，如果需要在同一时间弹出多个 Toast，可以参考下面的示例

Toast.allowMultiple();
const toast1 = Toast('第一个 Toast');
const toast2 = Toast.success('第二个 Toast');
toast1.clear();
toast2.clear();

下面是为我们的登录功能增加 toast 交互提示。

async onLogin () {
  // 开始转圈圈
  this.$toast.loading({
    duration: 0, // 持续时间，0表示持续展示不停止
    forbidClick: true, // 是否禁止背景点击
    message: '登录中...' // 提示消息
  })

  try {
    const res = await request({
      method: 'POST',
      url: '/app/v1_0/authorizations',
      data: this.user
    })
    console.log('登录成功', res)
    // 提示 success 或者 fail 的时候，会先把其它的 toast 先清除
    this.$toast.success('登录成功')
  } catch (err) {
    console.log('登录失败', err)
    this.$toast.fail('登录失败，手机号或验证码错误')
  }
}

假如请求非常快的话就看不到 loading 效果了，这里可以手动将调试工具中的网络设置为慢速网络。

测试结束，再把网络设置恢复为 Online 正常网络。

表单验证

参考文档：Form 表单验证

<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="登录" />
    <!-- /导航栏 -->

    <!-- 登录表单 -->
    <!--
      表单验证：
        1、给 van-field 组件配置 rules 验证规则
          参考文档：https://youzan.github.io/vant/#/zh-CN/form#rule-shu-ju-jie-gou
        2、当表单提交的时候会自动触发表单验证
           如果验证通过，会触发 submit 事件
           如果验证失败，不会触发 submit
     -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="手机号"
        placeholder="请输入手机号"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="user.code"
        name="验证码"
        placeholder="请输入验证码"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-button class="send-sms-btn" round size="small" type="default">发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <!-- /登录表单 -->
  </div>
</template>
<script>
import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码
      },
      userFormRules: {
        mobile: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: '手机号格式错误'
        }],
        code: [{
          required: true,
          message: '验证码不能为空'
        }, {
          pattern: /^\d{6}$/,
          message: '验证码格式错误'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async onSubmit () {
      // 1. 获取表单数据
      const user = this.user

      // TODO: 2. 表单验证

      // 3. 提交表单请求登录
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {
        const res = await login(user)
        console.log('登录成功', res)
        this.$toast.success('登录成功')
      } catch (err) {
        if (err.response.status === 400) {
          this.$toast.fail('手机号或验证码错误')
        } else {
          this.$toast.fail('登录失败，请稍后重试')
        }
      }
      // 4. 根据请求响应结果处理后续操作
    }
  }
}
</script>
<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>

验证码处理

验证手机号

  1. 清除发送验证码按钮提交表单

    <template #button>
   <van-button native-type="button" class="send-code-btn" size="mini" round type="default">
       发送验证码
   </van-button>
</template>

  2. 给发送验证码按钮注册点击事件

  3. 修改手机号输入框的name为mobile

    <van-field
   v-model="user.code"
   name="code"
   placeholder="请输入验证码"
   :rules="userFormRules.code"
   type="number"
   maxlength="6"
>

  4. 验证手机号

如果是返回值Promise {},那么就需要async await 接收

async onSendSms () {
  console.log('onSendSms')
  // 1. 校验手机号
  try {
    await this.$refs.loginForm.validate('mobile')
  } catch (err) {
    return console.log('验证失败', err)
  }
  // 2. 验证通过，显示倒计时
  // 3. 请求发送验证码
}

使用倒计时组件

1、在 data 中添加数据用来控制倒计时的显示和隐藏

data () {
  return {
    ...
    isCountDownShow: false
  }
}

2、使用倒计时组件

<van-field
  v-model="user.code"
  placeholder="请输入验证码"
>
  <i class="icon icon-mima" slot="left-icon"></i>
  <van-count-down
    v-if="isCountDownShow"
    slot="button"
    :time="1000 * 5"
    format="ss s"
    @finish="isCountDownShow = false"
  />
  <van-button
    v-else
    slot="button"
    size="small"
    type="primary"
    round
    @click="onSendSmsCode"
  >发送验证码</van-button>
</van-field>

3、点击倒计时切换倒计时组件和发送验证码按钮显示

async onSendSms () {
    console.log('onSendSms')
    // 1. 校验手机号
    try {
        await this.$refs.loginForm.validate('mobile')
    } catch (err) {
        return console.log('验证失败', err)
    }
    // 2. 验证通过，显示倒计时
    this.isCountDownShow = true
    // 3. 请求发送验证码
}

发送验证码

1、在 api/user.js 中添加封装数据接口

export const getSmsCode = mobile => {
  return request({
    method: 'GET',
    url: `/app/v1_0/sms/codes/${mobile}`
  })
}

2、给发送验证码按钮注册点击事件

3、发送处理

async onSendSms () {
  // 1. 校验手机号
  try {
    await this.$refs.loginForm.validate('mobile')
  } catch (err) {
    return console.log('验证失败', err)
  }
  // 2. 验证通过，显示倒计时
  this.isCountDownShow = true
  // 3. 请求发送验证码
  try {
    await sendSms(this.user.mobile)
    this.$toast('发送成功')
  } catch (err) {
    // 发送失败，关闭倒计时
    this.isCountDownShow = false
    if (err.response.status === 429) {
      this.$toast('发送太频繁了，请稍后重试')
    } else {
      this.$toast('发送失败，请稍后重试')
    }
  }
}

处理用户 Token

Token 是用户登录成功之后服务端返回的一个身份令牌，在项目中的多个业务中需要使用到：

  • 访问需要授权的 API 接口
  • 校验页面的访问权限
  • …

但是我们只有在第一次用户登录成功之后才能拿到 Token。

所以为了能在其它模块中获取到 Token 数据，我们需要把它存储到一个公共的位置，方便随时取用。

往哪儿存？

  • 本地存储
    • 获取麻烦
    • 数据不是响应式
  • Vuex 容器（推荐）
    • 获取方便
    • 响应式的

使用容器存储 Token 的思路：

  • 登录成功，将 Token 存储到 Vuex 容器中
    • 获取方便
    • 响应式
  • 为了持久化，还需要把 Token 放到本地存储
    • 持久化

下面是具体实现。

1、在 src/store/index.js 中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // 用户的登录状态信息
    user: JSON.parse(window.localStorage.getItem('TOUTIAO_USER'))
    // user: null
  },
  mutations: {
    setUser (state, user) {
      state.user = user
      window.localStorage.setItem('TOUTIAO_USER', JSON.stringify(user))
    }
  },
  actions: {
  },
  modules: {
  }
})

2、登录成功以后将后端返回的 token 相关数据存储到容器中

async onLogin () {
  // const loginToast = this.$toast.loading({
  this.$toast.loading({
    duration: 0, // 持续时间，0表示持续展示不停止
    forbidClick: true, // 是否禁止背景点击
    message: '登录中...' // 提示消息
  })
  try {
    const res = await login(this.user)

    // res.data.data => { token: 'xxx', refresh_token: 'xxx' }
+    this.$store.commit('setUser', res.data.data)

    // 提示 success 或者 fail 的时候，会先把其它的 toast 先清除
    this.$toast.success('登录成功')
  } catch (err) {
    console.log('登录失败', err)
    this.$toast.fail('登录失败，手机号或验证码错误')
  }

  // 停止 loading，它会把当前页面中所有的 toast 都给清除
  // loginToast.clear()
}

优化封装本地存储操作模块

  1. 创建 src/utils/storage.js 模块

    export const getItem = name => {
  const data = window.localStorage.getItem(name)
  try {
    return JSON.parse(data)
  } catch (err) {
    return data
  }
}

export const setItem = (name, value) => {
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(name, value)
}

export const removeItem = name => {
  window.localStorage.removeItem(name)
}

  2. 在store/index.js引入方法

    import { getItem, setItem } from '@/utils/storage.js'
const TOKEN = 'TOUTIAO_USER'

  3. 使用方法

    export default new Vuex.Store({
  state: {
    // 获取本地数据
    user: getItem(TOKEN)
  },
  mutations: {
    setUser (state, data) {
      state.user = data
      // 保存本地数据
      setItem(TOKEN)
    }
  }
})

关于 Token 过期问题

登录成功之后后端会返回两个 Token：

  • token：访问令牌，有效期2小时
  • refresh_token：刷新令牌，有效期14天，用于访问令牌过期之后重新获取新的访问令牌

我们的项目接口中设定的 Token 有效期是 2 小时，超过有效期服务端会返回 401 表示 Token 无效或过期了。

为什么过期时间这么短？

  • 为了安全，例如 Token 被别人盗用

过期了怎么办？

  • 让用户重新登录，用户体验太差了
  • 使用 refresh_token 解决 token 过期

如何使用 refresh_token 解决 token 过期？

到后面我们开发的业务功能丰富起来之后，再给讲解 Token 过期处理。

需要注意的是在测试的时候如果收到 401 响应码，请重新登录再测试。

概述：服务器生成token的过程中，会有两个时间，一个是token失效时间，一个是token刷新时间，刷新时间肯定比失效时间长，当用户的 token 过期时，你可以拿着过期的token去换取新的token，来保持用户的登陆状态，当然你这个过期token的过期时间必须在刷新时间之内，如果超出了刷新时间，那么返回的依旧是 401。

处理流程：

  1. 在axios的拦截器中加入token刷新逻辑
  2. 当用户token过期时，去向服务器请求新的 token
  3. 把旧的token替换为新的token
  4. 然后继续用户当前的请求

在请求的响应拦截器中统一处理 token 过期：

/**
 * 封装 axios 请求模块
 */
import axios from "axios";
import jsonBig from "json-bigint";
import store from "@/store";
import router from "@/router";
// axios.create 方法：复制一个 axios
const request = axios.create({
  baseURL: "http://ttapi.research.itcast.cn/" // 基础路径
});
/**
 * 配置处理后端返回数据中超出 js 安全整数范围问题
 */
request.defaults.transformResponse = [
  function(data) {
    try {
      return jsonBig.parse(data);
    } catch (err) {
      return {};
    }
  }
];
// 请求拦截器
request.interceptors.request.use(
  function(config) {
    const user = store.state.user;
    if (user) {
      config.headers.Authorization = `Bearer ${user.token}`;
    }
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
// 响应拦截器
request.interceptors.response.use(
  // 响应成功进入第1个函数
  // 该函数的参数是响应对象
  function(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  },
  // 响应失败进入第2个函数，该函数的参数是错误对象
  async function(error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    // 如果响应码是 401 ，则请求获取新的 token
    // 响应拦截器中的 error 就是那个响应的错误对象
    console.dir(error);
    if (error.response && error.response.status === 401) {
      // 校验是否有 refresh_token
      const user = store.state.user;
      if (!user || !user.refresh_token) {
        router.push("/login");

        // 代码不要往后执行了
        return;
      }
      // 如果有refresh_token，则请求获取新的 token
      try {
        const res = await axios({
          method: "PUT",
          url: "http://ttapi.research.itcast.cn/app/v1_0/authorizations",
          headers: {
            Authorization: `Bearer ${user.refresh_token}`
          }
        });
        // 如果获取成功，则把新的 token 更新到容器中
        console.log("刷新 token  成功", res);
        store.commit("setUser", {
          token: res.data.data.token, // 最新获取的可用 token
          refresh_token: user.refresh_token // 还是原来的 refresh_token
        });
        // 把之前失败的用户请求继续发出去
        // config 是一个对象，其中包含本次失败请求相关的那些配置信息，例如 url、method 都有
        // return 把 request 的请求结果继续返回给发请求的具体位置
        return request(error.config);
      } catch (err) {
        // 如果获取失败，直接跳转 登录页
        console.log("请求刷线 token 失败", err);
        router.push("/login");
      }
    }
    return Promise.reject(error);
  }
);
export default request;
不停喝水
关注
专栏目录
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 7133
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
基于SpringCloud+vue+element设计的手机端网络购物商城
02-13 1090
本系统利用springboot和mysql技术作为系统的后台，利用vue技术和element ui 搭建系统的前台。前台包括用户前台页面和后台管理页面。 用户前台页面必须满足用户购物的需求，要有购物车、订单、下单和收藏等功能。系统后台管理页面需要对店铺的商品、用户和订单进行管理，同时需要统计店铺的各种销量数据等等。通过本系统可以解决用户可以通过移动互联网不用安装移动应用进行网上购物，同时满足了商家拓展线上销售的渠道。
Vue —— 注册、登录
weixin_54966486的博客
04-12 2709
注意点 assets 文件夹：组件共用的静态资源 CSS 中可以写 @(src别名) ==> ~@
Vue2创建移动端项目
小废物
02-11 1002
创建vue2移动端项目
vue移动端项目--登录注册模块
m0_59056563的博客
10-02 457
vsCode配置import@路径提示_SunnyRun-CSDN博客
vue登录注册(移动端)
m0_53912016的博客
05-08 1707
登录注册 效果图 代码
Vue --- 登陆+注册
热门推荐
ty0714的博客
05-05 2万+
目录 1. vue怎么引入和配置使用element-ui框架 2. Vue+ElementUI设计登陆和注册页面 3. 后台交互(axios/qs/vue-axios) 附录一：ES6的语法箭头函数： 箭头函数： this 练习 目标：vue+elementUI完成注册及登陆 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack 项目名(medpro) 1.2 npm安装...
移动APP登录注册（vue+vant）
weixin_45667289的博客
03-30 1万+
vue搭配vant组件可以做手机APP界面（vant是业界主流的移动端组件库之一） 我们可以使用vue和组件vant实现简单的登录和注册，下面是我做出来的样子（这是在手机测试的界面） 里面很多组件都是在vant官网上面直接拿来使用的 其中我做了一些小的提示： 1. 登录成功后有“登录成功”提示 2. 未输入用户名和密码会提示“请输入账号或密码” 3. 用户名或密码错误会提示“账号或密码错误” 4. 注册界面，未输入完全信息会提示“注册失败！信息未完善” 5. 注册成功之后有提示“注册成功”，然后上面提示
基于vue的移动端的商城，很全，购物车，登录注册，短信验证，
10-05
基于vue，新手必备项目，结构布局，都有很好的借鉴，购购物车动画，登录拦截都做了处理，
Vue移动端项目（一）
qq_48687155的博客
08-20 3324
Vue移动端项目
前端废物的自救之路（2）Ant Design Vue实现登录页面及表单校验功能
江文 | Back-End Developer
03-15 1881
前端废物的自救之路（2）Ant Design Vue实现登录页面及表单校验功能 前言 由于后台没有要求响应式，本来我是打算使用Element UI（以下简称element）作为后台的UI框架的——因为Element的参考资料实在是太多了，简直是我等前端废物的福音，并且我以前的项目中也多次使用了element。但是在认真研究了Ant Design Vue（以下简称antdv）的文档后，我决定前后台都使用antdv，因为antdv支持响应式所以可以前后台用一套框架，并且antdv在设计上更加符合我的审美，也更简
Vue移动端系列 =＞ [02-1] 登陆注册的函数封装
Write less，do more
11-04 245
1.首先需要创建一个config文件夹 里面创建url.config.js文件 // 这个文件就是我们整个项目里面的一些常量和url地址 // 让我们在检查我们项目的时候，一眼就可以知道项目的大概方向 export default { token: 'TOUTIAO_TOKEN', baseURL: 'http://ttapi.research.itcast.cn/app/v1_0/', login: 'authorizations', }; 2.在request.js里面导入url.con
vue实现登录注册
最新发布
weixin_64443786的博客
08-18 2467
vue
Vue的登录注册页面
weixin_42576467的博客
02-15 510
Vue是一个流行的JavaScript框架，可以用于开发前端应用程序。在Vue中，可以使用组件来构建登录注册页面。 对于登录页面，可以创建一个组件，包含输入用户名和密码的表单，并在表单提交时向服务器发送请求以进行身份验证。如果身份验证成功，可以将用户重定向到应用程序的主页，否则可以向用户显示错误消息。 对于注册页面，可以创建另一个组件，包含输入用户名、密码和其他必需信息的表单。当表单提交时，可以将...
vue3优雅实现移动端登录注册模块
brokenkay的博客
03-27 3505
前言 近期开发的移动端项目直接上了vue3,新特性composition api确实带来了全新的开发体验.开发者在使用这些特性时可以将高耦合的状态和方法放在一起统一管理,并能视具体情况将高度复用的逻辑代码单独封装起来,这对提升整体代码架构的健壮性很有帮助. 如今新启动的每个移动端项目基本上都包含注册登录模块,本次实践过程中针对登录注册中的表单控件做了一些经验上的总结,通过抽离提取共性代码来提升代码的可维护性和开发效率. 接下来观察一下美工同学提供的图片. 注册页面 在这里插入图片描述 登录页
vue移动端 登录注册的业务流程
温柔雨哥的博客
05-12 1782
在我们开发一些项目的时候，有些路由页面是要登录才能进入，例如进入个人中心，或者我的博客，写博客等等一些页面... 当然，也有一些页面是不需要登录就能进去的，例如：首页，注册页等等... 当需要登录的页面，我们就要加上验证，不需要的则不用 该如何判断呢？就该在路由里的js加一些代码来判断了 登录流程 判断用户是否登录 第一次登录的时候，前端调后端的登陆接口，发送用户名和密码，后端收到请求，验证用户名和密码 如果想点进我的页面，没有登录的话，会自动跳转登录页面，前端可根...
vue移动端用户登录界面_20个美丽的移动用户界面，激发您的灵感
cune1359的博客
06-30 2599
在当今步调一致的Web空间中，移动界面的设计人员正变得越来越重要。 尽管针对移动设备进行了优化的网站可能减轻了网站开发人员的负担，但有些人更喜欢构建功能全面的应用程序。 现在，对应用程序设计人员和开发人员的需求特别高，尤其是在用户界面方面。 UI设计着重于用户体验和交互 ，尽管易于使用很重要，但有吸引力且实用的设计对于应用程序的成功至关重要 。 今天，我想向您展示一些模型，草图，按钮，...
Vue硅谷外卖笔记
qq_43751465的博客
03-01 935
引擎是如何工作的？ 引擎很复杂，但是基本原理很简单。 引擎（如果是浏览器，则引擎被嵌入在其中）读取（“解析”）脚本。 然后，引擎将脚本转化（“编译”）为机器语言。 然后，机器代码快速地执行。 引擎会对流程中的每个阶段都进行优化。它甚至可以在编译的脚本运行时监视它，分析流经该脚本的数据，并根据获得的信息进一步优化机器代码。 对 babel polyfill 的一些理解 Babel学习系列4 ...
React项目中实现axios路由跳转取消上个路由页面的所有请求 和 取消当前路由页面的重复请求
winne雪
03-28 3196
一、 抛出问题 1、当一个页面的请求过长时，点击了跳转路由到新的页面，但是上一个路由的请求结果在当前路由页面提示，非常难看且容易让客户混淆。（所以需要路由跳转取消上个路由页面的所有请求） 2、在当前页面某个请求长时间没拿到返回结果，然后用户又点击发起了相同请求，这时有可能后发送的请求返回的数据被先发送的请求覆盖，这样就得不到最新请求数据了。（所以需要取消当前路由页面的重复请求，以保证后发送的请求返回的数据不会被先发送的请求覆盖） 3、上面两种情况都会浪费网络资源 二、解决问题 1、我们在axios封装文件a
vue移动端登录界面.zip
01-09
多套app登录页面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不停喝水

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

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

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

打赏作者

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

抵扣说明：

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

余额充值