Nuxt.js打造旅游网站第3篇_登录页面的编写

 主要知识点：

1.使用vuex/store管理数据

2.登录注册逻辑

3.Nuxt的本地存储

1.登录页面

1.1登录页面布局

替换pages/user/login.vue的代码如下

<template>
    <div class="container">
        <!-- 主要内容 -->
        <el-row 
        type="flex" 
        justify="center" 
        align="middle" 
        class="main">

            <div class="form-wrapper">
                <!-- 表单头部tab -->
                <el-row type="flex" justify="center" class="tabs">
                    <span :class="{active: currentTab === index}" 
                    v-for="(item, index) in [`登录`, `注册`]"
                    :key="index" 
                    @click="handleChangeTab(index)">
                        {{item}}
                    </span>
                </el-row>

                <!-- 登录功能组件 -->
                <LoginForm v-if="currentTab == 0"/>

                <!-- 注册功能组件 -->
                <!-- <RegisterForm v-if="currentTab == 1"/> -->
            </div>
        </el-row>
    </div>
</template>

<script>
import LoginForm from '@/components/user/loginForm'
export default {
    components: {
      LoginForm
    },
    data(){
        return {
            currentTab: 0
        }
    },
    methods: {
        handleChangeTab(index){
            this.currentTab = index;
        },
    }
}
</script>

