使用Vue开发项目(黑马头条项目)--第二天（上）

MeQingJe
587 阅读3分钟

需要实现的主要功能如下：

资讯列表、标签页切换，文章举报，频道管理、文章详情、阅读记忆，关注功能、点赞功能、评论功能、回复评论、搜索功能、登录功能、个人中心、编辑资料、小智同学 ...

今天需要实现的功能：

实现页面登录功能，登录拦截等，并做出主体框架为明天的二级路由做准备

1 login的创建

1.1 创建login登录页面

在src/views 中创建 login/login.vue 并写入初始代码

<template>
  <div class="login">
    用户登录
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

1.2 配置路由

在 router/index.js 中配置路由表

{
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')
}

1.3 在根组件app.vue配置路由容器

<template>
  <div id="app">
    <!-- 之前留下来的路由出口 在此显示路由内容 -->
    <router-view></router-view>
  </div>
</template>

1.4 测试效果

访问 /login 查看是否能访问到登录页面组件

image.png

2 学习vant组件库中的布局

2.1 使用vant组件库中的组件实现登录页面布局

将login.vue页面修改为如下：

<template>
  <div>
    <!-- 1. nav-bar -->
    <van-nav-bar
      title="黑马头条"
    />
    <!-- 2. 表单登录 -->
    <van-form @submit="onSubmit"  @failed="onFailed">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
      />
      <van-field
        v-model="password"
        type="text"
        name="密码"
        label="密码"
        placeholder="密码"
      />
      <div style="margin: 16px;" class="btn-wrap">
        <van-button class="van-button" round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>

2.2.1 导入全局样式

创建 styles/index.less 并写入以下内容：

// 全局样式
.van-nav-bar{
  background-color: #3196fa;
  .van-nav-bar__title {
    color:#fff;
  }
}

在 main.js 中引入

// 省略其它...
// 引入全局样式
import '@/styles/index.less'

2.2.2 写入按钮的局部样式(在views/login/login.vue的style中写入如下内容)

<style lang="less" scoped>
  // 按钮
  .btn-wrap {
    padding:20px;
    .van-button{
      width: 100%;
      background-color: #6db4fd;
      color:#fff;
    }
  }
</style>

2.3 看到登录页最终的效果为：

image.png

3 数据双向绑定

3.1 补充数据项

在login/login.vue 中添加 user 数据字段：

export default {
  data () {
    return {
      user: {
        //mobile和code的命名建议与接口文档为准
        mobile: '13800000002', // 测试账号可以登录
        code: '246810'  // 必须一定是这个值
      }
    }
  }
}
</script>

3.2 在表单中使用 v-model 做数据绑定

在表单对应的位置修改为如下代码

<van-cell-group>
  <van-field label="手机号" v-model.trim="user.mobile" placeholder="请输入手机号" />
</van-cell-group>
<van-cell-group>
  <van-field label="密码" v-model.trim="user.code" type="password" placeholder="请输入密码" />
</van-cell-group>

3.3 最后在浏览器使用 VueDevtools 调试工具查看是否绑定成功

image.png

4 学习vant的form表单校验功能

4.1 总结：van-form中的表单校验的要点是：

  • 表单验证成功或者失败的事件：failed, submit (加在van-form上)
  • 表单元素的验证时机: validate-trigger， 默认是onblur：失去焦点时验证 (加在van-form上)
  • 验证规则添加在具体的表单元素上

4.2 在两个van-field标签中写入：rules属性

 <!-- 表单区域 -->
      <van-cell-group>
        <van-field
          v-model.trim="user.mobile"
          type="tel"
          label="手机号"
          :rules="[{ pattern: /^1\d{10}$/, message: '请输入正确的手机号'}]"
        />
        <van-field
          v-model.trim="user.code"
          type="password"
          label="密码"
          :rules="[{ pattern: /^\d{6}$/, message: '请输入正确的密码'}]"
        />
      </van-cell-group>

在script标签中写入以下代码：

<script>
export default {
  data () {
    return {
      user: {
        mobile: '13911111111', // 初始帐号
        code: '246810' // 固定密码
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('验证成功')
      this.doLogin()
    },
    onFailed () {
      console.log('验证失败')
    },
    doLogin () {
      // 做具体的登录功能
    }
  }
}
</script>

5 登录-发ajax请求做登录

5.1 在api/user.js中写入代码：

import request from '@/utils/request.js'

export const login = (user) => {
  return request({
    url: '/v1_0/authorizations', // 接口地址
    method: 'POST', // 方式
    // 如果参数通过请求体来发(post)，就用data
    // 如果参数通过请求行来发(get)，就用params
    data: user
  })
}

5.2 在login.vue中调用

import { login } from '../../api/user'
async doLogin () {
      // 做具体的ajax提交动作
      try {
        const res = await login(this.user)
        console.log(res)
        alert('登录成功')
      } catch (err) {
        console.log(err)
        alert('登录失败')
      }
    },
    onSubmit (values) {
      // console.log('submit', values)
      this.doLogin()
    }

注意：上述引入login若不带{}会报如下错误

image.png

5.3 在浏览器的network中查看请求

image.png

可以看到一共发送了两次请求：ajax的预检请求，它在真正的请求之前发出去， 如果它成功了，后续才会发出真正的请求。这是浏览器发出去的 什么时候会发预检命令?请求是非简单请求的时候会发送预检请求

6 通过vant中提供的toast.loading,toast.loading, toast.success, $toast.fail来提升用户交互体验

6.1 在try catch 之前加入如下代码，替换原本的登录成功、失败提示：

async doLogin () {
  this.$toast({
    duration: 0, // 持续展示 toast,永远不会关闭
    overlay: true, // 整体添加一个遮罩
    message: '加载中...'
  })

  // 做具体的ajax提交动作
  try {
    const res = await login(this.user)
    console.log(res)
    this.$toast.success('登录成功')
  } catch (err) {
    console.log(err)
    this.$toast.fail('登录失败')
  }
}

6.2 为了方便获取后台数据我们将线上地址改为本地地址

在request.js中修改axios的基地址:

const request = axios.create({
  // baseURL: 'http://toutiao-app.itheima.net' // 线上的
  baseURL: 'http://localhost:8000' // 本机的
  // baseURL: 'http://ip地址自行查看:8000'
})
avatar
文章
阅读
粉丝