关于vue项目技术总结

最新推荐文章于 2023-06-25 15:56:10 发布

m0_59567515

最新推荐文章于 2023-06-25 15:56:10 发布

阅读量85

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_59567515/article/details/120536592

版权

接口测试

// json格式
            subin() {
                let form = this.$refs.form1;
                console.log(form)
                let formdata = new FormData(form)
                this.$axios.post("/api/user/deleteById", JSON.stringify({
                    id: 12,
                    username: "aasdsad"
                }), {
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(response => {

                    console.log(response.data)
                }).catch(err => {
                    console.log(err)
                })

            },

在上传文件格式时需要设置请求头

 // 文件形式
            subin() {
                let form = this.$refs.form1;
                console.log(form)
                let formdata = new FormData(form)
                       this.$axios.post("/api/user/deleteById", formdata, {
                    headers: {
                        'content-type': 'multipart/formdata'
                    }
                }).then(response => {

                    console.log(response.data)
                }).catch(err => {
                    console.log(err)
                })

            },

   // 参数形式
            submitForm() {
                if (this.formLabelAlign.username.length == 0) {
                    this.$message({
                        showClose: true,
                        message: '请输入用户名',
                        type: 'warning'
                    });
                } else if (this.formLabelAlign.pwd.length == 0) {
                    this.$message({
                        showClose: true,
                        message: '请输入密码',
                        type: 'warning'
                    });
                } else {
                    this.$axios.post("/api/login", this.formLabelAlign).then(response => {
                        console.log(response)
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }

跨域代理

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                //食物端口  会员数量端口
                target: "http://192.168.1.91:8080",
                // 折线图端口
                // target: "http://192.168.219.229:8080",
                //传订单端口  餐桌
                // target: "http://192.168.219.214:8080",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
                    //比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
                }
            }
        }
    }
}

图片的跨域获取

 <img :src="'http://192.168.219.232:8080'+[meetData[index].potPicture]"

api统一管理

先建立一个api文件夹，在其中建立api.js文件引入其他api文件进行统一管理

//api.js
import index  from './index.js'
import order  from './order'
export default{
    index,
    order
}

//index.js
export default {
    // 总收入
    // 每日数据折线图
    EveryDayPaid:"/api/dailyIncomePurchaseProfit/selectAll",
    VipNumber:"/api/vip/selectAll",
    FoodInFo:"/api/foodStuff/selectAllByState",
    AddNewOrder:'/api/orderForm/insertOrderForm',
    AddFood:"/api/orderFormParticulars/insert",
    SearchOrderDetail:"/api/orderFormParticulars/selectByOrderFormId",
    OrderingByOrderID:"/api/orderForm/updateStateById"
    // TotalPaidOut:'/api/product/productList',
    // TotalOrders:'/api/product/productList',
    // TotalMember:'/api/product/productList',
}

数据动态生成

<el-row :gutter="10" v-for="(item,index1) in orderFood">
                                        <el-col :span="10" v-if="orderFood[index1].stuffAmount!=0">
                                            <div class="grid-content ">
                                                <span>{{orderFood[index1].FoodName}}</span>
                                            </div>
                                        </el-col>
                                        <el-col :span="9" v-if="orderFood[index1].stuffAmount!=0">
                                            <div class="grid-content ">
                                                <el-input-number size="mini" v-model="orderFood[index1].stuffAmount "
                                                                 :min="0"
                                                                 @change="handleChange"></el-input-number>
                                            </div>
                                        </el-col>
                                        <el-col :span="5" v-if="orderFood[index1].stuffAmount!=0">
                                            <div class="grid-content ">
                                                <span>{{orderFood[index1].FoodPrice * orderFood[index1].stuffAmount | formatMoney}}</span>
                                            </div>
                                        </el-col>
                                    </el-row>

VUEX的使用

工作流程

1. vue 组件 -> Dispatch 派发 -> action
2. action -> commit 提交 -> mutation
3. mutaion -> change 修改 -> state
4. state -> render 渲染 -> vue组件

传参

//字符串传参
<router-link to="'/productDetail?id=6">
<router-link :to="'/productDetail?id='+item.id">

this.$route.query.名称
{{$route.query.名称}}

//对象传参
get :
 <router-link :to="{path:'/productDetail',query:{id:item.id}}"> {{item.productName}} </router-link>

post:
必须使用路由的name来进行跳转
<router-link :to="{name:'ProductDetail',params:{id:item.id}}"> {{item.productName}} </router-link>
this.$route.params.名称
{{$route.params.名称}}

//rest 方式传参
步骤一: 路由设置，path参数    /path/:参数名
步骤二：:to="'/productDetail/'+item.id"    //拼接中路由传递的格式
步骤三: 接收   
this.$route.params.名称
{{$route.params.名称}}

过滤器

{{ new Date() | quanDate }}

 filters:{
            DisplayDateString:function (value){
                var d = new Date(value);
                // return d.toLocaleDateString().replace(/\//g,"-");
                var month = (d.getMonth()+1).toString().length==2?d.getMonth()+1:
                    "0"+(d.getMonth()+1);
                var day = (d.getDate()+1).toString().length==2?d.getDate()+1:
                    "0"+(d.getDate()+1);
                return d.getFullYear()+"-"+month+"-"+day;
            }
        }