传智健康day06 移动端开发-体检预约

传智健康day06 移动端开发-体检预约1.移动端开发1.1移动端开发方式随着移动互联网的兴起和手机的普及,目前移动端应用变得愈发重要,成为了各个商家的必争之地。例如,我们可以使用手机购物、支付、打车、玩游戏、订酒店、购票等,以前只能通过PC端完成的事情,现在通过手机都能够实现,而且更加方便,而这些都需要移动端开发进行支持,那如何进行移动端开发呢?移动端开发主要有三种方式:1、基于手机API开发(原生APP)2、基于手机浏览器开发(移动web)3、混合开发(混合APP)1.1.1基于手机API开发手机端使用手

大家好,又见面了,我是你们的朋友全栈君。

1. 移动端开发

1.1 移动端开发方式

随着移动互联网的兴起和手机的普及,目前移动端应用变得愈发重要,成为了各个商家的必争之地。例如,我们可以使用手机购物、支付、打车、玩游戏、订酒店、购票等,以前只能通过PC端完成的事情,现在通过手机都能够实现,而且更加方便,而这些都需要移动端开发进行支持,那如何进行移动端开发呢?

移动端开发主要有三种方式:

1、基于手机API开发(原生APP)

2、基于手机浏览器开发(移动web)

3、混合开发(混合APP)

1.1.1 基于手机API开发

手机端使用手机API,例如使用Android、ios 等进行开发,服务端只是一个数据提供者。手机端请求服务端获取数据(json、xml格式)并在界面进行展示。这种方式相当于传统开发中的C/S模式,即需要在手机上安装一个客户端软件。

这种方式需要针对不同的手机系统分别进行开发,目前主要有以下几个平台:

1、苹果ios系统版本,开发语言是Objective-C

2、安卓Android系统版本,开发语言是Java

3、微软Windows phone系统版本,开发语言是C#

4、塞班symbian系统版本,开发语言是C++ 此种开发方式举例:手机淘宝、抖音、今日头条、大众点评

1.1.2 基于手机浏览器开发

生存在浏览器中的应用,基本上可以说是触屏版的网页应用。这种开发方式相当于传统开发中的B/S模式,也就是手机上不需要额外安装软件,直接基于手机上的浏览器进行访问。这就需要我们编写的html页面需要根据不同手机的尺寸进行自适应调节,目前比较流行的是html5开发。除了直接通过手机浏览器访问,还可以将页面内嵌到一些应用程序中,例如通过微信公众号访问html5页面。

这种开发方式不需要针对不同的手机系统分别进行开发,只需要开发一个版本,就可以在不同的手机上正常访问。 本项目会通过将我们开发的html5页面内嵌到微信公众号这种方式进行开发。

1.1.3 混合开发

是半原生半Web的混合类App。需要下载安装,看上去类似原生App,访问的内容是Web网页。其实就是把HTML5页面嵌入到一个原生容器里面。

1.2 微信公众号开发

要进行微信公众号开发,首先需要访问微信公众平台,官网:https://mp.weixin.qq.com/。

1.2.1 帐号分类

在微信公众平台可以看到,有四种帐号类型:服务号、订阅号、小程序、企业微信(原企业号)。

传智健康day06 移动端开发-体检预约

传智健康day06 移动端开发-体检预约

本项目会选择订阅号这种方式进行公众号开发。 

1.2.2 注册帐号

要开发微信公众号,首先需要注册成为会员,然后就可以登录微信公众平台进行自定义菜单的设置。注册页面:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

传智健康day06 移动端开发-体检预约

 选择订阅号进行注册:

传智健康day06 移动端开发-体检预约

输入邮箱、邮箱验证码、密码、确认密码等按照页面流程进行注册

1.2.3 自定义菜单

注册成功后就可以使用注册的邮箱和设置的密码进行登录,登录成功后点击左侧“自定义菜单”进入自定义菜单页面 

传智健康day06 移动端开发-体检预约

1.2.4 上线要求

如果是个人用户身份注册的订阅号,则自定义菜单的菜单内容不能进行跳转网页,因为个人用户目前不支持微信认证,而跳转网页需要微信认证之后才有权限。 如果是企业用户,首先需要进行微信认证,通过后就可以进行跳转网页了,跳转网页的地址要求必须有 域名并且域名需要备案通过。 

2. 需求分析和环境搭建

2.1 需求分析

用户在体检之前需要进行预约,可以通过电话方式进行预约,此时会由体检中心客服人员通过后台系统录入预约信息。用户也可以通过手机端自助预约。本章节开发的功能为用户通过手机自助预约。

预约流程如下:

1、访问移动端首页

2、点击体检预约进入体检套餐列表页面

3、在体检套餐列表页面点击具体套餐进入套餐详情页面

4、在套餐详情页面点击立即预约进入预约页面

5、在预约页面录入体检人相关信息点击提交预约

效果如下图:

传智健康day06 移动端开发-体检预约

 传智健康day06 移动端开发-体检预约

 传智健康day06 移动端开发-体检预约

 传智健康day06 移动端开发-体检预约

2.2 搭建移动端工程

本项目是基于SOA架构进行开发,前面我们已经完成了后台系统的部分功能开发,在后台系统中都是通过Dubbo调用服务层发布的服务进行相关的操作。本章节我们开发移动端工程也是同样的模式,所以我们也需要在移动端工程中通过Dubbo调用服务层发布的服务,如下图:

传智健康day06 移动端开发-体检预约

2.2.1 导入maven坐标

在health_common工程的pom.xml文件中导入阿里短信发送的maven坐标 

<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-core</artifactId>
    <version>3.3.1</version>
</dependency>
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
    <version>1.0.0</version>
</dependency>

2.2.2 导入通用组件

在health_common工程中导入如下通用组件

ValidateCodeUtils工具类:

package com.itterence.utils;

import java.util.Random;

/**
 * 随机生成验证码工具类
 */
public class ValidateCodeUtils {
    /**
     * 随机生成验证码
     * @param length 长度为4位或者6位
     * @return
     */
    public static Integer generateValidateCode(int length){
        Integer code =null;
        if(length == 4){
            code = new Random().nextInt(9999);//生成随机数,最大为9999
            if(code < 1000){
                code = code + 1000;//保证随机数为4位数字
            }
        }else if(length == 6){
            code = new Random().nextInt(999999);//生成随机数,最大为999999
            if(code < 100000){
                code = code + 100000;//保证随机数为6位数字
            }
        }else{
            throw new RuntimeException("只能生成4位或6位数字验证码");
        }
        return code;
    }

