Vue + Spring Boot 项目实战(五):使用 Element 辅助前端开发

之前我们实现了登录功能,但不得不说登录页面实在是太简陋了。在这个看脸的社会,如果代码写的烂,界面也做得不好看,就真的没得救了。但是如果不是专职做 UI 设计,又没有必要浪费这么多时间在上面,所以我们需要借助一些工具来制作我们的页面。

Element - The world’s most popular Vue UI framework,你值得拥有。此时我特别想高喊一句 “PHP 是世界上最好的语言”,现在搜啥啥都说自己是最好的,输什么不能输气势啊。先看一下修改完的登录页面
在这里插入图片描述
当然,Element 不仅仅是界面这么简单,它对 Vue 又做了进一步的封装,可以简便地使用许多实用的功能。

(小声比比)白卷,是我们全村最好的图书管理系统。

一、安装并引入 Element

Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN

这一部分的内容在官方文档上都有体现,我只是照搬下来。在以后我们会经常使用 Element 提供的组件,大家要自己尝试查阅文档,这个是中文的,还是很好理解的。

1.安装 Element

根据官方文档的描述,在项目文件夹下,执行 npm i element-ui -S 即可
在这里插入图片描述

2.引入 Element

引入分为完整引入和按需引入两种模式,按需引入可以缩小项目的体积,这里我们选择完整引入。

根据文档,我们需要修改 main.js 为如下内容

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'

var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>'
})

这样便完成了 Element 的引入。为了测试一下,我们打开 Login.vue,把最外层的 <div> 标签改为 <el-card>(下面是 <template> 内的完整代码)

  <el-card>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </el-card>

然后访问 http://localhost:8080/#/login ,查看效果
在这里插入图片描述
嗯,还是很丑,但是成功了。

二、优化登录页面

首先,让我们去掉这个清奇的 V ,打开 App.vue,把 <img src="./assets/logo.png"> 删掉即可。不过我一般喜欢先注释掉,确定没有影响了再删除。
在这里插入图片描述

1.使用 Form 组件

让我们来修改 Login.vue 的代码。原来是这样的

<template>
  <el-card>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </el-card>
</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>

为了设计界面,我们需要关注的地方是 <template> 标签内的 html 和 <style> 标签内的 css。登录框我们一般会用 Form 来做,打开 Element 的组件文档(http://element-cn.eleme.io/#/zh-CN/component/),发现它为我们提供了丰富的 Form 组件,我们可以点击“显示代码”,复制我们需要的部分。
在这里插入图片描述
不过这里好像并没有特别符合我们应用场景的表单,或者说这些都是比较复杂的,我们只需要其中的一小部分。把页面再往下拉,可以看到关于这个组件的属性、事件、方法等的文档,根据这个文档,我们可以自己去构建需要的表单。

首先,我们修改 <template> 里的代码如下

<template>
  <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>
</template>

上面的代码应该很好理解,<el-form> 里面可以放置 <el-form-item><el-form-item> 里面再放置其它的内容,比如 <el-input>,关于 <el-input> 的属性,可以查阅 Input 的文档,<el-button> 亦然。

在开发前端的内容时,我们修改了代码,就可以对应地看到效果,而不用重启项目。我一般会把浏览器也开着,以便实时监测。修改完上面的内容,页面变成了这样
在这里插入图片描述

2.添加样式

为了进一步优化界面,我们为组件再添加一些样式,即在 Login.vue 的最后添加如下代码

<style>
  .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>

刷新页面(Ctrl + F5),看起来顺眼多了
在这里插入图片描述

3.设置背景

最后,我们为这个单调的登录页面设置一个背景。我在网上找了这张图
在这里插入图片描述
可以把它保存下来,放在 src\assets 文件夹下,命名为 eva.jpg 在 build 项目时,这个文件夹里的图片会被自动转成 base64。也可以在这个文件夹里再新建文件夹,方便管理。

为了使用背景图片,我在 <el-form> 标签的外又添加了一个父标签 <body>,id 设置为 poster,并在 <style> 中添加如下内容

  #poster {
    background:url("../assets/eva.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
  }

之所以还要再写一个 body 的样式,是为了覆盖掉浏览器(用户代理)的默认样式。添加后保存,则可以看到如下效果
在这里插入图片描述
这时候发现界面上方有一片空白,经过查找,发现问题出在 App.vue 里,把下面这句代码删除即可
在这里插入图片描述
OK,又一次大功告成了。

另外可以在 Login.vue 的 data 方法中设置输入框的默认值,省的每次进来都要再输一遍。

4.完整代码

最后附上 Login.vue 的完整代码,可以直接复制

<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: 'admin',
          password: '123'
        },
        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/eva.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
  }
  .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>

至此,登录页面的开发似乎已经较为完善了,但其实还没有完,因为这个登录页面其实没有用,别人直接输入首页的网址,就可以绕过登录页面。为了让它发挥作用,我们还需要开发一个拦截器

下一篇文章主要讲解以下内容:

一、前端路由的 hash 模式与 history 模式
二、history 模式下后端错误页面的配置
三、登录拦截的实现

为什么要在登录页面上废这么多篇幅呢?因为把这个页面做完,就差不多理解了项目的构成,之后的开发就可以把精力集中在业务功能的实现上了。之后的基本模式,就是前端开发组件、后端开发控制器,调试功能,做起来会很快。

查看系列文章目录:
https://learner.blog.csdn.net/article/details/88925013

上一篇:Vue + Spring Boot 项目实战(四):数据库的引入

