微信小程序-美容预约平台

一、实训时间：

时间：2021.11.29-2021.12.10

二、实训目的：

（1）通过项目实战，将理论知识转化为实践能力，提高动手能力。

（2）使用微信开发者工具开发，实现前后端分离的方法开发程序

（3）通过学习企业新技术，扩展视野，掌握技术发展动向

（4）通过深⼊学习，提高学习兴趣，提升学习能力

三、实训内容：

1.项目名称：美容预约

2.项目框架：SprinBoot，JavaScript，MyBatis

3.项目介绍：

（1）项目效果：

        

（2）项目介绍：

  本案例通过微信小程序构建小程序端页面，利用滑块组件实现图片的轮播效果。通过 SpringBoot+SpringMVC+Mybatis 进行后台架构搭建，并且实现获取不同类型的美甲预约，图片滚动，短信的发送以及美容的预约等功能，使用异步 加载获取后台数据库存储的美甲预约数据，完成对用户预约功能，美甲推荐，基础性，等功能。

（3）项目结构：

思维导图：

美容预约

前端

后端

JavaScript

Ajax

SpringBoot

Html5和css

Mybatis

服务端：

前端结构：

数据库结构：

（4）项目交互实现：

前端与服务端交互

（1）交互技术：Ajax

（2）从前端向服务端传值有两种

1.将要传递的值放在ajax的data属性里，作为属性值传递。前端ajax请求，后端将id作为ajax的data属性值传递

2. 将要传递的值加在url 路径的后面，用 “?getId= “+getid 连接，占位传过去。（不安全）相当于给getId = 赋值

（3）从后端向前端传值

前端：只要在后端的路径方法里面将返回值由void（没有返回值），改为自己需要的值，或者类型都行。这样就是同样在前端的success里填写返回的参数就行，然后放在需要的页面位置。

后端：就是根据情况，列如根据id查询数据，然后在页面显示。前端通过ajax的data属性，把id给传递到后端。后端接收id，然后查询数据，返回结果到data里。
前端在从data里取值放在页面所需要的位置。

      数据库与服务端的交互

1. 交互技术：MyBatis
2. 连接数据库：

在resources包下的application.properties配置文件中配置连接数据库的账户，密码，驱动，连接地址，配置加载mapper文件

1. 后端操作数据库：

需要在mapper包中，在xml文件书写sql语句，id要与方法名一致。当传入的值在两个或两个以上就需要给值增加名字。

<!--查询单个-->

    <select id="queryById" resultMap="OrderMap">

        select

          o_id, message, dur, subtime, status, u_id, su_name, s_name, wx_name, code, tel

        from order

        where o_id = #{oId}

    </select>

1. 项目功能实现：
   • 短信验证

需要的依赖：

<dependency>

            <groupId>com.aliyun</groupId>

            <artifactId>aliyun-java-sdk-core</artifactId>

            <version>4.5.16</version>

        </dependency>

        <dependency>

            <groupId>com.alibaba</groupId>

            <artifactId>fastjson</artifactId>

            <version>1.2.47</version>

        </dependency>

  <dependency>

         <groupId>org.apache.shiro</groupId>

        <artifactId>shiro-core</artifactId>

            <version>1.3.2</version>

</dependency>

短信发送过程

DefaultProfile profile = DefaultProfile.getProfile("cn-qingdao", "LTAI5tCLnaB71m74dtS4yCSx", "clYFDA0yfLbvdy5M758wrZAOWRPyy1");

            /** use STS Token

             DefaultProfile profile = DefaultProfile.getProfile(

             "<your-region-id>",           // The region ID

             "<your-access-key-id>",       // The AccessKey ID of the RAM account

             "<your-access-key-secret>",   // The AccessKey Secret of the RAM account

             "<your-sts-token>");          // STS Token

             **/

            //创建用户

        IAcsClient client = new DefaultAcsClient(profile);

        CommonRequest request = new CommonRequest();

        request.setSysMethod(MethodType.POST);

        request.setSysDomain("dysmsapi.aliyuncs.com");

        request.setSysVersion("2017-05-25");

        request.setSysAction("SendSms");

        request.putQueryParameter("PhoneNumbers", tel);

        request.putQueryParameter("SignName", "技术汪");

        request.putQueryParameter("TemplateCode", "SMS_227747205");

        //自动生成16位随机数，剪切前4个字符

        String cude = UUID.randomUUID().toString().substring(0,4);

        //创建map集合，把cude存入map集合里（因为map集合与json集合相似，更好的转换）

        HashMap<String,String> map = new HashMap<>();

        map.put("code",cude);

        //将map集合转换成JSON数据格式

        String jsonString = JSONObject.toJSONString(map);

        request.putQueryParameter("TemplateParam", jsonString);

        try {

             CommonResponse response = client.getCommonResponse(request);

             //将json数据转换成对象形式

             JSONObject jsonObject = JSONObject.parseObject(response.getData());

             //将对象里的cude强转为String

             String s =(String)jsonObject.get("Code");

             if (s.equalsIgnoreCase("OK")){

                 return cude;

             }

        } catch (Exception e) {

             e.printStackTrace();

        }

        return null;

    }

• • 拦截器

作用：属于AOP的一种应用，作用类似于过滤器，但是拦截器只能对Controller请求进行拦截，对其他的直接访问静态资源的请求无法拦截处理。

在本项目的作用是检查用户登陆是否过期。

具体实现：

@Controller

public class OrderInterceptor implements HandlerInterceptor {

    @Autowired

    private SysUserService sysUserService;

    public static String URI="/order";

    @Override

    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        String requestURI =  request.getRequestURI();

        if (requestURI.contains(URI)){

            //获取请求中的token

           String token = request.getHeader("token");

           //去数据库中获取token进行验证

            // 拿着token去数据库中的user表找数据 如果能找到----验证成功

            SysUser sysUser = sysUserService.queryByToken(token);

            if (sysUser!= null){

                return true;

            }

            String jsonString = JSONObject.toJSONString("用户信息过期，请重新登录");

            response.setContentType("text/html;charset = UTF-8");

            response.getWriter().write(jsonString);

            response.getWriter().flush();

            response.getWriter().close();

            return false;

        }

        return true;

    }

}

• • 轮播图

实现思路：

1. 1. 1. 前端通过for循环发送请求实现照片的轮播

<block wx:for="{{images}}" wx:key="lb">

    <swiper-item>

      <image src="{{item.url}}"> </image>

    </swiper-item>

  </block>

1. 1. 1. 通过javaScript函数和ajax技术发送请求到后端

wx.request({

      url: 'http://localhost:8080/pic/queryByType?type=lb',

      method:'GET',

      success:function(res){

      //将res中的data赋值给page中的data中的images

        that.setData({

          //赋值

          images:res.data

        })

      }

   })

• • 页面跳转

从跳转的方式（或说成打开新页面的方式）来说大致可分为：请求转发，请求重定向 和 TAB页跳转(有过web经验的话，应该很清楚两种方式的区别)，部分出自官方文档。

代码：

//跳转到详情页

  toDetail: function(options){

    var id = options.currentTarget.dataset.id

    //页面跳转

    wx.navigateTo({

      url: '/pages/detail/detail?id='+id,

    })

  }