小程序与后端联调踩坑

小程序与后端联调踩坑

本次练习是以springboot作为后端开发框架、微信小程序做前端交互。

后端代码截图：

@RestController
@Api(value="用户注册登录的接口", tags= {"注册和登录的controller"})
public class RegistLoginController  {
    @Autowired
    private UserService userService;
    @ApiOperation(value="用户注册", notes="用户注册的接口")
    @PostMapping("/regist")
    public IMoocJSONResult regist(@RequestBody Users user) throws Exception {
        // 1. 判断用户名和密码必须不为空
        if (StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())) {
            return IMoocJSONResult.errorMsg("用户名和密码不能为空");
        }
        // 2. 判断用户名是否存在
        boolean usernameIsExist = userService.queryUsernameIsExist(user.getUsername());
        // 3. 保存用户，注册信息
        if (!usernameIsExist) {
            user.setNickname(user.getUsername());
            user.setPassword(MD5Utils.getMD5Str(user.getPassword()));
            user.setFansCounts(0);
            user.setReceiveLikeCounts(0);
            user.setFollowCounts(0);
            userService.saveUser(user);
        } else {
            return IMoocJSONResult.errorMsg("用户名已经存在，请换一个再试");
        }
        return IMoocJSONResult.ok();
    }
}

service接口层暂时提供两个方法，分别为注册时查询用户是否存在和保存用户。

/**
     * @Description: 判断用户名是否存在
     */
    public boolean queryUsernameIsExist(String username);
    /**
     * @Description: 保存用户(用户注册)
     */
    public void saveUser(Users user)

实现代码：

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UsersMapper userMapper;
    @Autowired
    private Sid sid;
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public boolean queryUsernameIsExist(String username) {
        Users user = new Users();
        user.setUsername(username);
        Users result = userMapper.selectOne(user);
        return result == null ? false : true;
    }
    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveUser(Users user) {
//        引用自增id，工具包引入
        String userId = sid.nextShort();
        user.setId(userId);
        userMapper.insert(user);
    }
}

前端小程序代码，较为简单：

<view>
    <view class="login-icon">
        <image class="login-img" src="../resource/images/dsp.jpg"></image>
    </view>
    <view class="login-from">
        <form bindsubmit='doRegist'>
            <!--账号-->
            <view class="inputView">
                <image class="nameImage" src="../resource/images/username.png"></image>
                <label class="loginLabel">账号</label>
                <input name="username" class="inputText" placeholder="请输入账号"/>
            </view>
            <view class="line"></view>
            <!--密码-->
            <view class="inputView">
                <image class="keyImage" src="../resource/images/password.png"></image>
                <label class="loginLabel">密码</label>
                <input name="password" class="inputText" password="true" placeholder="请输入密码"/>
            </view>
            <!--按钮-->
            <view>
                <button class="loginBtn" type="primary" form-type='submit'>注册</button>
            </view>
            <view>
                <button class="goLoginBtn" type="warn" bindtap="goLoginPage">返回登录</button>
            </view>
        </form>
    </view>
</view>

准备工作做完之后，开始小程序与后端程序的联调：

image-20180728222243912.png

显示在app.js中绑定serverUrl，即后端程序主机地址（开发环境如此设置），注意此次不能填loacalhost，而是所出局域网所分配的地址。

//app.js
App({
  serverUrl: "http://192.168.1.183:8081",
  userInfo: null
})

接着就是要在详情页设置开发环境，跳过域名设置，否则会控制台会提示错误：

并且在app.json启用debug。

值得注意的是在绑定主机地址时要写全地址，比如写成192.168.1.183:8081是会报错的，应写为http://192.168.1.183:8081。

前端调用后端接口时，应先仔细阅读后端提供接口文档：

const app = getApp()
Page({
    data: {
    },
    doRegist: function(e){
      var formObject=e.detail.value;
      var username =formObject.username;
      var password=formObject.password;
      // 简单验证
        if(username.length==0||password.length==0){
          wx.showToast({
            title: '用户名和密码不能为空！',
            icon: 'none',
           //延迟时间
            duration: 3000,
          })
        }
        else{
          var serverUrl=app.serverUrl;
          wx.request({
            url: serverUrl+'/regist',//此次对应后端提供接口
            method: "POST",//此次对应后端提供接口
            data:{
              username: username,
              password: password
            },
            header:{
              'content-type': 'application/json' // 默认值
            },
            success:function(res){
              console.log(res.data);
            }
          })
        }
    }
})

对应springboot整合swagger2接口生成文档：

image-20180728222853707.png

小程序的回调函数返回的数据要与swagger页面调试返回的状态吗一致，这样联调就成功了。