当前位置：网站首页>Day_ 06 smart health project - mobile terminal development - physical examination appointment

Day_ 06 smart health project - mobile terminal development - physical examination appointment

2022-06-23 06:22:00 【fat ۣۖ tiger ۣۖ】

The first 6 Chapter Mobile development - Appointment for physical examination

1. Mobile development

1.1 Mobile terminal development mode

With the rise of mobile Internet and the popularity of mobile phones , At present, mobile applications are becoming more and more important , It has become a must for all businesses . for example , We can use mobile phones to shop 、 payment 、 Take a taxi 、 Play a game 、 Book the hotel 、 Ticket purchase, etc , It used to be through PC End of things done , Now it can be realized through mobile phones , And more convenient , All these need the support of mobile terminal development , How to develop the mobile terminal ？

There are three main ways to develop mobile terminals ：

1、 Based on mobile phones API Development （ Native APP）

2、 Based on mobile browser development （ Move web）

3、 Hybrid development （ blend APP）

1.1.1 Based on mobile phones API Development

The mobile terminal uses the mobile phone API, For example, using Android、ios Wait for development , The server is just a data provider . The mobile terminal requests the server to obtain data （json、xml Format ） And display it on the interface . This approach is equivalent to the traditional development of C/S Pattern , That is, you need to install a client software on your mobile phone .

This method needs to be developed separately for different mobile phone systems , At present, there are mainly the following platforms ：

1、 Apple ios System version , The development language is Objective-C

2、 Android Android System version , The development language is Java

3、 Microsoft Windows phone System version , The development language is C#

4、 Saipan symbian System version , The development language is C++

Examples of this development method ： Mobile phone taobao 、 Tiktok 、 Today's headline 、 Public comment

1.1.2 Based on mobile browser development

Applications that survive in browsers , Basically, it can be said to be a touch-screen version of the web application . This development method is equivalent to the traditional development B/S Pattern , That is, there is no need to install additional software on the mobile phone , Access directly based on the browser on the mobile phone . This requires us to write html The page needs to be adjusted adaptively according to the size of different mobile phones , What is more popular at present is html5 Development . In addition to accessing directly through the mobile browser , You can also embed pages into some applications , For example, through WeChat official account. html5 page .

This development method does not need to be developed separately for different mobile phone systems , Only one version needs to be developed , You can normally access... On different mobile phones .

This project will be developed by html5 The page is embedded in the official account of WeChat. .

1.1.3 Hybrid development

It's semi primary and semi Web Mixed classes of App. Need to download and install , Looks like a native App, The content of the interview is Web Webpage . It's just a way of HTML5 The page is embedded in a native container .

1.2 WeChat official account development

Wechat official account should be developed , First, you need to visit the wechat public platform , Official website ：https://mp.weixin.qq.com/.

1.2.1 Account classification

You can see it on wechat public platform , There are four account types ： Service number 、 Subscription number 、 Applet 、 Enterprise WeChat （ Original enterprise number ）.

Please add a picture description

This project will choose public subscription number in this way to develop official account. .

1.2.2 Sign up for an account

Official account for WeChat development , First, you need to register as a member , Then you can log in to the wechat public platform to set the custom menu .

Registration page ：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

Please add a picture description

Select a subscription number to register ：

Please add a picture description

Enter email 、 Email verification code 、 password 、 Confirm the password and register according to the page process

1.2.3 Custom menu

After successful registration, you can use the registered mailbox and the set password to log in , After successful login, click on the left “ Custom menu ” Enter the custom menu page

Please add a picture description

On the user-defined menu page, you can create a level-1 menu and a level-2 menu according to your needs , One level menu can be created at most 3 individual , A maximum of... Can be created under each level-1 menu 5 Two level menus . Each menu consists of menu name and menu content , The menu contains 3 Middle form ： Send a message 、 The jump page 、 Jump applet .

1.2.4 Online requirements

If it is a subscription number registered as an individual user , The menu content of the customized menu cannot jump to the web page , Because individual users currently do not support wechat authentication , The authority to jump to a web page requires wechat authentication .

