实现Vue的登录页面

实现Vue的登录页面步骤:

1.前期准备
1.1 安装Node.js:从官网下载地址(https://nodejs.org/zh-cn/)安装完成后,在终端输入 node -v 来查询版本号。

1.2 安装Webpack:在终端输入npm install webpack -g来进行全局安装。

1.3 安装Vue-cli:在终端输入npm install --global vue-cli来进行全局安装。

2. 搭建Vue项目

2.1 创建项目:在终端输入vue init webpack projectname来创建项目。

2.2 项目目录:进入项目目录中,可以看到src和build等文件夹和文件。其中src为我们开发时需要操作的目录,build为我们项目打包的相关配置。

2.3 导入Element UI:在终端中输入npm i element-ui -S来进行Element UI的安装,并在main.js中导入相关模块。

3. 实现登录页面

3.1 修改App.vue:在template中加入router-view组件,用于展示Login.vue等其他组件。

3.2 创建Login.vue:在components文件夹中新建Login.vue组件,并在其template中构建表单元素。

3.3 配置路由:在router文件夹中的index.js文件中配置路由。

4. 实现登录功能

4.1 导入axios:在终端中输入npm i axios -S来进行axios的安装。

4.2 导入qs和Mock:在终端中输入npm i qs mockjs -S来进行qs和Mock的安装,并在main.js中导入相关模块。

4.3 编写提交js:在Login.vue中编写submit方法,用于提交表单数据至后端。

4.4 编写Mock测试数据:在mock文件夹中的index.js文件中编写数据,用于测试前端与后端交互是否正常。

以上是基本的步骤,具体实现方式可根据具体项目情况进行调整和修改。


以下是一个简单的Vue登录页面的代码:

App.vue

<template>
  <div id="app">
    <!-- 路由视图 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Login.vue

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form>
      <label>用户名:</label>
      <input type="text" v-model="username">
      <br>
      <label>密 码:</label>
      <input type="password" v-model="password">
      <br>
      <button type="submit" @click.prevent="handleSubmit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit () {
      // 提交表单数据至后端
      axios.post('login', qs.stringify({
        username: this.username,
        password: this.password
      })).then(res => {
        console.log(res)
        // 登录成功,跳转到首页
        this.$router.push({ path: '/' })
      }).catch(err => {
        console.log(err)
        // 登录失败,给出错误提示
        alert('登录失败:' + err.response.data.message)
      })
    }
  }
}
</script>

<style>
.login-container {
  margin: 100px auto;
  width: 400px;
  text-align: center;
}
h2 {
  margin-bottom: 20px;
}
form {
  text-align: left;
}
label {
  display: inline-block;
  width: 80px;
  margin-right: 10px;
  text-align: right;
}
input {
  width: 240px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  margin-bottom: 10px;
}
button {
  width: 260px;
  height: 40px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
button:hover {
  background-color: #66B1FF;
}
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

注意,以上只是一个简单示例代码,真实的项目需要根据具体情况进行相应的调整和修改。另外,为了安全起见,请勿在前端将明文密码传输到后端,应该使用加密方式传输。

  • 15
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值