Vue、小程序、spring boot的各种踩坑记录

最新推荐文章于 2025-06-23 09:45:00 发布

AlexNett

最新推荐文章于 2025-06-23 09:45:00 发布

阅读量2.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：问题集锦文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Z_timer/article/details/112134099

问题集锦专栏收录该内容

9 篇文章

订阅专栏

仅记录写毕设遇到的问题

5.vue中让table文本溢出用省略号代替

6.让visio的连接线由直角变成直线

7.修改hosts文件

8.idea使目录结构呈现树形结构而不是com.example

9.用idea链接数据库出现 Server returns invalid timezone.

10.idea根据数据库自动映射生成实体类

11.@data标注了其他地方引用还是会爆红

12.idea新建项目都要重新配置maven

13.获取所有省市地址并放入vue组件

14.获取到element ui 中Cascader 级联选择器里label的值

15.element-ui的表单进行rules验证

16.c.b.m.core.metadata.TableInfoHelper : This primary key of "id" is primitive !不建议如此请使用包装类 in Class:

17.删除form中的key值，或者删除form的某一项

18.vue element-ui 第一次打开无法获取dialog里的元素、ref获取不到指定的DOM节点问题

19.清除vue中的对话框el-dialog的校验效果

20.el-dialog 设置初始值后再次选择初始值无法选中

