Vue实战狗尾草博客管理平台第四章
本章主要内容以下：
-
填补上期的坑。css
-
html
-
开发登陆页面前端
填坑
-
上期中咱们功能都已正常使用。但不知道有没有小伙伴测试过error页面，当访问地址不存在时，路由是否能正常挑战error页面。vue
实际上是不能的，由于上期的路由配置中，对404，页面及通配符页面的auth没有关掉，致使，在没有登陆的状况下，404页面是进不去的。必须先进行登陆。因此这是不合适的。这里你们须要先关掉auth。web
-
router>permission.js文件中，咱们在校验到没有登陆的时候会跳转到登陆页面，并将当前路由做为参数传过去，这里上一节，这里参数的传递是使用不正确的。这里作出修改：npm
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字体相似于图标，但实质上倒是字体，使用方便，和使用字体同样。不一样于图片的是，体积很是小。并且颜色大小等更改很方便，这也是不少人青睐的缘由。浏览器
具体的配置有不少种，度娘能够告诉你。服务器
这里狗尾草只提两种基本的使用方式cookie
下载依赖文件到本地。less
直接使用远程
打开iconfont官网。选择上方nav图标管理，个人项目
而后右侧点击新建项目
一次输入项目名称，描述成员等主要信息。随后保存
这里我输入的项目名称是gwc_manage开发成员就是我本身啦。随后就能够看到项目已经建立好了，可是该项目下并无任何一个图标。好，到这里就先放下。基本的已经完成。
随后咱们在上方搜索图标，这里咱们要开发登陆页面，因此咱们就先搜索一个显示和隐藏吧
找到合适的图标后，鼠标滑到上方添加到购物车，放心这里的购物车不会放你进行付款。别惧怕孩子。将全部想要的图标找到后都添加进购物车。
咱们就能够看到右上角购物车有咱们添加的图标啦。
下来点击它，而后加入项目，添加进咱们的gwc_manage项目
确认保存。图标管理，个人项目 回到个人项目中，能够看到添加的两个图标到了项目中。咱们1. 点击下载至本地。
解压后如图所示，将这些文件引入到项目中的assets下的iconfont的文件中。随后更改文件路径，具体不作说明，度娘上很齐全。路径更改后，咱们打开demo_index.html文件就能够看到咱们的iconfont码，在项目中，咱们只须要建立i标签，class="iconfont "后添加对应的类名或者标签中使用iconfont码便可。不过须要记得在使用结束后能够将iconfont.woff2和这个html文件删除掉，由于他是不须要用到的，放着还占用内存。
-
第二种引入方式
咱们回到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="80" shapeType="circle" :particleSize="4" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :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: 100%; height: 100%; display: flex; justify-content: center; background: url('http://static.bgwhite.cn/gwc_manage_them.jpeg') no-repeat center; background-size: cover; background-color: #333333; overflow: hidden; .particles { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 1; } .login-panel { color: #ffffff; width: 40%; height: 200px; z-index: 2; position: relative; margin: 10% auto 0; padding: 20px; background-color: rgba(0,0,0,.4); &:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.8); z-index: -1; 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: 50%; overflow: hidden; } .title { margin: 20px 0; } /deep/.el-input__inner { background-color: transparent; border: 1px solid #ffffff; color: #ffffff; height: 30px; line-height: 30px; font-size: 12px; border-radius: 0; &:first-child { border-right: 0; } } /deep/.el-button { border: 1px solid #ffffff; border-radius: 0; font-size: 12px; background-color: transparent; height: 30px; line-height: 30px; padding: 0 10px; } .icon-login { line-height: 30px; } } } </style>