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

缺乏、安全感 2024-05-06 23:02 78阅读 0赞

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

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

#### 一、主体布局 ####

![e2169c78b5f4409e8a3c1fd6432aeebf.png][]

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

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

![092b4ded9a6d461a9c263c2802c2219b.png][]

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

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

![1de1eb4656d14996a34c3925124adc45.png][]

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

<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>

#### 二、登录页面 ####

![4e4a60a0292d4e4780879ee3e8cd4146.png][]

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

![91dd3290354445e3bbcafe302acea086.png][] 我们可以参考我们的element官网，这里给出了表单校验的例子

![d512a7d71a0f42d4beb5c8c898e0256f.png][]

![9e4ac130c5de4e349f2d64dbcf223082.png][] 所以这个时候就需要我们先建一个用户表了

**用户表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;

![86ab2c7fce2b42a1a299df8db0318962.png][]

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

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

![43cd1de934834fac85ca4b160aec1da5.png][]

<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.进行表单校验**

![750e3d19d90d4d7398485f28d80b8a45.png][]

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博客][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.功能展示**

![d4fc473b34834e88826d8a7b35627eff.png][]

#### 三、注册页面 ####

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

![dfa2e49c2201461d96568e4cce52cfb1.png][]

**1.绑定数据**

![98872a67659d4fac8e51be8834035d74.png][]

<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.表单校验**

![4f4aeb6d653b4d1ebcbf751961695ee8.png][]

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.配置路由和功能展示**

![eba45da95821422592c3ca0cfb09230c.png][]

![13fcfc5de6c84179a6339258422d0468.png][]

**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页面主体布局和登录、注册页面的概述，之后会陆续更新后面的模块，包括后端代码，带大家手码项目，提升自己的编码能力。**

![20201213121345281.gif_pic_center][]

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

[0_Vue_-_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129103838
[0_Vue_-Vue2_Element-ui_-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/129111414
[e2169c78b5f4409e8a3c1fd6432aeebf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ba74c6314d1f42e39afd1c6c04fdb129.png
[092b4ded9a6d461a9c263c2802c2219b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/452f2459e53b4e2194ddcd63f0b96039.png
[d35e597a54924a018ae051937b82214e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1eba78953280454c84f1449f16f23ae4.png
[1de1eb4656d14996a34c3925124adc45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b22e659b487e416f8589f3915b50569e.png
[4e4a60a0292d4e4780879ee3e8cd4146.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/38e8232e205a489d919f4193d7edb659.png
[91dd3290354445e3bbcafe302acea086.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8f6fef90d315465ebff9968c23135e73.png
[d512a7d71a0f42d4beb5c8c898e0256f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/796193746d8c40649a512e49ea18e88a.png
[9e4ac130c5de4e349f2d64dbcf223082.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/4f261eb8e0f34ae2ba778a8614b69da5.png
[86ab2c7fce2b42a1a299df8db0318962.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1ce31da07c11445d882fb8e834f92102.png
[43cd1de934834fac85ca4b160aec1da5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5653f6bf6b84407aafbea67cac3da41e.png
[750e3d19d90d4d7398485f28d80b8a45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/9fad0e7e050746cf9e507db0e380ca7a.png
[Vue_vue _-CSDN]: https://blog.csdn.net/weixin_65950231/article/details/128066251
[d4fc473b34834e88826d8a7b35627eff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f096de998a854d1c96bd903a641753d6.png
[dfa2e49c2201461d96568e4cce52cfb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/edc3f50245ca46f5a48f3387cf01cf15.png
[98872a67659d4fac8e51be8834035d74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d1c98fb618c24bc0aae2420e42f84e5f.png
[4f4aeb6d653b4d1ebcbf751961695ee8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/9d62bff5f2e746389d4e4ea3cb53b09a.png
[eba45da95821422592c3ca0cfb09230c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/71081370e48942f3ac464036f222e1ba.png
[13fcfc5de6c84179a6339258422d0468.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/7fdc67f73e554a688027d3e8dbb39fb6.png
[20201213121345281.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3cd89d7e0e164a8ca0bbaab34663661b.gif