通过接口获取数据登录

最新推荐文章于 2024-02-27 13:53:02 发布

嘟噜嘟噜123

最新推荐文章于 2024-02-27 13:53:02 发布

阅读量486

点赞数 1

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_62371223/article/details/126757945

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1,通过接口获取数据

我们通过接口获取数据需要配置本地开启代理

//vue.config.js
const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false,
	// 配置本地服务器;localhost:8080
	devServer: { // 开启代理
		// 代理配置
		proxy: {
			"/api": { // 对dida100进行代理
				target: "http://dida100.com:8888",
				changeOrigin: true
			},
		}
	}
})

2.对axios进行集中管理二次封装

//request.js文件
// 对axios进行集中管理 .(对axios二次封装
import axios from 'axios'

// 设置默认:请求域名,超时时间
// 创建一个axios的实例
const request = axios.create({
	baseURL:'/', //默认请求域名
	// baseURL:'http://localhost:8080', //默认请求域名
	timeout:10000,//请求超时
})
// 添加请求头token
// 每一次请求都要添加请求头(对每一次请求进行拦截)
// 对请求进行拦截,config请求配置
// interceptors拦截的意思,request请求,response响应,config配置
request.interceptors.request.use(function(config){
	// 添加token
	// 打开加载提示
	config.headers.Authorization='Bearer '+localStorage.getItem("token");
	// 返回配置
	return config;
})

// 导出axios实例 名叫request
export default request;

// 为什么要写这个页面?
// 如果不要这个页面,也可以,就是每次请求地址都要
// 加上 http://dida100.com:8888
// 每次请求配置都要加上
// {headers:{Authorization:'Bearer '+localStorage.getItem("token")}}

3.创建api方法

// api文件夹内集中管理数据请求
// user.js管理关于用户的请求
// @ 代表src目录
// 导入请求工具
// 导入的按小时的实例
import  request  from '@/utils/request.js';

// 定义登录ajax请求方法
function Login(data){
	// 返回的是一个promise 实例
	// return axios.post('/api/login',data)
	return request.post('/api/login',data)
}

//定义ajax注册方法
function Register(data){
	return request.post("/api/register",data)
}

// 导出方法
export {Login,Register};

4.本项目使用vuex在store中导入api以及方法调用
在这里插入图片描述

// 导入登录api
import {
	Login
} from '@/api/user.js'
import $router from '@/router/index.js'
import {
	Message
} from 'element-ui';
export default {
	state: {
		user: {

		},
		token: '',

	},
	mutations: {
		SET_USER(state, data) {
			state.user = data;
			localStorage.setItem("user", JSON.stringify(data))
		},
		SET_TOKEN(state, data) {
			state.token = data;
			localStorage.setItem("token", data);
		}
	},
	actions: {
		logout(context) {
			context.commit("SET_USER", {})
			// 存储用户信息
			context.commit("SET_TOKEN", '')
			$router.push("/#/login")
		},
		login(context, data) {
			Login(data)
				.then(res => {
					// alert(res.data.msg);
					if (res.data.code === 200) {
						// 跳转到redirect页面,Admin
						Message({
							showClose: true,
							message: res.data.msg,
							type: 'success'
						});
						context.commit("SET_USER", res.data.user)
						context.commit("SET_TOKEN", res.data.token);
						context.dispatch("getRoutes")
						$router.push("/admin/homes")
					} else {
						Message({
							showClose: true,
							message: res.data.msg,
							type: 'warning'
						});
					}
				})
		}
	},
}

5.在loginview.vue中使用

<template>
	<div class="loginView">
		<el-carousel class="carousel" style="width: 100%; " arrow="never" :loop="true" height="100vh">
			<el-carousel-item>
				<img :src="require('../assets/1.jpg')" alt="" width="100%">
			</el-carousel-item>
			<el-carousel-item>
				<img :src="require('../assets/2.jpg')" alt="" width="100%">
			</el-carousel-item>
			<el-carousel-item>
				<img :src="require('../assets/3.jpg')" alt="" width="100%">
			</el-carousel-item>
			<el-carousel-item>
				<img :src="require('../assets/4.jpg')" alt="" width="100%">
			</el-carousel-item>
		</el-carousel>
		<div class="loginBlock">
			<h3>登录</h3>
			<el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="0">
				<el-form-item label="" prop="name">
					<el-input prefix-icon="el-icon-user" placeholder="请输入用户" type="text" v-model="user.name"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="" prop="password">
					<el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="user.password"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="" prop="code">
					<el-input v-model="user.code" style="width: 160px;" placeholder="验证码"></el-input>
					<img :src="'http://dida100.com/include/vdimgck.php'" alt="" />
					<span>换一换</span>
				</el-form-item>
				<el-form-item>
					<el-button @click="$store.dispatch('login',user)" type="primary" style="width: 100%;" round>提交</el-button>
				</el-form-item>
			</el-form>

		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				user: {
					name: "",
					password: "",
					code: ""
				},
				rules: {
					name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 18,
							message: '长度在 3 到 18 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 18,
							message: '长度在 6 到 18 个密码',
							trigger: 'blur'
						}
					],
					// code: [{
					// 		required: true,
					// 		message: '请输入验证码',
					// 		trigger: 'blur'
					// 	},
					// 	{
					// 		// min:4,	
					// 		// max:4,
					// 		len:4,
					// 		type:'string',
					// 		// pattern: /^[a-z]+$/,
					// 		message: '长度4位的验证码',
					// 		trigger: 'blur'
					// 	},

					// ],
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.loginView {
		position: relative;
	}

	.loginBlock {
		padding: 20px;
		width: 400px;
		height: 320px;
		position: absolute;
		top: 50%;
		right: 250px;
		transform: translate(0, -50%);
		box-shadow: 0 0 5px #ccc;
		border-radius: 12px;
		background-color: #fff;
		z-index: 500;

		h3 {
			line-height: 48px;
		}
	}
	.carousel img{
		height: 100%;
		object-fit: cover;
	}
</style>