前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微服务项目:尚融宝(27)(后端搭建:注册功能)

微服务项目:尚融宝(27)(后端搭建:注册功能)

作者头像
一个风轻云淡
发布2022-11-15 14:29:55
2060
发布2022-11-15 14:29:55
举报
文章被收录于专栏:java学习java

一、运行srb-site

1、解压

srb_site

2、运行

npm run dev

二、前端页面整合

pages/register.vue

代码语言:javascript
复制
 methods: {
    //发短信  
    send() {
      if (!this.userInfo.mobile) {
        this.$message.error('请输入手机号')
        return
      }

      //防止重复提交
      if (this.sending) return
      this.sending = true

      //倒计时
      this.timeDown()

      //远程调用发送短信的接口
      this.$axios
        .$get('/api/sms/send/' + this.userInfo.mobile)
        .then((response) => {
          this.$message.success(response.message)
        })
    },

    //倒计时
    timeDown() {
      console.log('进入倒计时')
      this.leftSecond = this.second
      //创建定时器
      const timmer = setInterval(() => {
        //计数器减一
        this.leftSecond--
        if (this.leftSecond <= 0) {
          //停止定时器
          clearInterval(timmer)
          //还原计数器
          this.leftSecond = this.second
          //还原按钮状态
          this.sending = false
        }
      }, 1000)
    },
  },

需求 

一、后端接口

1、创建VO对象

service-core中创建vo

代码语言:javascript
复制
@Data
@ApiModel(description="注册对象")
public class RegisterVO {

    @ApiModelProperty(value = "用户类型")
    private Integer userType;

    @ApiModelProperty(value = "手机号")
    private String mobile;

    @ApiModelProperty(value = "验证码")
    private String code;

    @ApiModelProperty(value = "密码")
    private String password;
}

2、定义常量

UserInfo中添加常量

public static final Integer STATUS_NORMAL = 1; public static final Integer STATUS_LOCKED = 0;

3、引入MD5工具类

guigu-common中util包,引入工具类:

MD5.java:MD5加密

4、Controller

注意:将controller包中的UserInfoController移植到controller.api包下

代码语言:javascript
复制
@Api(tags = "会员接口")
@RestController
@RequestMapping("/api/core/userInfo")
@Slf4j
@CrossOrigin
public class UserInfoController {

    @Resource
    private UserInfoService userInfoService;

    @Resource
    private RedisTemplate redisTemplate;

    @ApiOperation("会员注册")
    @PostMapping("/register")
    public R register(@RequestBody RegisterVO registerVO){

        String mobile = registerVO.getMobile();
        String password = registerVO.getPassword();
        String code = registerVO.getCode();

        //MOBILE_NULL_ERROR(-202, "手机号不能为空"),
        Assert.notEmpty(mobile, ResponseEnum.MOBILE_NULL_ERROR);
        //MOBILE_ERROR(-203, "手机号不正确"),
        Assert.isTrue(RegexValidateUtils.checkCellphone(mobile), ResponseEnum.MOBILE_ERROR);
        //PASSWORD_NULL_ERROR(-204, "密码不能为空"),
        Assert.notEmpty(password, ResponseEnum.PASSWORD_NULL_ERROR);
        //CODE_NULL_ERROR(-205, "验证码不能为空"),
        Assert.notEmpty(code, ResponseEnum.CODE_NULL_ERROR);

        //校验验证码
        String codeGen = (String)redisTemplate.opsForValue().get("srb:sms:code:" + mobile);
        //CODE_ERROR(-206, "验证码不正确"),
        Assert.equals(code, codeGen, ResponseEnum.CODE_ERROR);

        //注册
        userInfoService.register(registerVO);
        return R.ok().message("注册成功");
    }
}

5、Service

接口:UserInfoService

代码语言:javascript
复制
public interface UserInfoService extends IService<UserInfo> {

    void register(RegisterVO registerVO);
}

实现:UserInfoServiceImpl 

代码语言:javascript
复制
@Service
public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService {

    @Resource
    private UserAccountMapper userAccountMapper;

    @Transactional(rollbackFor = {Exception.class})
    @Override
    public void register(RegisterVO registerVO) {

        //判断用户是否被注册
        QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("mobile", registerVO.getMobile());
        Integer count = baseMapper.selectCount(queryWrapper);
        //MOBILE_EXIST_ERROR(-207, "手机号已被注册"),
        Assert.isTrue(count == 0, ResponseEnum.MOBILE_EXIST_ERROR);

        //插入用户基本信息
        UserInfo userInfo = new UserInfo();
        userInfo.setUserType(registerVO.getUserType());
        userInfo.setNickName(registerVO.getMobile());
        userInfo.setName(registerVO.getMobile());
        userInfo.setMobile(registerVO.getMobile());
        userInfo.setPassword(MD5.encrypt(registerVO.getPassword()));
        userInfo.setStatus(UserInfo.STATUS_NORMAL); //正常
        //设置一张静态资源服务器上的头像图片
        userInfo.setHeadImg("https://srb-file.oss-cn-beijing.aliyuncs.com/avatar/07.jpg");
        baseMapper.insert(userInfo);

        //创建会员账户
        UserAccount userAccount = new UserAccount();
        userAccount.setUserId(userInfo.getId());
        userAccountMapper.insert(userAccount);
    }
}

二、前端整合

pages/register.vue

代码语言:javascript
复制
//注册
register() {
  this.$axios
    .$post('/api/core/userInfo/register', this.userInfo)
    .then((response) => {
      this.step = 2
    })
},

 今日bug

解决{已拦截跨源请求:同源策略禁止读取位于 xxx 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-O)}

原因

看到CORS 头缺少 'Access-Control-Allow-O这个就知道自己跨域了,跨域是指你违背了同源策略,同源策略规定了三个东西一致:协议名、主机名、端口号。 比如:http://localhost:8080/发送ajax请求到http://localhost:8090/服务器,服务器收到了请求,并把数据返回给http://localhost:8080/,但是浏览器没有进一步的把数据给你,因为发现这哥们跨域了,算了,这数据我握在手里了,不给你了,这就是跨域。(这里一定要注意:请求发了,服务器收了,还返回了数据,但是你拿不到,可以理解为被海关拦截了你的包裹)

 解决

解决方式: 一:最标准的方式(cors)         不用前端做任何事情,其实就是写服务器的人,在服务器里面给你返回响应的时候,加几个特殊的响应头,但是不是随便配置,配置之后会导致任何人都能找这台服务器要数据 二:jsonp         借助scrpt里面的src属性,在引入外部资源的时候,不受同源策略的限制,属于是卡bug了,开发时使用微乎其微,该方式是前端使用一些特殊写法,后端还得配合前端且只能解决get请求,似乎在高版本浏览器不适用,实属鸡肋了 三:配置代理服务器         这里服务器和服务器之前传输数据是后端了,不用ajax,就不存在同源问题了,这里可以用①nginx(学习成本较高)②vue-cil 四:如果是springboot项目的话,只需要在对应的controller层加上@CrossOrigin注解

参考博客 

跨域问题

http://t.csdn.cn/R4jjg

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、运行srb-site
    • 1、解压
      • 2、运行
      • 二、前端页面整合
        • 需求 
        • 一、后端接口
          • 1、创建VO对象
            • 2、定义常量
              • 3、引入MD5工具类
                • 4、Controller
                  • 5、Service
                  • 二、前端整合
                  •  今日bug
                    • 原因
                      •  解决
                      相关产品与服务
                      验证码
                      腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档