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

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

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

用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',