If it's an enterprise user , First, wechat authentication is required , After passing, you can jump to the web page , The address to jump to the web page must have a domain name and the domain name needs to be filed .

2. Demand analysis and environment construction

2.1 Demand analysis

Users need to make an appointment before physical examination , You can make an appointment by telephone , At this time, the customer service personnel of the physical examination center will enter the reservation information through the background system . Users can also make an appointment through self-service on the mobile terminal . The function developed in this chapter is for users to make self-service appointments through mobile phones .

The appointment process is as follows ：

1、 Visit the home page of the mobile terminal

2、 Click physical examination appointment to enter the list page of physical examination package

3、 Click the specific package on the list page of physical examination package to enter the package details page

4、 Click make an appointment now on the package details page to enter the appointment page

5、 Enter the relevant information of the physical examiner on the appointment page and click Submit appointment

The effect is as follows ：

Please add a picture description

2.2 Build mobile terminal project

This project is based on SOA Architecture for development , We have completed the development of some functions of the background system , In the back-end system, it is through Dubbo Call the service published by the service layer to perform relevant operations . In this chapter, we develop the mobile terminal project in the same mode , So we also need to pass in the mobile end project Dubbo Call the service published by the service layer , Here's the picture ：

Please add a picture description

2.2.1 Import maven coordinate

stay health_common engineering pom.xml Import the message sent by Alibaba SMS into the file maven coordinate 

<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 Import common components

stay health_common Import the following general components into the project

ValidateCodeUtils Tool class ：

package com.itheima.utils;

import java.util.Random;

/** *  Randomly generate verification code tool class  */
public class ValidateCodeUtils {
    
    /** *  Generate verification code randomly  * @param length  The length is 4 Bits or 6 position  * @return */
    public static Integer generateValidateCode(int length){
    
        Integer code =null;
        if(length == 4){
    
            code = new Random().nextInt(9999);// Generate random number , The maximum is 9999
            if(code < 1000){
    
                code = code + 1000;// Ensure that the random number is 4 Digit number 
            }
        }else if(length == 6){
    
            code = new Random().nextInt(999999);// Generate random number , The maximum is 999999
            if(code < 100000){
    
                code = code + 100000;// Ensure that the random number is 6 Digit number 
            }
        }else{
    
            throw new RuntimeException(" Can only generate 4 Bit or 6 Digit verification code ");
        }
        return code;
    }

    /** *  Randomly generate string verification code of specified length  * @param length  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 Tool class ：

package com.itheima.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;

/** *  SMS sending tools  */
public class SMSUtils {
    
	public static final String VALIDATE_CODE = "SMS_159620392";// Send SMS verification code 
	public static final String ORDER_NOTICE = "SMS_159771588";// Notification of successful physical examination appointment 

