图解登录页面跳转至首页

一、创建一个vue3项目,AboutView.vue找到文件

 将以下代码复制上去

<template>
 <div class="register">
    <div class="register-form">
      <h2 class="register-title">注册</h2>
      <div class="register-input">
        <input v-model="username" type="text" placeholder="请输入用户名" />
      </div>
      <div class="register-input">
        <input v-model="password" type="password" placeholder="请输入密码" />
      </div>
      <div class="register-input">
        <input v-model="confirmPassword" type="password" placeholder="请确认密码" />
      </div>
      <div class="register-actions">
        <button class="register-btn" v-if="step === 1" @click="nextStep">下一步</button>
        <button class="register-btn" v-if="step === 2" @click="finish">完成</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      step: 1,
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    nextStep() {
      // 验证用户名、密码和确认密码是否为空
      if (this.username.trim() === '' || this.password.trim() === '' || this.confirmPassword.trim() === '') {
        alert('用户名、密码和确认密码不能为空!');
        return;
      }
      // 验证密码是否相同
      if (this.password !== this.confirmPassword) {
        alert('两次输入的密码不一致!');
        return;
      }
      // 进入第二步
      this.step = 2;
    },
    finish() {
      // 保存用户信息
      const userInfo = {
        username: this.username,
        password: this.password
      };
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
      // 注册成功后跳转到首页
      this.$router.push('/');
    }
  }
}
</script>
<style scoped>
.register {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-form {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.register-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.register-input {
  margin-bottom: 20px;
}
.register-input input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ccc;
}
.register-input input:focus {
  outline: none;
  border-bottom: 2px solid #007aff;
}
.register-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.register-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007aff;
  color: #fff;
  border-radius: 20px;
  border: none;
  cursor: pointer;
}
.register-btn:focus {
  outline: none;
}
@media screen and (max-width: 767px) {
  .register-form {
    max-width: 320px;
  }
  .register-title {
    font-size: 18px;
  }
  .register-input input {
    font-size: 14px;
  }
  .register-btn {
    font-size: 14px;
    padding: 8px 16px;
  }
}
</style>
运行结果 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP.NET MVC3 快速入门-第一节 概述 (2011-02-23 20:57:18) 载 标签: web应用程序 分类: ASP.NETMVC3 1.1 本教程的学习内容 在本教程中,你将学会如下内容: • 如何创建一个ASP.NET MVC的工程。 • 如何创建ASP.NET MVC的控制器(controller)与视图(view)。 • 如何使用Entity Framework code-first 范例来创建一个新的数据库。 • 如何获取和显示数据。 • 如何编辑数据并且进行数据的有效性验证。 1.2 创建工程 如果要创建一个ASP.NET MVC3的工程时,首先运行Visual Web Developer 2010 Express(本教程中简称“Visual Web Developer”),并且在起始页(start page)中选择“新建项目”。 Visual Web Developer是一个集成开发环境,你可以使用它来进行各种应用程序的开发。在Visual Web Developer的菜单的下面有一个工具条,可以直接点击工具条中的各个工具按钮来进行各种操作,也可以直接点击菜单中的各个菜单项来进行各种操作,此处我们点击“文件”菜单中的“新建项目”菜单项。 图1-1 Visual Web Developer 2010 Express中的起始页 1.3 创建你的第一个应用程序 你可以使用Visual Basic 或Visual C#作为开发语言来创建应用程序。在本教程中,选择C#来作为开发语言。点击“新建项目”菜单项后,在打开的“新建项目”对话框中,双击左边的“Visual C#”使其成为展开状态,然后点击“Web”,点击右边的“ASP.NET MVC 3 Web 应用程序”,然后在下方的名称文本框中填入应用程序的名称,在本教程中命名为“MvcMovie”,然后点击确定按钮。 图1-2 在新建项目对话框中选择ASP.NET MVC3应用程序并为应用程序命名 在接下来打开的“新ASP.NET MVC 3 项目”对话框中,点击选中“Internet 应用程序”,在“视图引擎”下拉框中保持默认的“Razor”选项不作修改(Razor视图是ASP.NET MVC3种新增的一种十分重要的视图类型,使用它可以使得Web应用程序的开发变得更加方便快捷,在后文中将对此进行详细介绍)。 图1-3 选择项目模板与视图引擎 点击确定按钮,Visual Web Developer会为你所创建的ASP.NET MVC项目提供一个默认模板,这样的话你就拥有了一个可以立刻运行的应用程序。默认的模板中提供的是一个很简单的显示“欢迎使用 ASP.NET MVC!”文字的应用程序,你可以以此作为你的开发起点。 图1-4 Visual Web Developer提供了一个默认的应用程序模板 点击“调试”菜单中的“启动调试”菜单项(该菜单项的快捷键为F5),Visual Web Developer将启动一个内置的服务器,并且在该服务器中打开当前Web应用程序的主页,如图1-5所示。 图1-5 ASP.NET MVC3的默认应用程序模板的调试画面 请注意该页面在浏览器中的地址为“http://localhost:4423/”。其中“localhost”代表了本机上你刚刚创建的Web应用程序的临时网站地址,4423代表了Visual Web Developer使用的一个随机端口,每次调试的时候,Visual Web Developer都会使用这个端口来作为内置服务器的端口号。在各计算机上,该端口号都是不相同的,因为该端口号是Visual Web Developer随机选择的。 在这个模板应用程序的页面的右上角,提供了两个按钮与一个“登录”链接,点击“登录”链接,页面登录页面,点击“主页”按钮,页面返回到主页,点击“关于”按钮,页面到“关于”页面。 接下来,让我们开始逐步将这个默认的应用程序修改为我们所要的应用程序,在这个过程中逐步了解ASP.NET MVC 3的有关知识。首先,让我们关闭浏览器并开始代码的修改工作。 ASP.NET MVC3 快速入门--第二节 添加一个控制器

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值