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

文章目录

  • 一、安装并引入 Element
    • 1.安装 Element
    • 2.引入 Element
  • 二、优化登录页面
    • 1.使用 Form 组件
    • 2.添加样式
    • 3.设置背景
    • 4.完整代码

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

Element - The world’s most popular Vue UI framework,你值得拥有。先看一下修改完的登录页面
在这里插入图片描述
当然,Element 不仅仅是界面这么简单,它对 Vue 又做了进一步的封装,可以简便地使用许多实用的功能。

一、安装并引入 Element

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

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

1.安装 Element

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

2.引入 Element

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

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

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'var axios = require('axios')
// 设置反向代理,前端请求默认发送到 http://localhost:8443/api
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册,之后可在其它组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false
// Vue使用ElementUI
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>用户名:&nbsp;<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/><br><br>&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<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>用户名:&nbsp;<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/><br><br>&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<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。也可以在这个文件夹里再新建文件夹,方便管理。

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

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

在这里插入图片描述
这时候发现界面上方有一片空白,经过查找,发现问题出在 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 模式下后端错误页面的配置
  • 三、登录拦截的实现

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/521669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不止 5G 和鸿蒙,华为最新大招,扔出 AI 计算核弹

戳蓝字“CSDN云计算”关注我们哦&#xff01;华为发布全世界最快AI产品&#xff0c;集成1024颗业内最强芯片&#xff0c;训练ResNet-50只需59.8秒。近日&#xff0c;华为全联接大会开幕&#xff0c;推出又一重量级AI产品Atlas900。此前接受外媒采访时&#xff0c;任正非就已经预…

阿里90后工程师利用ARM硬件特性开启安卓8终端“上帝模式”

摘要&#xff1a; 本文以安卓8终端为载体&#xff0c;介绍阿里安全潘多拉实验室成员研究并提出的内核空间镜像攻击利用技巧。文/图 阿里安全潘多拉实验室 团控编者按&#xff1a;团控&#xff0c;阿里安全潘多拉实验室研究人员&#xff0c;该实验室主要聚焦于移动安全领域&…

linux环境下企业基于域名访问的web于电子邮件服务器 论文,基于Linux平台的企业邮件服务器搭建...

我失骄杨君失柳&#xff0c;杨柳轻飏直上重霄九。得道多助&#xff0c;失道寡助。身后有余忘缩手&#xff0c;眼前无路想回头。鸟宿池边树&#xff0c;僧敲月下门。想当年&#xff0c;金戈铁马&#xff0c;气吞万里如虎。 本文由418133804贡献pdf文档可能在WAP端浏览体验不佳。…

python多进程写入mysql_Python实现 多进程导入CSV数据到 MySQL

前段时间帮同事处理了一个把 CSV 数据导入到 MySQL 的需求。两个很大的 CSV 文件&#xff0c; 分别有 3GB、2100 万条记录和 7GB、3500 万条记录。对于这个量级的数据&#xff0c;用简单的单进程&#xff0f;单线程导入 会耗时很久&#xff0c;最终用了多进程的方式来实现。具体…

【HBase从入门到精通系列】误删数据如何抢救?

摘要&#xff1a; 前言 有时候我们操作数据库的时候不小心误删数据&#xff0c;这时候如何找回&#xff1f;mysql里有binlog可以帮助我们恢复数据&#xff0c;但是没有开binlog也没有备份就尴尬了。如果是HBase&#xff0c;你没有做备份误删了又如何恢复呢&#xff1f; 数据保护…

神龙X-Dragon,这技术“范儿”如何?

戳蓝字“CSDN云计算”关注我们哦&#xff01;在CSDN总部会议室&#xff0c;阿晶首次见到了阿里云智能研究员、弹性计算技术负责人张献涛——这位不仅仅在阿里云智能内部&#xff0c;在业内也是响当当的虚拟化技术大牛。现在回想起来&#xff0c;当时聊了没两句&#xff0c;阿晶…

python 如何判断一个函数执行完成_三步搞定 Python 中的文件操作

当程序运行时&#xff0c;变量是保存数据的好方法&#xff0c;但变量、序列以及对象中存储的数据是暂时的&#xff0c;程序结束后就会丢失&#xff0c;如果希望程序结束后数据仍然保持&#xff0c;就需要将数据保存到文件中。Python 提供了内置的文件对象&#xff0c;以及对文件…

一位资深程序员大牛给予Java初学者的学习路线建议

摘要&#xff1a; java学习这一部分其实也算是今天的重点&#xff0c;这一部分用来回答很多群里的朋友所问过的问题&#xff0c;那就是我你是如何学习Java的&#xff0c;能不能给点建议&#xff1f;今天我是打算来点干货&#xff0c;因此咱们就不说一些学习方法和技巧了&#x…

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

