login

#0 GitHub

https://github.com/Coxhuang/iView-login

#1 环境

"vue": "^2.5.2",
"axios": "^0.19.0",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1",
"view-design": "^4.0.0" // iView-UI 组件

iView – UI组件
axios – 发送http请求
localStorage – 存储TOKEN

#2 实现功能

登录
获取TOKEN
保存TOKEN
发送http请求携带TOKEN

#3 iView

具体如何配置iView这里直接跳过

新增以下文件

src/components/login/login.less
src/components/login/login.vue
src/components/login-form/login.js
src/components/login-form/login-form.vue
src/utils/axios.js
src/api/index.js
src/api/api.js

src/components/login/login.less

样式

.login{width: 100%;height: 100%;background-image: url('../../assets/images/login-bg.jpg');background-size: cover;background-position: center;position: relative;&-con{position: absolute;right: 160px;top: 50%;transform: translateY(-60%);width: 300px;&-header{font-size: 16px;font-weight: 300;text-align: center;padding: 30px 0;}.form-con{padding: 10px 0 0;}.login-tip{font-size: 10px;text-align: center;color: #c3c3c3;}}
}

src/components/login/login.vue

login父组件

<style lang="less">@import './login.less';
</style><template><div class="login"><div class="login-con"><Card icon="log-in" title="欢迎登录" :bordered="false"><div class="form-con"><login-form @on-success-valid="handleSubmit"></login-form><p class="login-tip">输入任意用户名和密码即可</p></div></Card></div></div>
</template><script>import LoginForm from '@/components/login-form' // 驼峰命名法export default {data(){return{}},components: {LoginForm},methods:{handleSubmit({username, password}){this.$api.api_all.post_user_login_api(username,password).then((response)=>{this.$Message.success(response.data.msg);localStorage.setItem('TOKEN', JSON.stringify(response.data.results.TOKEN)); // 设置TOKENthis.$router.push("/") // 跳转到首页}).catch((error)=>{this.$Message.error(error.response.data.msg);})}}}
</script>

src/components/login-form/login.js

导出子组件

import LoginForm from './login-form.vue'
export default LoginForm

src/components/login-form/login-form.vue

login子组件

<template><Form ref="loginForm" :model="form" :rules="ruleslogin" @keydown.enter.native="handleSubmit"><FormItem prop="username"><Input v-model="form.username" placeholder="请输入用户名"><span slot="prepend"><Icon :size="16" type="ios-person"></Icon></span></Input></FormItem><FormItem prop="password"><Input type="password" v-model="form.password" placeholder="请输入密码"><span slot="prepend"><Icon :size="14" type="md-lock"></Icon></span></Input></FormItem><FormItem><Button @click="handleSubmit" type="primary" long>登录</Button></FormItem></Form>
</template><script>
export default {name: 'LoginForm',data () {return {form: {username: 'admin',password: 'cox123456'},ruleslogin:{ // 校验表单规则username: [ // FormItem标签中的 prop 属性预期值{ required: true, message: '用户名不能为空', trigger: 'blur' }],password: [ // FormItem标签中的 prop 属性预期值{ required: true, message: '密码不能为空', trigger: 'blur' },{ type: 'string', min: 6, message: '6位数密码', trigger: 'blur' }]}}},methods: {handleSubmit () {this.$refs.loginForm.validate((valid) => {// this.$refs.loginForm.validate : 获取表单校验结果; 校验正确-> valid为True; 校验失败-> valid为False;if (valid) {this.$emit('on-success-valid', {username: this.form.username, // 将this.form.username和this.form.password传给父组件的on-success-valid参数password: this.form.password // 并使用 username 和 password 接受})}})}}
}
</script>

src/utils/axios.js

axios拦截

import axios from 'axios' // 导入node_modules里的axios
import qs from 'qs'axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 后端接口 ip:portaxios.interceptors.request.use((request) => {//在发送请求之前做某件事var token = JSON.parse(localStorage.getItem('TOKEN'));if (token) {token = "TOKEN " + token;request.headers.common['Authorization'] = token;}if(request.method  === 'post'){request.data = qs.stringify(request.data);}return request;
},(error) =>{console.log('错误的传参');return Promise.reject(error);
});export default axios // 导出axios

src/api/index.js

导出api.js

import api_all from './api'export default {api_all
}

src/api/api.js

后端api接口 (我这里用的是Django框架,具体接口代码不在这里过多解释,也可以使用mock假数据作为后端接口)

import axios from '@/utils/axios'const api_all = {// 获取所有博文列表post_user_login_api(username,password) {return axios({url: '/api/user/login/',method: 'POST',data: {username: username,password: password,}})},get_article_list() {return axios({url: '/api/article/list-article/',method: 'GET',})},create_test(dog) {return axios({url: '/api/test/create/',method: 'POST',data: {dog: dog},})},
};export default api_all

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import axios from "./api/";Vue.prototype.$api = axios;
Vue.use(ViewUI);
Vue.config.productionTip = false;/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
});

Vue 登录login例子相关推荐

Springboot Vue Login(从零开始实现Springboot+Vue登录)
实现前端后端分离,在 Github 上有一个很好的开源项目:mall,正所谓百看不如一练,自己动手实现了一个 Springboot+Vue 的登录操作,在此记录一下踩过的坑. 文章最后补充两端的 Gi ...
Vue登录第2.1版
前面已经完成了Vue登录第1版,仅仅是使用JS进行了前端登录验证.下面将在第1版的基础上,使用SpringBoot完成后端程序,通过状态码的传输实现登录认证.这里称其为Vue登录第2.1版. Vue登 ...
Vue登录注册，并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
Vue登录注册，并保持登录状态 1
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
【Vue作业]---Vue登录注册界面
1.引言你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...
weexpack 的 Login.vue 及 vue 的 Login.vue
1.登录页 weexpack Login.vue  <template><div class="wrapper"> & ...
Vue登录时校验验证码
Vue登录时校验验证码环境: 前端:Vue 后端:SpringBoot 前一章已写过如何实现验证码:https://blog.csdn.net/weixin_45732391/article/det ...
如何构建一个vue登录系统之登录页面
1. 在assets中新建一个css文件夹和imgs文件夹 2. 在src/views文件夹下新建一个Login.vue页面 3. 在src/main.js中引入全局公共样式文件style_publi ...
登录文档服务器,服务器登录login
服务器登录login 内容精选换一换本章节介绍如何使用弹性云服务器管理控制台上提供的远程登录(VNC方式)和如何使用密钥或密码方式(SSH方式)登录MRS集群中的节点,远程登录主要用于紧急运维场景 ...

Vue 登录login例子

文章目录