实现Vue的登录页面-蒲公英云

实现Vue的登录页面

迷南。 2023-10-04 22:43 134阅读 0赞

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

<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
    }
  ]
})