查询信息记录页面

接上篇,前端兄弟有点忙,终于要在前端代码插一杠子了,哈哈
需求仅仅用于展示,不做发送信息功能。思路:循环card组件,展示信息记录list。
第一步,官网拷贝基础应用代码官网
第二步,链接后端接口,获取信息list

  getConvs() {
        this.dialogVisible = true;
        const param = {
          from: 12345,
          to: 54321,
        };
        getConv(param)
          .then((res) => {
            Log.debug(res);
            if (res.data.code === 200) {
              if (res.data.obj.conv === undefined) {
                this.convs = [{ context: '无对话信息' }];
              } else {
                this.convs = res.data.obj.conv;
                res.data.obj.conv.forEach((item) => {
                  this.convItem = item;
                  this.convItem.time = strftime('%Y-%m-%d %H:%M', new Date(item.timestamp));
                  const s = JSON.parse(item.data);
                  Log.debug(s);
                  // eslint-disable-next-line
                  this.convItem.fromName = s._lcattrs.username;
                  // eslint-disable-next-line
                  if (s._lctype === -1) {
                    // eslint-disable-next-line
                    this.convItem.context = s._lctext;
                    // eslint-disable-next-line
                  } else if (s._lctype === -2) {
                    // eslint-disable-next-line
                    this.convItem.image = JSON.parse(item.data)._lcfile.url;
                  }
                });
              }
            }
          });
      },

第三步,将数据装入变量,页面显示

    <!-- 聊天记录 -->
    <el-dialog title="聊天记录"   :visible.sync="dialogVisible">
     <div name= "app">
      <el-row v-for="(convItem,index) in convs" :key="index">
        <div>
          <div class = 'div-left' ><h5> {{ convItem.fromName }} </h5></div>   
          <div >{{ convItem.time }}</div>
        </div>
        <el-card shadow="always">
          <div> 
            <span>{{ convItem.context }}</span>
            <img :src="convItem.image" >
          </div>
        </el-card>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>

补充:定义变量

data() {
      return {
         convs: [],
        dialogVisible: false,
        convItem: {},
        fromId: '',
        toId: '',
   }
}

效果:
在这里插入图片描述
补充: // eslint-disable-next-line 含义
取数据时,发现下划线不能通过编译,三方返回的带有下划线,发现是eslint规则不通过,简单粗暴的方法,修改配置文件,去掉应用eslint,果真好使(开始让我抓狂的空格报错都没有了)。
在这里插入图片描述
但是作为java开发,修改前端代码实属不敢动配置文件啊,咱也不敢说呀,咱也不敢问啊,默默的查改动小的方法: 参考博客
在这里插入图片描述
博文介绍了js中配置规则:
// eslint-disable-next-line 这一行的作用可以使下一行不进行校验,也就可以使用下划线了。
现在再来看,其实可以用
/*eslint-disable */

/*eslint-enable */省的每行都添加了。

最后补充: eslint配置参数介绍

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页