    /**
     * 随机生成指定长度字符串验证码
     * @param length 长度
     * @return
     */
    public static String generateValidateCode4String(int length){
        Random rdm = new Random();
        String hash1 = Integer.toHexString(rdm.nextInt());
        String capstr = hash1.substring(0, length);
        return capstr;
    }
}

SMSUtils工具类:

package com.itterence.utils;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;

/**
 * 短信发送工具类
 */
public class SMSUtils {
	public static final String VALIDATE_CODE = "SMS_159620392";//发送短信验证码
	public static final String ORDER_NOTICE = "SMS_159771588";//体检预约成功通知

	/**
	 * 发送短信
	 * @param phoneNumbers
	 * @param param
	 * @throws ClientException
	 */
	public static void sendShortMessage(String templateCode,String phoneNumbers,String param) throws ClientException{
		// 设置超时时间-可自行调整
		System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
		System.setProperty("sun.net.client.defaultReadTimeout", "10000");
		// 初始化ascClient需要的几个参数
		final String product = "Dysmsapi";// 短信API产品名称(短信产品名固定,无需修改)
		final String domain = "dysmsapi.aliyuncs.com";// 短信API产品域名(接口地址固定,无需修改)
		// 替换成你的AK
		final String accessKeyId = "LTAIak3CfAehK7cE";// 你的accessKeyId,参考本文档步骤2
		final String accessKeySecret = "zsykwhTIFa48f8fFdU06GOKjHWHel4";// 你的accessKeySecret,参考本文档步骤2
		// 初始化ascClient,暂时不支持多region(请勿修改)
		IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
		DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
		IAcsClient acsClient = new DefaultAcsClient(profile);
		// 组装请求对象
		SendSmsRequest request = new SendSmsRequest();
		// 使用post提交
		request.setMethod(MethodType.POST);
		// 必填:待发送手机号。支持以逗号分隔的形式进行批量调用,批量上限为1000个手机号码,批量调用相对于单条调用及时性稍有延迟,验证码类型的短信推荐使用单条调用的方式
		request.setPhoneNumbers(phoneNumbers);
		// 必填:短信签名-可在短信控制台中找到
		request.setSignName("传智健康");
		// 必填:短信模板-可在短信控制台中找到
		request.setTemplateCode(templateCode);
		// 可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
		// 友情提示:如果JSON中需要带换行符,请参照标准的JSON协议对换行符的要求,比如短信内容中包含\r\n的情况在JSON中需要表示成\\r\\n,否则会导致JSON在服务端解析失败
		request.setTemplateParam("{\"code\":\""+param+"\"}");
		// 可选-上行短信扩展码(扩展码字段控制在7位或以下,无特殊需求用户请忽略此字段)
		// request.setSmsUpExtendCode("90997");
		// 可选:outId为提供给业务方扩展字段,最终在短信回执消息中将此值带回给调用者
		// request.setOutId("yourOutId");
		// 请求失败这里会抛ClientException异常
		SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
		if (sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
			// 请求成功
			System.out.println("请求成功");
		}
	}
}

RedisMessageConstant常量类:

package com.itterence.constant;

public class RedisMessageConstant {
    public static final String SENDTYPE_ORDER = "001";//用于缓存体检预约时发送的验证码
    public static final String SENDTYPE_LOGIN = "002";//用于缓存手机号快速登录时发送的验证码
    public static final String SENDTYPE_GETPWD = "003";//用于缓存找回密码时发送的验证码
}

2.2.3 health_mobile

创建移动端工程health_mobile,打包方式为war,用于存放Controller,在Controller中通过Dubbo可以远程访问服务层相关服务,所以需要依赖health_interface接口工程。

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <parent>
    <artifactId>health_parent</artifactId>
    <groupId>com.itterence</groupId>
    <version>1.0-SNAPSHOT</version>
  </parent>
  <modelVersion>4.0.0</modelVersion>

  <artifactId>health_mobile</artifactId>
  <packaging>war</packaging>

  <name>health_mobile Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>
  <dependencies>
    <dependency>
      <groupId>com.itterence</groupId>
      <artifactId>health_interface</artifactId>
      <version>1.0-SNAPSHOT</version>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <configuration>
          <!-- 指定端口 -->
          <port>80</port>
          <!-- 请求路径 -->
          <path>/</path>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

静态资源(CSS、html、img等,详见资料):

传智健康day06 移动端开发-体检预约

 web.xml:

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <!-- 解决post乱码 -->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!-- 指定加载的配置文件 ,通过参数contextConfigLocation加载 -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>/pages/index.html</welcome-file>
  </welcome-file-list>
</web-app>

springmvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
		 http://www.springframework.org/schema/beans/spring-beans.xsd
          http://www.springframework.org/schema/mvc
          http://www.springframework.org/schema/mvc/spring-mvc.xsd
          http://code.alibabatech.com/schema/dubbo
          http://code.alibabatech.com/schema/dubbo/dubbo.xsd
          http://www.springframework.org/schema/context
          http://www.springframework.org/schema/context/spring-context.xsd">

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes" value="application/json"/>
                <property name="features">
                    <list>
                        <value>WriteMapNullValue</value>
                        <value>WriteDateUseDateFormat</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!-- 指定应用名称 -->
    <dubbo:application name="health_mobile" />
    <!--指定服务注册中心地址-->
    <dubbo:registry address="zookeeper://127.0.0.1:2181"/>
    <!--批量扫描-->
    <dubbo:annotation package="com.itterence.controller" />
    <!--
        超时全局设置 10分钟
        check=false 不检查服务提供方,开发阶段建议设置为false
        check=true 启动时检查服务提供方,如果服务提供方没有启动则报错
    -->
    <dubbo:consumer timeout="600000" check="false"/>
    <import resource="spring-redis.xml"></import>
</beans>