	/** *  Send a text message  * @param phoneNumbers * @param param * @throws ClientException */
	public static void sendShortMessage(String templateCode,String phoneNumbers,String param) throws ClientException{
    
		//  Set timeout - It can be adjusted by itself 
		System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
		System.setProperty("sun.net.client.defaultReadTimeout", "10000");
		//  initialization ascClient Several parameters needed 
		final String product = "Dysmsapi";//  SMS API The product name （ Fixed SMS product name , There is no need to modify ）
		final String domain = "dysmsapi.aliyuncs.com";//  SMS API Product domain name （ Fixed interface address , There is no need to modify ）
		//  Replace it with your AK
		final String accessKeyId = "accessKeyId";//  Yours accessKeyId, Refer to this document procedure 2
		final String accessKeySecret = "accessKeySecret";//  Yours accessKeySecret, Refer to this document procedure 2
		//  initialization ascClient, Not many for now region（ Do not modify ）
		IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
		DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
		IAcsClient acsClient = new DefaultAcsClient(profile);
		//  Assemble request object 
		SendSmsRequest request = new SendSmsRequest();
		//  Use post Submit 
		request.setMethod(MethodType.POST);
		//  Required : Mobile number to be sent . Supports batch calls in comma separated form , The maximum batch size is 1000 Cell phone number , There is a slight delay in the timeliness of batch call compared with single call , It is recommended to use a single call method for SMS of verification code type 
		request.setPhoneNumbers(phoneNumbers);
		//  Required : SMS signature - Can be found in SMS console 
		request.setSignName(" Wisdom and health ");
		//  Required : SMS template - Can be found in SMS console 
		request.setTemplateCode(templateCode);
		//  Optional : Variable substitution in templates JSON strand , If the template content is " dear ${name}, Your verification code is ${code}" when , The value here is 
		//  Friendship tips : If JSON Line break required in , Please refer to the standard JSON Protocol requirements for line replacement , For example, SMS content includes \r\n In the case of JSON Need to be expressed as \\r\\n, Otherwise, it will lead to JSON Failed to parse on the server 
		request.setTemplateParam("{\"code\":\""+param+"\"}");
		//  Optional - Uplink SMS extension code ( The extended code field is controlled in 7 Bit or less , Please ignore this field if there is no special requirement )
		// request.setSmsUpExtendCode("90997");
		//  Optional :outId To extend the fields provided to the business side , Finally, this value will be brought back to the caller in the SMS receipt message 
		// request.setOutId("yourOutId");
		//  If the request fails, there will be ClientException abnormal 
		SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
		if (sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
    
			//  The request is successful 
			System.out.println(" The request is successful ");
		}
	}
}

RedisMessageConstant Constant class ：

package com.itheima.constant;

public class RedisMessageConstant {
    
    public static final String SENDTYPE_ORDER = "001";// Used to cache the verification code sent during the physical examination appointment 
    public static final String SENDTYPE_LOGIN = "002";// It is used to cache the verification code sent during quick login of the mobile phone number 
    public static final String SENDTYPE_GETPWD = "003";// Used to cache the verification code sent when retrieving the password 
}

2.2.3 health_mobile

Create a mobile end project health_mobile, The packing method is war, To hold Controller, stay Controller Pass through Dubbo You can remotely access services related to the service layer , So we need to rely on health_interface Interface Engineering .

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.itheima</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>
    <artifactId>health_mobile</artifactId>
    <packaging>war</packaging>
    <name>healthmobile_web Maven Webapp</name>
    <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.itheima</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>
                    <!--  Designated port  -->
                    <port>80</port>
                    <!--  Request path  -->
                    <path>/</path>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Static resources （CSS、html、img etc. , See information for details ）：

Please add a picture description

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>
  <!--  solve post The statement  -->
  <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>
    <!--  Specify the loaded profile  , Through parameters contextConfigLocation load  -->
    <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>
	<!--  Specify the application name  -->
	<dubbo:application name="health_mobile" />
    <!-- Specify service registry address -->
	<dubbo:registry address="zookeeper://127.0.0.1:2181"/>
    <!-- Batch scan -->
	<dubbo:annotation package="com.itheima.controller" />
    <!--  Timeout global settings  10 minute  check=false  Do not check the service provider , It is recommended to set the development stage to false check=true  Check the service provider at startup , If the service provider does not start, an error is reported  -->
	<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 Related configuration of connection pool -->
	<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：

# Maximum number of objects allocated 
redis.pool.maxActive=200
# To be able to hold on to idel The number of objects in the state 
redis.pool.maxIdle=50
redis.pool.minIdle=10
redis.pool.maxWaitMillis=20000
# When there are no returned objects in the pool , Maximum waiting time 
redis.pool.maxWait=300

# Format ：redis://:[ password ]@[ Server address ]:[ port ]/[db index]
#redis.uri = redis://:[email protected]: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=info, stdout

3. Dynamic display of package list page

The home page of the mobile terminal is /pages/index.html, The effect is as follows ：

Please add a picture description

Click physical examination appointment to directly jump to the list page of physical examination package （/pages/setmeal.html）

3.1 Perfect the page

3.1.1 Show package information 

<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://pqjroc654.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' ? ' There is no limit to sex ' : setmeal.sex == '1' ? ' male ':' Woman '}}</span>
          <span>{
   {setmeal.age}}</span>
        </p>
      </div>
    </a>
  </li>
</ul>

3.1.2 Get package list data 

var vue = new Vue({
    
  el:'#app',
  data:{
    
    setmealList:[]
  },
  mounted (){
    
      // send out ajax request , Get all package data , Assign a value to setmealList model data , For page display 
      axios.get("/setmeal/getAllSetmeal.do").then((res) => {
    
          if(res.data.flag){
    
              // The query is successful , Assign values to model data 
              this.setmealList = res.data.data;
          }else{
    
              // The query fails , Pop up message 
              this.$message.error(res.data.message);
          }
      });
  }
});

3.2 Background code

3.2.1 Controller

stay health_mobile Create in project SetmealController And provide getSetmeal Method , In this method Dubbo Remotely call the package service to obtain the package list data 

package com.itheima.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.constant.MessageConstant;
import com.itheima.entity.Result;
import com.itheima.pojo.Setmeal;
import com.itheima.service.SetmealService;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/setmeal")
public class SetmealController {
    
