从0开始写Vue项目-Vue页面主体布局和登录、注册页面

1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客

1. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客

一、主体布局

    关于主体布局，我们刚开始肯定是做的死数据的，当我们后面整合SpringBoot的时候就会将数据联动起来了。 

    而关于我们的数据，我们依然可以在我们的Element-ui官网里面找到我们的例子，然后进行引入来做成静态的数据。

我们可以选择自己喜欢的表格来作为我们后面存放数据的容器

当我们写上样式之后，做完页面一定记得要在我们的路由里面去引入我们的Vue组件

然后启动我们的程序，就可以看见效果了。

<template>
  <div style="width: 800px">
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "Home",
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

二、登录页面

    其实登录页面很好写，但是我们要做的就是表单校验了，就是去判断你是否输入账号和密码，且你输入的账号和密码是否正确。

我们可以参考我们的element官网，这里给出了表单校验的例子

所以这个时候就需要我们先建一个用户表了

用户表SQL

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `username` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名',
  `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '昵称',
  `password` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '密码',
  `role` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT 'USER' COMMENT '身份',
  `avatar_url` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '头像',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

然后就是我们的登录校验表单，我们需要的是用户名和密码，也就是username和password

1.在我们的输入框里面绑定我们的数据

<el-form ref="form" :model="form" size="normal" :rules="rules" >
          <el-form-item prop="username" class="props">
            <el-input  placeholder="账号" clearable v-model="form.username" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="password" class="props">
            <el-input placeholder="密码" v-model="form.password" show-password prefix-icon="el-icon-lock" />
          </el-form-item>
          <ek-form-item>
            <div style="display: flex">
              <el-input v-model="form.validCode" style="width: 60%" placeholder="请输入验证码" size="medium"></el-input>
              <ValidCode @input="createValidCode" />
            </div>
          </ek-form-item>
          <el-form-item style="padding-top:15px">
            <el-button type="primary" style="width: 100%" @click="login" round>登 录</el-button>
          </el-form-item>
            <div style="margin: 10px 0; text-align: right;">
              <a href="/register" style="color: var(--colorRed)">立即注册</a>
            </div>
        </el-form>

2.进行表单校验

rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 6 到 11 个字符', trigger: 'blur'}
        ],
      },

然后最后就是对他进行样式调整和路由配置了

Ps：我在这里加入了验证码登录，具体详情请查看其他博客：Vue实现验证码登录_vue 登陆校验_慕言要努力的博客-CSDN博客

<template>
  <div style="height: 100vh; overflow: hidden">
    <div style="height: 50px;
      line-height: 50px;
      border-bottom: 2px solid var(--colorRed);
      padding-left: 20px;
      color: var(--colorRed)">
      <b style="font-size: 24px;">xx宿舍</b>
      <i style="margin-left: 20px">-- 只为更好的你</i>
    </div>
    <div style="width: 50%;
      height: 500px;
      margin: 50px auto;
      border-radius: 10px;
      box-shadow: 0 0 10px -2px cornflowerblue;
      display: flex">
      <div style="flex: 1; padding: 50px 50px">
        <img src="../assets/images/电影.png" alt="" style="width: 100%;">
      </div>
      <div style="flex: 1; padding: 20px">
        <div class="form-toggle">
          <b >账号登录</b>
        </div>

        <el-form ref="form" :model="form" size="normal" :rules="rules" >
          <el-form-item prop="username" class="props">
            <el-input  placeholder="账号" clearable v-model="form.username" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="password" class="props">
            <el-input placeholder="密码" v-model="form.password" show-password prefix-icon="el-icon-lock" />
          </el-form-item>
          <ek-form-item>
            <div style="display: flex">
              <el-input v-model="form.validCode" style="width: 60%" placeholder="请输入验证码" size="medium"></el-input>
              <ValidCode @input="createValidCode" />
            </div>
          </ek-form-item>
          <el-form-item style="padding-top:15px">
            <el-button type="primary" style="width: 100%" @click="login" round>登 录</el-button>
          </el-form-item>
            <div style="margin: 10px 0; text-align: right;">
              <a href="/register" style="color: var(--colorRed)">立即注册</a>
            </div>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode";
const Base64 = require('js-base64').Base64

export default {
  name: "Login",
  components: {
    ValidCode
  },
  data() {
    return {
      form: {
        sex: 1,
        username: '',
        password: '',
      },
      checked: false,
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 6 到 11 个字符', trigger: 'blur'}
        ],
      },
      validCode: '',
    }
  },
  mounted () {
    let username = localStorage.getItem('username')
    if (username) {
      this.form.username = localStorage.getItem('username')
      this.form.password = Base64.decode(localStorage.getItem('password'))// base64解密
      this.checked = true
    }
  },
  created() {
    sessionStorage.removeItem("user")
  },
  methods: {
    register:function(){
      this.$router.push("/register");
    },
    //接收验证码组件提交的4位验证码
    createValidCode(data) {
      this.validCode = data
    },
    login() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!this.form.validCode) {
            this.$message.error("请填写验证码")
            return
          }
          if (this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error("验证码错误")
            return
          }
          request.post("/user/login", this.form).then(res => {
            if (res.code === '200'){
              // sessionStorage.setItem("user", JSON.stringify(res.data))//缓存用户信息
              localStorage.setItem("user", JSON.stringify(res.data))
              if (res.data.role === 'USER') {
                this.$router.push("/")
              } else {
                this.$router.push("/mall/user")
              }
              this.$message({
                type: "success",
                message: "登录成功"
              })
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      });
    },
  }
}
</script>

<style scoped>
.form-toggle {
  margin: 20px 0;
  text-align: center
}
.form-toggle b {
  font-size: 20px;
  cursor: pointer;
}

</style>

3.功能展示

三、注册页面

注册页面跟登录页面差不多，无外乎是多加了一个二次密码校验。

1.绑定数据

<el-form ref="form" :model="form" size="normal" :rules="rules">
          <el-form-item prop="username">
            <el-input placeholder="用户名" clearable v-model="form.username" prefix-icon="el-icon-user"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="密码" v-model="form.password" show-password prefix-icon="el-icon-lock"/>
          </el-form-item>
          <el-form-item prop="confirm">
            <el-input placeholder="密码" v-model="form.confirm" show-password  prefix-icon="el-icon-lock"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register" round>注 册</el-button>
          </el-form-item>
          <div style="margin: 10px 0; text-align: right;">
            <a href="/login" style="color: var(--colorRed)">返回登录</a>
          </div>
        </el-form>

2.表单校验

rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 10, message: "长度在6到10个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: '请输入你想设置的密码', trigger: 'blur'},
          { min: 6, max: 11, message: '长度在6到11个字符', trigger: 'blur'}
        ],
        confirm: [
          { required: true, message: '请再次输入你设置的密码', trigger: 'blur'},
          { min: 6, max: 11, message: '长度在6到11个字符', trigger: 'blur'}
        ],
      }

3.配置路由和功能展示

4.完整代码

<template>
  <div style="height: 100vh; overflow: hidden">
    <div style="height: 50px;
      line-height: 50px;
      border-bottom: 2px solid var(--colorRed);
      padding-left: 20px;
      color: var(--colorRed)">
      <b style="font-size: 24px;">xx宿舍</b>
      <i style="margin-left: 20px">-- 只为更好的你</i>
    </div>

    <div style="width: 50%;
      margin: 50px auto;
      border-radius: 10px;
      box-shadow: 0 0 10px -2px cornflowerblue;
      display: flex">
      <div style="flex: 1; padding: 50px 50px">
        <img src="../assets/images/电影.png" alt="" style="width: 100%;">
      </div>

      <div style="flex: 1; padding: 20px">
        <div class="form-toggle">
          <b >账号注册</b>
        </div>

        <el-form ref="form" :model="form" size="normal" :rules="rules">
          <el-form-item prop="username">
            <el-input placeholder="用户名" clearable v-model="form.username" prefix-icon="el-icon-user"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="密码" v-model="form.password" show-password prefix-icon="el-icon-lock"/>
          </el-form-item>
          <el-form-item prop="confirm">
            <el-input placeholder="密码" v-model="form.confirm" show-password  prefix-icon="el-icon-lock"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register" round>注 册</el-button>
          </el-form-item>
          <div style="margin: 10px 0; text-align: right;">
            <a href="/login" style="color: var(--colorRed)">返回登录</a>
          </div>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
const Base64 = require('js-base64').Base64

export default {
  name: "Register",
  data() {
    return {
      form: {sex: 1},
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 10, message: "长度在6到10个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: '请输入你想设置的密码', trigger: 'blur'},
          { min: 6, max: 11, message: '长度在6到11个字符', trigger: 'blur'}
        ],
        confirm: [
          { required: true, message: '请再次输入你设置的密码', trigger: 'blur'},
          { min: 6, max: 11, message: '长度在6到11个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    login:function(){
      this.$router.push("/login");
    },
    register() {
      if (this.form.password !== this.form.confirm) {
        this.$message({
          type: "error",
          message: "密码不一致"
        })
        return
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          request.post("/user/register", this.form).then(res => {
            if (res.code === '200') {
              this.$message({
                type: "success",
                message: "注册成功"
              })
              this.$router.push("/login")  //登录成功过后进行页面跳转到主页
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.form-toggle {
  margin: 20px 0;
  text-align: center
}
.form-toggle b {
  font-size: 20px;
  cursor: pointer;
}
.active {
  color: var(--colorRed);
}
</style>

⛵小结

    **以上就是对从0开始写Vue项目-Vue页面主体布局和登录、注册页面的概述，之后会陆续更新后面的模块，包括后端代码，带大家手码项目，提升自己的编码能力。 **

    如果这篇文章有帮助到你，希望可以给作者点个赞👍，创作不易，如果有对后端技术、前端领域感兴趣的，也欢迎关注 ，我将会给你带来巨大的收获与惊喜💝💝💝！