山东大学软件学院创新实训——项目记录（十五）

最新推荐文章于 2024-09-13 14:34:15 发布

抹茶糯米白团子

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量275

点赞数 5

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_64431888/article/details/139912588

版权

文章目录

零、前言

本篇主要记录个人信息展示页面的制作和利用sessionStorage来实现前后端交互中数据的持久化保存。

一、个人信息的展示

这里放弃了以往的，改用自定义样式的div层叠来实现表格效果，使得样式能更加灵活自由的调整。


<div class="form-horizontal push-up-0 push-down-20">
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >账号：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="ID_NUMBER"
                    >202100150068</label
                  >
                </div>
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >姓名：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="USER_NAME"
                    >张小明</label
                  >
                </div>
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >性别：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="USER_SEX"
                    >男</label
                  >
                </div>
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >年龄：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="USER_SEX"
                    >25</label
                  >
                </div>
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >单位名称：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="UNIT_NAME"
                    >山东第一医院</label
                  >
                </div>
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >所属科室：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="IS_ACTIVE"
                    >心脏科</label
                  >
                </div>
                <div class="form-group">
                  <label class="col-md-4 col-xs-6 control-label text-right"
                    >身份类型：</label
                  >
                  <label
                    class="col-md-6 col-xs-6 control-label text-left"
                    id="ID_TYPE"
                    >医生</label
                  >
                </div>

结果展示：
在这里插入图片描述

二、利用sessionStorage来获取参数作为后端接口的输入

在登录逻辑中，会在后端返回登录者信息后用用户id作为key，存储key-vlue键值对。
在个人页面初始化时，直接取用即可。


let doc_id = sessionStorageService.getItem("doc_id");
      let params={};
      if (doc_id != null) {
         params = {
          doc_id: doc_id,
        };
      } else {
         params = {
          doc_id: 30001,
        };
      }

三、使用axios进行请求和响应结果处理

 axios
        .get("http://localhost:18080/user/get_doctor", { params: params })
        .then((res) => {
          this.doctor = res.data;
        });