一个专业做后端的开发由于好奇玩了下VUE实现了一个登陆页Demo

今天因为好奇vue跟后端交互的方式，大家都说vue开发页面，建站很容易，在网上找了下教程，感受了下。下面给大家分享一下使用springboot+vue搭建前后端分离开发项目的教程，内容比较简单，相信大家动动手也能玩一下。

上面的教程中实现的登录页是这样的

我做出来的效果：

喜欢的朋友可以给我点个赞，下面是我登录页的样式代码：

<template>
  <body id="paper">
    <el-form :model="loginForm" :rules="rules" class="login-container" label-position="left"
             label-width="0px" v-loading="loading">
      <h1 style="color:#050505" class="login_title">系统登录</h1>
      <el-form-item prop="username">
        <el-input style="width:100%" v-model="loginForm.username"
                  auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password" style="margin-top:20px">
        <el-input type="password"style="width:100%" v-model="loginForm.password"
                  auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox class="login_remember" v-model="checked" label-position="center"><span style="color: #505458">记住密码</span></el-checkbox>
      <el-form-item style="margin-top:10px" >
        <el-button type="primary" style="width: 30%;background: #505458;" v-on:click="login">登录</el-button>
        <router-link to="register"><el-button type="primary" style="width: 30%;background: #505458;">注册</el-button></router-link>
      </el-form-item>
    </el-form>
        <el-footer>Create by @yanzhi</el-footer>
  </body>
</template>
<script>
  export default{
    data () {
      return {
        rules: {
          username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        checked: true,
        loginForm: {
          username: '',
          password: ''
        },
        loading: false
      }
    },
    methods: {
      login () {
        var _this = this
        this.$axios
          .post('/rest/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(resp => {
            if (resp.data.code === 200) {

            } else {
              this.$alert(resp.data.message, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {})
      }
      }
    }
</script>
<style>
   #paper {
    background:url("../assets/img/bg/yasuo.jpg") no-repeat;
    background-position: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
   body{
     margin: 0;
   }
  .login-container {
    border-radius: 30px;
    background-clip: padding-box;
    margin: 250px auto;
    width: 400px;
    padding: 1px 35px 15px 35px;
    background: #4682B4;
    border: 100px solid #4682B4;
    box-shadow: 0 0 1000px #FFFFFF;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .login_remember {
    margin: 10px 10px 55px 10px;
    text-align: left;
  }
 .el-footer {
    background-color:transparent;
    color: #F56C6C;
    text-align: center;
    line-height: 60px;
    height:200px;
    box-shadow: 0 0 2px #808080;
  }
</style>

使用vue来开发前端页面确实变得简单了。

1、目录结构有点像后端，维护起来很好维护。比如页面的跳转交给路由，跨域或者代理都可以在代理中解决和处理。

2、代码编写起来也相对简单，如果你曾将感受过JavaScript的痛苦，使用vue会让你豁然开朗。

一个专业做后端的开发由于好奇玩了下VUE实现了一个登陆页Demo

猜你喜欢