Javaweb5vue 实现登录页面

初始版本：vue3.X   vue/cli4.5.14   node.js14.18.1   webpack5.58.2   webpackcli4.9.1

===================================================================

建立项目如下

 完成的项目结构如下======

 入口文件main.js,程序启动自动执行这个文件，自动跳转到根组件App.vue

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //包含App这个根组件的内容
  components: { App },
  template: '<App/>',
})

根组件App.vue，整个单页面SPA应用的起始点，首先呈现在用户面前，<script>绑定了默认显式的div的id为app,而这个app由两部分组成，第一部分通过路由访问路径/去加载一个局部页面过来，第二部分是打印一句话和显示一张图片。然后来看第一部分，路由带着/这个路径去加载到什么。

在router路由文件夹的index.js中可以看到，/配置的组件是Login，所以加载Login.vue的内容，也就是登录信息栏。代码如下：

根组件App.vue==============

<template>
  <div id="app">

    <router-view/><!--  去路由中找一个局部页面过来放在这里  -->

    <h1>根组件，上面是通过路由找到的局部页面的内容</h1>
    <img src="./assets/logo.png">

  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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: 'Login',
      component: Login
    }
  ]
})

Login.vue组件==========

<template>
  <div>
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  //单页面中不支持前面的data:{}方式
  data() {
    //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
    return{
      //之前是在里面直接写username，password等等，但是这里要写return
      //因为一个组件不管要不要被其他组件用，只要这样定义了，它就会认为可能这个组件会在其他的组件中使用
      //比如说在这里定义了一个变量，然后把这个组件引入到A组件中，A组件中修改了这个变量
      //同时这个组件也在B组件中引用了，这时候A里面一修改，B里面也变了，它们用的是一个值
      //可是一般来说可能希望在不同的组件中引用的时候，使用不同的值，所以这里要用return
      //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
      user:{
        username:'zhangsan',
        password:'123',
        //为了登录方便，可以直接在这里写好用户名和密码的值
      }
    }
  },
  methods:{
    doLogin(){//一点击登录按钮，这个方法就会执行
      alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
    }
  }
}
</script>

其中Login.vue组件就是具体使用element ui构成的，最后获取用户输入的账号密码发送给后端，这里没有实现，只是设置了一个alter弹出用户输入的信息，alter所在的位置我们就可以编写传递数据到后端去的代码。

运行测试下。demo1

 

 以上纯属一个后端自己揣摩的，可能会有偏差。