更新时间：2021年2月4日
设计登入页面
要求：
- 主题为黑蓝色
- 响应式布局
- 登入，注册，忘记密码3个页面
- 验证码功能
- 邮箱功能
- 方框采用尖脚，不需要圆弧
成果：
由于这种登入注册之类的界面网络上多如牛毛，我们只需面向复制粘贴的编程即可
但前提是要完全理解，能随意修改
登入界面：
注册界面：
忘记密码界面：
目前这3个还是静态网页
整体为暗黑色的主题，鼠标悬浮有变蓝色的特效
另外声明：
本系统不用于任何商业行为（那不废话）
最终目的是写出一篇论文
论文第一版名字我都想好了：
《基于.Net5与Vue的深度分布式集群跨平台的作业管理系统》
感觉是要高大尚了一些，但是总感觉不是很满意
我网上找了很多，有一种格式很装逼：
《在XXXX概念下的XXXX的XXXX系统》
于是我的第二版论文名字：
《在深度分布式集群模式下实现基于.Net5与Vue的跨平台作业管理系统》
emmm怎么说了，感觉还是不要太满意哈哈哈
取名先不急，我们跨平台和分布式集群还没弄呢！
好像扯远了
继续页面
Vue前端
将静态页面改造加入前端
这里记得要改几个点
由于自带的css和bootstrap有一些冲突
我们需要对他进行改名
- main改为main2
- btn改为mbtn
- app改为app2
后来我又看到页面字体有点不适应
加上
html {
font-size: 80%
}
修改过后的登入页面代码
<template>
<div id="app2" class="login">
<div class="single-bg"></div>
<div class="notify-container"></div>
<div class="main2 padding-limiter">
<div class="panel login-panel">
<div class="double-column">
<img
class="panel-wide login-img"
src="../../public/images/baner.jpg"
/>
<div class="panel-narrow" id="p-login">
<div class="title">超越 登录</div>
<div class="control-group">
<label>账 户</label>
<div class="controls">
<input
v-model="ruleForm.username"
id="username"
type="text"
placeholder="用户名/邮箱/手机号"
title="账户"
/>
</div>
</div>
<div class="control-group">
<label>密 码</label>
<div class="controls">
<input
v-model="ruleForm.pwd"
id="password"
type="password"
title="密码"
/>
</div>
</div>
<div class="control-group">
<label>验证码</label>
<div class="controls">
<input
id="code"
type="text"
placeholder="邮件验证码"
maxlength="6"
title="验证码"
/>
<button class="btn btn-code" id="send">获取</button>
</div>
</div>
<div style="text-align: right">
<label>
<a href="./register.html">注册</a>
<a
href="./reset_password.html"
style="margin: 0 60px 0 8px"
class="wtf-fix"
>忘记密码?</a
>
</label>
</div>
<div class="actions">
<button @click="submitForm" class="mbtn mbtn-my" id="login">
登录
</button>
</div>
</div>
<div class="panel-narrow" id="p-2fa" style="display: none">
<div class="title">两步验证</div>
<div class="control-group">
<label>代码</label>
<div class="controls">
<input id="2fa" type="text" title="两步验证代码" />
</div>
</div>
<div class="actions">
<button class="btn" id="login_2fa">提交</button>
</div>
</div>
<div class="panel-narrow" id="p-u2f" style="display: none">
<div class="title">:)</div>
<div
id="u2f_status"
style="text-align: center; margin-right: 15px"
></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import account from "@/api/account";
export default {
data() {
return {
ruleForm: {
username: "",
pwd: "",
},
// rules: {
// username: [
// { required: true, message: "用户名不能为空", trigger: "blur" },
// {
// min: 2,
// max: 20,
// message: "长度在 2 到 20 个字符",
// trigger: "blur",
// },
// ],
// pwd: [
// { required: true, message: "密码不能为空", trigger: "blur" },
// {
// min: 6,
// max: 20,
// message: "长度在 6 到 20 个字符",
// trigger: "blur",
// },
// ],
// },
};
},
methods: {
submitForm() {
// this.$refs[formName].validate((valid) => {
// if (valid) {
account.login(this.ruleForm).then((response) => {
const resp = response.data;
if (resp.flag) {
localStorage.setItem("logged", resp.data);
this.$notify({
title: "成功",
message: resp.message,
type: "success",
});
this.$router.push("/");
} else {
this.$notify.error({
title: "错误",
message: resp.message,
});
}
});
// } else {
// this.$notify.error({
// title: "错误",
// message: "请合理输入",
// });
// }
// });
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
@import "../../public/css/base.min.css";
</style>
静态文件应该放到assets里面
但是我个人习惯放public比较舒服
public中的文件,是不会经过编译的,打包后会生成dist文件夹,public中的文件只是复制一遍。因此,public建议放一些外部第三方,自己的文件放在assets,别人的放public中
这里规则我给它删除了，感觉风格和现在页面实在不搭
还有一点别忘了
注册和忘记密码跳转路由，由于样式原因，我把路由套在了外面
相应的，把注册和忘记密码页面改过去
还有一点要注意
使用原生的js进行跳转，会刷新页面，页面会有明显的闪烁的感觉
要使用我们的跳转路由方式
即：
3个页面都弄完了
内部页面也稍微优化了一下
由于我们是vue，路由跳转没有闪烁，非常的流畅，很是舒服
用户体验，很高
登入失败：
登录成功：
啊，整体丢舒服多了
关于验证码和邮箱，我们一步一步来搞
现在搞一下前端访问权限问题
默认，我们输入网址是不会加/login的
举个栗子：www.xxx.com如果为检测未登入的话，要自动跳转到www.xxx.com/login
另外，如果cookies存储了，或者session，那就直接进行主页面，不需要登入
这里我们使用前端管道来弄
前端访问权限
添加js文件
内容：
import router from './router/index'
router.beforeEach((to, from, next) => {
const logged = localStorage.getItem("logged") //获取是否登入
if (!logged) { //如果没有登入
if (to.path !== '/login' || to.path !== '/register' || to.path !== 'reset_password') { //除去这个几个页面其他都返回到login
next({ path: '/login' })
} else { //添加一个结束条件，不然死循环
next()
}
} else { //如果已经登入，那随便跳转
next()
}
})
另外在main中进行导入：
效果：
我就知道，蹦了，死循环了
又要开始修bug了
修bug：
用alert修bug最好不过了
看看会弹出什么
实验只弹出了1，2
这和我们想要的不一样，没有走到3去
那就会死循环
奇怪的出现了，我把这个删掉
于是成了
啊这？？？
是我自己把自己绕晕了
这个地方其实要用且运算。。。。
我们干脆改写一下，把非运算搞掉
import router from './router/index'
router.beforeEach((to, from, next) => {
const logged = localStorage.getItem("logged") //获取是否登入
if (!logged) { //如果没有登入
if (to.path == '/login' || to.path == '/register' || to.path == '/reset_password') {
next()
} else {
next({ path: '/login' })
}
} else { //如果已经登入，那随便跳转
next()
}
})
ok，这样就没有问题了
最后思考一点
这样弄，其实还是有问题，问题就出在保存时间问题
前端的本地存储是永久保存
后端的session默认是保存20分钟
如果当你session过期了，而本地存储没有过期
那就完蛋
会导致前端一样访问，而后端拒绝
针对这个情况，应该在每次进入内容页面的时候进行一次交互
看看后端还存不存在session
如果不存在，跳转到login页面
后端添加api
前端添加api：
前端
最后调试进行使用
很遗憾，还是出现了一点问题
如果后端的session过期了，确实有变化，但是也不会跳转到登入路由上
我们一样进行测试
发现alert(0)运行不到这里
这个意味着那个提示的问题
最后测试一下，果然是那个问题！
坑：这里不能放其他代码
最终成型代码
import router from './router/index'
import accountAPI from '@/api/account'
router.beforeEach((to, from, next) => {
const logged = localStorage.getItem("logged") //获取是否登入
if (!logged) { //如果没有登入
if (to.path == '/login' || to.path == '/register' || to.path == '/reset_password') {
next()
} else {
next({ path: '/login' })
}
} else { //如果已经登入，就要询问后端会话是否存在
accountAPI.logged().then(response => {
const resp = response.data;
if (resp.flag) { //如果后端会话也存在，那就不管
next()
} else { //如果后端会话不存在，清除前端存储并且跳转到登入界面
localStorage.clear()
alert("登入已超时，请重新登入")
next({ path: '/login' })
}
})
}
})
ok，完美，关于前端权限问题的模块，已经全部解决了！
最后
到这里了
关于分数模块，我想了很久，有很多方法实现，我要选一个最好的才行，思路基本已经差不多，下几次把坑给它填了
登入这一块，还差验证码和邮箱
验证码还好说，邮箱就有点麻烦了，（之前频繁用邮箱做实验发，一次性发个几十条，就被和谐掉了，我得想想办法，不会被和谐掉）
关于分布式集群和跨平台：
分布式集群我接触过，如果具体放到本系统来，可能会有一点难度，不过慢慢来吧
跨平台不难，我已经对linux有一定的基础，之前也成功过跨平台很多项目，个人认为，难点不在linux，在于nginx和mysql
（最近不知道为什么突然看的人多了起来，希望能给你们学到点东西吧，把走过的坑，给你们填一下）
我们下期再见
扫一扫
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
