源码地址:https://github.com/18291907191/gwc_manage

本章主要内容如下:

  1. 填补上期的坑。

  2. iconfont仓库的关联,引入。

  3. 开发登录页面

填坑

  1. 上期中我们功能都已正常使用。但不知道有没有小伙伴测试过error页面,当访问地址不存在时,路由是否能正常挑战error页面。

其实是不能的,因为上期的路由配置中,对404,页面及通配符页面的auth没有关掉,导致,在没有登录的情况下,404页面是进不去的。必须先进行登录。所以这是不合适的。这里大家需要先关掉auth。

  1. router>permission.js文件中,我们在校验到没有登录的时候会跳转到登录页面,并将当前路由作为参数传过去,这里上一节,这里参数的传递是使用不正确的。这里做出修改:

 
import VueCookies from 'vue-cookies';
import router from './index';

// 全局钩子函数
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
// next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
// next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
// next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
// 确保要调用 next 方法,否则钩子就不会被 resolved。

router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title ? to.meta.title : '狗尾草博客管理系统';
}
// 判断是否需要登录权限
if (to.matched.some(res => res.meta.auth)) {
// 判断是否登录
if (VueCookies.isKey('isLogin')) {
console.log('已登录');
next()
} else {
next({
name: "Login",
query: {url:to.fullPath}
}) // 没登录则跳转到登录界面
}
} else {
next()
}
});

router.afterEach((to, from) => {
//跳转后你要做的事情
})

export default router

Iconfont仓库关联

iconfont字体类似于图标,但实质上却是字体,使用方便,和使用字体一样。不同于图片的是,体积非常小。而且颜色大小等更改很方便,这也是很多人青睐的原因。

具体的配置有很多种,度娘可以告诉你。

这里狗尾草只提两种基本的使用方式

  1. 下载依赖文件到本地。

  2. 直接使用远程

打开iconfont官网。选择上方nav图标管理,我的项目

然后右侧点击新建项目

一次输入项目名称,描述成员等主要信息。随后保存

这里我输入的项目名称是gwc_manage开发成员就是我自己啦。随后就可以看到项目已经创建好了,但是该项目下并没有任何一个图标。好,到这里就先放下。基本的已经完成。

随后我们在上方搜索图标,这里我们要开发登录页面,所以我们就先搜索一个显示和隐藏吧

找到合适的图标后,鼠标滑到上方添加到购物车,放心这里的购物车不会放你进行付款。别害怕孩子。将所有想要的图标找到后都添加进购物车。

我们就可以看到右上角购物车有我们添加的图标啦。

下来点击它,然后加入项目,添加进我们的gwc_manage项目

确认保存。图标管理,我的项目 回到我的项目中,可以看到添加的两个图标到了项目中。我们1. 点击下载至本地。

解压后如图所示,将这些文件引入到项目中的assets下的iconfont的文件中。随后更改文件路径,具体不做说明,度娘上很齐全。路径更改后,我们打开demo_index.html文件就可以看到我们的iconfont码,在项目中,我们只需要创建i标签,class="iconfont "后添加对应的类名或者标签中使用iconfont码即可。不过需要记得在使用结束后可以将iconfont.woff2和这个html文件删除掉,因为他是不需要用到的,放着还占用内存。

  1. 第二种引入方式

我们回到iconfont的项目中,点击生成代码,查看在线链接。就可以看到在线的iconfont代码。我们直接复制这个代码

在assets的styles下创建iconfont.css文件。而后吧这串代码辅助到这里,然后在index.css文件中引入该iconfont文件。因为前面我们配置过了,所以这里index.css文件中引入过后全局也就可以使用了,不过需要注意的是:

我们除了复制上线的代码,我们还需要在下面添加:

 
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

这样就可以使用了。直接复制iconfont项目中的iconfont码,到我们的标签中,我们也就可以使用了。

登录页面开发

这里话不多,直接上代码。没啥东西。里头有些东西比如:静态资源服务器的使用后面会给大家讲到

