bootstrap设计登录页面_微服务和VUE(2) 搭建前端登录界面
保持心中的那道光 未来有人可能借助这道光走出黑暗.
前言:
我们使用前端框架为ElementUI,和bootstrap差不多,但更适合VUE双向数据绑定和组件化的特性。
ElementUI官网: https://element.eleme.cn/#/zh-CN/component/installation
熟悉bootstrap的话,上手很快,ElementUI基本就是在bootstrap的基础上做的,但是相对bootstrap来说,个人觉得ElementUI组件种类更丰富一些。
1. 认识VUE项目工程
这里主要看两部分:
(1) src里面的文件,我们主要进行操作的,也是在这个文件夹里。
components:放置我们公用的组件,比如页面的导航栏等等
router:前端的路由配置
App.vue:主要代码如下
VUE是单页面前端框架,也就是说其他的组件都是放在一个页面中的,即放在App.vue这个页面中,我们可以尝试注释掉,看看页面中会发生什么变化。
main.js:重要的配置中心,我们引入一个配置组件,会加在这里。比如我们接下来会引入ElementUI,就会在这里通过import的方式引入
(2) index.html
user-vue
index.html里的代码是不是和我们以前编写的HTML文件很像。个人理解:我们编写的vue文件最终会编译成html,从而插入到这个文件中。在项目中,我们基本不会修改这个文件,唯一会修改的地方也许就是那个了。
好了,vue的工程基本也就这样。下面我们开始动手开发。
2. 引入ElementUI
(1)下载ElementUI
在项目目录,右键cmd黑方框中输入:cnpm i element-ui -S
下载完成后,可以在node_modules找到ElementUI文件夹,如图:
(2) 在项目中引入ElementUI
打开main.js文件,通过import语句引入项目,然后使用Vue.use(ElementUI).将ElementUI加入到vue的开发环境中。
接下来我们通过编写登录界面学习ElementUI的使用。
3. 编写登录界面
(1) 新建login.vue
在src/compontens/page/login文件夹中,新建login.vue
让我们来分析一下生成的代码
export default { name: "login" }
(2)编写相关代码
在ElementUI官网上我们可以找到Form表单的组件,选择适合自己的,复制到自己的文件中即可。
贴上我的代码:(ps:真正用好ElementUI也不简单)
label->
系统登录
auto-complete="off" placeholder="账号"> auto-complete="off" placeholder="密码"> 登录
export default { name: 'login', // 绑定的数据 data() { return { loginForm: { username: '', password: '' }, //表单中字段验证规则 rules: { username: [ {required: true, message: '请输入用户名', trigger: 'blur'}, ], password: [ {required: true, message: '请输入密码', trigger: 'blur'}, ] } } } } .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; }
(2)加入路由
虽然我们编写好的代码,但是我们还不能直接访问,我们需要添加路由。
打开router/index.js
import login from '@/components/page/login/login.vue'
@代表从page文件下开始找,这里的login和下面红框中的component的login相对应。
{ path: '/login', name: 'login', component: login}
path:这个就是我们要输入的url。
name:没什么太大意义。
component:组件,举例来说,通过“login”找到 import login from '@/components/page/login/login.vue'这里的login。从而找到该组件的地址。
保存一下,浏览器打开:http://localhost:8080/#/login
有了我们编写的表单,还有一个神秘的logo。
接下来,我们打开App.vue,把下面这句话注释到,看看会发生什么奇迹。
是的,神秘的logo消失了,这样也能理解App.vue的意义了,我们编写的组件都会添加到这个vue页面中。对菜菜的我来说,很神奇的一件事。
好了,登录界面的前端就ok了。为了实习前后端的交互,接下来,我们先编写一下后端的代码,把微服务的架构搭建一下。
bootstrap设计登录页面_微服务和VUE(2) 搭建前端登录界面相关推荐
- vue框架搭建前端登录界面
使用vue框架搭建前端登录界面,用v-bind引入类,v-model实现数据绑定,v-on实现事件处理机制的处理. <!DOCTYPE html> <html lang=" ...
- hystrix 页面_微服务 | 使用Hystrix实现Spring Cloud的熔断机制
1. 熔断机制介绍 在介绍熔断机制之前,我们需要了解微服务的雪崩效应.在微服务架构中,微服务是完成一个单一的业务功能,这样做的好处是可以做到解耦,每个微服务可以独立演进.但是,一个应用可能会有多个微服 ...
- 查询varchar实际大小_微服务和VUE(11): mybatis 动态查询
1. 新建class表和student表: CREATE TABLE `class` ( `class_id` varchar(20) NOT NULL, `class_name` varchar(5 ...
- 微服务笔记:第一章_微服务简介|Eureka注册中心|Nacos注册中心|Nacos配置管理|Feign|Gateway服务网关
微服务笔记:第一章_微服务简介|Eureka注册中心|Nacos注册中心|Nacos配置管理|Feign|Gateway服务网关 1. 微服务简介 1.1 服务架构演变 1.2 SpringCloud ...
- golang微服务框架对比_微服务里程碑,Golang与Spring Cloud Alibaba完美结合
目前微服务架构仍是软件架构中最新的热门话题,虽然Golang是一门新的语言,但Golang的性能比python和java高出不少.既能承受程序使用运行的服务构建的繁重负载,又容易与GitHub集成,管 ...
- 微服务实现不同登陆_微服务网关——实现篇
在<微服务网关--需求篇 >中,我们讨论了微服务网关的需求:而在<微服务网关--设计篇 >中,我们讨论了微服务网关的设计.本文将对微服务网关进行实现. 对于网关的开发,完全自研 ...
- 微服务启动顺序_微服务框架Demo.MicroServer运行手册
一.背景说明: 之前分享过一个微服务开发框架, "享一个集成.NET Core+Swagger+Consul+Polly+Ocelot+IdentityServer4+Exceptionle ...
- mqtt发布json数据_微服务实战:从架构到发布(一)
引言:"微服务"是当前软件架构领域非常热门的词汇,能找到很多关于微服务的定义.准则,以及如何从微服务中获益的文章,在企业的实践中去应用"微服务"的资源却很少.本 ...
- 如何从业务和平台两方面入手,设计更具可靠性的微服务?
如何从业务和平台两方面入手,设计更具可靠性的微服务? 转载于:https://www.cnblogs.com/jing1617/p/6380693.html
- DDD微服务架构设计第四课 微服务落地实践的技术中台
10 微服务落地的技术实践 如今,做一个优秀的程序员越来越难.激烈的市场竞争.互联网快速的迭代.软件系统规模化发展,无疑都大大增加了软件设计的难度.因此,对于架构师的能力要求也越来越高,就像我的一本书 ...
最新文章
- 职场的你,如何《赢》?
- Linux字体显示不同颜色
- python json模块有什么用_Python的json模块及使用
- hadoop tyarn冲突_Doris与Hadoop yarn混合部署遇到的坑
- [20171115]关于逻辑读的疑问.txt
- C++学习008-delete与delete[]的差别
- sql 二进制文件的导入导出
- 一文读懂什么是聚合支付
- 世界上到处都是有才华的穷人
- 在夕阳再晨的日子里(一)----部员的成长
- 雷军现身国庆 70 周年阅兵花车!
- python股票预测_利用Keras长短期记忆(LSTM)模型预测股票价格
- 有一个姑娘,我无法忘记她
- MEGA UNO固件烧写教程
- java哪些类重写equals方法_Java自定义类中重写equals方法
- Python3网络爬虫实战-38、动态渲染页面抓取:Splash的使用
- AssetsManager下载类
- 艾宾浩斯遗忘曲线PHP,2018考研作文_艾宾浩斯遗忘曲线——记忆与复习_沪江英语...
- 令人愉悦的性能统计分析工具-hiper 【发个copy】
- 2022安徽省安全员C证试题及模拟考试
热门文章
- [2018.07.14 T3] B君的第六题
- js高级学习笔记(b站尚硅谷)-5-回调函数
- 计算机导论python知识点_每个计算机学生都应该掌握什么
- 计算机文言,中国最具有概括性的文言文文字?本人学计算机编程的
- php能把字符串分割数组的函数是,php把字符串分割到数组中的函数str_split()
- 样条曲线_概念设计:如何控制相关样条曲线几何图形?
- volatile c语言_C语言系列文章之volatile
- farm ugly chicken kick(fuck)这个计算机词汇的由来
- 微信客服系统开发SDK使用教程-给好友发消息任务
- 博客随笔《文章目录——java》大纲