用VUE实现一个具有登陆、注册等功能的网站【详细步骤】_WH小可爱_vue登陆注册功能的实现

网络 02-07 2070

用VUE实现一个具有登陆、注册等功能的网站【详细步骤】用VUE实现一个具有登陆、注册等功能的网站【详细步骤】一、主要功能二、实现思路1、页面设计2、功能设计3、重点和难点三、代码实现1、项目结构2、页面布局——html部分（以登陆界面为例）3、页面美化——css部分（以登陆界面为例）4、功能设计四、效果展示1、登陆页面2、注册页面3、主页五、总结

用VUE实现一个具有登陆、注册等功能的网站【详细步骤】一、主要功能

本次任务主要是使用VUE实现一个具有登陆、注册等功能的精美网站【详细步骤】主要功能为：

1.要求三个页面分别是登陆、注册、主页（尽量美观）。 2.记录存储已注册的用户信息列表。 3. 实现各个页面之间的跳转。

二、实现思路 1、页面设计

2、功能设计

因为涉及到多个页面之间的相互跳转，所以一定要先在VUE项目中的index.js里面设置好对应的路由。另外我们需要用一个json数组来存储已注册的用户信息列表（虚拟数据）。例如用户在完成注册后，需要更新用户列表，并把更新后的列表以传参数的方式传给登陆页面，并跳转到登陆页面；而登陆时要根据用户列表的判断输入的用户是否存在，输入的密码是否和用户名相匹配等。

3、重点和难点

（1）盒子模型布局、css美化。（2）页面之间的跳转以及参数传递。（3）登陆注册的业务逻辑。

三、代码实现 1、项目结构

因为我们这次涉及到多个页面，那么弄清楚项目结构，并配置好相应的路由是十分重要的。如果还不会怎么用VUE创建项目，可参考以下步骤。

（1）首先需要安装Node与配置npm 请去node官网下进行下载：http://nodejs.cn/download/ 在安装完成后，可使用node -v 查看Node的安装结果，如果出现版本号则说明node安装成功。同理使用npm -v查看npm的安装结果，如果出现版本号则说明npm安装成功。（2）下载vue脚手架：@vue/cli

npm install @vue/cli -g

（3）安装webpack $ sudo npm install webpack -g （4）安装vue-cli $ sudo cnpm install --global vue-cli （5）创建名字为test的 vue项目 $ vue init webpack test （6）运行： $ cd test $ npm run dev 可参考以下博客（更加详细的介绍了VUE搭配的环境以及初始化的项目结构）： https://blog.csdn.net/iiiliuyang/article/details/104185384 https://·blogs.com/gxsweb/p/5395243.html （2）如何使用iconfont 我们本次任务使用到了一些小图标，可以使用png以图片的形式加载，也可以使用iconfont（字体图标）的方式，加载在我们的页面中。想比于普通的图片，使用iconfont可以自由的变化大小并且也不会模糊，而且占用内存小，也可以任意改变颜色。首先，我们需要在https://·/阿里矢量图表库中找到合适的图标点击下载代码：我们可以看到下载的压缩包中主要有这几项：本次实验主要是unicode引用，所以我们真正会用到的文件只有这些我们第一步要拷贝项目下生成的@font-face（在iconfont.css中）到自己页面的css中

@font-face { font-family: "iconfont"; src: url('./font/iconfont.eot'); src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('./font/iconfont.svg#iconfont') format('svg'); }

注意：这里面的url 一定要根据自己的文件目录进行更改！！！

第二步：定义使用 iconfont 的样式（颜色，字体大小等都可以随心更改哦～）