<template>
<div class="login-wrap">
<vue-particles
class="particles"
color="#dedede"
:particleOpacity="0.7"
:particlesNumber=""
shapeType="circle"
:particleSize=""
linesColor="#dedede"
:linesWidth=""
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance=""
:moveSpeed=""
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push">
</vue-particles>
<div class="login-panel tc">
<el-row class="df-c">
<el-image class="head df-c" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532412479772&di=054181aa27a78980933091e0fd338d3f&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201409%2F21%2F20140921125932_2mAvm.thumb.700_0.jpeg">
<div slot="placeholder" class="image-slot">
Loading...
</div>
<div slot="error">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</el-row>
<el-row class="title">狗尾草博客管理平台</el-row>
<el-row type="flex" align="middle">
<el-input type="text" placeholder="请输入账号" v-model="loginInfo.account"></el-input>
<el-input :type="isShow?'text':'password'" placeholder="请输入密码" v-model="loginInfo.password">
<i slot="suffix" v-show="isShow" title="隐藏密码" @click="isShow = !isShow" style="cursor:pointer;"
class="iconfont icon-login"></i>
<i slot="suffix" v-show="!isShow" title="显示密码" @click="isShow = !isShow" style="cursor:pointer;"
class="iconfont icon-login"></i>
</el-input>
<el-button plain @click.native="Login">Login</el-button>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
loginInfo: {
account: "",
password: "",
}
}
},
methods: {
// 数据校验
valiData() {
let loginInfo = this.loginInfo;
if(!loginInfo.account) {
this.$message({
type: 'info',
message: "登录账号不能为空"
})
return false;
}
if(!loginInfo.password) {
this.$message({
type: 'info',
message: '登录密码不能为空'
})
return false;
}
return true;
},
Login() {
console.log(this.$router.query);
let isOk = this.valiData();
if(!isOk) {
return false;
}
this.$cookies.set('isLogin',true);
console.log('登录',this.loginInfo);
this.$router.push({
path: '/'
})
}
}
}
</script>
<style lang="less" scoped>
.login-wrap {
width: %;
height: %;
display: flex;
justify-content: center;
background: url('http://static.bgwhite.cn/gwc_manage_them.jpeg') no-repeat center;
background-size: cover;
background-color: #;
overflow: hidden;
.particles {
width: %;
height: %;
overflow: hidden;
position: absolute;
left: ;
top: ;
z-index: ;
}
.login-panel {
color: #ffffff;
width: %;
height: 200px;
z-index: ;
position: relative;
margin: % auto ;
padding: 20px;
background-color: rgba(,,,.);
&:after {
content: '';
position: absolute;
top: ;
left: ;
right: ;
bottom: ;
background-color: rgba(,,,0.8);
z-index: -;
background: url('http://static.bgwhite.cn/gwc_manage_them.jpeg') no-repeat center top;
background-size: cover;
background-attachment: fixed;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
margin: -15px;
}//登录面板毛玻璃效果
.head {
width: 90px;
height: 90px;
border-radius: %;
overflow: hidden;
}
.title {
margin: 20px ;
}
/deep/.el-input__inner {
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
height: 30px;
line-height: 30px;
font-size: 12px;
border-radius: ;
&:first-child {
border-right: ;
}
}
/deep/.el-button {
border: 1px solid #ffffff;
border-radius: ;
font-size: 12px;
background-color: transparent;
height: 30px;
line-height: 30px;
padding: 10px;
}
.icon-login {
line-height: 30px;
}
}
}
</style>

大家可以看到里头我引入了一个粒子的特效插件。这个官网上已经把这个插件的使用给交代的明明白白。直接copy即可

官方文档:https://vue-particles.netlify.com/

不过大家需要先下载:

 npm i vue-particles

然后复制搞定。不过需要注意盒子大小的更改哦。

另外大家,也可以注意到这里我们最开始下载的显示和隐藏的iconfont的使用。实现的功能是输入密码的显示和隐藏。

这里,我先通过this.$cookies.set('isLogin',true);模拟实现登录,登录成功后,他就会跳转到该跳转的页面~

打完,收工。

给大家补个效果图吧:

界面呢,没有人给咱设计,职业前端嘛,就自己整一个。

总结:

引入的第三方组件,因为样式可能无法满足需求,我们就需要通过样式穿透去更改三方组件的样式。

这里每个预编译处理器的穿透都不一样,大家可以百度。

less的穿透为在需要穿透的样式前加上/deep/即可。

预告

下一章内容:

  1. 菜单列表和文章列表做完。

  2. 静态资源服务器的使用(今日项目比较紧,更新可能会慢,希望大家体谅哈)