21.前端传给后台数据接受不一致、removeByIds、SON parse error: Cannot deserialize instance of `java.lang.String

22.vue修改代码后浏览器不会刷新、或者浏览器不会刷新当代码修改后

23.vscode 格式化代码与 eslint 有冲突

fixable with the `--fix` option.

RangeError: Maximum call stack size exceeded

1.微信小程序的icon库

1.引入微信的WeUI 组件库

在全局的app.json中输入以下代码： ,"useExtendedLib": { "weui": true }

2.引入到页面中

在某个页面的json文件中加入

"usingComponents": {

"mp-icon": "weui-miniprogram/icon/icon"

}

3.在wxml中使用

<mp-icon icon="cellphone"></mp-icon>

</view>

4.附icon库

里面有相应的icon图标https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html

本问题参考网址：https://blog.youkuaiyun.com/caihuawei123/article/details/106564934/

官方网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib

2.wxml中加入空格

【　】复制里面的即可

参考网址：https://developers.weixin.qq.com/community/develop/doc/f5c2d278f3345ed6b3371b86c511fa87

3.配置maven

首先安装maven，记得保存安装路径（我的安装路径：F:\Apache\maven）

然后

然后在系统变量中加入MAVEN_HOME 并放入安装路径

然后在用户变量或系统变量的PATH中加入这个即可 %MAVEN_HOME%\bin;

附上可能会出错的原因：'mvn' 不是内部或外部命令，也不是可运行的程序或批处理文件。

4.配置java8

基本就同上面即可

区别就是要在系统变量里加入 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tool.jar

算了直接贴链接：https://www.runoob.com/java/java-environment-setup.html?tdsourcetag=s_pcqq_aiomsg

另外就是查版本是cmd 输入java -version 一开始输入--version 导致报错了

Unrecognized option: --version
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit

5.vue中让table文本溢出用省略号代替

<el-table-column label="餐厅形容">

<template slot-scope="scope"><span class="table-td-content">{{scope.row.dish_content}}</span></template>

</el-table-column>

css：

.table-td-content{
overflow:hidden;
      display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; 
	overflow: hidden;
	float: left;	
	width: 100%;
	word-break: break-all;
	text-overflow: ellipsis;
}
.table-td-content:hover
{
    overflow:visible;
    white-space:normal;
    word-wrap: break-word;
}

初学vue直接在template里加入类名了，必须要另弄一个span标签

参考博客：https://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html、 https://blog.youkuaiyun.com/yotoai/article/details/86616316

6.让visio的连接线由直角变成直线

只需在顶部栏的设计里的最右边的连接线改成直接即可

7.修改hosts文件

1.win+R 输入C:\Windows\System32\drivers\etc

2.我是说有需要管理员权限才能保存，查看网上资料发现他们都可以直接修改安全里的权限分配，而我不行

后发现可以这样做。

3.输入自己的用户名，检查名称即可

4.就可以顺利修改权限了

8.idea使目录结构呈现树形结构而不是com.example

初始就是像这样子会在文件夹中有.

我的是2019.3.3版本的idea，接下来附图。一开始默认应该是这样子，点开Flatten Packages

把hide empty middle packages、flatten packages的勾去掉即可，

参考链接https://jingyan.baidu.com/article/90808022019c14fd91c80f1f.html

9.用idea链接数据库出现 Server returns invalid timezone.

在此处加上?serverTimezone=UTC即可

参考：https://blog.youkuaiyun.com/ITMan2017/article/details/100601438 、 https://blog.youkuaiyun.com/liuqiker/article/details/102455077

10.idea根据数据库自动映射生成实体类

根据上一条已连接数据库，注意不能根据hotel来直接生成，必须从每一个表中生成按住ctrl单击选择所有表

11.@data标注了其他地方引用还是会爆红

要在配置里下载Lombok组件

参考：https://www.cnblogs.com/dzcweb/p/8931636.html

12.idea新建项目都要重新配置maven

参考链接：https://blog.youkuaiyun.com/weixin_43797872/article/details/100532094

13.获取所有省市地址并放入vue组件

参考网址：https://blog.youkuaiyun.com/username_xu/article/details/82261045，感谢大佬 json格式化网址https://www.bejson.com/explore/index_new/

14.获取到element ui 中Cascader 级联选择器里label的值

因为访问腾讯地图的地址的时候转换成json中的value是数字而我又偷了个懒没去改上面地址里的代码，然后又遇到跨域问题更加繁琐，所以直接获取label岂不妙哉

另外介意通过console.log看看数据调试一下

<el-cascader
            ref="myCascader"   //别忘了加
            placeholder="可输入地区名字搜索，例如：北京"
            @change="onProvincesChange">
</el-cascader>

参考网址：https://blog.youkuaiyun.com/ldoit/article/details/106611841

15.element-ui的表单进行rules验证

首先form里要加ref=""，其次form-item要加prop，如何js里加rules并且再提交事件里加上this.$refs.addUser.validate((valid) => {}验证

<el-form :model="form" :rules="rules" ref="addUser">   //注意ref
    <el-form-item label="用户名" prop="uname">    //注意prop
        <el-input v-model="form.uname" placeholder="username"></el-input>
    </el-form-item>
</el-form>

<script>
data: function () {
        return {    //form和rules里的uname要一致以及上面的uname
            form: {
                uname: '',
            },
            rules: {
                uname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            }
        };
    },
methods: {
        onSubmit() {
            // 数据验证
            this.$refs.ref的值.validate((valid) => {        //别忘了
                console.log(valid);
                if (valid) {
                    //正确要做的事
                } else {
                    //错误要做的事
                    return false;
                }
            });
        }
</script>

16.c.b.m.core.metadata.TableInfoHelper : This primary key of "id" is primitive !不建议如此请使用包装类 in Class:

报错原因：用idea自动导入实体类的时候，默认为long 实际应为Long，再次启动不出现警告。

参考链接：https://www.cnblogs.com/lyq-biu/p/10778109.html

17.删除form中的key值，或者删除form的某一项

参考链接https://www.cnblogs.com/liuyueji/p/12574550.html

18.vue element-ui 第一次打开无法获取dialog里的元素、ref获取不到指定的DOM节点问题

参考链接：https://blog.youkuaiyun.com/lijiabinbbg/article/details/93186814、、https://blog.youkuaiyun.com/zemprogram/article/details/95755778

19.清除vue中的对话框el-dialog的校验效果

this.$refs.form.clearValidate();

参考链接：https://www.jb51.net/article/195447.htm

20.el-dialog 设置初始值后再次选择初始值无法选中

~~这个对话框搞死我了~~

首先我是从tableData里点击编辑就会弹出对话框，并且在点击事件里给对话框赋初始值

像上图一样，然后我的级联选择器跟对话框里的form数据绑定在一起，比如这样子（就是这里导致了我的级联无法再次选择默认值）

form: {
   uname: '',
   phone: '',
   age: '',
   options: '',      //绑定级联值
},
// 删除上面的options
cascader: [] // 解决办法

然后在上面提到的编辑按钮中的click事件中用 this.form.options = city_list;给级联附初始值，

解决办法：我是用重新在form外面定义一个cascader（名字任意），然后再this.cascader = city_list 即可！！！

最后附上代码（仅供参考无法运行）

<el-button type="text" icon="el-icon-edit" @click="handleEdit1">编辑</el-button>
        <el-dialog title="编辑" :visible.sync="editVisible">
                <el-form-item label="城市级联">
                    <el-cascader
                        ref="myCascader"
                        :options="options"
                        v-model="cascader"  //要改
                        @change="
                            (val) => {
                                isChange(val);
                            }
                        "
                    ></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
---------------------分割线--------------

data() {
        return {
            // 级联选择数据
            options: cities,
            // 表单提交和编辑框数据
            form: {
                uname: '',
                phone: '',
                age: '',
                address: '',
                options: ''  //删除
            },
            cascader: []  //这里赋值

        };
    },
methods: {
    handleEdit1(index, row) {    //编辑的点击事件
            this.idx = index;
            this.form = row;
            this.cascader = city_list; //这里赋值

        },
}

啊啊啊啊终于解决了不知道多少小时浪费在上面！！！希望能帮到你