Vue+node+element-ui

此项目是后台管理系统,主要是项目将之前学习的内容进行复习与加深印象.

登录界面

这个登录界面样式是用element-ui实现的,做法比较简单,用了两个输入框和两个按钮,后端是用node进行校验的(这里我只做了密码登录),根据后端保存好的账号密码,然后进行校验登录

注意这里密码登录和短信登录写成动态组件component,意思就是当我点击密码登录时,就会跳转密码登录的组件,反之跳转短信登录

代码演示

Login目录结构

组件内的界面就不用再router里面进行注册,就正常写界面就好了

Login界面

这里说下,强制绑定(:class),当我点击密码登录时,密码登录会高亮,反之,短信登录就会高亮,首先我们要给active一个样式,就简单的给一个蓝色,css样式在最下面,然后给isActive在data中默认一个true当我点击的时候进行强制绑定,注意@click后面还有一个点击事件,用于控制isActive,当我点击密码登录时,默认就是ture,并且给短信登录的按钮就变成了false 因为短信登录的isActive是取反值的,然后当我点击登录的时候,短信登录的@click事件是isActive=false,这个时候短信登录就会高亮,反之密码登录就会因为isActive=false,就不会高亮.这样就能做到样式切换

再说下这个动态组件component, 是Vue.js中的动态组件用法，它允许您根据一个变量的值来动态渲染不同的组件,简单来说,就是我点击哪个就会渲染哪个,注意**:is**不能省略

:is 属性用于指定要渲染的组件的名称，这通常是一个字符串。
activeComponent 是一个在Vue组件内部的变量，它包含了要渲染的组件的名称。

最后就是样式,样式就用flex布局,简单设置一下就好了

vue 复制代码

<template>
    <div class='container'>
        <div class="login">
            <div>
                <!-- 这里是强制绑定样式,如果isActive的结果是true,那么就是绑定该样式 -->
                <span :class="{ active: isActive }" @click="pwdLogin">密码登录</span><i>|</i>
                <span :class="{ active: !isActive }" @click="msgLogin">短信登录</span>
            </div>
            <!-- 用来渲染导入的组件 -->
            <component :is="activeComponent"></component>
        </div>
    </div>
</template>

js 复制代码

<script>
// 导入相关组件
import PasswordLogin from "@/components/PasswordLogin.vue";
import MessageLogin from "@/components/MessageLogin.vue";
export default {
    data() {
        return {
            isActive: true,
            activeComponent: "PasswordLogin"
        }
    },
    components: {
        PasswordLogin,
        MessageLogin
    },
    mounted() {

    },
    methods: {
        // 密码登录
        pwdLogin() {
            this.isActive = true,
                this.activeComponent = "PasswordLogin"
        },
        // 短信登录
        msgLogin() {
            this.isActive = false,
                this.activeComponent = "MessageLogin"
        }
    },
}

</script>

less 复制代码

<style scoped lang='less'>
.container {
    height: 100%;
    background-color: #003472;
    display: flex;
    // 水平和垂直方向居中,这个样式必须作用在父级元素上
    justify-content: center;
    align-items: center;
    border-radius: 5px;

    .login {
        width: 500px;
        height: 200px;
        border-radius: 5px;
        background-color: #fff;

        div {
            text-align: center;
            padding: 15px 0 15px 0;
            font-size: 20px;

            span {
                cursor: pointer;
            }

            i {
                margin: 0 20px;
            }

            .active {
                color: rgb(12, 191, 241);
            }
        }
    }
}
</style>

以上就是Login的界面布局,然后我们开始看Login的组件PasswordLogin界面

PasswordLogin组件

代码演示

该组件样式基本都是element样式去写的,就是简单的输入框进行登录,然后通过后端node进行验证账号是否正确

通过v-model进行双向绑定,我们首先需要给user的账号和密码为空,在data中进行定义,然后再输入内容时,通过v-model实现双向绑定,密码也同样如此

element中slot是指可通过 slot 来指定在 input 中前置或者后置内容。

prepend	输入框前置内容，只对 `type="text"` 有效
append	输入框后置内容，只对 `type="text"` 有效

vue 复制代码

<template>
  <div class='password'>
    <el-input placeholder="请输入账号" v-model="user.username">
      <template slot="prepend">账号</template>
    </el-input>
    <el-input placeholder="请输入密码" v-model="user.pwd" @keyup.enter.native="login">
      <template slot="prepend">密码</template>
      <template slot="append">忘记密码</template>
    </el-input>
    <div class="btn">
      <el-button>注册</el-button>
      <el-button type="primary" @click="login">登录</el-button>
    </div>

  </div>
</template>

axios通过我们输入框输入的内容,传入到后端进行验证,然后后端再返回结果

这里再说下 sessionStorage.setItem是将用户名保存再内存里面,然后传到下一个界面了,用来记录用户登录

vue 复制代码

<script>
    data() {
    return {
      user: {
        username: "",
        pwd: ""
      }

    }
  },
    methods: {
    login() {
      // then 表示请求成功
      // catch 表示请求失败
      // params 配置选项，用于将参数传递给 HTTP GET 请求，通常用于向服务器发送查询字符串参数
      this.$axios.get('/login', { params: this.user }).then(res => {
        if (res.status == 200) {
          this.$message.success("登录成功")
          // 将username传到下一个界面
          sessionStorage.setItem("username",this.user.username)
          // 跳转界面
          this.$router.push("/home")
        } else {
          this.$message.error("登录失败")
        }
      }).catch(error => {
        console.log(error);
      })
    }
  },
 </script>

node 注意前端传过来的形式,并且user里面的key要与后端的key相同,要不然会报错的

vue 复制代码

let users = [
    {
        username:'admin',
        pwd:'123'
    },
    {
        username:'root',
        pwd:'root'
    }
]

// 登陆请求 参数一：请求路径   参数二：处理请求的函数
app.get('/login',function(req,res){
    // req:请求对象  res：响应对象
    console.log(req.query);
    var username = req.query.username
    var pwd = req.query.pwd
    // 判断用户名密码是否存在
    var flag = users.some(item => item.username == username && item.pwd == pwd)
    if(flag){
        // 通用响应结果 响应码，响应信息，响应数据
        res.send({
            status:200,
            msg:'登陆成功'
        })
    }else{
        res.send({
            status:500,
            msg:'登陆失败'
        })
    }
    
})

css 复制代码

.password {
  .btn {
    display: flex;
    justify-content: space-between;
  }

  .el-button {
    margin-top: 10px;
    width: 40%;
  }
}

代码如果有任何问题,或者哪里说的不对请大家积极指出错误,或者私聊我