vue-antd-admin router使用
-
src/pages 中制作页面 i18n.js国际化 index.js
export default
向外暴露的成员,必须严格按照导出时候的名称,来使用{ }按需接收 -
src/router/async/router.map.js 路由组件注册 (login、root不变,折叠)import导入
-
src/route/config.js 路由配置 截取其中一段分析
{ path: '/', //根 name: '首页', component: TabsView, redirect: '/login', children: [//根下的孩子 { path: 'dashboard', name: 'Dashboard', meta: { icon: 'dashboard' }, component: BlankView,//空白页 显示在空白页 children: [ { path: 'workplace', name: '工作台', //meta的定义:简单来说就是路由元信息,也就是每个路由身上携带的信息。 //meta的作用:vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可 meta: page: { closable: false } }, component: () => import('@/pages/dashboard/workplace'), }, { path: 'analysis', name: '分析页', component: () => import('@/pages/dashboard/analysis'), } ] },
创建pages
- 为了区分vue-ant-admin模板页面,文件命名采用首字母大写。
菜品管理 优惠管理 评价管理 数据分析 账本管理 库存管理 订单管理 员工管理 餐桌管理
Dish Management Offer Management Evaluation Management Data Analysis Ledger Management Inventory Management Order Management Employee Management Table Management
- src/router/async/router.map.js 路由组件注册
const routerMap = {
home:{
name: '首页',
component: () => import('@/pages/Home/home')
},
dish:{
name:'菜品管理',
component: () => import('@/pages/Dish_mg/dish')
}
}
export default routerMap
- src/route/config.js 路由配置
const options = {
routes: [
{
path: '/login',
name: '登录页',
component: () => import('@/pages/login')
},
{
path: '/',
name: '首页',
component: TabsView,
redirect: '/login',
children: [
==============
{
name:'首页',
path:'home',
component: () => import('@/pages/Home/home')
}
===============
]
},
]
}
登录跳转到首页
src/pages/login/login.vue 修改Javascript标签中的afterLogin(res)函数
afterLogin(res) {
this.logging = false
const loginRes = res.data
if (loginRes.code >= 0) {
const {user, permissions, roles} = loginRes.data
this.setUser(user)
this.setPermissions(permissions)
this.setRoles(roles)
setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
// 获取路由配置
getRoutesConfig().then(result => {
const routesConfig = result.data.data
loadRoutes(routesConfig)
========
this.$router.push('/home')
========
this.$message.success(loginRes.message, 3)
})
} else {
this.error = loginRes.message
}
}
菜品管理
对话框表单获取父组件数据
子组件dishform
对话框表单样式
methods
中的dataInit
方法 获取父组件传来的数据
<script>
export default {
name: 'DishForm',
data() {
return {
form: {
dis_name: '',
dis_size: '',
dis_description: '',
dis_img: '',
dis_delete_status: '',
dis_sales: '',
dis_price:'',
dis_sort:''
}
}
},
methods: {
dataInit(data) {
if (data) {
this.form = data;
console.info(data);
}
}
}
}
</script>
父组件 dish
dialogFormVisible
对话框表单是否显示的变量
<dishform v-if="dialogFormVisible" ref="popWindow"/>
引入dishform表单 ref调用子组件的数据
onSubmit
方法
<el-dialog
title="菜品信息"
:visible.sync="dialogFormVisible"
width="30%">
<dishform v-if="dialogFormVisible" ref="popWindow"/>
<span slot="footer" class="dialog-footer">
<a-button style="margin-right: 8px" @click="dialogVisible = false">取 消</a-button>
<a-button type="primary" @click="onSubmit">确 定</a-button>
</span>
</el-dialog>
onSubmit(){
this.dialogFormVisible=false;
}
父组件将数据传入表单
dish js
//修改菜品信息
changeItem(item){
this.dialogFormVisible = true;
this.addOperate = false;//用同一表单 标志 是修改还是增加
console.log(item)
//传数据给子组件
this.$nextTick(() => {
this.$refs.popWindow.dataInit(item)
})
}
菜品卡片样式
dish template
card-list
样式
:dataSource="dataSource"
将dataSource中的数据以Array的方式传给list
slot-scope="item"
item存取了每一个list的数据
@click="changeItem(item)"
点击修改 调用传参函数
<a-card>
<a-divider style="height: 3px; ">
<h3>主 菜</h3>
</a-divider>
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
:dataSource="zc"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.disName }}</div>
<a-avatar shape="square" slot="avatar" :src="item.disImg" :size="100"/>
<div class="meta-content" slot="description">
<div>
{{item.disDescription}}
</div>
<div>
{{"价格:"+item.disPrice+"元/"+item.disSize}}
</div>
<div v-if="item.disSales===null">
{{"销量:"+0+"次"}}
</div>
<div v-else>
{{"销量:"+item.disSales+"次"}}
</div>
</div>
</a-card-meta>
<!-- changeItem(item) 修改菜品信息-->
<span slot="actions" @click="changeItem(item)">修改</span>
<span slot="actions" @click="dishesDelete(item)">删除</span>
</a-card>
</a-list-item>
</a-list>
</div>
<el-dialog
title="菜品信息"
:visible.sync="dialogFormVisible"
width="30%">
<dishform v-if="dialogFormVisible" ref="popWindow"/>
<span slot="footer" class="dialog-footer">
<a-button style="margin-right: 8px" @click="dialogFormVisible = false">取 消</a-button>
<a-button type="primary" @click="onSubmit">确 定</a-button>
</span>
</el-dialog>
</a-list>
</div>
</a-card>
上传图片
<el-upload
class="avatar-uploader"
action="http://tgmmmmmmmm.online:8443/upload"
:on-change="handleChange"
:show-file-list="false"
:before-upload="httpRequest"><!--覆盖默认上传-->
<img v-if="form.disImg" :src="form.disImg" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
onchangemd(e){
console.log(e.target.files)//这个就是选中文件信息
},
//将上传图片的原路径赋值给临时路径
handleChange(file) {
this.form.disImg = URL.createObjectURL(file.raw);
},
// 实现图片上传功能 将图片赋值给file 确定所有数据统一上传
httpRequest(item) {
this.form.file = item
console.log(item)
}
添加数据 页面数据增加
localadd(form,imgurl,disid){
var obj = {
"disId": disid,
"disName": form.disName,
"disSize": form.disSize,
"disDescription": form.disDescription,
"disImg": imgurl,
"disSales": form.disSales,
"disPrice": form.disPrice,
"disSort": form.disSort,
"deleted": 0
}
switch (getSortCode(form.disSort)) {
case "xj":
this.xj.push(obj)
break
case "zc":
this.zc.push(obj)
break
case "qt":
this.qt.push(obj)
break
case "xc":
this.xc.push(obj)
break
case "js":
this.js.push(obj)
break
}
},
完整代码
dish.vue
<template>
<div>
<a-card>
<a-divider style="height: 3px; ">
<h3>主 菜</h3>
</a-divider>
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
:dataSource="zc"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.disName }}</div>
<a-avatar shape="square" slot="avatar" :src="item.disImg" :size="100"/>
<div class="meta-content" slot="description">
<div>
{{item.disDescription}}
</div>
<div>
{{"价格:"+item.disPrice+"元/"+item.disSize}}
</div>
<div v-if="item.disSales===null">
{{"销量:"+0+"次"}}
</div>
<div v-else>
{{"销量:"+item.disSales+"次"}}
</div>
</div>
</a-card-meta>
<!-- changeItem(item) 修改菜品信息-->
<span slot="actions" @click="changeItem(item)">修改</span>
<span slot="actions" @click="dishesDelete(item)">删除</span>
</a-card>
</a-list-item>
</a-list>
</div>
<el-dialog
title="菜品信息"
:visible.sync="dialogFormVisible"
width="30%">
<dishform v-if="dialogFormVisible" ref="popWindow"/>
<span slot="footer" class="dialog-footer">
<a-button style="margin-right: 8px" @click="dialogFormVisible = false">取 消</a-button>
<a-button type="primary" @click="onSubmit">确 定</a-button>
</span>
</el-dialog>
<a-divider style="height: 3px;"><h3>小 吃 下 酒 菜</h3></a-divider>
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
:dataSource="xj"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.disName }}</div>
<a-avatar shape="square" slot="avatar" :src="item.disImg" :size="100"/>
<div class="meta-content" slot="description">
<div>
{{item.disDescription}}
</div>
<div>
{{"价格:"+item.disPrice+"元/"+item.disSize}}
</div>
<div v-if="item.disSales===null">
{{"销量:"+0+"次"}}
</div>
<div v-else>
{{"销量:"+item.disSales+"次"}}
</div>
</div>
</a-card-meta>
<!-- changeItem(item) 修改菜品信息-->
<a slot="actions" @click="changeItem(item)">修改</a>
<a slot="actions" @click="dishesDelete(item)">删除</a>
</a-card>
</a-list-item>
</a-list>
</div>
<a-divider style="height: 3px;"><h3>小 菜</h3></a-divider>
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
:dataSource="xc"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.disName }}</div>
<a-avatar shape="square" slot="avatar" :src="item.disImg" :size="100"/>
<div class="meta-content" slot="description">
<div>
{{item.disDescription}}
</div>
<div>
{{"价格:"+item.disPrice+"元/"+item.disSize}}
</div>
<div v-if="item.disSales===null">
{{"销量:"+0+"次"}}
</div>
<div v-else>
{{"销量:"+item.disSales+"次"}}
</div>
</div>
</a-card-meta>
<!-- changeItem(item) 修改菜品信息-->
<span slot="actions" @click="changeItem(item)">修改</span>
<span slot="actions" @click="dishesDelete(item)">删除</span>
</a-card>
</a-list-item>
</a-list>
</div>
<a-divider style="height: 3px;"><h3>酒 水 饮 料</h3></a-divider>
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
:dataSource="js"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.disName }}</div>
<a-avatar shape="square" slot="avatar" :src="item.disImg" :size="100"/>
<div class="meta-content" slot="description">
<div>
{{item.disDescription}}
</div>
<div>
{{"价格:"+item.disPrice+"元/"+item.disSize}}
</div>
<div v-if="item.disSales===null">
{{"销量:"+0+"次"}}
</div>
<div v-else>
{{"销量:"+item.disSales+"次"}}
</div>
</div>
</a-card-meta>
<!-- changeItem(item) 修改菜品信息-->
<span slot="actions" @click="changeItem(item)">修改</span>
<span slot="actions" @click="dishesDelete(item)">删除</span>
</a-card>
</a-list-item>
</a-list>
</div>
<a-divider style="height: 3px;"><h3>其 它</h3></a-divider>
<div class="card-list">
<a-list
:grid="{gutter: 24, lg: 4, md: 2, sm: 1, xs: 1}"
:dataSource="qt"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-card :hoverable="true">
<a-card-meta>
<div style="margin-bottom: 3px" slot="title">{{ item.disName }}</div>
<a-avatar shape="square" slot="avatar" :src="item.disImg" :size="100"/>
<div class="meta-content" slot="description">
<div>
{{item.disDescription}}
</div>
<div>
{{"价格:"+item.disPrice+"元/"+item.disSize}}
</div>
<div v-if="item.disSales===null">
{{"销量:"+0+"次"}}
</div>
<div v-else>
{{"销量:"+item.disSales+"次"}}
</div>
</div>
</a-card-meta>
<!-- changeItem(item) 修改菜品信息-->
<span slot="actions" @click="changeItem(item)">修改</span>
<span slot="actions" @click="dishesDelete(item)">删除</span>
</a-card>
</a-list-item>
</a-list>
</div>
</a-card>
<footer-tool-bar>
<a-button type="primary" @click="handleCreate">增加菜品</a-button>
</footer-tool-bar>
</div>
</template>
<script>
import FooterToolBar from "@/components/tool/FooterToolBar";
import dishform from "@/pages/Dish_mg/DishForm"
import { dishesSortList} from "@/services/dishesdata";
import axios from "_axios@0.27.2@axios";
import qs from 'qs';
import {getSortCode} from "@/utils/mngzsutil";
export default {
name: 'CardDish',
components: {FooterToolBar, dishform},
data() {
return {
xj:[],
zc:[],
qt:[],
xc:[],
js:[],
// dataSource,
dialogFormVisible: false,
addOperate: undefined//标志 是修改还是增加
}
},
methods: {
handleCreate() {
this.dialogFormVisible = true
this.addOperate = true
},
localdeletedish(disId){
var index = -1
// 本地删除,通过公用函数获取分类文字代码
index = this.xj.findIndex(i => i.disId == disId)
if(index != -1) {
this.xj.splice(index, 1);
}
index = this.zc.findIndex(i => i.disId == disId)
if(index != -1){
this.zc.splice(index, 1);
}
index = this.qt.findIndex(i => i.disId == disId)
if(index != -1){
this.qt.splice(index, 1);
}
index = this.xc.findIndex(i => i.disId == disId)
if(index != -1){
this.xc.splice(index, 1);
}
index = this.js.findIndex(i => i.disId == disId)
if(index != -1){
this.js.splice(index, 1);
}
},
dishesDelete(item){
// 本地删除调用
this.localdeletedish(item.disId)
const data = { 'id': item.disId.toString() }
const options = {
method: 'DElETE',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url: "http://tgmmmmmmmm.online:8443/dishes"
}
axios(options).then((res)=>{
console.log("删除菜品",res)
this.$message({message:"删除菜品 "+item.disName+" 成功",type:"warning"});
}).catch((err)=>{
console.log(err)
})
},
// dishesDelete1(item){
// 此方法也可行
// // 本地删除调用
// this.localdeletedish(item.disSort,item.disId)
// const params = new FormData()
// params.append("id",item.disId)
// const options = {
// method: 'DElETE',
// headers: { 'content-type': 'application/x-www-form-urlencoded' },
// data: params,
// url: "http://tgmmmmmmmm.online:8443/dishes"
// }
// axios(options).then((res)=>{
// console.log("删除菜品",res)
// this.$message({message:"删除菜品 "+item.disName+" 成功",type:"warning"});
// }).catch((err)=>{
// console.log(err)
// })
// },
//获取数据
getDishesSort(){
dishesSortList().then((res)=>{
// console.log(res.data.data.dishesList.xj)
for(let i=0;i<res.data.data.dishesList.xj.length;i++)
{
this.xj.push(res.data.data.dishesList.xj[i])
}
for(let i=0;i<res.data.data.dishesList.zc.length;i++)
{
this.zc.push(res.data.data.dishesList.zc[i])
}
for(let i=0;i<res.data.data.dishesList.qt.length;i++)
{
this.qt.push(res.data.data.dishesList.qt[i])
}
for(let i=0;i<res.data.data.dishesList.xc.length;i++)
{
this.xc.push(res.data.data.dishesList.xc[i])
}
for(let i=0;i<res.data.data.dishesList.js.length;i++)
{
this.js.push(res.data.data.dishesList.js[i])
}
})
},
// 本地添加,图片链接解决
localadd(form,imgurl,disid){
var obj = {
"disId": disid,
"disName": form.disName,
"disSize": form.disSize,
"disDescription": form.disDescription,
"disImg": imgurl,
"disSales": form.disSales,
"disPrice": form.disPrice,
"disSort": form.disSort,
"deleted": 0
}
switch (getSortCode(form.disSort)) {
case "xj":
this.xj.push(obj)
break
case "zc":
this.zc.push(obj)
break
case "qt":
this.qt.push(obj)
break
case "xc":
this.xc.push(obj)
break
case "js":
this.js.push(obj)
break
}
},
localmodify(form,imgurl){
this.localdeletedish(form.disId)
var obj = {
"disId": form.disId,
"disName": form.disName,
"disSize": form.disSize,
"disDescription": form.disDescription,
"disImg": imgurl,
"disSales": form.disSales,
"disPrice": form.disPrice,
"disSort": form.disSort,
"deleted": 0
}
switch (getSortCode(form.disSort)) {
case "xj":
this.xj.push(obj)
break
case "zc":
this.zc.push(obj)
break
case "qt":
this.qt.push(obj)
break
case "xc":
this.xc.push(obj)
break
case "js":
this.js.push(obj)
break
}
},
//添加提交菜品信息
onSubmit(){
// 需要提交的form表单
var form = this.$refs.popWindow.form
if (this.addOperate) {
// console.log("增加")
var f = new FormData()
f.append("disDescription",form.disDescription)
f.append("file",form.file)
f.append("disName",form.disName)
f.append("disPrice",form.disPrice)
f.append("disSort",form.disSort)
f.append("disSize",form.disSize)
f.append("disSales",0)
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: f,
url: "http://tgmmmmmmmm.online:8443/dishes"
}
axios(options).then((res)=>{
console.log("增加菜品",res)
this.$message({message:"增加菜品"+ form.disName + "成功!",type:"success"})
this.localadd(form,res.data.data.disImg,res.data.data.disId)
}).catch((err)=>{
console.log(err)
})
this.dialogFormVisible = false
} else {
var ff = new FormData()
ff.append("disDescription",form.disDescription)
ff.append("file",form.file)
ff.append("disName",form.disName)
ff.append("disPrice",form.disPrice)
ff.append("disSort",form.disSort)
ff.append("disSize",form.disSize)
ff.append("disSales",form.disSales)
ff.append("disId",form.disId)
ff.append("disImg",form.disImg)
const options = {
method: 'PUT',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: ff,
url: "http://tgmmmmmmmm.online:8443/dishes"
}
axios(options).then((res)=>{
this.$message({message:"修改菜品"+ form.disName + "成功!",type:"success"})
this.localmodify(form,res.data.data.disImg)
console.log("修改菜品",res)
}).catch((err)=>{
console.log(err)
})
this.dialogFormVisible = false
}
},
//修改菜品信息
changeItem(item){
this.dialogFormVisible = true;
this.addOperate = false;
// console.log(item)
this.$nextTick(() => {
this.$refs.popWindow.dataInit(item)
})
}
},
mounted() {
this.getDishesSort();
}
}
</script>
<style lang="less" scoped>
.card-avatar {
width: 48px;
height: 48px;
border-radius: 48px;
}
.new-btn {
border-radius: 2px;
width: 100%;
height: 187px;
}
.meta-content {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
height: 64px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
dishForm.vue
<template>
<div class="mycontainer">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="菜品名称">
<el-input v-model="form.disName" style="width: 150px;float: left"></el-input>
</el-form-item>
<el-form-item label="菜品分类">
<el-select v-model="form.disSort" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="菜品价格">
<el-input v-model="form.disPrice" style="width: 150px;float: left"></el-input>
</el-form-item>
<el-form-item label="菜品规格">
<el-input v-model="form.disSize" style="width: 150px;float: left"></el-input>
</el-form-item>
<el-form-item label="菜品描述">
<el-input v-model="form.disDescription" style="width: 200px;float: left"></el-input>
</el-form-item>
<el-form-item label="菜品图片">
<el-upload
class="avatar-uploader"
action="http://tgmmmmmmmm.online:8443/upload"
:on-change="handleChange"
:show-file-list="false"
:before-upload="httpRequest"><!--覆盖默认上传-->
<img v-if="form.disImg" :src="form.disImg" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'DishForm',
components: {},
data() {
return {
form: {
deleted: '',
disDescription: "",
disId: '',
disImg: "",
disName: "",
disPrice: '',
disSales: '',
disSize: "",
disSort: "",
file:undefined
},
// formdata:new FormData(),
imageUrl: '',
tempUrl: '',
options: [{
value: '选项1',
label: '主菜'
}, {
value: '选项2',
label: '小吃下酒菜'
}, {
value: '选项3',
label: '小菜'
}, {
value: '选项4',
label: '酒水饮料'
}, {
value: '选项5',
label: '其他'
}],
}
},
methods: {
dataInit(data) {
if (data) {
this.form = data;
console.info(data);
}
},
onchangemd(e){
console.log(e.target.files)//这个就是选中文件信息
},
//将上传图片的原路径赋值给临时路径
handleChange(file) {
this.form.disImg = URL.createObjectURL(file.raw);
},
// 实现图片上传功能
httpRequest(item) {
this.form.file = item
console.log(item)
}
}
}
</script>
<style scoped>
.mycontainer {
display: flex;
flex-direction: column;
justify-content: space-around
}
.avatar-uploader {
margin-top: 20px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 78px;
height: 78px;
}
.avatar-uploader:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 78px;
height: 78px;
line-height: 78px;
text-align: center;
}
.avatar {
width: 78px;
height: 78px;
display: flex;
}
</style>
antd axios配置
axios获取后端数据
https://www.iczer.gitee.io/vue-antd-admin-docs/develop/service.html#%E6%9C%8D%E5%8A%A1%E4%BA%A4%E4%BA%92%E6%B5%81%E7%A8%8B
安装axios
//使用npm
npm install axios
//使用淘宝源
cnpm install axios
引入
main.js
文件
//main.js
import axios from 'axios'
//把axios对象挂到Vue实例上面,使用axios的时候直接 this.$axios就可以了
Vue.prototype.$axios = axios
真不错!以上都不需要 antd已经封装好了
跨域问题
根目录下面的vue.config.js
ctrl点进去修改配置
请求数据 封装数据
services
目录下操作
api.js
增加接口
-
再services目录下创建对应的.js文件,对应修改红色框里面的东西
-
带请求参数的
-
index.js
-
测试
<template> <div> <el-button :plain="true" @click="open">打开消息提示</el-button> </div> </template> <script> import {dishesList} from "@/services/dishesdata"; export default { data(){ return{ } }, methods: { open() { // this.DishData this.$antdconfirm('这是一条消息提示'); console.log(dishesList()); }, } } </script>
-
深层套娃结果
-
处理数据
getDishesSort(){
// this.dishesData=dishesSortList();
// console.log(this.dishesData)
console.log(dishesSortList())
dishesSortList().then((res)=>{
console.log(res.data.data.dishesList.xj)
for(let i=0;i<res.data.data.dishesList.xj.length;i++)
{
this.xj.push(res.data.data.dishesList.xj[i])
}
},
请求数据类型 application/x-www-form-urlencoded
application/x-www-form-urlencoded
是浏览器默认的编码格式。
import qs from 'qs';
const data = { 'bar ': 123 };
const options ={
method:"POST',
headers: { 'content-type ': 'application/x-www-form-urlencoded'},
data: qs.stringify(data),
url,
}
axios(options);
错误
VUE项目中同时引入Antd 和ElementUI 组件样式异常
给antd的组件改名
Vue.use(ElementUI);
Vue.use(Antd)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$antdconfirm = Vue.prototype.$confirm
This dependency was not found:* _axios@0.27.2@axios
配置cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v #查看是否安装成功
删除node_modules
运行cnpm install