Vue实现登录功能 vue.js

原文链接
【Vue实现登录功能】代码地址：https://github.com/Snowstorm0...
1 创建项目打开cmd，输入ui命令：

vue ui

若没有反应，可能是版本太低，需要卸载后重装：

npm uninstall vue-cli -g#卸载 npm install @vue/cli -g#安装

执行ui命令成功后，会出现提示：

Starting GUI...
Ready on http://localhost:8000

并会自动打开页面：

文章图片

创建名为SpringAndVue-vue的项目，预设选择“手动”；功能开启 Babel、Router、Vuex、Linter/Formatter；配置选择“ESLint with error prevention only”；版本建议使用 “vue2.0”。创建新项目。
通过cd进入目录，启动项目：

npm run serve

2 安装插件 2.1 element-ui
打开cmd，输入ui命令：

vue ui

在插件项搜索，并点击安装。
vue2.0 选择安装 “vue-cli-plugin-element”；vue3.0 选择安装 “vue-cli-plugin-element-plus”。

文章图片

2.2 axios
Terminal安装axios，每个新项目都需要安装：

# vue-cli2.0命令 npm install axios # vue-cli3.0命令 npm add axios

2.3 mockjs
Terminal安装mockjs

npm install mockjs

3 添加功能 3.1 login
创建 login.vue页面：

.loginbBody { width: 100%; height: 100%; background-color: #B3C0D1; } .loginDiv { position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -250px; width: 450px; height: 330px; background: #fff; border-radius: 5%; } .login-title { margin: 20px 0; text-align: center; } .login-content { width: 400px; height: 250px; position: absolute; top: 25px; left: 25px; }

3.2 配置路由
在router.js中配置一级路由：

{ path: '/login', name: '登录', component: () => import(/* webpackChunkName: "user" */ '../views/login.vue') }

3.3 mockjs 模拟后台
在没有后端代码的情况下，可以使用 mockjs 模拟后台数据。
我们使用 mockjs 模拟后台登录验证，并返回token。
我们设置登录的用户名和密码都是admin。
在 src 下新建 mock 文件夹，在 mock 文件夹中新建 mock.js ，内容如下：

//引入 npm 安装的 mockjs const Mock = require('mockjs') // 获取 mock.Random 对象 const Random = Mock.Random; // 登录，此地址与login登录地址对应 Mock.mock('/login','post', (param)=>{ let state=0; let body = JSON.parse(param.body); console.log(body) let data; //模拟用户名和密码都是 admin if(body.name=='admin'&&body.password=='admin'){ state=1; data = https://www.it610.com/article/Mock.mock({"token": "@guid()",//模拟token "name": "@cname",//随机生成中文名字 }); } return{ "state":state, "vData":data } }); //退出 Mock.mock('/logout','post', ()=>{ return {state:1} });

3.4 storejs
在 src/store/index.js 中添加 Vuex.Store 的属性：

export default new Vuex.Store({ state: { token: '', username: '代码的路' }, getters: { }, mutations: { SET_TOKEN(state, token){ state.token = token ; localStorage.setItem("token",token); }, resetState(state){ state.token = ''; localStorage.clear(); } }, actions: { }, modules: { } })

4 功能实现在浏览器输入地址：http://localhost:8080/#/login
可以出现登录界面：