Vue+elementUI+Node搭建用户登录页面 - 脚手架系列（四）

六木老师

已于 2022-06-12 14:18:00 修改

阅读量891

点赞数 1

分类专栏：分布式脚手架搭建文章标签： vue.js elementui javascript

于 2022-06-07 16:27:43 首次发布

本文链接：https://blog.csdn.net/piaolaoshi/article/details/124018661

版权

分布式脚手架搭建专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、搭建Vue脚手架

本文是脚手架系列的第四篇，有兴趣的同学可以进入导航页进行学习：

从零开始duboo脚手架搭建

如果本地还没有vue的搭建环境，可以参考下文：

windows安装npm环境 -- node.js

搭建好vue环境后，我们下载我们的vue脚手架

vue init webpack dubbo-ui

通过idea启动后，访问localhost:8080就可以打开页面了

这样Vue的脚手架就算搭好了。

2、导入ElementUI

进入到项目所在目录，输入命令：npm install element-ui -S

同时我们也安装下axios

npm  i  axios

在main.js引入element-ui、axios，并注册

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

// 设置反向代理，前端请求默认发送到 http://localhost:8082/api
var axios=require('axios')
axios.defaults.baseURL='http://localhost:8082/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/*作用是阻止vue 在启动时生成生产提示。*/

Vue.use(axios)
Vue.use(ElementUI)

修改配置

3、搭建登录页

创建登录页

背景图片可以找一个自己喜欢的

<template>
  <body id="poster">
  <el-form class="login-container" label-position="left" label-width="0px">
    <h3 class="login_title">系统登录</h3>
    <el-form-item>
      <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>

    <el-form-item>
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
    </el-form-item>
  </el-form>
  </body>
</template>


<script>
  export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login() {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

<style>
  #poster {
    background:url("../../assets/img/login_bg.jpg") no-repeat;
    /*background-image: url(~@/assets/img/login_bg.jpg);*/
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
    padding: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }


</style>

修改路由

默认跳到我们新写的登录页上

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/common/login'

Vue.use(Router)

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

把App.vue的样式都去掉，以免他影响我们登录页的样式

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

启动项目，出现这个就说明启动成功了