项目实训4——用户界面的编写

  这一周我们小组进行了JSON转换和数据库动态转换以及用户界面的编写等工作，我负责编写用户查看发布信息界面和申请发布界面。遇到的问题有element ui的card组件分页和表单数据与页面数据一起传到后端。
  发布信息以el-card的形式展现在页面上，结合el-row和el-col循环展示出每一个card，并使用<el-row :gutter="16">和<el-col :span="8" v-for v-bind:key>更改页面的布局。el-card的分页使用element ui的分页组件Pagination。分页的方式有两种，前端分页和后端分页。顾名思义，前端分页是把所有数据取出来，在前端界面上分页展示；后端分页是按照页数要求从后端取数据，每次只取一部分。我选择了前端分页方法，<el-col v-for: item in items.slice进行页面数据的分割。代码如下：

<el-row :gutter="16">
  <el-col :span="8" v-for="item in items.slice((currentPage - 1) * pageSize, currentPage * pageSize)" v-bind:key="item.id"   style="margin-bottom:25px;'">
    <el-card :body-style="{ padding: '0px' }" @dblclick.native="toOtherPage(item.url)"  title="双击跳转页面">

      <div class="appInfo">
        <el-descriptions title="发布信息" :column="1">
          <el-descriptions-item label="名字">{{item.pcn}}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-tag size="small">{{item.ptype}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="介绍">{{item.pdes}}</el-descriptions-item>
        <el-descriptions-item label="内容">{{item.pcon}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="appButton" style="cursor:text">
      <el-button type="primary" @click="choosePublish(item.id)" :id="item.id">申请</el-button>
    </div>

   </el-card>
  </el-col>
</el-row>
 <div class="block" style="margin-left: 50%">
   <el-pagination @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
   </el-pagination>
 </div>
</div>

export default {
  name: "ApplicationBrowse",
  data() {
    return {
      pageSizes:[3,6,9,12],
      pageSize:6,
      totalCount:1,
      currentPage:1,
      items: [
        {
        }
      ],
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.currentPage=1
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 改变默认的页数
      this.currentPage=val
    },
    initPage(){
      var thispage = this;
      axios.get(`api/findPublishList`).then(res=>{
            console.log(res.data)
            thispage.items=res.data;
            thispage.totalCount=res.data.length;
      })

    },
  }
}
</script>

  form表格的数据与其他数据一起提交可以新建一个let类型的对象params，然后将新对象传向后端。后端的方法接收一个HttpServletRequest类型的对象来获取前端传来的params的各种值。然后新建一个实体类对象，将传来的值set进对象中，调用service的方法实现数据库的插入。代码如下：

handleConfirm(){
      let params=new URLSearchParams()
      params.append('uid',this.nuid)
      params.append('auname',this.nname)
      params.append('areason',this.appForm.areason)
      params.append('pid',this.npid)
      axios.post(`api/insertApplication`,params).then(res=>{
        console.log('已发出')
        console.log(res.data)
        this.$notify({
          title: '申请成功',
          message: '处理结果',
          type: 'success'
        })
      })
      this.handleReturn();
    },

    @ResponseBody
    @RequestMapping(value = "/insertApplication",method = RequestMethod.POST)
    public int insertApplication(HttpServletRequest req){
        int uid = Integer.parseInt(req.getParameter("uid").trim());
        String auname = req.getParameter("auname").trim();
        Date atime=new Date();
        String areason = req.getParameter("areason").trim();
        int pid = Integer.parseInt(req.getParameter("pid").trim());
        int apg=2;
        System.out.println(uid+"----------------------"+auname+"----------------------"+atime+"----------------------"+areason+"----------------------"+pid);

        Application a=new Application();
        a.setUid(uid);
        a.setAuname(auname);
        a.setAtime(atime);
        a.setAreason(areason);
        a.setPid(pid);
        a.setApg(apg);

        int aid = applicationService.insertApplication(a);
        System.out.println("新插入一条申请！" );
        return aid;
    }

————————————————————————————————————
2022/06/05发现问题修改：
  当展示的发布信息中介绍和内容两部分字数过多时，el-card组件会变长，这会造成排列的card不一样长，排列出现错乱。原来是直接在el-descriptions-item组件中展示从后端获得的数据，现在可以改成数据存在el-input的文本域类型，限制其行数和宽度以达到数据内容长度不影响card的高度。
  但是我使用:row="2"属性不能得到行数为2的文本域 。文本域类型的input框还有个属性是autosize，可以设置最小行数和最大行数，将这两个值设为一个值就可以保持最小行数。文本域的可拉伸属性保持不变。对文本域增添readonly属性，使其不能修改。整体设置为：<el-input type="textarea" v-model="item.pcon" :autosize="{ minRows: 6, maxRows: 6}" readonly></el-input>