spring-redis.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
		 http://www.springframework.org/schema/beans/spring-beans.xsd
          http://www.springframework.org/schema/mvc
          http://www.springframework.org/schema/mvc/spring-mvc.xsd
          http://code.alibabatech.com/schema/dubbo
          http://code.alibabatech.com/schema/dubbo/dubbo.xsd
          http://www.springframework.org/schema/context
          http://www.springframework.org/schema/context/spring-context.xsd">

    <context:property-placeholder location="classpath:redis.properties" />

    <!--Jedis连接池的相关配置-->
    <bean id="jedisPoolConfig" class="redis.clients.jedis.JedisPoolConfig">
        <property name="maxTotal">
            <value>${redis.pool.maxActive}</value>
        </property>
        <property name="maxIdle">
            <value>${redis.pool.maxIdle}</value>
        </property>
        <property name="testOnBorrow" value="true"/>
        <property name="testOnReturn" value="true"/>
    </bean>

    <bean id="jedisPool" class="redis.clients.jedis.JedisPool">
        <constructor-arg name="poolConfig" ref="jedisPoolConfig" />
        <constructor-arg name="host" value="${redis.host}" />
        <constructor-arg name="port" value="${redis.port}" type="int" />
        <constructor-arg name="timeout" value="${redis.timeout}" type="int" />
    </bean>
</beans>

redis.properties:

#最大分配的对象数
redis.pool.maxActive=200
#最大能够保持idel状态的对象数
redis.pool.maxIdle=50
redis.pool.minIdle=10
redis.pool.maxWaitMillis=20000
#当池内没有返回对象时,最大等待时间
redis.pool.maxWait=300

#格式:redis://:[密码]@[服务器地址]:[端口]/[db index]
#redis.uri = redis://:12345@127.0.0.1:6379/0

redis.host = 127.0.0.1
redis.port = 6379
redis.timeout = 30000

log4j.properties:

### direct log messages to stdout ###
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.err
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n

### direct messages to file mylog.log ###
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=c:\\mylog.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n

### set log levels - for more verbose logging change 'info' to 'debug' ###

log4j.rootLogger=debug, stdout

3. 套餐列表页面动态展示

移动端首页为/pages/index.html,效果如下:

传智健康day06 移动端开发-体检预约

点击体检预约直接跳转到体检套餐列表页面(/pages/setmeal.html)

3.1 完善页面

3.1.1 展示套餐信息

<ul class="list">
    <li class="list-item" v-for="setmeal in setmealList">
        <a class="link-page" :href="'setmeal_detail.html?id='+setmeal.id">
        <img class="img-object f-left" :src="'http://psyrcmf27.bkt.clouddn.com/'+setmeal.img" alt="">
        <div class="item-body">
            <h4 class="ellipsis item-title">{
  
  {setmeal.name}}</h4>
            <p class="ellipsis-more item-desc">{
  
  {setmeal.remark}}</p>
            <p class="item-keywords">
                <span>{
  
  {setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'}}</span>
                <span>{
  
  {setmeal.age}}</span>
            </p>
        </div>
        </a>
    </li>
</ul>

3.1.2 获取套餐列表数据

var vue = new Vue({
    el:'#app',
    data:{
        setmealList:[]//模型数据,用于套餐列表展示
    },
    mounted (){
        //发送ajax请求,获取所有的套餐数据,赋值给setmealList模型数据,用于页面展示
        axios.get("/setmeal/getAllSetmeal.do").then((res) => {
            if(res.data.flag){
                //查询成功,给模型数据赋值
                this.setmealList = res.data.data;
            }else{
                //查询失败,弹出提示信息
                this.$message.error(res.data.message);
            }
        });
    }
});

3.2 后台代码

3.2.1 Controller

在health_mobile工程中创建SetmealController并提供getSetmeal方法,在此方法中通过Dubbo远程调用套餐服务获取套餐列表数据

package com.itterence.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.itterence.constant.MessageConstant;
import com.itterence.entity.Result;
import com.itterence.pojo.Setmeal;
import com.itterence.service.SetmealService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/setmeal")
public class SetmealController {
    @Reference
    private SetmealService setmealService;
    //查询所有套餐
    @RequestMapping("/getAllSetmeal")
    public Result getAllSetmeal(){
        try{
            List<Setmeal> list = setmealService.findAll();
            return new Result(true, MessageConstant.GET_SETMEAL_LIST_SUCCESS,list);
        }catch (Exception e){
            e.printStackTrace();
            return new Result(false, MessageConstant.GET_SETMEAL_LIST_FAIL);
        }
    }
}

3.2.2 服务接口

在SetmealService服务接口中扩展findAll方法 

public List<Setmeal> findAll();

3.2.3 服务实现类

在SetmealServiceImpl服务实现类中实现findAll方法

@Override
public List<Setmeal> findAll() {
    return setmealDao.findAll();
}

3.2.4 Dao接口

在SetmealDao接口中扩展findAll方法

public List findAll();

3.2.5 Mapper映射文件

在SetmealDao.xml映射文件中扩展SQL语句

<select id="findAll" resultType="com.itterence.pojo.Setmeal">
    select * from t_setmeal
</select>

4. 套餐详情页面动态展示

前面我们已经完成了体检套餐列表页面动态展示,点击其中任意一个套餐则跳转到对应的套餐详情页面(/pages/setmeal_detail.html),并且会携带此套餐的id作为参数提交。

请求路径格式:http://localhost/pages/setmeal_detail.html?id=10

在套餐详情页面需要展示当前套餐的信息(包括图片、套餐名称、套餐介绍、适用性别、适用年龄)、 此套餐包含的检查组信息、检查组包含的检查项信息等。

4.1 完善页面

4.1.1 获取请求参数中套餐id

在页面中已经引入了healthmobile.js文件,此文件中已经封装了getUrlParam方法可以根据URL请求路径中的参数名获取对应的值

//获取指定的URL参数值 http://localhost/pages/setmeal_detail.html?id=3&name=jack
function getUrlParam(paraName) {
    var url = document.location.toString();
    //alert(url);
    var arrObj = url.split("?");
    if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;
        for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");
            if (arr != null && arr[0] == paraName) {
                return arr[1];
            }
        }
        return "";
    }
    else {
        return "";
    }
}

在setmeal_detail.html中调用上面定义的方法获取套餐id的值

<script>
    var id = getUrlParam("id");//根据请求URL中的参数名称获取对应的值
    //alert(id);
</script>

4.1.2 获取套餐详细信息

var vue = new Vue({
    el:'#app',
    data:{
        imgUrl:null,//套餐对应的图片链接
        setmeal:{}//模型数据(套餐信息),用于页面数据展示
    },
    mounted(){
        //发送ajax请求,根据套餐ID查询套餐详细信息(包括套餐基本信息、套餐包含的检查组、检查组包含的检查项)
        axios.post("/setmeal/findById.do?id=" + id).then((response) => {
            if(response.data.flag){
                this.setmeal = response.data.data;
                this.imgUrl = 'http://psyrcmf27.bkt.clouddn.com/' + this.setmeal.img;
            }
        });
    }
});

