-
使用Vue写一个登录页面
2018-07-31 11:24:20上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。 1.构建项目的目录 2.App.vue <template> <div id="app"> <router-view/> &...上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。
1.构建项目的目录
2.App.vue
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 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' //自己写的样式 import './style/theme.css' import './style/characters.css' // 注册element-ui Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
theme.css
body { padding: 0; margin:0; font-family: "Microsoft YaHei UI Light"; } .outer_label { position: relative; left: 0; top: 0; width: 100%; height: 220px; background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */ /*background-color: #000099;*/ text-align: center; filter: brightness(1.4); } .inner_label { position: absolute; left:0; right: 0; bottom: 0; top:0; margin: auto; height: 50px; } .qxs-icon { height: 40px; width: 90%; margin-bottom: 5px; padding-left: 10%; border: 0; border-bottom: solid 1px lavender; }
character.css
.text-size12px{ font-size: 12px; } .text-size14px{ font-size: 14px; } .text-size16px{ font-size: 16px; } .float-right { float: right; } .item-color { color: #848487; }
index.js
import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Login from '@/components/login/Login' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Login', component: Login } ] })
Login.vue
<template> <div> <div class="outer_label"> <img class="inner_label login_logo" src="../../assets/logo.png"> </div> <div class="login_form"> <input type="text" class="qxs-ic_user qxs-icon" placeholder="用户名" v-model="userName"> <input type="text" class="qxs-ic_password qxs-icon" placeholder="密码" v-model="password"> <!--<button class="login_btn el-button el-button--primary is-round" type="primary" round>登录</button>--> <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button> <div style="margin-top: 10px"> <span style="color: #000099;" @click="login">司机账号登陆</span><span style="float: right;color: #A9A9AB">忘记密码?</span> </div> </div> </div> </template> <script> // import { userLogin } from '../../api/api'; export default { data() { return { userName: '', password: '', isBtnLoading: false } }, created () { if(JSON.parse( localStorage.getItem('user')) && JSON.parse( localStorage.getItem('user')).userName){ this.userName = JSON.parse( localStorage.getItem('user')).userName; this.password = JSON.parse( localStorage.getItem('user')).password; } }, computed: { btnText() { if (this.isBtnLoading) return '登录中...'; return '登录'; } }, methods: { login() { if (!this.userName) { this.$message.error('请输入用户名'); return; } if (!this.password) { this.$message.error('请输入密码'); return; } } } } </script> <style> .login_form { padding-top: 10%; padding-left: 10%; padding-right: 10%; } .qxs-ic_user { background: url("../../assets/login/ic_user.png") no-repeat; background-size: 13px 15px; background-position: 3%; } .qxs-ic_password { background: url("../../assets/login/ic_password.png") no-repeat; background-size: 13px 15px; background-position: 3%; margin-bottom: 20px; } .login_logo { height: 100%; } .login_btn { width: 100%; font-size: 16px; background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */ filter: brightness(1.4); } </style>
ic_password.png
ic_user.png
logo.png
3.根据npm run dev 命令启动,启动完成之后会有个链接,访问链接就直接可以看到下面页面:
问题交流群,不定期分享各种技术文档:
QQ群号:464512055
群二维码:
这是一个神器的二维码,扫描之后你会少掉一块钱。
-
Vue实现页面跳转
2018-06-17 17:20:20如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }" :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:"> ...如何点击底部书架跳转到对应的页面
<router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
:class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
<span class="tabNav-ico tabNav-book"></span>
<span class="tabNav-txt">书 架</span></router-link>
'name': 'bookshelf'表示要跳转的Vue组件名称,名称是在router文件下的index.vue中进行设置。
{ path: '/bookshelf', name: 'bookshelf', component: Bookshelf },
params :{entityId: this.entityId}里面是要传递过去的参数。
在bookshelf组件接收参数
this.bookshelfId = this.$route.params.entityId;
除了使用标签<router-link>进行跳转,还可以使用下面的方法
<a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
<span class="tabNav-ico tabNav-home"></span>
<span class="tabNav-txt">首 页</span></a>
toIndex: function(){
this.$router.push("/?entityId="+ localStorage.getItem("entityId"));}
同样可以跳转页面,this.$router.push()方法只有一个参数的时候,代表跳转地址,还可以增加一个参数传值。
写法:
this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});
接收参数:
this.$route.params.title
需要注意path不能和params一起使用,否则params将无效。需要用name来指定页面。
或者通过path和query传递参数
this.$router.push({path: '/book', query: {'id', this.id}})
页面接收参数使用 this.$route.query.id
-
Vue刷新页面的三种方式
2019-06-08 10:54:18我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: location.reload(); vue自带的路由跳转: ...我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。
- 原始方法:
location.reload();
- vue自带的路由跳转:
this.$router.go(0);
用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。
所以,我们选择第三种方式:
3. 首先在App里面写下如下代码:<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide () { //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。 return { reload: this.reload } }, data() { return{ isRouterAlive: true //控制视图是否显示的变量 } }, methods: { reload () { this.isRouterAlive = false; //先关闭, this.$nextTick(function () { this.isRouterAlive = true; //再打开 }) } }, } </script>
接下来,我们就可以在需要刷新页面的组件里这样写:
export default { inject:['reload'], //注入App里的reload方法 data () { return { ....... } },
在需要刷新页面的代码块中使用:
this.reload();
-
页面置换算法
2017-07-01 20:10:50本实验的目的是通过请求页式存储管理中页面置换算法模拟设计,了解虚拟存储技术的技术特点,掌握请求页式存储管理的页面置换算法。 2. 实验内容 (1)设置一个页面走向序列。 (2)计算并输出下述各种算法在不同...实验三 存储管理
1. 实验目的
存储管理的主要功能之一是合理地分配空间。请求页式管理是一种常用的虚拟存储管理技术。
本实验的目的是通过请求页式存储管理中页面置换算法模拟设计,了解虚拟存储技术的技术特点,掌握请求页式存储管理的页面置换算法。
2. 实验内容
(1)设置一个页面走向序列。
(2)计算并输出下述各种算法在不同内存容量下的缺页率。
①先进先出页面置换算法(FIFO);
②最近最久未使用页面置换算法(LRU);
③最佳淘汰算法(OPT);
④最不经常使用页面淘汰算法(LFU);
⑤最近没有使用页面淘汰算法(NUR)。
///
要求:
1、请将“程序的源代码和运行结果”填写在下面的答案框。2、为了增加程序的可读性,程序的源代码中的语句需要有注释说明。
///
-
vue点击详情页面keep-alive的缓存问题
2020-11-02 09:52:51今天有个列表 点击以后 进入详情 然后在返回,再点击其他的列表数据,详情页面请求的还是上一次请求的id 除非刷新才会请求现在的. ...解决有些不需要被缓存的组件页面 设置 activated 即可以再次进行事件的响应 ... -
CHROME扩展笔记之页面更新监听
2020-08-15 15:33:51* 监听tab页面变化(用于处理页面logo问题) */ chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){ if( changeInfo.url == undefined){return false;} // 检查是否是wish页面的tab if(tab.url.... -
网站开发进阶(十一)如何将一个jsp页面嵌套在另一个页面中
2015-11-20 18:55:45如何将一个jsp页面嵌套在另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容... -
网站开发进阶(十)如何将一个html页面嵌套在另一个页面中
2015-11-20 18:52:16如何将一个html页面嵌套在另一个页面中 1.IFrame引入 你会看到一个外部引入的文件,但会发现有一个类似外框的东西将其包围,可使用 2.方式 3.Behavior的download方式 functiononDownloadDone(downDate){ ... -
Spring Boot获取前端页面参数的几种方式总结
2017-09-21 21:37:47Spring Boot的一个好处就是通过注解可以轻松获取前端页面的参数,之后可以将参数经过一系列处理传送到后台数据库,前段时间正好用到,但是忘得差不多了,获得的方式有很多种,这种东西不写下来一段时间不用就忘得... -
-
-
iframe标签(页面嵌套)
2019-06-18 08:49:29上面两张图是两个不同的页面但是它们的基本框架都是一样,每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的,改变的是中间的内容。 有没有什么方法可以不改变外面的基本框架只... -
Vue.js 关于页面加载完成后执行一个方法的问题
2018-10-13 20:34:12首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。 解决思路: 1.通过子页面调用... -
『操作系统』内存管理--虚页面管理之页面置换算法
2020-12-11 00:40:39没次选择以后永不使用的, 或许是在最长(未来)时间内不再被访问的页面的页面被淘汰。显然OPT算法是最优的,但是在实际操作往往无法预知未来,所以OPT只存在理论而不能真的实现,通常用于衡量其他置换算法的优劣。 ... -
前端页面弹框遮罩禁止页面滚动
2017-07-03 09:53:15前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息,在这个弹框弹出的同时,往往会伴有一个灰色的遮罩层挡住页面内容,同时整个页面被这层遮罩盖住,不可点击也不可滚动。... -
vue单页面应用打开新窗口显示跳转页面的方法
2018-05-22 09:47:00一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要。一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定:this.$router.push({name: ... -
js子页面调用父页面方法与父页面调用子页方法
2019-08-17 21:44:17在做项目中都会存有主页面子页面。子页面嵌套中主页面中,主页面有主的方法,子页面有字面的方法,通常的方法是点击主页面选项打开子页面。但是我这里我要从子页面就是房态图,因为主页面和房态中有一些方法是相同,... -
vue页面动态添加标签
2018-09-20 11:54:39将需要插入到页面的元素定义成一个组件,再进行操作。 参考:https://jintang.github.io/2018/03/27/vue动态添加组件/ 2.页面直接添加元素 页面结构代码: &lt;ul&gt; &lt;li v-for=&... -
vue项目如何刷新当前页面
2018-05-27 11:19:33想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定... -
SpringBoot 错误页面跳转
2020-02-04 17:19:20SpringBoot实现MVC 404、500等错误时跳转自定义页面 一、新增配置类 package com.study.demo.config; import org.springframework.boot.web.server.ErrorPage; import org.springframework.boot.web.server.... -
js如何实现关闭当前页面
2018-11-01 15:38:05js如何实现关闭当前页面 // 关闭当前页面 window.opener = null; window.open('', '_self'); window.close(); -
js关闭当前页面
2019-08-16 11:40:14关闭当前页面 function closeWindow(){ var userAgent = navigator.userAgent; if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) { window.location.href="about:blank"; ... -
html页面中iframe嵌套页面的父页面和子页面js方法互相调用
2017-08-25 18:24:13我们在写html页面或者说是jsp页面是,有时候需要在一个页面中使用iframe标签嵌套另一个页面,而两个页面有些数据需要交互,这个时候就会用到js技术,互相调用方法, 当我们在父页面中需要调用iframe标签中嵌入的子... -
jsp+servlet实现简单登录页面功能Demo
2018-05-28 17:55:16小白新路历程-1 [转载请联系本人]实现功能:模拟简单登录功能,登录成功跳转新页面,登录失败在原登录界面提示登录失败信息开发环境:eclipseTomcat-8.0预备知识:HTML标签,Servlet相关知识——请求的转发与重定向... -
layui 或者layer 父页面获取子页面数据 或者子页面获取父页面操作方法
2019-08-05 14:44:54// 父页面获取子页面的iframe var frameId = $(layero).find("iframe").attr('id'); // 父页面获取子页面指定的id数据 var id = $(window.frames[frameId].document).find("#typecoupon").val(); // 子页面的数据... -
vue跳转页面后刷新页面
2019-01-30 10:22:43跳转页面 使用router-link 刷新页面 在router-link页面中写方法refresh 新页面取参数 -
html页面中嵌入html页面
2018-08-03 12:52:43原文地址为:html页面中嵌入html页面 -
vue修改数据页面不重新渲染
2018-09-06 19:46:47使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: &lt;template v-for="item in tableData"&gt; &lt;div :class="{'redBorder':item.... -
vue 刷新当前页面或者跳转页面时候刷新
2018-08-03 14:59:13为什么会有这篇文章 1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的 2 采用window.reload() 或者...先新建一个空白页面, 先跳到空白页面, 然后再从空白页面跳转回来 history.go(-1) 这样的方式 ... -
AngularJS进阶(八)实现页面跳转并进行参数传递
2015-11-20 19:04:14angularjs实现页面跳转并进行参数传递 Angular页面传参有多种办法,我在此列举4种最常见的: 1.基于ui-router的页面跳转传参 (1)在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers...
-
协同CRM82.rnd
-
thinkphp5.1博客后台实战视频
-
SQL多表的设计查询,5种方法
-
Git Gitee的入门教程
-
基于STM32同步信号传输延时校正模块设计与实现
-
mysql在insert和update时使用子查询
-
C++中指定格式(xxxx/yy/zz)的输入
-
亿度云盘~Java小白入门实战
-
codalab医学影像挑战赛 Lits肝肿瘤分割数据集
-
力扣LeetCode #84 柱状图中最大的矩形(LargestRectangleArea)
-
微信小程序帆布开发——微信小程序使用多端JavaScript画布框架streakjs示例- guyoung / streakjs-weapp
-
arcgis js api 4.x 前端加载json显示
-
电商设计专业思维
-
微信小程序商城
-
转行做IT-第7章 数组
-
python3字符串操作中的“and”和“or”操作符
-
HiApp微信小程序版
-
石青网站推广软件2.0.8.1
-
演练 使用变量存储商品的数据 0126
-
微信小程序