17-vue零基础到实战-注册和登录页面「渡一教育」
admin
2023-08-14 07:15:09
0

这次给大家带来vue2.0实现注册登录步骤详解 , vue2.0实现注册登录的注意事项有哪些 , 下面就是实战案例 , 一起来看一下 。
前言
【17-vue零基础到实战-注册和登录页面「渡一教育」】前段时间和公司一个由技术转产品的同事探讨他的职业道路 , 对我说了一句深以为然的话:
“不要把自己禁锢在某一个领域 , 技术到产品的转变 , 首先就是思维上的转变 。你一直做前端 , 数据的交互你只知道怎么进 , 却不知道里面是怎么出的 , 这就是局限性 。”
醍醐灌顶般 , 刚好学习vue的时候看到有个注册登录的项目 , 索性我也跟着动手做一个vue项目 , 引入koa和mongodb , 实现客户端(client)提交-服务端(server)接收返回-入数据库全过程 。
本项目基于vue-cli搭建 , 利用token方式进行用户登录验证 , 并实现注册入库、读取用户、删除用户等功能 。文章默认读者有一定的node和vue基础 , 基础部分不赘述 。
系统环境:MacOS 10.13.3
关于npm安装速度慢或不成功
使用淘宝镜像安装
$ npm install -g cnpm --registry=https://registry.npm.taobao.org然后所有的 npm install 改为 cnpm install
项目流程图
为了让项目思路和所选技术更加清晰明了 , 画了一个图方便理解 。

17-vue零基础到实战-注册和登录页面「渡一教育」

文章插图
项目启动
1.初始化项目
$ npm install
2.启动项目
$ npm run dev
3.启动MongoDB
$ mongod --dbpath XXX
xxx是项目里 data 文件夹(也可以另行新建 , 数据库用于存放数据)的路径 , 也可直接拖入终端 。
4.启动服务端
$ node server.js
前端UI
vue的首选UI库我是选择了饿了么的Element-UI了 , 其他诸如 iview 、 vue-strap 好像没有ele全面 。
安装Element-UI
$ npm i element-ui -S
引入Element-UI
//在项目里的mian.js里增加下列代码import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);利用UI里面的选项卡切换做注册和登录界面的切换 , 以login组件作为整个登录系统的主界面 , register组件作为独立组件切入 。Element-UI的组成方式 , 表单验证等API请查阅官网 。
//login组件