<style scoped lang="less">
.container{
    background:url(http://157.122.54.189:9095/assets/images/th03.jfif) center 0;
    height: 700px;
    min-1000px;

    .main{
        1000px;
        height: 100%;
        margin:0 auto;
        position: relative;
        
        .form-wrapper{
            400px;
            margin:0 auto;
            background:#fff;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
            overflow:hidden;
            
            .tabs{
                span{
                    display: block;
                    50%;
                    height: 50px;
                    box-sizing: border-box;
                    border-top:2px #eee solid;
                    background:#eee;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                    color:#666;

                    &.active{
                        color:orange;
                        border-top-color: orange;
                        background:#fff;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>

1.2 登录功能

思路：

1.在components/user中新建loginForm.vue表单组件

2.使用Element-ui的表单组件

3.表单数据绑定

4.表单验证

5.登录接口

实现步骤：

1.新建loginForm.vue表单组建

在components/user中新建loginForm.vue组件，新增内容如下

<template>
    <el-form 
        :model="form" 
        ref="form"
        :rules="rules" 
        class="form">

        <el-form-item class="form-item">
            <el-input 
            placeholder="用户名/手机">
            </el-input>
        </el-form-item>

        <el-form-item class="form-item">
            <el-input 
            placeholder="密码" 
            type="password">
            </el-input>
        </el-form-item>

        <p class="form-text">
            <nuxt-link to="#">忘记密码</nuxt-link>
        </p>

        <el-button 
        class="submit"
        type="primary"
        @click="handleLoginSubmit">
            登录
        </el-button>
    </el-form>

</template>

<script>
export default {
    data(){
        return {
            // 表单数据
            form: {},
            // 表单规则
            rules: {},
        }
    },
    methods: {
        // 提交登录
        handleLoginSubmit(){
           console.log(this.form)
        }
    }
}
</script>

<style scoped lang="less">
    .form{
        padding:25px;
    }

    .form-item{
        margin-bottom:20px;
    }

    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }

    .submit{
        100%;
        margin-top:10px;
    }
</style>

注意：新增了组件后在pages/user/login.vue中导入即可，导入位置，去除下面部分的组件的注释

<!-- 登录功能组件 -->
<!-- <LoginForm v-if="currentTab == 0"/> -->

2.表单数据绑定

修改data的form数据，然后使用v-model绑定到对应的表单字段。

编辑components/user/loginForm.vue

// 其他代码...

data(){
    return {
        // 表单数据
        form: {
            username: "",   // 登录用户名/手机
            password: ""    // 登录密码
        },
        // 其他代码...
    }
},
    
// 其他代码...

使用v-model绑定到对应的表单字段

<!-- 其他代码... -->

<el-form-item class="form-item">
    <!-- 新增了v-model -->
    <el-input 
              placeholder="用户名/手机"
              v-model="form.username">
    </el-input>
</el-form-item>

<el-form-item class="form-item">
    <!-- 新增了v-model -->
    <el-input 
              placeholder="密码" 
              type="password"
              v-model="form.password">
    </el-input>
</el-form-item>

<!-- 其他代码... -->

3.表单验证

双向数据绑定到form字段后，我们现在可以来提交表单了，但是提交之前还需要验证下表单字段是否合法，比如不能为空。

继续编辑components/user/loginForm.vue

// 其他代码...

data(){
    return {
        // 其他代码...

        // 表单规则
        rules: {
            username: [
                { 
                    required: true, 
                    message: '请输入用户名', 
                    trigger: 'blur' 
                },
            ],
            password: [
                { 
                    required: true, 
                    message: '请输入密码', 
                    trigger: 'blur' 
                },
            ],
        },
    }
},
    
// 其他代码...

在el-form-item添加prop属性

<!-- 其他代码... -->

<!-- 新增了prop属性 -->
<el-form-item class="form-item" prop="username">
    <el-input 
              placeholder="用户名/手机"
              v-model="form.username">
    </el-input>
</el-form-item>

<!-- 新增了prop属性 -->
<el-form-item class="form-item" prop="password">
    <el-input 
              placeholder="密码" 
              type="password"
              v-model="form.password">
    </el-input>
</el-form-item>

<!-- 其他代码... -->

现在可以尝试在把input输入框的值清空，会出现在rules中的定义的提示内容

4.登录接口

接下来要调用登录的接口进行登录了，如果一切正常的话，我们可以看到后台返回的用户信息，如果登录失败，我们需要对统一对错误的返回进行处理，这个我们在最后再统一实现。

修改components/user/loginForm.vue的提交登录事件：

// 其他代码...

// 提交登录
methods: {
    handleLoginSubmit(){
        // 验证表单
        this.$refs['form'].validate((valid) => {
            // 为true表示没有错误
            if (valid) {
                this.$axios({
                    url: "/accounts/login",
                    method: "POST",
                    data: this.form
                }).then(res => {
                    console.log(res.data);
                })
            }
        })
    }
}

// 其他代码...

现在登录接口可以开始访问了，服务器给我们提供了测试账号密码

账号：13800138000

密码：123456

 

如果正常登录应该可以在控制看到打印出来的用户信息，则表示登录成功了。

5.总结

1. 在components/user中新建loginForm.vue表单组件

2. 使用Element-ui的表单组件绑定数据和验证表单

3. 调用登录接口

2.使用store管理数据

思路：

使用vuex统一管理用户登录注册行为和用户信息。

1.在store文件夹下新建user.js

2.在store/user.js中实现登录，并保存数据到store的state中

3.在头部组建中显示用户信息

实现步骤：

新建状态文件

// 每个小仓库都必须暴露出 state, mutations

export const state = {
userInfo: {
// 用户验证的token
token: "",
// 用户信息
user: {

}

}
}

export const mutations = {
// 设置用户信息
setUserInfo(state, data){
state.userInfo = data;
}
}

在登录请求发送成功后存储用户输入的数据到vuex的store仓库中。

        // 提交登录
        handleLoginSubmit(){
          // 验证表单
          this.$refs['form'].validate((valid)=>{
            // 为true表示没有错误
            if(valid){
              this.$axios({
                url: '/accounts/login',
                method: 'POST',
                data: this.form
              }).then(res=>{
                // 1.保存到vuex, 注意调用方法时加上命名空间,也就是方法所在的模块user
                this.$store.commit('user/setUserInfo', res.data)
              })
            }
          })
        }

在页面中显示用户登录的手机号，在header.vue组件中替换下面代码。

<span class="el-dropdown-link">
              <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt="">
              {{this.$store.state.user.userInfo.user.username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
</span>

nuxt下的store的使用

1.先新建数据的模块，一个模块就是一个文件，文件名字就是模块的名字，比如新建一个user模块，每个模块里面可以暴露出3个常用的属性

• state
• mutations
• actions

// 每个小仓库都必须暴露出 state, mutations

export const state = {
  userInfo: {
    // 用户验证的token
    token: "",
    // 用户信息
    user: {

    }
    
  }
}

export const mutations = {
  // 设置用户信息
  setUserInfo(state, data){
    state.userInfo = data;
  }
}

2.读取user下面的用户

{{ $store.state.user.userInfo.user.username }} 

3.调用mutations下的方法时候必须要带有模块名称

// 1.保存到vuex
this.$store.commit("user/setUserInfo", res.data);

把store数据保存到本地

因为这个项目是Node.js项目，所以不能使用使用localStorage方法来存储，这里需要安装一个插件解决这个本地存储问题。

插件地址：https://github.com/robinvdvleuten/vuex-persistedstate

安装依赖

安装：yarn add vuex-persistedstate

配置nuxt.config.js，在plugins中添加下面配置。

{ src: '~/plugins/localStorage.js', ssr: false }

在plugins目录中新建localStorage.js并添加如下代码。

// ~/plugins/localStorage.js

import createPersistedState from 'vuex-persistedstate'

export default ({store}) => {
  window.onNuxtReady(() => {
    createPersistedState({
        key: 'store'
    })(store)
  })
}

使用一个第三方的插件vuex-persistedstate, 通过这个插件会自动把store的数据保存到本地，并且在应用加载完后会自动把本地的数据重新赋值给store。

3.判断显示页面信息

当本地保存的数据被清除后，页面中仍会显示头像，应该显示的是"登录/注册"按钮，修改成下面的代码即可。

<div>
        <div v-if="!$store.state.user.userInfo.token">
          <nuxt-link to="/user/login">登录 / 注册</nuxt-link>
        </div>
        <div v-else>
          <el-dropdown>
            <span class="el-dropdown-link">
              <img
                :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar"
                alt
              />
              {{this.$store.state.user.userInfo.user.username}}
              <i
                class="el-icon-arrow-down el-icon--right"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

4.退出登录

给header.vue组件中的退出按钮添加一个退出事件

<!-- 给通过native给elementUI组件绑定原生事件 -->
<el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>

  methods: {
    // 退出登录，清空本地用户数据
    handleLogout(){
      this.$store.commit('user/clearUserInfo');
    }
  }

在store/user.js模块的mutations中添加一个清空数据的方法。

  // 设置用户数据为空
  clearUserInfo(state){
    state.userInfo = {};
  }

登录成功之后跳转到首页，在loginForm.vue中添加下面代码。

// 跳转到首页
this.$router.push("/");

5.actions的使用

actions是异步的修改仓库的数据，并且依赖mutations。

mutations：用于同步修改仓库的数据。

actions：用于异步修改仓库的数据，例如登录。

将发送登录请求的代码写到actions的方法里面，方便以后维护和调用。

在store/user.js中新增actions。

// 异步修改仓库的数据
export const actions = {
  // login(store, data){
  login({commit}, data){
    return this.$axios({
      url: "/accounts/login",
      method: "POST",
      data:data
    }).then(res => {
      // store.commit("setUserInfo", res.data)
      commit("setUserInfo", res.data)
      // 1.保存到vuex, 注意调用方法时加上命名空间,也就是方法所在的模块user

      // 登录后的行为应该由调用的页面去执行，不能写死，因为每个页面登录成功执行的操作可能不一样
      // this.$router.push("/");
      
    });
  }
}

loginForm.vue组件中的发送登录请求方法的代码改为：

  methods: {
    // 提交登录
    handleLoginSubmit() {
      // 验证表单
      this.$refs["form"].validate(valid => {
        // 为true表示没有错误
        if (valid) {
          this.$store.dispatch('user/login', this.form).then(res=>{
            this.$router.push('/');
          })
        }
      });
    }
  }

actions总结

什么情况下把方法封装到actions？

　　异步的方法需要复用的时候，可以考虑把方法封装到actions，比如登录这些方法。

actions要怎么声明？

　　actions里面的方法第一个参数是store对象,这个对象下面可以访问到所有store的属性(commit, dispatch, state...)用commit修改state数据；

　　第二个是可选的，是传递进来的参数。

怎么调用actions的方法？

this.$store.dispatch('user/login', this.form).then(res=>{ this.$router.push('/'); })

store总结

 什么时候使用Vuex?

　　项目数据比较多，需要多个组件去共享数据的时候可以使用vuex

怎么使用？

　　state: 存储数据

　　mutations: 设置修改state的数据

　　actions: 异步修改state的数据，把可以复用的请求放到actions里面（actions需要调用mutations的方法修改数据）

使用时候注意的问题

　　单词别写错

　　注意调用mutations和actions的方法记得加上模块名字（命名空间）