程序员经验分享-hwhale

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

2023-11-19

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

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

        如果这篇文章有帮助到你，希望可以给作者点个赞

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前后端分离

框架

Java

vuejs

javascript

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

随机推荐

  • githubActions部署文件到服务器

    示例 githubAction配置示例 ssh秘钥方式 首先在服务器生成秘钥 参考https github com easingthemes ssh deploy 安装 rsync apt get install rsync 参考 参考 n

  • Go 流程控制 for、for range 循环

    在Go语言中 for循环是一种常用的流程控制语句 可以重复执行一段代码块 直到满足退出条件 同时 Go语言还提供了for range循环 用于遍历数组 切片 映射和字符串等数据结构 在本篇博客中 我们将介绍Go语言中的for循环和for r

  • USART HMI智能串口屏介绍

    概要 USART HMI智能串口屏 该显示屏的介绍 GUI界面的设计 通讯方式和修改控件参数的相关指令等 一开始我们项目组在显示上用的是12864液晶显示屏 带字库 但是看起来效果不是很好 感觉很LOW 而且不知道什么原因 12864常常会

  • Redis主从复制总结整理

    Redis的主从复制策略是通过其持久化的rdb文件来实现的 其过程是先dump出rdb文件 将rdb文件全量传输给slave 然后再将dump后的操作实时同步到slave中 让从服务器 slave server 成为主服务器 master

  • 实现文件里字符替换功能

    思路 首先要打开你要打开的文件例如我这边桌面的demo txt 利用相关函数计算出这个文件大小 然后开始遍历里面的内容 一个字符一个字符的遍历 如果找到了要被替换的字符就当场重新把新的内容赋值进去 最后重新覆盖整个文章 可能表达有误 可直接

  • mysql 5.6 安装流程

    一 首先解压安装包到指定路径 解压路径不可为中文 二 配置环境变量 我是windows11 1 1 2 3 4 5 6 6 全部点击确定 三 更改my ini 这两条路径更改为与环境变量相同路径 四 运行cmd 1 2 输入mysqld i

  • 2021-08-06软考网工的一个简单的综合实验

    拓扑 PC1和PC2都设置成dhcp获取ip PC1属于10网段 标记为教学区 PC2属于20网段 标记为宿舍区 LSW1作为接入交换机 LSW2作为核心交换机 AR1作为外网入口 AR2表示电信运营商的路由器 AR3表示联通运营商的路由器

  • oracle tcp空包请求,再谈 TCP 的 CLOSE_WAIT

    背景 某日集群告警 hbase regionserver 因 fd 不足导致进程主动退出 简单排查后发现regionserver 到 datanode 的TCP 连接存在大量 CLOSE WAIT 单机总数有10万之多 众所周知 CLOSE

  • HTML表格

    目录 实例 表格 表格和边框属性 表格的表头 表格中的空单元格 更多实例 表格标签 一个完整的实例 本例涉及到的资源 eg background jpg eg cute gif 可以使用 HTML 创建表格 实例 表格 这个例子演示如何在

  • 一台电脑上安装两个Tomcat服务器

    在排查问题来源的时候 由于不想卸载之前下载的Tomcat 需要再安装一个Tomcat服务器 下载压缩版的Tomcat之后 第一个Tomcat配置不变 需要修改第二个Tomcat的配置 1 CATALINA HOME 8081 新的地址 2

  • flex:1可以撑满剩余空间

    flex 1 的妙用 首先 flex 是 flex grow flex shrink flex basis的缩写 当 flex 取值为一个非负数字 则该数字为 flex grow 值 flex shrink 取 1 flex basis 取

  • MySql中left join、right join、inner join实例分析，union与union all的区别，Mybatis中CDATA []的用法

    inner join select from user a inner join grade b on a gid b id 只返回两个表中联结字段相等的行 left join select from user a left join gr

  • bokeh python_Python Bokeh数据可视化教程

    bokeh python Bokeh is an interactive Python data visualization library which targets modern web browsers for presentatio

  • cad隐藏图层命令快捷键_教你学会天正CAD局部隐藏对象技巧

    天正局部隐藏命令 JBYC 即局部隐藏的拼音首字母 其命令全称为TMKHIDE 适用于所有天正软件 建筑 电气 给排水 暖通 天正建筑的工具界面中是有此菜单的 且默认快捷键4为局部隐藏 6为恢复可见 其他软件并未显示 需要通过命令输入使用

  • 基于conda的相关命令

    conda 查看python版本环境 打开Anaconda Prompt的命令输入框 查看自己的python版本 conda env list 激活相应的python版本 环境 conda avtivate python 3 9 若输入以下

  • 我在工作中是如何使用【Linux】的

    目录 前言 一 常用命令 二 文件和目录处理 三 用户与组管理命令 四 进程管理命令 五 网络管理命令 六 帮助命令 七 磁盘管理 前言 大家好 这是我首篇博客 内容是linux工作需用到的内容 在这里我给大家总结出来了 希望多支持支持 感

  • 【Hello mysql】 mysql的事务

    Mysql专栏 Mysql 本篇博客简介 介绍mysql的事务 mysql的事务 事务的概念 事务功能测试 事务的隔离级别 如何理解隔离性 粗浅理解 隔离级别 查看和设置隔离级别 四种隔离级别详解 读 未提交 读 提交 可重复读 串行化 一

  • 6月17日实验课之“H.264文件解析”

    文章目录 1 实验要求 2 实验结果 2 1 SPS 2 1 1 profile idc 2 1 2 level idc 2 1 3 seq parameter set id 2 1 4 log2 max frame num minus4

  • jmeter+接口测试练习+接口关联+Json提取

    1 测试用例设计 2 因为要执行多条用例 所以在Jmeter添加了http信息头管理器和http请求默认值 3 查询用户信息接口需要用到登录的token 但要先登录再把token拿出来传到查询的信息头里 会出现登录信息已过期的提示 考虑用j

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

    1 从0开始写Vue项目 环境和项目搭建 慕言要努力的博客 CSDN博客 2 从0开始写Vue项目 Vue2集成Element ui和后台主体框架搭建 慕言要努力的博客 CSDN博客 一 主体布局 关于主体布局 我们刚开始肯定是做的死数据的

热门标签