从零搭建一个django项目-5-登录页面

怪盗LYL

发布于 2022-06-13 13:19:29

1.3K0

文章被收录于专栏：测试开发真货测试开发真货

开始写（抄）登录注册页面。

01

—

copy漂亮的登录模板

我们的重点不是页面所以我是从网上copy的页面。首先找到一个漂亮的登录页面项目。

https://gitee.com/moefield/vue3-login-page

观察下用到的插件，

安装以后：

复制LoginView.vue文件到我们项目的views文件夹下，修改路由文件将'/'地址和登录页面关联。

启动看看：发现了error 'loginParma' is assigned a value but never used no-unused-vars这个报错，这是因为eslint组件的校验，我们定义了变量但是没有用到。在后面加上// eslint-disable-line no-unused-vars忽略它。

再次运行可以看到报错变了，我们看下报错图片没有找到，这是因为他的页面用到了我们没有的图片，看下路径从他的项目复制过来，或者修改路径。

再次运行发现项目起来了，我们去浏览器看看。真不错可以看到页面了。

<template>
  <router-view/>
</template>
<script>
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>

登录以后的信息页面页面同理复制过来。

注意其中的cookie赋值取值用的是this.$cookie，因为我们刚刚安装的插件是./plugins/cookie

this.$cookie.set("vue-session", "token_header." + this.account, expireTime)

如果使用vue-cookies 则是this.$cookies.set

npm install vue-cookies -S

02

—

加上注册跳转

在登录前面加上注册按钮，修改样式。

修改之前可以看到注册和登录是分成了两行，我们想在一行的话就要修改宽度和行级还是块级的元素类型。

修改以后：

别忘了加上路由信息

,
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/RegisterView.vue')
  }

我们看页面标题发现都是我们的项目名，可以手动修改以下，在路由信息时候加上标题。

router.beforeEach((to, from, next) => {
//beforeEach是router的钩函数，在进路由前执
if (to.meta.title) {
//判断是否有标题
// console.log(to.meta.title)
document.title = to.meta.title
} else {
document.title = '测试开发真货'
}
next()
})

再次运行可以看到标题变了。

我找到的项目页面是被下面的看板娘吸引的。怎么怎么添加呢，很简单只要引入两个js脚本就可以了。在public下面的index.html文件里加入下面两行代码：

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">      
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

https://github.com/stevenjoezhang/live2d-widget #看板娘项目地址

可以看到我们的几个页面都出现了看板娘。

明天继续配置接口。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-05-28，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全

linux

eslint

本文分享自测试开发真货微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

网络安全

linux

eslint

登录后参与评论

0 条评论

热度

从零搭建一个django项目-5-登录页面

从零搭建一个django项目-5-登录页面

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