文章目录前言一、前端路由二、使用 History 模式三、后端登录拦截器3.1. LoginController3.2. LoginInterceptor3.3. WebConfigurer3.4. 效果检验四、Vuex 与前端登录拦截器4.1. 引入 Vuex4.2. 修改路由配置4.3. 使用钩子函数判断是否拦截4.4. 修改 Login.vue4.5. 效果检验前言…

前端性能优化二十五:花裤衩模板vue打包优化

(1). 优化vue.js: ①. 修改vue.config.js:const isProd process.env.NODE_ENV productionconst getProdExternals () > {return {vue: Vue,// vue-router: VueRouter,// vuex: Vuex}}module.exports {...configureWebpack: {...externals: isProd ? getProdExternals(…

linux win10 时间同步服务器,windows和linux下服务器时间如何校正?

实现思路&#xff1a;使用NTP(简称network time protocol)协议可以让你的计算机自动与服务器上的时间同步。从而保持最准确的时间。中国国家授时中心的IP地址是&#xff1a;210.72.145.44。Windows XP/2000系统&#xff1a;控制面板,管理工具,服务中找到 Windows Time&#xff…

ppt护理文书流程图_护理文书书品管圈ppt

PPT内容这是护理文书书品管圈ppt下载&#xff0c;主要介绍了圈的组成&#xff1b;圈名意义&#xff1b;圈徽的意义&#xff1b;启动PDCA的循环&#xff1b;主题选定的理由&#xff1b;书写流程图&#xff1b;需改善的目标&#xff1b;对策拟定&#xff1b;目标达到率、进步率&a…

高手如何实践HBase?不容错过的滴滴内部技巧

摘要&#xff1a; HBase和Phoenix的优势大家众所周知&#xff0c;想要落地实践却问题一堆&#xff1f;replication的随机发送、Connection的管理是否让你头痛不已&#xff1f;本次分享中&#xff0c;滴滴以典型的应用场景带大家深入探究HBase和Phoenix&#xff0c;并分享内核改…

JS 打印 data数据_数据表格 Data Table - 复杂内容的15个设计点

表格是桌面应用中常见的内容型组件&#xff0c;它包含大量的信息和丰富的交互形式&#xff0c;表格具有极高的空间利用率&#xff0c;结构化的展示保证了数据可读性。高效、清晰且易用是进行表格设计的原则性要求。本文将从表格的内容组织到交互作一次汇总&#xff0c;作为数据…

神龙X-Dragon,这技术“范儿”如何?| 问底中国IT技术演进

在CSDN总部会议室&#xff0c;阿晶首次见到了阿里云智能研究员、弹性计算技术负责人张献涛——这位不仅仅在阿里云智能内部&#xff0c;在业内也是响当当的虚拟化技术大牛。现在回想起来&#xff0c;当时聊了没两句&#xff0c;阿晶就问了这样一个问题&#xff0c;“阿里云这款…

干货 | 蚂蚁金服是如何实现经典服务化架构往 Service Mesh 方向的演进的?

摘要&#xff1a; 小蚂蚁说&#xff1a; 蚂蚁金服在服务化上面已经经过多年的沉淀&#xff0c;支撑了每年双十一的高峰峰值。Service Mesh 作为微服务的一个新方向&#xff0c;在最近两年成为领域的一个大热点&#xff0c;但是如何从经典服务化架构往 Service Mesh 的方向上演进…

Vue + Spring Boot 项目实战(八):导航栏与图书页面设计

文章目录前言一、导航栏的实现1.路由配置2.使用 NavMenu 组件二、图书管理页面2.1. LibraryIndex.vue2.SideMenu.vue3.Books.vue前言 之前讲过使用 Element 辅助前端页面的开发&#xff0c;但是只用到了比较少的内容&#xff0c;这一篇我们来做一下系统的核心页面——图书管理…

cygwin 远程连接linux,Cygwin解决Windows远程登录linux服务器

《HelloGitHub月刊》第07期最近工作上的事比较多,月刊第07期拖到月底才发. 本期月刊对logo和月刊的排版进行了优化,不知道大家的反馈如何,还望大家多多反馈,让做一个会PS切图的前端开发系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS…

datagridview选中获取行号_DataGridView控件显示行号的正确代码及分析

前些天在写个小程序&#xff0c;用到DataGridView&#xff0c;想给它动态的显示行号。不是很费劲GOOGLE了一下&#xff0c;这GOOGLE不要紧&#xff0c;发现了不少问题。以下基本上都是GOOGLE搜索出来的网上的一些解决方法&#xff0c;千篇一律都是这样的&#xff1a;private vo…

pmsm simulink foc 仿真_仿真软件教程

很多朋友都建议我做个视频的整理&#xff0c;方便没看过之前内容的朋友方便查找&#xff0c;我觉得这个确实很有必要。下面内容是关于仿真软件方面&#xff1a;仿真环境&#xff1a;Simlpis 8.0类型简介VMC和CMC的LLC控制器仿真对比 第一节图文电压模式和电流模式LLC控制器的简…