认清现实,放弃幻想,准备斗争
一、运行srb-site
1、解压
srb_site
2、运行
npm run dev
二、前端页面整合
pages/register.vue
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
@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包下
@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
public interface UserInfoService extends IService<UserInfo> {
void register(RegisterVO registerVO);
}
实现:UserInfoServiceImpl
@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
//注册
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注解
参考博客