.iconfont { font-family: "iconfont" !important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height:22px; color:#4E655D; margin-right:10px; margin-top:3px; }

第三步：挑选相应图标并获取字体编码，应用于页面

（3）如何修改input输入框自动填充的默认样式因为我们有input账号、密码输入框，chrome会根据历史登陆过的账号与密码自动填input输入框，但是有个问题，虽然内容自动填充了，但是！！甚至样式也填充进去了，就是会覆盖掉我原来写的input输入框的样式。比如：这个是我自己写的input输入框的样式但这是chrome自动填充后的样式就很和整个页面的样式很违和，解决方法如下（找遍了全网，东拼西凑，举一反三还真的成了！）

input:-webkit-autofill { /* 修改默认背景框的颜色 */ box-shadow: 0 0 0px 1000px #89AB9E inset !important; /* 修改默认字体的颜色 */ -webkit-text-fill-color: #445b53; } input:-webkit-autofill::first-line { /* 修改默认字体的大小 */ font-size: 15px; /* 修改默认字体的样式 */ font-weight:bold; }

（4）为了使页面更美观，有动态效果，我们可以多使用hover等，还可以给卡片增加阴影等等。

** css代码（登陆页面）**

.loginbox{ display:flex; position:absolute; width:800px; height:400px; top:40%; left:50%; transform:translate(-50%,-50%); box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D; } .loginbox-in{ background-color:#89AB9E; width:240px; } .userbox{ margin-top:120px ; height:30px; width:230px; display: flex; margin-left:25px; } .pwdbox{ height:30px; width:225px; display: flex; margin-left:25px; } .background{ width:570px; background-image:url('./img/Christmas_Trees.png'); background-size:cover; font-family:sans-serif; } .title{ margin-top:320px; font-weight:bold; font-size:20px; color:#4E655D; } .title:hover{ font-size:21px; transition: all 0.4s ease-in-out; cursor: pointer; } .uesr-text{ position:left; } input{ outline-style: none ; border: 0; border-bottom:1px solid #E9E9E9; background-color:transparent; height:20px; font-family:sans-serif; font-size:15px; color:#445b53; font-weight:bold; } /* input::-webkit-input-placeholder{ color:#E9E9E9; } */ input:focus{ border-bottom:2px solid #445b53; background-color:transparent; transition: all 0.2s ease-in; font-family:sans-serif; font-size:15px; color:#445b53; font-weight:bold; } input:hover{ border-bottom:2px solid #445b53; background-color:transparent; transition: all 0.2s ease-in; font-family:sans-serif; font-size:15px; color:#445b53; font-weight:bold; } input:-webkit-autofill { /* 修改默认背景框的颜色 */ box-shadow: 0 0 0px 1000px #89AB9E inset !important; /* 修改默认字体的颜色 */ -webkit-text-fill-color: #445b53; } input:-webkit-autofill::first-line { /* 修改默认字体的大小 */ font-size: 15px; /* 修改默认字体的样式 */ font-weight:bold; } .log-box{ font-size:12px; display: flex; justify-content: space-between ; width:190px; margin-left:30px; color:#4E655D; margin-top:-5px; align-items: center; } .log-box-text{ color:#4E655D; font-size:12px; text-decoration:underline; } .login_btn{ background-color: #5f8276; /* Green */ border: none; color: #FAFAFA; padding: 5px 22px; text-align: center; text-decoration: none; font-size: 13px; border-radius: 20px; outline:none; } .login_btn:hover{ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); cursor: pointer; background-color: #0b5137; transition: all 0.2s ease-in; } .warn{ margin-top:60px; /* margin-right:120px; */ margin-left:-120px; margin-bottom: 5px; font-weight:bold; font-size:17px; } .register_btn{ background-color: transparent; /* Green */ border: none; text-decoration: none; font-size: 12px; /* border-radius: 20px; */ color:#4E655D; font-size:12px; text-decoration:underline; display: flex; margin-left:25px; outline:none; } .register_btn:hover{ font-weight:bold; cursor: pointer; } @font-face { font-family: "iconfont"; src: url('./font/iconfont.eot'); src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('./font/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 20px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height:22px; color:#4E655D; margin-right:10px; margin-top:3px; } .icon-key:before { content: "\e775"; } .icon-account:before { content: "\e817"; } 4、功能设计

（1）登陆，注册，主页等页面之间跳转。使用v-model监听获取到输入框中值。（上一期没有使用，这期更正）如果用户名和密码都正确，那么可以跳转。跳转的方式如下如果有参数：（本次使用的是query的方式）

this.$router.push({ path: '/', query: { list: this.user_list, } })

如果没有参数：

this.$router.push"Homepage");//homepage为要跳转的页面

（2）注册页面的业务逻辑

使用一个json数组存储记录注册过的用户信息列表。（模拟数据库）在使用某网站时，按照一般的操作逻辑为：当我们在登陆某个网站的时候，如果没有账号，就要去申请注册。同样，我们这个项目也是，我们没有账号就要去注册。在当我们进入注册页面，并注册成功时，就会把我们的用户名和密码保存起来。当然了，我们注册账号也要注意，不能让账号名字一样，而且也不能让我们两次输入的密码不一致。这就需要我们在js中加以判断。具体如何实现，可参考代码以及相关的注释 Register.vue 判断是否可以注册成功

当我们输入的值满足注册条件，项目会记录了我们的账号与密码，并更新用户列表user_list，此时注册就成功了，我们也需要把更新后的user_list 为参数跳转给登陆页面，此时我们直接输入刚注册的账号和密码，即可登陆成功。当然，我们之所以要求用户注册的用户名不能和已经有了的用户名相一致是因为在这里我们把用户名作为我们用户列表的唯一标识符了，方便我们判断用户和密码是否匹配。 Register.vue 更新用户列表，并向Login.vue 传递参数

else { var item ={}; //获取到用户名 item.username=this.name; //获取到密码 item.password=this.pwd; //存储到用户列表 this.user_list.push(item); alert('注册成功'); // this.user_list.forEach((item) => { // console.log( item.username); // }) this.$router.push({ path: '/', query: { list: this.user_list,} }) }

var routerParams = this.$route.query.list; this.user_list = routerParams;

（3）登陆页面的业务逻辑我们在登陆的时候也要使用循环来判断是否有这个用户，并且要判断这个用户的密码和输入的密码是否相匹配。如果都匹配成功，则跳转到主页。（注意细节：要区别一下是直接输入账号密码进行登陆的，还是先注册再登陆的，否则会报错）

login(){ var flag=0; //如果是有参数传递 if(!this.$route.query.list){ this.user_list.forEach((item) => { if(item.username==this.name){ if(item.password==this.pwd){ flag=1;//用户存在，并且密码正确 } } } ) if(flag==1){ //可以跳转到主页 this.$router.push("Homepage"); } else{ alert("用户名或密码错误，请重新输入"); } } else{ // 取到路由带过来的参数 var routerParams = this.$route.query.list; this.user_list = routerParams; this.user_list.forEach((item) => { if(item.username==this.name){ if(item.password==this.pwd){ flag=1;//用户存在，并且密码正确 } } } ) if(flag==1){ //可以跳转到主页 // this.$router.push("Homepage"); this.$router.push({ path: '"Homepage', } ) } else{ alert("用户名或密码错误，请重新输入");} } }, 四、效果展示 1、登陆页面

2、注册页面

3、主页

五、总结

虽然只是很小的一个demo，但涉及到的知识点也蛮多的，不过也在收获到了不少新的知识的同时，也对以前学过的知识加深了理解，并更加熟悉如何应用。虽然也有很多尚未完善的功能以及有待改进的点，但希望在一次一次的任务中，不断总结，不断提高，迅速成长！