【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录

CrazyPanda4周前Vue62

准备

Antd Pro Vue已经安装完成,使用的vue2。

1. 默认语言设置

Antd Pro Vue安装好之后,默认使用的是英文,我们需要把它设置为中文简体。

无标题.png

找到/src/core/bootstrap.js文件,把最后一行 en-US 修改为 zh-CN,然后一定要清除浏览器缓存,修改才能生效

无标题.png

修改后

无标题.png

修改后的页面

无标题.png


2. 请求服务端接口

Antd Pro Vue封装好的有请求方法,在/src/api/文件夹,我们把自己的接口写到这里面就可以任意调用。

Antd Pro Vue安装好之后,默认使用的是mock数据,我们要使用自己的接口,要把mock去掉,

找到/src/main.js,找到import './mock'并注释掉即可

无标题.png

开发版请求域名配置

直接在根目录找到 .env.development文件,把VUE_APP_API_BASE_URL修改为我们的开发版请求接口域名即可

无标题.png

同样的,发布生产版本把 .env文件中VUE_APP_API_BASE_URL修改为我们的生产版请求接口域名即可

无标题.png

之后我们即可正常请求服务端接口

3. 用户登录

用户登录相关的有三个接口,登录,获取用户信息,退出登录

在上一步,已经把用户登录、获取用户信息、退出登录接口替换好了,但是要想正常登录,返回的数据格式必须要正确,

在文件/src/store/modules/user.js中,已经封装好了这三个接口的使用,

新上手开始修改这套框架,真的是为什么登录不成功都不明白,最终全局搜索user相关的内容,终于给找到了下面的三个方法

无标题.png

注意登录的这个方法,首先要注意的是,response是接口的返回值,这里有response.result response.token,也就是说,返回值的数据结构里面需要有result和token,

为了方便修改,在不确定还有多少的地方使用了result的情况下,果断修改接口的返回值。

另一个就是这个token,我这边没有使用token,首先想到的是把这块去掉,但是结果直接不往下运行了,一时半会还找不到原因,最后只能在接口返回值中先加上token,

但是服务端又不需要token,为了避免出错,在系统封装好的/src/utils/request.js中,我将token给去掉

无标题.png

接口请求不使用token,那么只能使用session,为了保证同源请求,需要做如下2步

第一步:配置代理(兜兜转转又回到了这里)

 .env.development中域名去掉,只留下域名后的部分

无标题.png

然后修改根目录下的vue.config.js文件,如下配置代理

无标题.png

第二步跨域设置

还是修改request.js,如下图,添加上withCredentials:true,可以使得请求时带上cookie信息

无标题.png

同时服务端需要配置允许跨域请求。

相关文章

【AntDesignPro】AntDesignPro使用原生js,箩筐地图的使用

【AntDesignPro】AntDesignPro使用原生js,箩筐地图的使用

项目需要把高德地图替换成箩筐地图,WEB前端使用的ant design pro,高德地图有相关的react demo,而箩筐地图只有原生js,结合上一篇文章【AntDesignPro】使用高德地图设置...

【Vue】Antd Pro Vue的使用(十) —— a-form表单赋值

在Ant Design Pro Vue中,为表单赋值通常涉及到两个方面:一是使用v-model进行双向绑定,二是直接通过this.form.setFieldsValue()方法设置表单字段的值。以下是...

【AntDesignPro】使用高德地图设置考勤区域

【AntDesignPro】使用高德地图设置考勤区域

参考高德开放平台https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react功能要求:使用AntDesignPro开发系统管理端,考勤...

Ant Design Pro学习记录—默认主题配色修改

Ant Design Pro学习记录—默认主题配色修改

 版本: Ant Design Pro V5先参考下官网定制主题 - Ant Design再参考这篇文章antd pro 修改全局样式_tankpanv的博客-CSDN博客_ant...

Ant Design Pro学习记录—ProTable的使用(二)

Ant Design Pro学习记录—ProTable的使用(二)

目录一、列表检索初始值设置二、字段缩略显示一、列表检索初始值设置使用initialValue属性,配置列表检索的初始值const columns: ProColumns<AP...

【Vue】Antd Pro Vue的使用(三)—— table列表的使用

【Vue】Antd Pro Vue的使用(三)—— table列表的使用

用了几天ant design pro vue,发现vue2真的不是很好用,各种写法好麻烦。还有研究组件时,一定要看低版本的组件,高版本都是vue3的,并不适用。vue2版本组件位置:https://1...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。