vue rule鼠标移走校验_Vue-cli+Element-ui实现后台管理系统(二)实现后台登录功能...
前言
接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~
一、创建登录文件并配置访问路由
首先我们将上文创建好的项目在ide中打开,我这里使用的是vscode,项目清单结构如下图所示:
我们在views文件夹下新建一个Login.vue作为我们的系统登录界面,然后在router路由文件夹下的index.js路由配置文件中配置我们的登录界面访问路由,如下图所示:
这里import Login from "../views/Login.vue"为链接到我们的登录界面,这里可以写成动态链接的方式:component: () => import( "../views/Login.vue") ,这样的写法有助于提高项目路由的加载效率,按需加载。
然后我们通过npm run serve 启动我们的项目,并尝试通过路由访问进行测试,如果访问成功看到了你在登录界面所写的内容即配置成功了~以下是我的界面效果:
二、登录界面编写
登录界面大家都知道主要是一个登录表单的是布局实现以及一些简单的表单验证而已,所以接下来我们将用element-ui的表单来实现登录表单。
el实现form表单的组件是<el-form>组件,单行输入框用的是<el-input>组件,如果你不太清楚也可以直接打开上文说的element-ui的组件表单页面进行查看和选择使用,地址:https://element.eleme.cn/#/zh-CN/component/form
以下是我的登录表单布局文件:
其中表单的有效性验证可以通过rule去实现(如果要想通过rule实现的话需要在el-form标签中进行rule属性设置),在script的data中编写rule的条件,官方提供的基础验证如下:
其中pass、checkpass以及age是需要在各表单标签中进行prop设置方可生效,最后增加一些自己的样式,大概效果就会像我这样:
三、登录功能的实现
这里主要指利用axios请求登录接口校验登录功能。由于该系列文章仅限于前段的实现,后端接口这里就不做详细说明,大家可以选择php、node.js、java、c#或者python等都是可以实现的,前端coder推荐使用node.js, 我这里使用的是tp/flask实现的。
1、安装axios
这里通过命令npm install --save axios即可像项目中增加axios用于API接口请求。
2、全局配置axios
安装完成后如果你是全局配置则需要在main.js中进行axios的引入配置。具体方式如下:
import axios from "axios";
Vue.prototype.$http = axios;
通过以上两行代码配置后,就可以在项目中全局通过$http使用axios了,至于axios的拦截器等高级操作这里不做深入阐述。
3、进行登录
这里假设我的登录接口地址为/user/login, 由于登录是提交操作以及涉及敏感信息,该接口应该是post的请求方式,所以我们的请求代码就可以这样写:
this.$http.post('/user/login', data).then(res => {}).catch(error => {})
4、可能涉及的问题
1)、跨域问题
为什么会产生跨域问题?JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源政策。通俗的讲,为了安全所以浏览器进行了限制,所以不能进行跨域。
2}、什么是跨域
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都会出现跨域的问题。
3)、如何解决
在项目中新建一个vue.config.js文件,在其中写入一下内容即可:
module.exports = {devServer: {host: 'localhost',port: 8080,proxy: {'/api': {target: 'http://127.0.0.1:5000',// ws : true,changeOrigin: true,pathRewrite: {'^/api': ''}}}}
};
其中host和port是你本地的服务器和端口,而proxy中写的就是你要代理的服务器的相关信息。
vue.config.js中的更多配置可参考官方文档:https://cli.vuejs.org/zh/config/
四、登录信息的存储
经过以上的步骤我们已经实现了登录界面的编写和接口的请求。但是在日常的项目过程中会涉及到一些登录信息的存储以及登录状态的存储,那么传统的方式可以通过一些localstorage、sessionStorage去实现,现在我们可以使用vuex实现。
vuex在我们构建项目的过程中已经加入了项目了,如果没有的话可以通过以下命令去加入项目:
npm install --save vuex
在我们登录成功之后就可以将我们的登录相关信息通过vuex存储在全局的store中,共项目中任何需要用到的地方使用。至于Vuex的详细使用方式可以参考vuex官方文档:https://vuex.vuejs.org/zh/guide/,或者有需要详细操作的,可以评论或者私信我交流~
至此我们Vue-cli + Element-ui实现后台管理系统的登录功能我们已经实现了,下一篇文章将介绍如何实现后台管理系统的主要框架~
一个不是前端的coder,文章如有不足之处还望指出~
vue rule鼠标移走校验_Vue-cli+Element-ui实现后台管理系统(二)实现后台登录功能...相关推荐
- 纯css3鼠标经过出现文字或图片鼠标移走消失
2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...
- 页面中鼠标触碰字体后切换颜色且随鼠标移走后改变
such as: 鼠标移上去: 颜色会随着鼠标移动变回原来的颜色 实现这个效果其实很简单: less代码: li {display: inline-block;width: 50/100rem;hei ...
- html中鼠标移走的伪元素,a标签的伪元素的应用——link,hover,visited,active
a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). body{ padding: 200px 0; } a ...
- axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; imp ...
- VUE通用后台管理系统(一)登录
先看效果 1)安装vue脚手架,项目配置,项目启动,这一步不做过多赘述,假设你已经成功启动了项目 2)配置路由 1.src/router/index.js中进行路由设置,代码如下 import Vue ...
- elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
- Vue项目实战之电商后台管理系统(二) 主页模块
前言 目录 前言 一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...
- Element Tiptap Editor - 免费开源的 Vue 富文本编辑器,专门为搭配 Element UI 使用优化,使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
- vue ref 绑定的事件需要移除吗_Vue易遗忘的基础复习(二)
数据请求 Vue-resource请求 在Vue2.0之后已经被舍弃 2. fetch请求 因为传统 Ajax (指 XMLHttpRequest)存在一些令人头疼的问题:配置和调用方式非常混乱,而且 ...
最新文章
- 【机器学习基础】机器学习训练中常见的问题和挑战!
- php代码 intval( ),php intval的测试代码发现问题_PHP教程
- nextcloud如何填写数据库_NextCloud安装使用心得记录
- SAP License:欧洲人的项目
- SQL Server中的查询跟踪列值
- JAVA偏向锁的什么时候释放_​java偏向锁,你还没上车,它就要被去掉了
- 深入分析MFC之GDI原理透析
- php留言板的实验步骤,php留言板实训报告.docx
- Android SN号修改 serial number修改 adb devices显示串号修改
- javascript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
- Android 项目上线流程总结
- 谷歌图片的爬虫库(附加必应图片爬虫)--针对近期谷歌变了
- 无所不能的NumPy:我用它弹奏出了CD音质的吉他名曲“爱的罗曼史”
- html5 input valid,javascript – 如果inputElement.validity.valid == false,如何显示HTML5验证?...
- matlab中screen函数,13 PTB Screen 函数
- TweenMax 教程 使用
- 360浏览器如何开启翻译功能?
- which语句c语言例子,用which引导的定语从句讲解和句子举例
- Java——计算机随机产生一个[1,100]之间的数字(终极版)
- 工程伦理计算机论文,关于工程伦理的几个问题
热门文章
- grpc双向流究竟是什么情况?2段代码告诉你
- 我是一个请求,我是如何被发送的?
- 看KubeEdge携手K8S,如何管理中国高速公路上的10万边缘节点
- 云上自动化:云上编排让上云更简单
- 【华为云技术分享】五个Taurus垃圾回收compactor优化方案,减少系统资源占用
- 跑道防侵入,华为云ModelArts平台助力航空器识别AI模型开发
- Reactive(3)5分钟理解 SpringBoot 响应式的核心-Reactor
- 补习系列(22)-全面解读 Spring Profile 的用法
- Android手机打造你的PythonJava开发工具!
- ssh隧道 mysql,如何通过SSH隧道连接MySQL