Vue实战狗尾草博客管理平台第四章的更多相关文章

  1. Vue实战狗尾草博客管理平台第六章

    Vue实现狗尾草博客后台管理系统第六章 本章节内容 文章列表 文章详情 草稿箱 文章发布. 本章节内容呢,开发的很是随意哈,因为多数就是element-ui的使用,熟悉的童鞋,是可以很快完成本章节的内 ...

  2. Vue实战狗尾草博客管理平台第五章

    本章主要内容如下: 静态资源服务器的配置.学会如何使用静态资源服务器引入静态资源.并给大家推荐一个免费可使用的oss服务器~ 页面的开发由于近期做出的更改较大.就放在下一篇中. 静态资源服务器 静态资 ...

  3. Vue实战狗尾草博客后台管理系统第七章

    Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...

  4. Vue实战狗尾草博客后台管理系统第三章

    Vue实现狗尾草博客后台管理系统第三章 本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图 样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自己情况设计更好看的哦~ 侧边栏 这里我们 ...

  5. Vue实战狗尾草博客管理系统第一章

    Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...

  6. Vue实战狗尾草博客管理系统第二章

    伙伴们出来啦,探讨各问题,关于项目中大量的表单,大家是怎么处理的? 本章主要内容如下:底层布局,路由配置,github仓库推送关联. 关联GitHub仓库 关联建立在github已创建账号的基础上 登 ...

  7. 一个 Vue + Node + MongoDB 博客系统

    源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...

  8. 关于vue项目管理项目的架构管理平台

    关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...

  9. python drf+xadmin+react+dva+react-native+sentry+nginx 搭建前后端分离的博客完整平台

    前言: 经过差不多半年的开发,搭建从前端到服务器,实现了前后端分离的一个集PC端.移动端的多端应用,实属不易,今天得空,好好写篇文章,记录这些天的成果.同时也做个分享. 演示网站地址: http:// ...

随机推荐

  1. python爬虫网页解析之lxml模块

    08.06自我总结 python爬虫网页解析之lxml模块 一.模块的安装 windows系统下的安装: 方法一:pip3 install lxml 方法二:下载对应系统版本的wheel文件:http ...

  2. 【C++常用函数】头文件<algorithm>中的常用函数(绝对值,交换,比较)

    swap(a,b) 用于交换a,b两个变量的值: max(a,b) 返回a,b中的最大值: min(a,b) 返回a,b中的最小值: abs(x) 返回x的绝对值,x必须是整数:

  3. 如何在CAD图纸中进行线性标注

    在CAD中,都会在图纸中进行CAD标注,一般都是有CAD标注样式.CAD标注文字等.那其中有一个就是CAD线性标注?可以标注图纸间的距离?那如何在CAD图纸中进行线性标注呢?具体要怎么来进行操作?本篇 ...

  4. 每秒100W请求,12306秒杀业务,架构如何优化?

    如<同样是高并发,QQ/微博/12306的架构难度一样吗?>一文所述,同样是高并发场景,三类业务的架构挑战不一样: QQ类业务,用户主要读写自己的数据,访问基本带有uid属性,数据访问锁冲 ...

  5. PostgreSQL 查询、创建、删除索引

    --查询索引 select * from pg_indexes where tablename='tab1'; --创建索引 tab1_bill_code_index 为索引名, create ind ...

  6. JS中的call,apply和bind及记忆方式

    总结 call().apply()和bind()都是用来改变函数执行时的上下文,可借助它们实现继承:call()和apply()唯一区别是参数不一样,call()是apply()的语法糖:bind() ...

  7. Cesium专栏-视频投影(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  8. Command CompileSwiftSources failed with a nonzero exit code

    Xcode错误提示:Command CompileSwiftSources failed with a nonzero exit code,网上找了好多才搞定,通过在Build Setting里面自添 ...

  9. SQL语句添加表外键

    ALTER TABLE 表名 ADD CONSTRAINT FK_ID FOREIGN KEY(外键列) REFERENCES 外键表(外键表主键)

  10. MATLAB聚类有效性评价指标(外部)

    MATLAB聚类有效性评价指标(外部) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多内容,请看:MATLAB.聚类.MATLAB聚类有效性评价指 ...