自己初做项目时候常见问题(以egg.js为后端,前端使用vue.js)

目录

一、model方面

        1.associate关联方面

        2.egg.js自动生成model

二、手动上传

三、eslint保存去格式化

四、各类小点

1.vue3书写时候遇到的图片加载不出来情况(图片存于assets)

2.vue2中遇到的问题

1.vue2书写动态style使用对象时候样式只有一个样式时后面不需要;号否则无效果

2.vue2中修改数组的值请使用this.$set()否则修改无效

3.vuex中遇到的问题

1.一个接口的回调中修改了vuex中的值时可以将此接口方法写入actions中


一、model方面

        1.associate关联方面

model建立的时候没有将associate整合到一块,例如(以下两个关联需要放在一块,不然下面覆盖上面)

关联自己时,记得要加上sourceKey:id以及as别名例如:

并且在service层写逻辑时记得include自己的时候加上as别名,别名和associate中设置的一致。例:

        2.egg.js自动生成model

自动生成model(egg.js,与数据库连接来生成)_丫霸902的博客-CSDN博客(转向另外一篇文章)

二、手动上传

elementui手动上传(覆盖上传)_丫霸902的博客-CSDN博客

三、eslint保存去格式化

vue插件下载eslint以及eslint配置保存时自动去格式化_丫霸902的博客-CSDN博客

四、各类小点

1.vue3书写时候遇到的图片加载不出来情况(图片存于assets)

script部分代码

//此处将所有需要的图片地址写入一个集合,使用ref引用对象。作为一个数组方便后续的v-for操作
// 快捷入口图片集合
const fastList = ref([
    { image: "my/info_management.png", text: "信息管理", url: "/" },
    { image: "my/change_password.png", text: "密码修改", url: "/" },
    { image: "my/share.png", text: "分享", url: "/" },
    { image: "my/setting.png", text: "设置", url: "/" },
]);
//此方法作用类似于require,第一个参数为路劲拼接,后面固定
// 获取本地文件
function getImageUrl(name) {
    return new URL(`../../assets/icons/${name}`, import.meta.url).href;
}

vue3部分代码

//此处遍历图片数组,并将图片路径动态赋值为刚刚script部分书写的函数
<div class="info-row" v-for="(item, index) in fastList" :key="index">
                <div class="fast-div-img"><img :src="getImageUrl(item.image)" /></div>
                <div class="fast-div-text">{{ item.text }}</div>
            </div>

2.vue2中遇到的问题

1.vue2书写动态style使用对象时候样式只有一个样式时后面不需要;号否则无效果

错误:

:style="{gridTemplateRows:`repeat(${leftRow},auto)`};"

正确:

:style="{gridTemplateRows:`repeat(${leftRow},auto)`}"

2.vue2中修改数组的值请使用this.$set()否则修改无效

错误:

this.array[index]=false

正确:

//接受三个参数,第一个为要修改的数组,第二个为修改值的索引,第三个为要修改成的值
this.$set(this.array,index,false)

3.vuex中遇到的问题

1.一个接口的回调中修改了vuex中的值时可以将此接口方法写入actions中

vuex代码:

actions: {
        async getUserInfo(context) {
            const infoResult = await info()
            context.commit('setUserInfo', infoResult.data)
        }
    },

4.uniapp做微信小程序时遇到的问题

1.uniapp内置组件不能使用$ref,但自定义组件可以,但是循环创建的组件中也不能使用所以我们使用接近原生的操作dom方法createSelectorQuery()(需要记得添加id名)

代码:

 uni.createSelectorQuery().in(this).select("#id")._component.$children

5.uniapp页面跳转传参若是对象则需要转化格式

1.若不转化为对象格式,数据获取出来将会是[object,object],所以使用JSON.stringify()转化然后另一个页面获取时候转化为js格式使用JSON.parse()函数


版权声明:本文为qq_55642296原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。