下一篇: Vue + Spring Boot 项目实战(六):前端路由与登录拦截器

<table class="tb-course" style="width:820px;color:#333333;font-family:'Hiragino Sans GB', 'Microsoft Yahei', arial, 宋体, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;font-size:14px;background-color:#ffffff;"> <tbody> <tr> <td style="vertical-align:middle;"> Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。内容包括Vue.js概述、Vue.js的安装、定义页面、渲视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Vuex、页面的生命周期等,*后还给出一个实战案例供读者了解Vue.js项目开发过程。 </td> </tr> </tbody> </table> <div class="intro-course" style="color:#333333;font-family:'Hiragino Sans GB', 'Microsoft Yahei', arial, 宋体, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;font-size:14px;background-color:#ffffff;"> <p> 2020-2021最新Vue.js零基础入门到精通实战开发课程视频教程下载。课程以项目实战为驱动,帮你打开通往Vue.js的任督二脉,让你迅速成为一个优秀的Vue.js开发人员。 </p> <p> <img style="border:0px;" src="https://www.jsdaima.com/kindeditor/attached/image/20190921/20190921190102_74552.png" alt="2019最新Vue.js零基础入门到精通实战开发" /> </p> <p>   </p> <p> 一、课程介绍<br /> Vue.js致力于构建数据驱动的web应用开发框架,是一个精简的MVVM。Vue.js 专注于 MVVM 模型的 ViewModel 层。简单的数据操作,就可以完成页面的更新,当然也有很多类似的框架,如Angular,React,但是Vue以简洁化,轻量级,数据驱动,模块友好等优势深受企业以及前端开发者的喜爱,成为前端开发人员必备的技能。<br /> 2020年了,你还只会用jQuery吗?本课程以项目实战为驱动,帮你打开通往Vue.js的任督二脉,让你迅速成为一个优秀的Vue.js开发人员。<br /> <br /> 二、课程需知<br /> 我们的课程面向的同学是:需要有网页开发基础,熟悉HTML/CSS/JavaScript等前端开发技术,初步掌握JSON,闭包,AJAX…等JavaScript技术,在进阶阶段的课程中会使用ES6的一些语法,因此事先掌握一些ES6的知识也是有必要的。<br /> <br /> 三、内容编排<br /> 本课程分为三大部分讲解了运用Vue.js 进行项目实战开发。内容包括:<br /> <br /> 第一步:Vue.js基础<br /> 1、初识vue.js <br /> 2、模板语法<br /> 3、计算属性<br /> 4、class与style绑定<br /> 5、条件渲染<br /> 6、列表渲染<br /> 7、fetch&axios<br /> 8、事件处理器<br /> 9、表单控件<br /> 10、组件化开发<br /> <br /> 第二步:Vue.js进阶<br /> 1、过渡动画效果<br /> 2、自定义指令<br /> 3、单文件组件<br /> 4、路由vue-router<br /> <br /> 第三步:项目实战<br /> 1、卖座苹果网站项目<br /> - 引入iconfont<br /> - 路由搭建<br /> - axios以及反向代理<br /> -嵌套路由<br /> -数据渲染<br /> 2、Vue.js第三方框架使用<br /> -Element UI<br /> -mintUI<br /> 3、状态管理vuex<br /> <br /> 课程详细目录:<br /> Vue.js 课程介绍.docx<br /> 第001集-1vue初识<br /> 第002集-2条件渲染<br /> 第003集-3tab切换<br /> 第004集-4列表渲染<br /> 第005集-5模板语法<br /> 第006集-6计算属性<br /> 第007集-7侦听器和class<br /> 第008集-8内联样式<br /> 第009集-9事件绑定<br /> 第010集-10表单输入绑定<br /> 第011集-11过渡动画<br /> 第012集-12todolist应用<br /> 第013集-13生命周期与组件生命周期<br /> 第014集-14组件之间的传值<br /> 第015集-15$root_$parent_$children<br /> 第016集-16v-model与插槽<br /> 第017集-17vue-cli<br /> 第018集-18vue-devtools<br /> 第019集-19vue-cli原理<br /> 第020集-20vue组件化<br /> 第021集-21vue聊天框<br /> 第022集-22socket初识和安装<br /> 第023集-23单聊和群聊以及命名空间<br /> 第024集-24聊天项目<br /> 第025集-25聊天登录登出<br /> 第026集-26聊天列表<br /> 第027集-27个人聊天<br /> 第028集-28单聊功能<br /> 第029集-29自动滚动和聊天<br /> 第030集-30群聊<br /> 第031集-31注意编译地址<br /> 第032集-32vue实现原理1<br /> 第033集-33vue实现原理2<br /> 第034集-34less<br /> 第035集-35vue-less使用<br /> 第036集-36sass<br /> 第037集-37vue-router<br /> 第038集-38动态路由和嵌套路由<br /> 第039集-39命名视图和组件传参<br /> 第040集-40vue路由高级应用<br /> 第041集-41Vue路由守卫<br /> 第042集-42vuexstate<br /> 第043集-43vuex getter<br /> 第044集-44vuex-action<br /> 第045集-45vuex-module<br /> 第046集-46vuex-插件<br /> 第047集-47vuex-vant<br /> 第048集-48网易严选商城<br /> 第049集-49网易商城首页<br /> 第050集-50分类列表<br /> 第051集-51产品列表<br /> 第052集-52产品列表2<br /> 第053集-53商品产品页面<br /> 第054集-54产品sku<br /> 第055集-55产品购物车<br /> 第056集-56购物车 </p> </div>
相关推荐
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div style="color:#444444;"> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值