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

时间  2019-12-10
标签 nuxt.js nuxt 打造 旅游 网站 登陆 页面 编写 栏目 JavaScript 繁體版
原文   原文链接

 主要知识点：

1.使用vuex/store管理数据vue

2.登陆注册逻辑ios

3.Nuxt的本地存储git

 

1.登陆页面

1.1登陆页面布局

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

<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-width:1000px;

    .main{
        width:1000px;
        height: 100%;
        margin:0 auto;
        position: relative;
        
        .form-wrapper{
            width:400px;
            margin:0 auto;
            background:#fff;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
            overflow:hidden;
            
            .tabs{
                span{
                    display: block;
                    width: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>
pages/user/login.vue

 

1.2 登陆功能

 

思路：vuex

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

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

3.表单数据绑定app

4.表单验证less

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{
        width:100%;
        margin-top:10px;
    }
</style>
components/user/loginForm.vue

注意：新增了组件后在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)
              })
            }
          })
        }
loginForm.vue

 

在页面中显示用户登陆的手机号，在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;
  }
}
store/user.js

 

2.读取user下面的用户

{{ $store.state.user.userInfo.user.username }}
components/header.vue

 

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

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

 

把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>
header.vue

 

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的方法记得加上模块名字（命名空间）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程