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

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

一、主要功能

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

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

二、实现思路

1、页面设计

Register.vue 注册页面，包含输入用户名、输入密码、注册按钮等。
Login.vue登录页面，包含输入用户名、输入密码、登录按钮、保持登录选项、跳转注册页面按钮等。
Homepage.vue主页，具有退出登陆的功能。

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://www.cnblogs.com/hellman/p/10985377.html

以本次项目为例子，可在view文件夹中存放我们三个页面，（登陆，注册，主页）
在index.js中配置相关的路由。

index.js 中相关代码

import Vue from 'vue'
import VueRouter from 'vue-router'

import Homepage from '@/views/Homepage' //主页
import Login from "@/views/Login" //登陆
import Register from "@/views/Register"; //注册

Vue.use(VueRouter)

const routes = [{
   
        path: '/',
        name: 'login',
        component: Login
    },
    {
   
        path: '/Register',
        name: 'Register',
        component: Register
    }, {
   
        path: '/Homepage',
        name: 'Homepage',
        component: Homepage
    },
]

const router = new VueRouter({
   
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

2、页面布局——html部分（以登陆界面为例）

既然我们想让我们的的页面尽量美观一些，那么一开始的页面设计是必不可少的。初学的时候可以参考一下别的网站的页面布局和设计。我参考的下图的界面布局。

那么我们来分析一下这个页面的布局，首先是一个大的登陆框，位于整个页面中心。大的登陆框中分为左右两部分，左边为登陆的功能，包含账号输入框、密码输入框、以及登陆按钮等，再看右边，是一张背景图并带有网站信息或“欢迎”等字样。（分析别人好看的页面布局对我们设计网站页面的时候有帮助）
按照这个思路，我们也可以设计出我们的页面啦～下图为本次任务的设计出来的页面。


html 代码 （登陆页面）

<template>
  <div class="container">
    <div class="main">
        <!-- 整个注册盒子 -->
      <div class="loginbox">
          <!-- 左侧的注册盒子 -->
          <div class="loginbox-in">
          <div class="userbox"> 
           <span class="iconfont">&#xe817;</span> 
           <input  class="user" id="user"  v-model="name" placeholder="用户名">
           </div>
          <br>
          <div class="pwdbox">
            <span class="iconfont">&#xe775;</span>
           <input  class="pwd"  id="password" v-model="pwd" type="password"  placeholder="密码">