Vue 实现登录功能
代码地址:https://github.com/Snowstorm0/vue-login-mock
创建项目
打开 cmd,输入 ui 命令:
若没有反应,可能是版本太低,需要卸载后重装:
执行 ui 命令成功后,会出现提示:
🚀 Starting GUI...🌠 Ready on http://localhost:8000
并会自动打开页面:
创建名为SpringAndVue-vue
的项目,预设选择“手动”;功能开启 Babel、Router、Vuex、Linter/Formatter;配置选择“ESLint with error prevention only”;版本建议使用 “vue2.0”。创建新项目。
通过cd
进入目录,启动项目:
安装插件
element-ui
打开 cmd,输入 ui 命令:
在插件项搜索,并点击安装。
vue2.0 选择安装 “vue-cli-plugin-element”;vue3.0 选择安装 “vue-cli-plugin-element-plus”。
axios
Terminal 安装 axios,每个新项目都需要安装:
mockjs
Terminal 安装 mockjs
添加功能
login
创建 login.vue 页面:
配置路由
在 router.js 中配置一级路由:
mockjs 模拟后台
在没有后端代码的情况下,可以使用 mockjs 模拟后台数据。
我们使用 mockjs 模拟后台登录验证,并返回 token。
我们设置登录的用户名和密码都是admin
。
在 src 下新建 mock 文件夹,在 mock 文件夹中新建 mock.js ,内容如下:
storejs
在 src/store/index.js 中添加 Vuex.Store 的属性:
功能实现
在浏览器输入地址:http://localhost:8080/#/login
可以出现登录界面:
输入用户名和密码 admin,即可进入主页:
点击头像出现退出按钮,可以回到登录界面:
学习更多编程知识,请关注我的公众号:
版权声明: 本文为 InfoQ 作者【代码的路】的原创文章。
原文链接:【http://xie.infoq.cn/article/8f9611cbfec3e62a482e090ab】。文章转载请联系作者。
评论