springboot+thymeleaf+vue+element-ui的bug整理

sdbbz

已于 2022-12-06 11:09:01 修改

阅读量1.6k

点赞数 1

文章标签： mybatis spring boot java intellij-idea

于 2022-11-19 00:07:44 首次发布

本文链接：https://blog.csdn.net/wenming_wenmang/article/details/127931251

版权

本文章记录自己学习所出现的bug，新人一枚。

一、资源文件引用

用到thymeleaf所以要用th：href，----

<li>
     <a th:href="@{/Main/main}">主页</a>
</li>

                            <div class="demo-basic--circle">
                                <div class="block"><a th:href="@{/User/UserMessage(userid=${session.USER.userid})}" style="text-decoration:none;float: right;margin-top: 10px;"><el-avatar :size="50" :src="imageUrl" style="max-width: 80px;margin-right: 10px"></el-avatar></a></div>
                            </div>

                        <a href="#" class="logo" style="text-align:center">
                            <span class="logo-lg"><img th:src="@{/img/logo.png}"></span>
                        </a>

当然：href也是可以用的不过要将其中内容处理成字符串

                <div>
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " :href="'/User/UserMessage#?userid='+UserformData.userid"><i class="fa fa-bars"></i> </a>
                </div>

th:include的使用-----

th:fragment：布局标签，定义一个代码片段，方便其它地方引用 <div th:fragment="alert">
th:include：布局标签，替换内容到引入的文件

<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace ：布局标签，替换整个标签到引入的文件 <div th:replace="fragments/header :: title"></div>
th:insert：布局标签，保留自己的主标签，保留替换内容的主标签 <div th:insert="header :: title"></div>
例如引入公共css：

引入页面：

<div th:include="/Controller/common/css::css"></div>

被引入页面：

二、对于这种前后端不分离的又同时使用vue和额element的错误整理，

对于element格式操作：

因为element导入的css包我的是

<link rel="stylesheet" th:href="@{https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.10/theme-chalk/index.css}">

这种在线类型。

所以，要想改变其格式可以

.el-upload input{
            display: none !important;;
        }

------------------------------------------

<el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                用户名
            </template>
            {{UserformData.username}}
        </el-descriptions-item>

el-descriptions-item这个标签，对于很多老版的element包是不适用的，他会似的页面不显示，如果能下载最新离线包也好，我采用的是这种在线版，省事。

<link rel="stylesheet" th:href="@{https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.10/theme-chalk/index.css}">

-----------------------------------

还是文本引入，当要引入session中的数据时，如果是在body中可以：

${session.USER.userid}

在vue对象中：

 this.userid=[[${session.USER.userid}]];

-------------------------------------

再者，前后端传数据，还得是axios，

1.单个数据。

这是前端，先通过axios（使用前先引入他的js）的get方法，向Controller的

/User/Message解析器传入封装的userid（在data中），再通过then获得返回的json数据，以res封装，所以res.data就是这一串json数据。

比如返回一个{‘userid’：‘123456’，‘password’：‘123456’}

再看后端：

@ResponseBody
    @RequestMapping("/Message")
    public Resultt Message(@RequestParam("userid") String userid){
        try{
            UserMessage userMessage = userMessageService.selectUserMessage(userid);
            userMessage.setPassword(userMessageService.selectUserPassword(userid));
            System.out.println(userMessage);
            return new Resultt(true, MessageConstant.GET_USERMESSAGE_SUCCESS,userMessage);
        }catch (Exception e){
            e.printStackTrace();
            return new Resultt(false, MessageConstant.GET_USERMESSAGE_FAIL,null);
        }
    }

然后就是增删改查。

----------------------------------------

如果传入多个值一般自己封装，

一样的道理，改改接收方式就行。

-----------------------------------------

三、图片的问题

图片放大：

 <el-table-column label="套餐图片" align="center" prop="img">
                                <template slot-scope="scope">
                                    <el-image
                                        @click="srclist.push(imagesUrl+scope.row.img)"
                                        :fit="fit"
                                        :src="imagesUrl+scope.row.img"
                                        :preview-src-list="srclist">

                                    </el-image>
                                </template>
                            </el-table-column>

slot-scope="scope"，scope.row用来获取本行信息

el-image自带图片放大功能

srclist在data中定义

 srclist:["http://localhost:8080/images/rotPhoto/d65fc960-4a0e-4fba-9db9-cc4cc684b888%E5%83%8F.jpg"],

先随便放一个链接，

然后肯定会查出一个列表的数据发送到前段，其中img是查出来的图片名，imagesUrl是写死的图片链接，这就用到了scope.row(获取本行数据)

-------------------------

四、mybitas

带有判断条件的mybitas注解形式模糊查询。

 @Select("<script>" +
            "select" +
            " * " +
            "from " +
            "t_checkgroup" +
            "<if test='queryString != null and queryString.length > 0'> " +
            "where code like concat('%',#{queryString},'%')" +
            " or name like concat('%',#{queryString},'%')"+
            " or helpCode like concat('%',#{queryString},'%')"+
            " </if>" +
            "</script>")
   public Page<CheckGroup> selectByCondition2(String queryString);

关联查询（注解形式）。

@Select("select * from t_checkgroup where id in (select checkgroup_id from t_setmeal_checkgroup where setmeal_id=#{id})")
@Results(id="checkDao",value={
        @Result(id=true,column = "id",property = "id"),
        @Result(column = "name",property = "name"),
        @Result(column = "code",property = "code"),
        @Result(column = "helpCode",property = "helpCode"),
        @Result(column = "sex",property = "sex"),
        @Result(column = "remark",property = "remark"),
        @Result(column = "attention",property = "attention"),
        @Result(property = "checkItems",column = "id",
                many = @Many(select = "com.example.demo.dao.CheckDao.findCheckItemById",fetchType = FetchType.DEFAULT))


})
    List<CheckGroup> findCheckGroupById(int id);

日期操作差着一天。

# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/ssm_db?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8

将时区serverTimezone改为Asia/Shanghai就好了。

characterEncoding=utf8解决中文乱码。

链接带着；jsessions。在

配置一下就行

server.servlet.session.tracking-modes=cookie

--------------------------------------------

sdbbz

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