4.1.3 展示套餐信息

<!-- 页面内容 -->
<div class="contentBox">
    <div class="card">
        <div class="project-img">
            <img :src="imgUrl" width="100%" height="100%" />
        </div>
        <div class="project-text">
            <h4 class="tit">{
  
  {setmeal.name}}</h4>
            <p class="subtit">{
  
  {setmeal.remark}}</p>
            <p class="keywords">
                <span>{
  
  {setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'}}</span>
                <span>{
  
  {setmeal.age}}</span>
            </p>
        </div>
        <!--<div class="project-know">
            <a href="orderNotice.html" class="link-page">
                <i class="icon-ask-circle"><span class="path1"></span><span class="path2"></span></i>
                <span class="word">预约须知</span>
                <span class="arrow"><i class="icon-rit-arrow"></i></span>
            </a>
        </div>-->
    </div>
    <div class="table-listbox">
        <div class="box-title">
            <i class="icon-zhen"><span class="path1"></span><span class="path2"></span></i>
            <span>套餐详情</span>
        </div>
        <div class="box-table">
            <div class="table-title">
                <div class="tit-item flex2">项目名称</div>
                <div class="tit-item  flex3">项目内容</div>
                <div class="tit-item  flex3">项目解读</div>
            </div>
            <div class="table-content">
                <ul class="table-list">
                    <li class="table-item" v-for="checkgroup in setmeal.checkGroups">
                        <div class="item flex2">{
  
  {checkgroup.name}}</div>
                        <div class="item flex3">
                            <label v-for="checkitem in checkgroup.checkItems">
                                {
  
  {checkitem.name}}
                            </label>
                        </div>
                        <div class="item flex3">{
  
  {checkgroup.remark}}</div>
                    </li>
                </ul>
            </div>
            <div class="box-button">
                <a @click="toOrderInfo()" class="order-btn">立即预约</a>
            </div>
        </div>
    </div>
</div>

4.2 后台代码

4.2.1 Controller

在SetmealController中提供findById方法

//根据套餐ID查询套餐详情(套餐基本信息、套餐对应的检查组信息、检查组对应的检查项信息)
@RequestMapping("/findById")
public Result findById(int id){
	try{
		Setmeal setmeal = setmealService.findById(id);
		return new Result(true, MessageConstant.QUERY_SETMEAL_SUCCESS,setmeal);
	}catch (Exception e){
		e.printStackTrace();
		return new Result(false, MessageConstant.QUERY_SETMEAL_FAIL);
	}
}

4.2.2 服务接口

在SetmealService服务接口中提供findById方法

public Setmeal findById(int id);

4.2.3 服务实现类

在SetmealServiceImpl服务实现类中实现findById方法

public Setmeal findById(int id) {
    return setmealDao.findById(id);
}

4.2.4 Dao接口

在SetmealDao接口中提供findById方法

public Setmeal findById(int id);

4.2.5 Mapper映射文件

此处会使用mybatis提供的关联查询,在根据id查询套餐时,同时将此套餐包含的检查组都查询出来, 并且将检查组包含的检查项都查询出来

 SetmealDao.xml文件:

<resultMap id="baseResultMap" type="com.itheima.pojo.CheckGroup">
    <id 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"/>
</resultMap>
<resultMap id="findByIdResultMap" type="com.itterence.pojo.Setmeal" extends="baseResultMap">
    <!--多对多映射-->
    <collection
            property="checkGroups"
            ofType="com.itterence.pojo.CheckGroup"
            select="com.itterence.dao.CheckGroupDao.findCheckGroupById"
            column="id"
    >
    </collection>
</resultMap>
<!--根据套餐ID查询套餐详情(包含套餐基本信息、检查组信息、检查项信息)-->
<select id="findById" parameterType="int" resultMap="findByIdResultMap">
    select * from t_setmeal where id = #{id}
</select>

CheckGroupDao.xml文件:

<resultMap id="findByIdResultMap" type="com.itterence.pojo.CheckGroup" extends="baseResultMap">
    <!--检查组和检查项多对多关联查询-->
    <collection property="checkItems"
                ofType="com.itterence.pojo.CheckItem"
                column="id"
                select="com.itterence.dao.CheckItemDao.findCheckItemById"
    ></collection>
</resultMap>
<!--根据套餐ID查询关联的检查组详情-->
<select id="findCheckGroupById" parameterType="int" resultMap="findByIdResultMap">
    select * from t_checkgroup where id in (select checkgroup_id from t_setmeal_checkgroup where setmeal_id = #{setmeal_id})
</select>
<resultMap id="findByIdResultMap" type="com.itterence.pojo.CheckGroup" extends="baseResultMap">
    <!--检查组和检查项多对多关联查询-->
    <collection property="checkItems"
                ofType="com.itterence.pojo.CheckItem"
                column="id"
                select="com.itterence.dao.CheckItemDao.findCheckItemById"
    ></collection>
</resultMap>
<!--根据套餐ID查询关联的检查组详情-->
<select id="findCheckGroupById" parameterType="int" resultMap="findByIdResultMap">
    select * from t_checkgroup where id in (select checkgroup_id from t_setmeal_checkgroup where setmeal_id = #{setmeal_id})
</select>

CheckItemDao.xml文件:

<!--根据检查组ID查询关联的检查项-->
<select id="findCheckItemById" parameterType="int" resultType="com.itterence.pojo.CheckItem">
	select * from t_checkitem
	where id
	in (select checkitem_id from t_checkgroup_checkitem where checkgroup_id=#{id})
</select>

5. 短信发送

5.1 短信服务介绍

目前市面上有很多第三方提供的短信服务,这些第三方短信服务会和各个运营商(移动、联通、电信)对接,我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信。需要说明的是这些短信服务都是收费的服务。

本项目短信发送我们选择的是阿里云提供的短信服务。

短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码、短信通知等。 三网合一专属通道,与工信部携号转网平台实时互联。电信级运维保障,实时监控自动切换,到达率高达99%。短信服务API提供短信发送、发送状态查询、短信批量发送等能力,在短信服务控制台上添加签名、模板并通过审核之后,可以调用短信服务API完成短信发送等操作。

5.2 注册阿里云账号

阿里云官网:https://www.aliyun.com/

点击官网首页免费注册跳转到如下注册页面:

传智健康day06 移动端开发-体检预约

5.3 设置短信签名

注册成功后,点击登录按钮进行登录。登录后进入短信服务管理页面,选择国内消息菜单

传智健康day06 移动端开发-体检预约

 点击添加签名按钮:

 传智健康day06 移动端开发-体检预约

 不支持个人用户申请未上线业务,若产品未上线建议先升级企业账号

5.4 设置短信模板

在国内消息菜单页面中,点击模板管理标签页: 

点击添加模板按钮:

传智健康day06 移动端开发-体检预约

 点击添加模板按钮:

传智健康day06 移动端开发-体检预约

5.5 设置access keys

在发送短信时需要进行身份认证,只有认证通过才能发送短信。本小节就是要设置用于发送短信时进行身份认证的key和密钥。鼠标放在页面右上角当前用户头像上,会出现下拉菜单: 

传智健康day06 移动端开发-体检预约

 点击accesskeys:

传智健康day06 移动端开发-体检预约

点击开始使用子用户AccessKey按钮:

 传智健康day06 移动端开发-体检预约

 点击创建用户按钮,填写账号和显示名称

传智健康day06 移动端开发-体检预约

 点击确定,进行收集验证传智健康day06 移动端开发-体检预约

点击新创建的用户

传智健康day06 移动端开发-体检预约

点击权限管理 个人权限

添加AliyunDysmsFullAccess管理短信服务(SMS)的权限和AliyunDysmsReadOnlyAccess只读访问短信服务(SMS)的权限传智健康day06 移动端开发-体检预约

点击认证管理 用户 AccessKey下面的创建AccessKey

传智健康day06 移动端开发-体检预约 

 记录下AccessKey ID和AccessKey Secret 传智健康day06 移动端开发-体检预约

除此之外可以设置每日和每月短信发送上限: 

传智健康day06 移动端开发-体检预约

 由于短信服务是收费服务,所以还需要进行充值才能发送短信:

传智健康day06 移动端开发-体检预约

5.6 发送短信

5.6.1 导入maven坐标 

<dependency>
	<groupId>com.aliyun</groupId>
	<artifactId>aliyun-java-sdk-core</artifactId>
	<version>3.3.1</version>
</dependency>
<dependency>
	<groupId>com.aliyun</groupId>
	<artifactId>aliyun-java-sdk-dysmsapi</artifactId>
	<version>1.0.0</version>
</dependency>

5.6.2 封装工具类

package com.itterence.utils;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;

/**
 * 短信发送工具类
 */
public class SMSUtils {
	public static final String VALIDATE_CODE = "SMS_159620392";//发送短信验证码
	public static final String ORDER_NOTICE = "SMS_159771588";//体检预约成功通知

	/**
	 * 发送短信
	 * @param phoneNumbers
	 * @param param
	 * @throws ClientException
	 */
	public static void sendShortMessage(String templateCode,String phoneNumbers,String param) throws ClientException{
		// 设置超时时间-可自行调整
		System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
		System.setProperty("sun.net.client.defaultReadTimeout", "10000");
		// 初始化ascClient需要的几个参数
		final String product = "Dysmsapi";// 短信API产品名称(短信产品名固定,无需修改)
		final String domain = "dysmsapi.aliyuncs.com";// 短信API产品域名(接口地址固定,无需修改)
		// 替换成你的AK
		final String accessKeyId = "LTAIak3CfAehK7cE";// 你的accessKeyId,参考本文档步骤2
		final String accessKeySecret = "zsykwhTIFa48f8fFdU06GOKjHWHel4";// 你的accessKeySecret,参考本文档步骤2
		// 初始化ascClient,暂时不支持多region(请勿修改)
		IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
		DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
		IAcsClient acsClient = new DefaultAcsClient(profile);
		// 组装请求对象
		SendSmsRequest request = new SendSmsRequest();
		// 使用post提交
		request.setMethod(MethodType.POST);
		// 必填:待发送手机号。支持以逗号分隔的形式进行批量调用,批量上限为1000个手机号码,批量调用相对于单条调用及时性稍有延迟,验证码类型的短信推荐使用单条调用的方式
		request.setPhoneNumbers(phoneNumbers);
		// 必填:短信签名-可在短信控制台中找到
		request.setSignName("传智健康");
		// 必填:短信模板-可在短信控制台中找到
		request.setTemplateCode(templateCode);
		// 可选:模板中的变量替换JSON串,如模板内容为"亲爱的${name},您的验证码为${code}"时,此处的值为
		// 友情提示:如果JSON中需要带换行符,请参照标准的JSON协议对换行符的要求,比如短信内容中包含\r\n的情况在JSON中需要表示成\\r\\n,否则会导致JSON在服务端解析失败
		request.setTemplateParam("{\"code\":\""+param+"\"}");
		// 可选-上行短信扩展码(扩展码字段控制在7位或以下,无特殊需求用户请忽略此字段)
		// request.setSmsUpExtendCode("90997");
		// 可选:outId为提供给业务方扩展字段,最终在短信回执消息中将此值带回给调用者
		// request.setOutId("yourOutId");
		// 请求失败这里会抛ClientException异常
		SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
		if (sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
			// 请求成功
			System.out.println("请求成功");
		}
	}
}

5.6.3 测试短信发送

public static void main(String[] args)throws Exception {
	SMSUtils.sendShortMessage("SMS_159620392", "13812345678", "1234");
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/152744.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • css3 transition原理(动画系列二)

    css3 transition原理(动画系列二)CSS3过渡效果(css3transition)基本属性及取值讲解

    2022年7月13日
    18
  • javascript nextSibling属性「建议收藏」

    javascript nextSibling属性「建议收藏」对于nextSibling属性,在W3school中的定义为:nextSibling属性返回指定节点之后紧跟的节点,在相同的树层级中。注意所返回的节点必须是与上一个节点是同级关系,且彼此之间不能有空格,否则将会返回:undefinedTitl</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="1" target="_blank" href="https://javaforall.net/user-2/1" class="avatar j-user-card"> <img alt='全栈程序员-站长的头像' src='https://javaforall.net/wp-content/uploads/2025/04/2025042212521933-300x300.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>全栈程序员-站长</span> </a> </div> <span class="item-meta-li date">2022年7月13日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>344</span> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/223037.html" title="Linux中DHCP的服务配置_linux配置ip地址命令" target="_blank" rel="bookmark"> <img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" data-original="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" width="480" height="300" alt="Linux中DHCP的服务配置_linux配置ip地址命令"> </a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://javaforall.net/223037.html" target="_blank" rel="bookmark"> Linux中DHCP的服务配置_linux配置ip地址命令 </a> </h3> <div class="item-excerpt"> <p>Linux中DHCP的服务配置_linux配置ip地址命令DHCP:DynamicHostConfigurationProtocollease:租约报文:首次获取IP地址(广播包)client向服务器端发送DHCPDISCOVER的UDP报文server端回应DHCPOFFER报文client发送DHCPREQUEST报文,向服务器请求使用该报文server端发送DHCPACK报文,发送确认报文续租(单…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="1" target="_blank" href="https://javaforall.net/user-2/1" class="avatar j-user-card"> <img alt='全栈程序员-站长的头像' src='https://javaforall.net/wp-content/uploads/2025/04/2025042212521933-300x300.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>全栈程序员-站长</span> </a> </div> <span class="item-meta-li date">2025年6月30日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>5</span> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/184751.html" title="JAVA 大数据Excel POI生成导出" target="_blank" rel="bookmark"> <img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" data-original="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" width="480" height="300" alt="JAVA 大数据Excel POI生成导出"> </a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://javaforall.net/184751.html" target="_blank" rel="bookmark"> JAVA 大数据Excel POI生成导出 </a> </h3> <div class="item-excerpt"> <p>JAVA 大数据Excel POI生成导出一、背景在工作中经常会将List导出Excel,但是有时数据量很大,需要一次性导出。为防止各个系统重复造轮子,本文通过注解方式来实现Excel的普通、分片生成。二、直接上代码1、导入依赖<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId>…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="1" target="_blank" href="https://javaforall.net/user-2/1" class="avatar j-user-card"> <img alt='全栈程序员-站长的头像' src='https://javaforall.net/wp-content/uploads/2025/04/2025042212521933-300x300.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>全栈程序员-站长</span> </a> </div> <span class="item-meta-li date">2022年10月7日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>2</span> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/144780.html" title="深入理解Volatile关键字及其实现原理「建议收藏」" target="_blank" rel="bookmark"> <img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" data-original="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" width="480" height="300" alt="深入理解Volatile关键字及其实现原理「建议收藏」"> </a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://javaforall.net/144780.html" target="_blank" rel="bookmark"> 深入理解Volatile关键字及其实现原理「建议收藏」 </a> </h3> <div class="item-excerpt"> <p>深入理解Volatile关键字及其实现原理「建议收藏」volatile的用法volatile通常被比喻成"轻量级的synchronized",也是Java并发编程中比较重要的一个关键字。和synchronized不同,volatile是一个变量修饰符,只能用来修饰变量。无法修饰方法及代码块等。volatile的用法比较简单,只需要在声明一个可能被多线程同时访问的变量时,使用volatile修饰就可以了。如以下代码,是一个比较典型的使用双…</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="1" target="_blank" href="https://javaforall.net/user-2/1" class="avatar j-user-card"> <img alt='全栈程序员-站长的头像' src='https://javaforall.net/wp-content/uploads/2025/04/2025042212521933-300x300.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>全栈程序员-站长</span> </a> </div> <span class="item-meta-li date">2022年5月12日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>40</span> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/120606.html" title="git 命令总结" target="_blank" rel="bookmark"> <img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" data-original="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" width="480" height="300" alt="git 命令总结"> </a> </div> <div class="item-content"> <h3 class="item-title"> <a href="https://javaforall.net/120606.html" target="_blank" rel="bookmark"> git 命令总结 </a> </h3> <div class="item-excerpt"> <p>1.配置gitconfig–globaluser.name"yourname"gitconfig–globaluser.emailmail@box.co</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="1" target="_blank" href="https://javaforall.net/user-2/1" class="avatar j-user-card"> <img alt='全栈程序员-站长的头像' src='https://javaforall.net/wp-content/uploads/2025/04/2025042212521933-300x300.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>全栈程序员-站长</span> </a> </div> <span class="item-meta-li date">2021年12月22日</span> <div class="item-meta-right"> <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>40</span> </div> </div> </div> </li> </ul> </div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表回复</h3><form action="https://javaforall.net/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">您的邮箱地址不会被公开。</span> <span class="required-field-message">必填项已用 <span class="required">*</span> 标注</span></p><div class="comment-form-comment"><textarea autocomplete="new-password" id="j265fd99e5" name="j265fd99e5" class="required" rows="4" placeholder="写下你的评论…"></textarea><textarea id="comment" aria-label="hp-comment" aria-hidden="true" name="comment" autocomplete="new-password" style="padding:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;white-space:nowrap !important;height:1px !important;width:1px !important;overflow:hidden !important;" tabindex="-1"></textarea><script data-noptimize>document.getElementById("comment").setAttribute( "id", "a48487956716f8ebb9f933d6e6143538" );document.getElementById("j265fd99e5").setAttribute( "id", "comment" );</script><div class="comment-form-smile j-smilies" data-target="#comment"><i class="wpcom-icon wi smile-icon"><svg aria-hidden="true"><use xlink:href="#wi-emotion"></use></svg></i></div></div><div class="comment-form-author"><label for="author">昵称:</label><input id="author" name="author" type="text" value="" size="30"></div> <div class="comment-form-email"><label for="email">邮箱:</label><input id="email" name="email" type="text" value=""></div> <div class="comment-form-url"><label for="url">网址:</label><input id="url" name="url" type="text" value="" size="30"></div> <label class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> 记住昵称、邮箱和网址,下次评论免输入</label> <div class="form-submit"><button name="submit" type="submit" id="submit" class="wpcom-btn btn-primary btn-xs submit">提交</button> <input type='hidden' name='comment_post_ID' value='152744' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </div></form> </div><!-- #respond --> </div><!-- .comments-area --> </article> </main> <aside class="sidebar"> <div class="widget widget_profile"><div class="profile-cover"><img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg" data-original="//javaforall.net/wp-content/uploads/2025/04/anthony-delanoix-urUdKCxsTUI-unsplash-1.webp" alt="全栈程序员-站长"></div> <div class="avatar-wrap"> <a target="_blank" href="https://javaforall.net/user-2/1" class="avatar-link"><img alt='全栈程序员-站长的头像' src='https://javaforall.net/wp-content/uploads/2025/04/2025042212521933-300x300.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a></div> <div class="profile-info"> <a target="_blank" href="https://javaforall.net/user-2/1" class="profile-name"><span class="author-name">全栈程序员-站长</span></a> <p class="author-description">本网站汇聚当前互联网主流语音,持续更新,欢迎关注公众号“全栈程序员社区”</p> <div class="profile-stats"> <div class="profile-stats-inner"> <div class="user-stats-item"> <b>94.4K</b> <span>文章</span> </div> <div class="user-stats-item"> <b>2</b> <span>粉丝</span> </div> </div> </div> <button type="button" class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user="1"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-add"></use></svg></i>关注</button> </div> <div class="profile-posts"> <h3 class="widget-title"><span>最近文章</span></h3> <ul> <li><a href="https://javaforall.net/196806.html" title="no jump_jump out">no jump_jump out</a></li> <li><a href="https://javaforall.net/232716.html" title="webstorm安装使用教程">webstorm安装使用教程</a></li> <li><a href="https://javaforall.net/196807.html" title="spring整合redis集群配置密码_redis默认密码">spring整合redis集群配置密码_redis默认密码</a></li> <li><a href="https://javaforall.net/196808.html" title="DIN 轴承标准目录[通俗易懂]">DIN 轴承标准目录[通俗易懂]</a></li> <li><a href="https://javaforall.net/196809.html" title="TCP与udp区别_个人总结和工作总结的区别">TCP与udp区别_个人总结和工作总结的区别</a></li> <li><a href="https://javaforall.net/232717.html" title="random函数汇总">random函数汇总</a></li> <li><a href="https://javaforall.net/196810.html" title="ghost备份还原系统步骤_win10如何备份完整系统">ghost备份还原系统步骤_win10如何备份完整系统</a></li> <li><a href="https://javaforall.net/196811.html" title="修改密码passwd鉴定令牌操作错误_命令行修改用户密码">修改密码passwd鉴定令牌操作错误_命令行修改用户密码</a></li> <li><a href="https://javaforall.net/196812.html" title="java系统类加载器_网易js加载器下载地址">java系统类加载器_网易js加载器下载地址</a></li> <li><a href="https://javaforall.net/196813.html" title="【linux】Redhat Linux 关闭防火墙命令[通俗易懂]">【linux】Redhat Linux 关闭防火墙命令[通俗易懂]</a></li> </ul> </div> </div><div class="widget widget_post_thumb"><h3 class="widget-title"><span>最新发布</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/232763.html" title="Idea 配置JDK 版本 Idea 配置JDK1.8"> <img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" data-original="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" width="480" height="300" alt="Idea 配置JDK 版本 Idea 配置JDK1.8"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://javaforall.net/232763.html" title="Idea 配置JDK 版本 Idea 配置JDK1.8">Idea 配置JDK 版本 Idea 配置JDK1.8</a></p> <p class="item-date">2025年9月16日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/197057.html" title="IDEA下Log4j使用教程"> <img width="480" height="300" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="IDEA下Log4j使用教程" decoding="async" data-original="https://javaforall.net/wp-content/uploads/2022/09/20151214153811773-1-480x300.png" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://javaforall.net/197057.html" title="IDEA下Log4j使用教程">IDEA下Log4j使用教程</a></p> <p class="item-date">2025年9月14日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/232793.html" title="idea 删除当一行或者选中行的快捷键"> <img class="j-lazy" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" data-original="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" width="480" height="300" alt="idea 删除当一行或者选中行的快捷键"> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://javaforall.net/232793.html" title="idea 删除当一行或者选中行的快捷键">idea 删除当一行或者选中行的快捷键</a></p> <p class="item-date">2025年9月13日</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://javaforall.net/197134.html" title="java -jar没有主清单属性_idea怎么导入jar"> <img width="480" height="300" src="https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="java -jar没有主清单属性_idea怎么导入jar" decoding="async" data-original="https://javaforall.net/wp-content/uploads/2022/09/20181016113609777-1-480x300.png" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://javaforall.net/197134.html" title="java -jar没有主清单属性_idea怎么导入jar">java -jar没有主清单属性_idea怎么导入jar</a></p> <p class="item-date">2025年9月13日</p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-logo-icon"> <div class="footer-col footer-col-logo"> <img src="http://javaforall.net/wp-content/uploads/2020/10/4545-头像.jpg" alt="全栈程序员必看"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"><li id="menu-item-152" class="menu-item menu-item-152"><a href="https://javaforall.net/contact">联系我们</a></li> </ul> <div class="copyright"> <p>Copyright ©2018-2025 版权所有 <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">晋ICP备19011774号</a> Powered by 全栈程序员必看 <a href="/sitemap.xml" target="_blank" rel="noopener">网站地图</a></p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('//javaforall.net/wp-content/uploads/2020/11/2020110814274114.jpg');"></span> </a> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-1 action-pos-0" style="bottom:15%;"> <div class="action-item"> <i class="wpcom-icon fa fa-wechat action-item-icon"></i> <div class="action-item-inner action-item-type-1"> <img class="action-item-img" src="http://javaforall.net/wp-content/uploads/2020/11/2020110814274114.jpg" alt="关注全栈程序员社区公众号"> </div> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/justnews\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/javaforall.net\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/javaforall.net\/wp-content\/themes\/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"lightbox":"1","post_id":"152744","user_card_height":"356","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/fonts.proxy.ustclug.org\/css2?family=Noto+Sans+SC:wght@400;500&display=swap","follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://javaforall.net/wp-content/themes/justnews/js/main.js?ver=6.20.0" id="main-js"></script> <script type="text/javascript" src="https://javaforall.net/wp-content/themes/justnews/themer/assets/js/icons-2.8.9.js?ver=2.8.9" id="wpcom-icons-js"></script> <script type="text/javascript" id="wp-postviews-cache-js-extra"> /* <![CDATA[ */ var viewsCacheL10n = {"admin_ajax_url":"https:\/\/javaforall.net\/wp-admin\/admin-ajax.php","nonce":"f920421bc2","post_id":"152744"}; /* ]]> */ </script> <script type="text/javascript" src="https://javaforall.net/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.77" id="wp-postviews-cache-js"></script> <script type="text/javascript" id="wpcom-member-js-extra"> /* <![CDATA[ */ var _wpmx_js = {"ajaxurl":"https:\/\/javaforall.net\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/javaforall.net\/wp-content\/plugins\/wpcom-member\/","post_id":"152744","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/javaforall.net\/login?modal-type=login","register_url":"https:\/\/javaforall.net\/register?modal-type=register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}}; /* ]]> */ </script> <script type="text/javascript" src="https://javaforall.net/wp-content/plugins/wpcom-member/js/index.js?ver=1.7.10" id="wpcom-member-js"></script> <script type="text/javascript" id="QAPress-js-js-extra"> /* <![CDATA[ */ var QAPress_js = {"ajaxurl":"https:\/\/javaforall.net\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/javaforall.net\/wp-content\/plugins\/qapress\/images\/loading.gif","max_upload_size":"2097152","compress_img_size":"0","lang":{"delete":"\u5220\u9664","nocomment":"\u6682\u65e0\u56de\u590d","nocomment2":"\u6682\u65e0\u8bc4\u8bba","addcomment":"\u6211\u6765\u56de\u590d","submit":"\u53d1\u5e03","loading":"\u6b63\u5728\u52a0\u8f7d...","error1":"\u53c2\u6570\u9519\u8bef\uff0c\u8bf7\u91cd\u8bd5","error2":"\u8bf7\u6c42\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","confirm":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u5e76\u5c06\u540c\u65f6\u5220\u9664\u5f53\u524d\u56de\u590d\u7684\u8bc4\u8bba\u4fe1\u606f\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","confirm2":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","confirm3":"\u5220\u9664\u64cd\u4f5c\u65e0\u6cd5\u6062\u590d\uff0c\u5e76\u5c06\u540c\u65f6\u5220\u9664\u5f53\u524d\u95ee\u9898\u7684\u56de\u590d\u8bc4\u8bba\u4fe1\u606f\uff0c\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f","deleting":"\u6b63\u5728\u5220\u9664...","success":"\u64cd\u4f5c\u6210\u529f\uff01","denied":"\u65e0\u64cd\u4f5c\u6743\u9650\uff01","error3":"\u64cd\u4f5c\u5f02\u5e38\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","empty":"\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a","submitting":"\u6b63\u5728\u63d0\u4ea4...","success2":"\u63d0\u4ea4\u6210\u529f\uff01","ncomment":"0\u6761\u8bc4\u8bba","login":"\u62b1\u6b49\uff0c\u60a8\u9700\u8981\u767b\u5f55\u624d\u80fd\u8fdb\u884c\u56de\u590d","error4":"\u63d0\u4ea4\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","need_title":"\u8bf7\u8f93\u5165\u6807\u9898","need_cat":"\u8bf7\u9009\u62e9\u5206\u7c7b","need_content":"\u8bf7\u8f93\u5165\u5185\u5bb9","success3":"\u66f4\u65b0\u6210\u529f\uff01","success4":"\u53d1\u5e03\u6210\u529f\uff01","need_all":"\u6807\u9898\u3001\u5206\u7c7b\u548c\u5185\u5bb9\u4e0d\u80fd\u4e3a\u7a7a","length":"\u5185\u5bb9\u957f\u5ea6\u4e0d\u80fd\u5c11\u4e8e10\u4e2a\u5b57\u7b26","load_done":"\u56de\u590d\u5df2\u7ecf\u5168\u90e8\u52a0\u8f7d","load_fail":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","load_more":"\u70b9\u51fb\u52a0\u8f7d\u66f4\u591a","approve":"\u786e\u5b9a\u8981\u5c06\u5f53\u524d\u95ee\u9898\u8bbe\u7f6e\u4e3a\u5ba1\u6838\u901a\u8fc7\u5417\uff1f","end":"\u5df2\u7ecf\u5230\u5e95\u4e86","upload_fail":"\u56fe\u7247\u4e0a\u4f20\u51fa\u9519\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","file_types":"\u4ec5\u652f\u6301\u4e0a\u4f20jpg\u3001png\u3001gif\u683c\u5f0f\u7684\u56fe\u7247\u6587\u4ef6","file_size":"\u56fe\u7247\u5927\u5c0f\u4e0d\u80fd\u8d85\u8fc72M","uploading":"\u6b63\u5728\u4e0a\u4f20...","upload":"\u63d2\u5165\u56fe\u7247"}}; /* ]]> */ </script> <script type="text/javascript" src="https://javaforall.net/wp-content/plugins/qapress/js/qa.js?ver=4.10.2" id="QAPress-js-js"></script> <script type="text/javascript" src="https://javaforall.net/wp-content/themes/justnews/js/wp-embed.js?ver=6.20.0" id="wp-embed-js"></script> <script type="text/javascript" src="https://javaforall.net/wp-content/plugins/baidu-submit/assets/baidu_push.js" id="wb-baidu-push-js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2f4d2b9bcf94270f8bf99ccde97cb4b9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "@id": "https://javaforall.net/152744.html", "url": "https://javaforall.net/152744.html", "headline": "传智健康day06 移动端开发-体检预约", "image": ["http://qn.javajgs.com/20220624/6fff9f1c-00a0-4ab1-afc9-f7f9516bc2ed202206244377dd47-99b0-4d69-b7b5-86593f9bfcb31.jpg","http://qn.javajgs.com/20220624/b9724edb-3888-49e7-b98e-78455f04aa1d20220624267a3c75-d312-47d9-9a26-1cf5d1bb1a871.jpg","http://qn.javajgs.com/20220624/685bbc46-a431-405a-a691-b828fbda65832022062408cad1c3-e77f-4126-a950-04b17a3259101.jpg"], "description": "传智健康day06 移动端开发-体检预约1.移动端开发1.1移动端开发方式随着移动互联网的兴起和手机的普及,目前移动端应用变得愈发重要,成为了各个商家的必争之地。例如,我们可以使用手机购物、支付、打车、玩游戏、订酒店、购票等,以前只能通过PC端完成的事情,现在通过手机都能够实现,而且更加方便,而这些都需要移动端开发进行…", "datePublished": "2022-06-24T07:36:00+08:00", "dateModified": "2022-06-24T07:36:00+08:00", "author": {"@type":"Person","name":"全栈程序员-站长","url":"https://javaforall.net/user-2/1","image":"//javaforall.net/wp-content/uploads/2025/04/2025042212371781.jpeg"} } </script> </body> </html>