2021-11-20 任务二：移动端余下的功能

最新推荐文章于 2024-11-03 11:01:20 发布

?abc!

最新推荐文章于 2024-11-03 11:01:20 发布

阅读量683

点赞数 1

分类专栏： # 论文日志文章标签： java 开发语言后端

本文链接：https://blog.csdn.net/yyuggjggg/article/details/121442221

版权

论文日志专栏收录该内容

21 篇文章 4 订阅

订阅专栏

1.用户信息的简单展示

前台页面

member.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>健康档案</title>
    <link rel="stylesheet" href="../css/page-health-index.css" />
    <link rel="stylesheet" href="../css/page-health-login.css" />
    <link rel="stylesheet" href="../plugins/elementui/index.css" />
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script>
        var phoneNumber = getUrlParam("phoneNumber");//根据请求URL中的参数名称获取对应的值
    </script>
    <style>
        /* CSS Document */
        .tabtop13 {
            margin-top: 13px;
        }
        .tabtop13 td{
            background-color:#ffffff;
            height:25px;
            line-height:150%;
        }
        .font-center{ text-align:center}
        .btbg{background:#e9faff !important;}
        .btbg1{background:#f2fbfe !important;}
        .btbg2{background:#f3f3f3 !important;}
        .biaoti{
            font-family: 微软雅黑;
            font-size: 26px;
            font-weight: bold;
            border-bottom:1px dashed #CCCCCC;
            color: #255e95;
        }
        .titfont {

            font-family: 微软雅黑;
            font-size: 16px;
            font-weight: bold;
            color: #255e95;
            background-color:#e9faff;
        }
        .tabtxt2 {
            font-family: 微软雅黑;
            font-size: 14px;
            font-weight: bold;
            text-align: right;
            padding-right: 10px;
            color:#327cd1;
        }
        .tabtxt3 {
            font-family: 微软雅黑;
            font-size: 14px;
            padding-left: 15px;
            color: #000;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 20px;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">客户体检信息健康管理系统</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="list-column2">
            <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
                <tr>
                    <td width="20%" rowspan="9" class="btbg1 font-center">基本信息</td>
                    <td width="20%" class="btbg2">档案号</td>
                    <td width="60%" >{{memberList.fileNumber}}</td>
                </tr>
                <tr>
                    <td class="btbg2">姓名</td>
                    <td >{{memberList.name}}</td>
                </tr>
                <tr>
                    <td class="btbg2">身份证</td>
                    <td >{{memberList.idCard}}</td>
                </tr>
                <tr>
                    <td class="btbg2">手机号</td>
                    <td >{{memberList.phoneNumber}}</td>
                </tr>
                <tr>
                    <td class="btbg2">邮箱</td>
                    <td >{{memberList.email}}</td>
                </tr>
                <tr>
                    <td class="btbg2">健康管理师</td>
                    <td >{{memberList.username}}</td>
                </tr>
            </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td align="center" class="biaoti" height="60">健康管理师建议</td>
                </tr>
            </table>

            <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">

                <tr>
                    <td width="20px" rowspan="3" class="btbg1 font-center">建议</td>
                    <td width="80%">
                        {{memberList.remark}}
                    </td>

                </tr>
            </table>
        </div>
    </div>
</div>
<!-- 页面 css js -->
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<!--<script src="../js/page-health-order.js"></script>-->
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            phoneNumber:this.phoneNumber,
            // fileNames:null,
            memberList:{}//模型数据，用于展示
        },
        created (){
            // alert(this.phoneNumber)
            //发送ajax请求，获取所有的套餐数据，赋值给setmealList模型数据，用于页面展示
            axios.get("/member/getMemberByPhoneNumber.do?phoneNumber="+phoneNumber).then((res) => {
                if(res.data.flag){
                    //查询成功，给模型数据赋值
                    this.memberList = res.data.data;
                }else{
                    //查询失败，弹出提示信息
                    this.$message.error(res.data.message);
                }
            });
        }
    });
</script>
</body>
</html>

后台页面

因为我在之前写过这个controller里面的service方法的实现类，所以在这里我就张三将controller代码给出
MemberController

//手机号查询
    @RequestMapping("/getMemberByPhoneNumber")
    public Result getMemberByPhoneNumber(String phoneNumber){
        //使用try。。catch。。进行成功还是失败判断
        try{
//            System.out.println(checkItem.toString());
            Member member = memberService.findByTelephone(phoneNumber);//如果调用失败就进入catch，没有失败就
            //证明成功
            return new Result(true, MessageConstant.QUERY_MEMBER_SUCCESS,member);
        }catch (Exception e){
            //证明调用失败
            e.printStackTrace();
            return new Result(false, MessageConstant.QUERY_MEMBER_FAIL);
        }
    }