    @Reference//(check = false)
    private SetmealService setmealService;

    // Get all package information 
    @RequestMapping("/getSetmeal")
    public Result getSetmeal(){
    
        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 Service interface

stay SetmealService Extension in service interface findAll Method 

public List<Setmeal> findAll();

3.2.3 Service implementation class

stay SetmealServiceImpl Implementation in service implementation class findAll Method 

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

3.2.4 Dao Interface

stay SetmealDao Interface findAll Method 

public List<Setmeal> findAll();

3.2.5 Mapper The mapping file

stay SetmealDao.xml Expand... In the mapping file SQL sentence 

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

4. Dynamic display of package details page

Previously, we have completed the dynamic display of the list page of physical examination package , Click any one of the packages to jump to the corresponding package details page （/pages/setmeal_detail.html）, And will carry this package id Submit as a parameter .

Request path format ：http://localhost/pages/setmeal_detail.html?id=10

The information of the current package needs to be displayed on the package details page （ Including pictures 、 Package name 、 Package Introduction 、 Applicable gender 、 Applicable age ）、 Check group information included in this package 、 Inspection item information contained in the inspection group, etc .

4.1 Perfect the page

4.1.1 Get the package in the request parameters id

Has been introduced in the page healthmobile.js file , This file has been encapsulated getUrlParam The method can be based on URL Request the parameter name in the path to get the corresponding value 

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 "";
    }
}

stay setmeal_detail.html Call the method defined above to get the package id Value 

<script>
  var id = getUrlParam("id");
</script>

4.1.2 Get package details 

<script>
    var vue = new Vue({
    
        el:'#app',
        data:{
    
            imgUrl:null,// Picture links corresponding to the package 
            setmeal:{
    }
        },
        mounted(){
    
            axios.post("/setmeal/findById.do?id=" + id).then((response) => {
    
                if(response.data.flag){
    
                    this.setmeal = response.data.data;
                    this.imgUrl = 'http://pqjroc654.bkt.clouddn.com/' + this.setmeal.img;
                }
            });
        }
    });
</script>

4.1.3 Show package information 

<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' ? ' There is no limit to sex ' : setmeal.sex == '1' ? ' male ':' Woman '}}</span>
        <span>{
   {setmeal.age}}</span>
      </p>
    </div>
  </div>
  <div class="table-listbox">
    <div class="box-title">
      <i class="icon-zhen"><span class="path1"></span><span class="path2"></span></i>
      <span> Package details </span>
    </div>
    <div class="box-table">
      <div class="table-title">
        <div class="tit-item flex2"> Project name </div>
        <div class="tit-item flex3"> Project content </div>
        <div class="tit-item flex3"> Project interpretation </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"> Make an appointment now </a>
      </div>
    </div>
  </div>
</div>

4.2 Background code

4.2.1 Controller

stay SetmealController Provided in the findById Method 

// according to id Query package information 
@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 Service interface

stay SetmealService Provided in the service interface findById Method 

public Setmeal findById(int id);

4.2.3 Service implementation class

stay SetmealServiceImpl Implementation in service implementation class findById Method 

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

4.2.4 Dao Interface

stay SetmealDao Interface findById Method 

public Setmeal findById(int id);

4.2.5 Mapper The mapping file

Here we will use mybatis Provided Association query , On the basis of id When querying the package , At the same time, query the inspection groups included in this package , And query the inspection items contained in the inspection group .

SetmealDao.xml file ：

<resultMap type="com.itheima.pojo.Setmeal" id="baseResultMap">
  <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="age" property="age"/>
  <result column="price" property="price"/>
  <result column="remark" property="remark"/>
  <result column="attention" property="attention"/>
  <result column="img" property="img"/>
</resultMap>
<resultMap type="com.itheima.pojo.Setmeal" id="findByIdResultMap" extends="baseResultMap">
  <collection property="checkGroups" javaType="ArrayList" ofType="com.itheima.pojo.CheckGroup" column="id" select="com.itheima.dao.CheckGroupDao.findCheckGroupById">
  </collection>
</resultMap>
<select id="findById" resultMap="findByIdResultMap">
  select * from t_setmeal  where id=#{id}
</select>

CheckGroupDao.xml file ：

<resultMap type="com.itheima.pojo.CheckGroup" id="baseResultMap">
  <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 type="com.itheima.pojo.CheckGroup" id="findByIdResultMap" extends="baseResultMap">
  <collection property="checkItems" javaType="ArrayList" ofType="com.itheima.pojo.CheckItem" column="id" select="com.itheima.dao.CheckItemDao.findCheckItemById">
  </collection>
</resultMap>
<!-- According to the package id Query check item information -->
<select id="findCheckGroupById" resultMap="findByIdResultMap">
  select * from t_checkgroup  
    where id
  	in (select checkgroup_id from t_setmeal_checkgroup where setmeal_id=#{id})
</select>

CheckItemDao.xml file ：

<!-- According to the inspection team id Query check item information -->
<select id="findCheckItemById" resultType="com.itheima.pojo.CheckItem">
  select * from t_checkitem  
    where id
  	in (select checkitem_id from t_checkgroup_checkitem where checkgroup_id=#{id})
</select>

5. Text messaging

5.1 Introduction to SMS service

At present, there are many SMS services provided by third parties on the market , These third-party SMS services will work with various operators （ Move 、 Unicom 、 telecom ） docking , We only need to register as a member and call according to the development documents provided to send text messages . It should be noted that these SMS services are paid services .

In this project, we choose the short message service provided by Alibaba cloud .

SMS service （Short Message Service） It is the ability of a communication service provided by alicloud for users , Support fast SMS verification code 、 SMS notification, etc . Three in one exclusive channel , Real time interconnection with the number carrying network transfer platform of the Ministry of industry and information technology . Telecom level operation and maintenance support , Real time monitoring and automatic switching , The arrival rate is as high as 99%. SMS service API Provide SMS sending 、 Send status query 、 The ability to send SMS in batches , Add a signature on the SMS console 、 After the template is approved , You can call SMS service API Complete SMS sending and other operations .

5.2 Register aliyun account

Alicloud official website ：https://www.aliyun.com/

Click the homepage of the official website to register for free and jump to the following registration page ：
Please add a picture description

5.3 Set SMS signature

After successful registration , Click the login button to login . After logging in, enter the SMS service management page , Select the domestic message menu ：

Please add a picture description

At present, individual users can only apply for signature with verification code as the applicable scenario

5.4 Set SMS template

In the domestic message menu page , Click the template management tab ：

5.5 Set up access keys

Identity authentication is required when sending text messages , SMS can only be sent after authentication . This section is to set up the for identity authentication when sending SMS key And the key . Place the mouse on the current user's Avatar in the upper right corner of the page , A drop-down menu will appear ：
Please add a picture description

Click start using sub users AccessKey Button ：
Please add a picture description Please add a picture description

Create success , among AccessKeyID For accessing SMS services ID,AccessKeySecret As the key .

You can disable the just created... Under the user details page AccessKey：

Please add a picture description

5.6 Send a text message

5.6.1 Import maven coordinate 

<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 Wrapper utility class 

package com.itheima.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;

/** *  SMS sending tools  */
public class SMSUtils {
    
	public static final String VALIDATE_CODE = "SMS_159620392";// Send SMS verification code 
	public static final String ORDER_NOTICE = "SMS_159771588";// Notification of successful physical examination appointment 

	/** *  Send a text message  * @param phoneNumbers * @param param * @throws ClientException */
	public static void sendShortMessage(String templateCode,String phoneNumbers,String param) throws ClientException{
    
		//  Set timeout - It can be adjusted by itself 
		System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
		System.setProperty("sun.net.client.defaultReadTimeout", "10000");
		//  initialization ascClient Several parameters needed 
		final String product = "Dysmsapi";//  SMS API The product name （ Fixed SMS product name , There is no need to modify ）
		final String domain = "dysmsapi.aliyuncs.com";//  SMS API Product domain name （ Fixed interface address , There is no need to modify ）
		//  Replace it with your AK
		final String accessKeyId = "accessKeyId";//  Yours accessKeyId, Refer to this document procedure 2
		final String accessKeySecret = "accessKeySecret";//  Yours accessKeySecret, Refer to this document procedure 2
		//  initialization ascClient, Not many for now region（ Do not modify ）
		IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
		DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
		IAcsClient acsClient = new DefaultAcsClient(profile);
		//  Assemble request object 
		SendSmsRequest request = new SendSmsRequest();
		//  Use post Submit 
		request.setMethod(MethodType.POST);
		//  Required : Mobile number to be sent . Supports batch calls in comma separated form , The maximum batch size is 1000 Cell phone number , There is a slight delay in the timeliness of batch call compared with single call , It is recommended to use a single call method for SMS of verification code type 
		request.setPhoneNumbers(phoneNumbers);
		//  Required : SMS signature - Can be found in SMS console 
		request.setSignName(" Wisdom and health ");
		//  Required : SMS template - Can be found in SMS console 
		request.setTemplateCode(templateCode);
		//  Optional : Variable substitution in templates JSON strand , If the template content is " dear ${name}, Your verification code is ${code}" when , The value here is 
		//  Friendship tips : If JSON Line break required in , Please refer to the standard JSON Protocol requirements for line replacement , For example, SMS content includes \r\n In the case of JSON Need to be expressed as \\r\\n, Otherwise, it will lead to JSON Failed to parse on the server 
		request.setTemplateParam("{\"code\":\""+param+"\"}");
		//  Optional - Uplink SMS extension code ( The extended code field is controlled in 7 Bit or less , Please ignore this field if there is no special requirement )
		// request.setSmsUpExtendCode("90997");
		//  Optional :outId To extend the fields provided to the business side , Finally, this value will be brought back to the caller in the SMS receipt message 
		// request.setOutId("yourOutId");
		//  If the request fails, there will be ClientException abnormal 
		SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
		if (sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
    
			//  The request is successful 
			System.out.println(" The request is successful ");
		}
	}
}

5.6.3 Test SMS sending 

public static void main(String[] args)throws Exception {
    
		SMSUtils.sendShortMessage("SMS_159620392","13812345678","1234");
}
```![ Please add a picture description ](https://img-blog.csdnimg.cn/d6c0d7ec04fb4fb8911b0b0d559cc91d.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/33b16ed1df19422fba1b44100ba2a51b.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/ca8e4f16093e43a6801a841748f2a0db.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/98fb8b0f42e74f749f7411ef17fe65bb.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/a3c96b2ad8f84c10855320095a8d1f05.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/273633b3697e4b7cae13fbc226f5e66c.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/9620c5f4041d484b8e1486fba5a8ba6d.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/69799dbcbc5548709dd4209519f0e24b.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/8a125cd151ba45f889237205e8a833cd.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/9e64c38eaf2a4912bf9139b70bd97580.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/b22b952111604b71b936aa729c4a7a6b.png)
![ Please add a picture description ](https://img-blog.csdnimg.cn/5ede96f5a9664adbaa587abf2f6a91ac.png)
原网站

版权声明
本文为[fat ۣۖ tiger ۣۖ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/174/202206230438164983.html

边栏推荐

猜你喜欢

随机推荐