1,通过接口获取数据

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

//vue.config.js
const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,// 配置本地服务器;localhost:8080devServer: { // 开启代理// 代理配置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页面,AdminMessage({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>

通过接口获取数据登录相关推荐

怎么获取服务器接口文档,服务器接口获取数据
服务器接口获取数据内容精选换一换伸缩组是具有相同应用场景的实例的集合,是启停伸缩策略和进行伸缩活动的基本单位.伸缩组内定义了最大实例数.期望实例数.最小实例数.虚拟私有云.子网.负载均衡等信息. ...
分享通达信软件L2接口获取数据的执行过程
在股票交易市场领域当中,通达信软件L2接口获取股票数据,用户根据得到的股票数据信息,做出合理的交易决策,让股票交易活动顺利进行. 通达信软件L2接口提供数据支撑,有了这些股票数据,经过了分析才能真实反 ...
java从端口获取数据库_Java之通过接口获取数据并用JDBC存储到数据库中
最近做数据同步功能,从接口获取数据然后存到数据库中以便后续对数据进行相关操作,下面就贴一下相关代码. 1 import com.alibaba.fastjson.JSON; 2 import com. ...
java接口对接——别人调用我们接口获取数据
java接口对接--别人调用我们接口获取数据,我们需要在我们系统中开发几个接口,给对方接口规范文档,包括访问我们的接口地址,以及入参名称和格式,还有我们的返回的状态的情况, 接口代码: package ...
vue获取接口数据_c#中HttpWebRequest调用接口获取数据
c#中HttpWebRequest调用接口获取数据PART 01-封装接口将post请求进行封装,以便调用使用: /// /// 请求后台地址/// 请求参数/// public string P ...
如何利用python调用API接口获取数据进行测试
一.Python 可以使用 requests 库来调用 API 接口获取数据.以下是基本的步骤: 1.安装 requests 库 pip install requests 2.导入 requests ...
从企业钉钉的接口获取数据
公司需要,搞了一下钉钉的接口. 首先说明我是帮使用钉钉软件的客户通过钉钉的接口获取数据,所以说我是有权限的.如果你是ISV,去看官方文档吧. 我暂时还不知道ISV开发人员是什么需求,但是至少对于钉钉来 ...
同花顺股票交易通过接口获取数据
同花顺股票交易通过接口获取数据
matlab 从 wind 量化接口获取数据
matlab 从 wind 量化接口获取数据闲话做量化,数据是非常重要的.wind 虽然说在数据方面也强不到哪里去,不过毕竟是行业的龙头老大.我实习所在的某机构公司就用有用 wind.所以,我终于 ...

通过接口获取数据登录

1,通过接口获取数据

通过接口获取数据登录相关推荐

最新文章

热门文章