}else {
return R.error().message(“短信发送失败”);
}
}
}
3、编写service
- service接口
public interface MsmService {
//发送短信的方法
boolean sendMsm(HashMap<String, Object> map, String phone);
}
- serviceImpl
@Service
public class MsmServiceImpl implements MsmService {
//发送短信的方法
@Override
public boolean sendMsm(HashMap<String, Object> map, String phone) {
if (StringUtils.isEmpty(phone))return false;
//参数1：地域节点
//参数2：AccessKey ID
//参数3：AccessKey Secret
DefaultProfile profile = DefaultProfile.getProfile(“default”, “LTAI4GBABS7Sq8MLf2RNwLuu”, “ynfsD31FLdcRoQVFSIdHP7AeoKaf4o”);
DefaultAcsClient client = new DefaultAcsClient(profile);
//设置相关固定参数
CommonRequest request = new CommonRequest();
//request.setProtocol(ProtocolType.HTTPS);
request.setSysMethod(MethodType.POST); //提交方式，默认不能改
request.setSysDomain(“dysmsapi.aliyuncs.com”);//请求阿里云哪里，默认不能改
request.setSysVersion(“2017-05-25”);//版本号
request.setSysAction(“SendSms”);//请求哪个方法
//设置发送相关参数
request.putQueryParameter(“PhoneNumbers”,phone);//设置要发送的【手机号】
request.putQueryParameter(“SignName”,“阿昌日语在线教育网站”);//申请阿里云短信服务的【签名名称】
request.putQueryParameter(“TemplateCode”,“SMS_212711286”);//申请阿里云短信服务的【模版中的 模版CODE】
//要求传递的code验证码为jason格式，可以使用JSONObject.toJSONString()将map转为json格式
request.putQueryParameter(“TemplateParam”, JSONObject.toJSONString(map));
//最终发送
try {
CommonResponse response = client.getCommonResponse(request);
return response.getHttpResponse().isSuccess();
} catch (ClientException e) {
e.printStackTrace();
return false;
}
}
}
======================================================================
1、在service模块下创建子模块service-ucenter
2、使用代码生成器生成代码
（1）创建ucenter_member表
CREATE TABLE ucenter_member (
id char(19) NOT NULL COMMENT ‘会员id’,
openid varchar(128) DEFAULT NULL COMMENT ‘微信openid’,
mobile varchar(11) DEFAULT ‘’ COMMENT ‘手机号’,
password varchar(255) DEFAULT NULL COMMENT ‘密码’,
nickname varchar(50) DEFAULT NULL COMMENT ‘昵称’,
sex tinyint(2) unsigned DEFAULT NULL COMMENT ‘性别 1 女，2 男’,
age tinyint(3) unsigned DEFAULT NULL COMMENT ‘年龄’,
avatar varchar(255) DEFAULT NULL COMMENT ‘用户头像’,
sign varchar(100) DEFAULT NULL COMMENT ‘用户签名’,
is_disabled tinyint(1) NOT NULL DEFAULT ‘0’ COMMENT ‘是否禁用 1（true）已禁用， 0（false）未禁用’,
is_deleted tinyint(1) NOT NULL DEFAULT ‘0’ COMMENT ‘逻辑删除 1（true）已删除， 0（false）未删除’,
gmt_create datetime NOT NULL COMMENT ‘创建时间’,
gmt_modified datetime NOT NULL COMMENT ‘更新时间’,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=‘会员表’;
Data for table “ucenter_member”
INSERT INTO ucenter_member VALUES (‘1’,NULL,‘13700000001’,‘96e79218965eb72c92a549dd5a330112’,‘小三123’,1,5,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-01 12:11:33’,‘2019-11-08 11:56:01’),(‘1080736474267144193’,NULL,‘13700000011’,‘96e79218965eb72c92a549dd5a330112’,‘用户XJtDfaYeKk’,1,19,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-02 12:12:45’,‘2019-01-02 12:12:56’),(‘1080736474355224577’,NULL,‘13700000002’,‘96e79218965eb72c92a549dd5a330112’,‘用户wUrNkzAPrc’,1,27,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-02 12:13:56’,‘2019-01-02 12:14:07’),(‘1086387099449442306’,NULL,‘13520191388’,‘96e79218965eb72c92a549dd5a330112’,‘用户XTMUeHDAoj’,2,20,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-19 06:17:23’,‘2019-01-19 06:17:23’),(‘1086387099520745473’,NULL,‘13520191389’,‘96e79218965eb72c92a549dd5a330112’,‘用户vSdKeDlimn’,1,21,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-19 06:17:23’,‘2019-01-19 06:17:23’),(‘1086387099608825858’,NULL,‘13520191381’,‘96e79218965eb72c92a549dd5a330112’,‘用户EoyWUVXQoP’,1,18,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-19 06:17:23’,‘2019-01-19 06:17:23’),(‘1086387099701100545’,NULL,‘13520191382’,‘96e79218965eb72c92a549dd5a330112’,‘用户LcAYbxLNdN’,2,24,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-19 06:17:23’,‘2019-01-19 06:17:23’),(‘1086387099776598018’,NULL,‘13520191383’,‘96e79218965eb72c92a549dd5a330112’,‘用户dZdjcgltnk’,2,25,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-19 06:17:23’,‘2019-01-19 06:17:23’),(‘1086387099852095490’,NULL,‘13520191384’,‘96e79218965eb72c92a549dd5a330112’,‘用户wNHGHlxUwX’,2,23,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-01-19 06:17:23’,‘2019-01-19 06:17:23’),(‘1106746895272849410’,‘o1R-t5u2TfEVeVjO9CPGdHPNw-to’,NULL,NULL,‘檀梵’',NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/zZfLXcetf2Rpsibq6HbPUWKgWSJHtha9y1XBeaqluPUs6BYicW1FJaVqj7U3ozHd3iaodGKJOvY2PvqYTuCKwpyfQ/132’,NULL,0,0,‘2019-03-16 10:39:57’,‘2019-03-16 10:39:57’),(‘1106822699956654081’,NULL,NULL,NULL,NULL,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-03-16 15:41:10’,‘2019-03-16 15:41:10’),(‘1106823035660357634’,‘o1R-t5i4gENwHYRb5lVFy98Z0bdk’,NULL,NULL,‘GaoSir’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJI53RcCuc1no02os6ZrattWGiazlPnicoZQ59zkS7phNdLEWUPDk8fzoxibAnXV1Sbx0trqXEsGhXPw/132’,NULL,0,0,‘2019-03-16 15:42:30’,‘2019-03-16 15:42:30’),(‘1106823041599492098’,NULL,NULL,NULL,NULL,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-03-16 15:42:32’,‘2019-03-16 15:42:32’),(‘1106823115788341250’,‘o1R-t5l_3rnbZbn4jWwFdy6Gk6cg’,NULL,NULL,‘换个网名哇、’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/jJHyeM0EN2jhB70LntI3k8fEKe7W6CwykrKMgDJM4VZqCpcxibVibX397p0vmbKURGkLS4jxjGB0GpZfxCicgt07w/132’,NULL,0,0,‘2019-03-16 15:42:49’,‘2019-03-16 15:42:49’),(‘1106826046730227714’,‘o1R-t5gyxumyBqt0CWcnh0S6Ya1g’,NULL,NULL,‘我是Helen’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKDRfib8wy7A2ltERKh4VygxdjVC1x5OaOb1t9hot4JNt5agwaVLdJLcD9vJCNcxkvQnlvLYIPfrZw/132’,NULL,0,0,‘2019-03-16 15:54:28’,‘2019-03-16 15:54:28’),(‘1106828185829490690’,‘o1R-t5nNlou5lRwBVgGNJFm4rbc4’,NULL,NULL,‘ 虎头’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKxCqRzuYWQmpwiaqQEjNxbC7WicebicXQusU306jgmfoOzUcFg1qaDq5BStiblwBjw5dUOblQ2gUicQOQ/132’,NULL,0,0,‘2019-03-16 16:02:58’,‘2019-03-16 16:02:58’),(‘1106830599651442689’,‘o1R-t5hZHQB1cbX7HZJsiM727_SA’,NULL,NULL,‘是吴啊’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ9CsqApybcs7f3Dyib9IxIh0sBqJb7LicbjU4WticJFF0PVwFvHgtbFdBwfmk3H2t3NyqmEmVx17tRA/132’,NULL,0,0,‘2019-03-16 16:12:34’,‘2019-03-16 16:12:34’),(‘1106830976199278593’,‘o1R-t5meKOoyEJ3-IhWRCBKFcvzU’,NULL,NULL,‘我才是Helen’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epMicP9UT6mVjYWdno0OJZkOXiajG0sllJTbGJ9DYiceej2XvbDSGCK8LCF7jv1PuG2uoYlePWic9XO8A/132’,NULL,0,0,‘2019-03-16 16:14:03’,‘2019-03-16 16:14:03’),(‘1106831936900415490’,‘o1R-t5jXYSWakGtnUBnKbfVT5Iok’,NULL,NULL,‘文若姬’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/3HEmJwpSzguqqAyzmBwqT6aicIanswZibEOicQInQJI3ZY1qmu59icJC6N7SahKqWYv24GvX5KH2fibwt0mPWcTJ3fg/132’,NULL,0,0,‘2019-03-16 16:17:52’,‘2019-03-16 16:17:52’),(‘1106832491064442882’,‘o1R-t5sud081Qsa2Vb2xSKgGnf_g’,NULL,NULL,‘Peanut’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-03-16 16:20:04’,‘2019-03-16 16:20:04’),(‘1106833021442510849’,‘o1R-t5lsGc3I8P5bDpHj7m_AIRvQ’,NULL,NULL,‘食物链终结者’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/MQ7qUmCprK9am16M1Ia1Cs3RK0qiarRrl9y8gsssBjIZeS2GwKSrnq7ZYhmrzuzDwBxSMMAofrXeLic9IBlW4M3Q/132’,NULL,0,0,‘2019-03-16 16:22:11’,‘2019-03-16 16:22:11’),(‘1191600824445046786’,NULL,‘15210078344’,‘96e79218965eb72c92a549dd5a330112’,‘IT妖姬’,1,5,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-11-05 14:19:10’,‘2019-11-08 18:04:43’),(‘1191616288114163713’,NULL,‘17866603606’,‘96e79218965eb72c92a549dd5a330112’,‘xiaowu’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-11-05 15:20:37’,‘2019-11-05 15:20:37’),(‘1195187659054329857’,NULL,‘15010546384’,‘96e79218965eb72c92a549dd5a330112’,‘qy’,NULL,NULL,‘http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoj0hHXhgJNOTSOFsS4uZs8x1ConecaVOB8eIl115xmJZcT4oCicvia7wMEufibKtTLqiaJeanU2Lpg3w/132’,NULL,0,0,‘2019-11-15 11:51:58’,‘2019-11-15 11:51:58’);
（2）生成代码
@Test
public void run() {
// 1、创建代码生成器
AutoGenerator mpg = new AutoGenerator();
// 2、全局配置
GlobalConfig gc = new GlobalConfig();
String projectPath = System.getProperty(“user.dir”);
gc.setOutputDir(“D:\JavaStudy\gulixueyuan\guli_parent\service\service-ucenter” + “/src/main/java”); //输出目录
gc.setAuthor(“achang”); //作者名
gc.setOpen(false); //生成后是否打开资源管理器
gc.setFileOverride(false); //重新生成时文件是否覆盖
gc.setServiceName(“%sService”); //去掉Service接口的首字母I
gc.setIdType(IdType.ID_WORKER_STR); //主键策略
gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型
gc.setSwagger2(true);//开启Swagger2模式
mpg.setGlobalConfig(gc);
// 3、数据源配置
DataSourceConfig dsc = new DataSourceConfig();
dsc.setUrl(“jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8”);
dsc.setDriverName(“com.mysql.cj.jdbc.Driver”);
dsc.setUsername(“root”);
dsc.setPassword(“00000”);
dsc.setDbType(DbType.MYSQL);
mpg.setDataSource(dsc);
// 4、包配置
PackageConfig pc = new PackageConfig();
//生成包：com.achang.eduservice
pc.setModuleName(“serviceUcenter”); //模块名
pc.setParent(“com.achang”);
//生成包：com.achang.oss.controller
pc.setController(“controller”);
pc.setEntity(“entity”);
pc.setService(“service”);
pc.setMapper(“mapper”);
mpg.setPackageInfo(pc);
// 5、策略配置
StrategyConfig strategy = new StrategyConfig();
strategy.setInclude(“ucenter_member”);//根据数据库哪张表生成，有多张表就加逗号继续填写
strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略
strategy.setTablePrefix(pc.getModuleName() + “_”); //生成实体时去掉表前缀
strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略
strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作
strategy.setRestControllerStyle(true); //restful api风格控制器
strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符
mpg.setStrategy(strategy);
// 6、执行
mpg.execute();
}
3、配置application.properties
服务端口
server.port=8006
服务名
spring.application.name=service-ucenter
mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=00000
redis
spring.redis.host=47.110.247.184
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000
spring.redis.password=achang@123456
spring.redis.lettuce.pool.max-active=20
spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间(负数表示没限制)
spring.redis.lettuce.pool.max-idle=5
spring.redis.lettuce.pool.min-idle=0
#最小空闲
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/achang/serviceUcenter/mapper/xml/*.xml
#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
4、创建启动类
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)//取消数据源自动配置
@ComponentScan(“com.achang”)
@MapperScan(“com.achang.serviceUcenter.mapper”)
public class serviceUcenterMain8006 {
public static void main(String[] args) {
SpringApplication.run(serviceUcenterMain8006.class,args);
}
}
1、创建LoginVo和RegisterVo用于数据封装
- LoginVo
//登录对象
@Data
public class LoginVo {
private String phone;
private String password;
}
- RegisterVo
@Data
public class RegisterVo {
private String nickname;
private String mobile;
private String password;
private String code;
}
2、创建controller编写登录和注册方法
- UcenterMemberController
@RestController
@RequestMapping(“/serviceUcenter/ucenter-member”)
@CrossOrigin
public class UcenterMemberController {
@Autowired
private UcenterMemberService ucenterMemberService;
//登录
@PostMapping(“/login”)
public R login(@RequestBody LoginVo loginVo){
//返回token，使用jwt生成
String token = ucenterMemberService.login(loginVo);
return R.ok().data(“token”,token);
}
//注册
@PostMapping(“/register”)
public R register(@RequestBody RegisterVo registerVo){
ucenterMemberService.register(registerVo);
return R.ok();
}
}
3、创建service接口和实现类
- 接口
public interface UcenterMemberService extends IService {
//登录的方法
String login(LoginVo loginVo);
//注册的办法
void register(RegisterVo registerVo);
}
- Impl
@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {
@Autowired
private RedisTemplate<String,String> redisTemplate;
//登录的方法
@Override
public String login(LoginVo loginVo) {
//获取手机号和密码
String phone = loginVo.getPhone();
String password = loginVo.getPassword();
//判断输入的手机号和密码是否为空
if (StringUtils.isEmpty(password) || StringUtils.isEmpty(phone)){
throw new AchangException(20001,“手机号或密码为空”);
}
//判断手机号是否正确
QueryWrapper wrapper = new QueryWrapper<>();
wrapper.eq(“mobile”,phone);
UcenterMember ucenterMember = baseMapper.selectOne(wrapper);
if (ucenterMember == null){
throw new AchangException(20001,“手机号不存在”);
}
//判断密码是否正确
// MD5加密是不可逆性的，不能解密，只能加密
//将获取到的密码经过MD5加密与数据库比较
if (!MD5.encrypt(password).equals(ucenterMember.getPassword())){
throw new AchangException(20001,“密码不正确”);
}
//判断用户是否禁用
if (ucenterMember.getIsDisabled()){
throw new AchangException(20001,“用户被禁用”);
}
//生成jwtToken
String token = JwtUtils.getJwtToken(ucenterMember.getId(), ucenterMember.getNickname());
return token;
}
//注册的方法
@Override
public void register(RegisterVo registerVo) {
//获取前端传来的数据
String nickname = registerVo.getNickname(); //昵称
String code = registerVo.getCode(); //验证码
String mobile = registerVo.getMobile(); //手机号
String password = registerVo.getPassword(); //密码
//非空判断
if (StringUtils.isEmpty(nickname)
||StringUtils.isEmpty(code)
||StringUtils.isEmpty(mobile)
||StringUtils.isEmpty(password)){
throw new AchangException(20001,“传来的数据有空值，注册失败”);
}
//判断验证码
//获取redis验证码，根据手机号获取
// String redisCode = redisTemplate.opsForValue().get(mobile);
// if (!code.equals(redisCode)){
// throw new AchangException(20001,“注册失败”);
// }
//阿昌阿里云没审核通过，尴尬，就先直接定死一个验证码好了
if (!code.equals(“7777”)){
throw new AchangException(20001,“验证码不正确，注册失败”);
}
//手机号不能重复
QueryWrapper wrapper = new QueryWrapper<>();
wrapper.eq(“mobile”,mobile);
Integer count = baseMapper.selectCount(wrapper);
if (count>=1){
throw new AchangException(20001,“手机号重复，注册失败”);
}
//数据添加到数据库中
UcenterMember member = new UcenterMember();
member.setPassword(MD5.encrypt(password));//密码加密
member.setMobile(mobile);
member.setNickname(nickname);
member.setIsDisabled(false);//用户不禁用
member.setAvatar(“https://online-teach-file.oss-cn-beijing.aliyuncs.com/teacher/2019/10/30/65423f14-49a9-4092-baf5-6d0ef9686a85.png”);
baseMapper.insert(member);
}
}
在UcenterMemberController中创建方法
//根据token获取用户信息
@GetMapping(“/getUserInfoForJwt”)
public R getUserInfoForJwt(HttpServletRequest request){
//调用jwt工具类里面的根据request对象，获取头信息，返回用户id
String id = JwtUtils.getMemberIdByJwtToken(request);
//查询数据库，根据用户id，获取用户信息
UcenterMember member = ucenterMemberService.getById(id);
return R.ok().data(“userInfo”,member);
}
====================================================================
1、安装element-ui 和 vue-qriously
（1）执行命令安装
npm install element-ui
npm install vue-qriously
2、修改配置文件 nuxt-swiper-plugin.js，使用插件
nuxt-swiper-plugin.js
import Vue from ‘vue’
import VueAwesomeSwiper from ‘…/node_modules/vue-awesome-swiper/dist/ssr’
import VueQriously from ‘vue-qriously’
import ElementUI from ‘element-ui’ //element-ui的全部组件
import ‘element-ui/lib/theme-chalk/index.css’//element-ui的css
Vue.use(ElementUI) //使用elementUI
Vue.use(VueQriously)
Vue.use(VueAwesomeSwiper)
1、在api文件夹中创建注册的js文件，定义接口
- register.js
import request from ‘@/utils/request’
export default{
//根据手机号码发送短信
getMobile(mobile){
return request({
url: /msmservice/msm/send/${mobile},
method: ‘get’
})
},
//用户注册
register(formItem){
return request({
url: /serviceUcenter/ucenter-member/register,
method: ‘post’,
data: formItem
})
}
}
2、在pages文件夹中创建注册页面，调用方法
（1）在layouts创建布局页面
- sign.vue
（2）创建注册页面
修改layouts文件夹里面default.vue页面，修改登录和注册超链接地址
在pages文件夹下，创建注册和登录页面
- register.vue
·
<el-form-item
class=“input-prepend restyle”
prop=“nickname”
:rules="[
{
required: true,
message: ‘请输入你的昵称’,
trigger: ‘blur’,
},
]"
<el-input
type=“text”
placeholder=“你的昵称”
v-model=“params.nickname”
/>
<el-form-item
class=“input-prepend restyle no-radius”
prop=“mobile”
:rules="[
{ required: true, message: ‘请输入手机号码’, trigger: ‘blur’ },
{ validator: checkPhone, trigger: ‘blur’ },
]"
<el-input
type=“text”
placeholder=“手机号”
v-model=“params.mobile”
/>
<el-form-item
class=“input-prepend restyle no-radius”
prop=“code”
:rules="[
{ required: true, message: ‘请输入验证码’, trigger: ‘blur’ },
]"
style=“width: 100%; display: block; float: left; position: relative”
class=“btn”
style=“position: absolute; right: 0; top: 6px; width: 40%”
<a
href=“javascript:”
type=“button”
@click=“getCodeFun()”
:value=“codeTest”
style=“border: none; background-color: none”
{{ codeTest }}</a
<el-form-item
class=“input-prepend”
prop=“password”
:rules=“[{ required: true, message: ‘请输入密码’, trigger: ‘blur’ }]”
<el-input
type=“password”
placeholder=“设置密码”
v-model=“params.password”
/>
<input
type=“button”
class=“sign-up-button”
value=“注册”
@click=“submitRegister()”
/>
点击 “注册” 即表示您同意并愿意遵守简书
<a target=“_blank” href=“http://www.jianshu.com/p/c44d171298ce”
用户协 议</a
和
。
社交帐号直接注册
<a
id=“weixin”
class=“weixin”
target=“_blank”
href=“http://huaan.free.idcfengye.com/api/ucenter/wx/login”
<i class=“iconfont icon-weixin”
/>
<a id=“qq” class=“qq” target=“_blank” href=“#”
<i class=“iconfont icon-qq”
/>
1、在api文件夹中创建登录的js文件，定义接口
- login.js
import request from ‘@/utils/request’
export default {
//登录
submitLogin(userInfo) {
return request({
url:
/serviceUcenter/ucenter-member/login,method: ‘post’,
data: userInfo
})
},
//根据token获取用户信息
getLoginInfo() {
return request({
url:
/serviceUcenter/ucenter-member/getUserInfoForJwt/,method: ‘get’,
// headers: {‘token’: cookie.get(‘guli_token’)}
})
//headers: {‘token’: cookie.get(‘guli_token’)}
}
}
2、在pages文件夹中创建登录页面，调用方法
（1）安装 js-cookie 插件
用于设置cookie的插件
npm install js-cookie
（2）login.vue
.
·
<el-form-item
class=“input-prepend restyle”
prop=“mobile”
:rules="[
{
required: true,
message: ‘请输入手机号码’,
trigger: ‘blur’,
},
{ validator: checkPhone, trigger: ‘blur’ },
]"
<el-form-item
class=“input-prepend”
prop=“password”
:rules=“[{ required: true, message: ‘请输入密码’, trigger: ‘blur’ }]”
<el-input
type=“password”
placeholder=“密码”
v-model=“user.password”
/>
<input
type=“button”
class=“sign-in-button”
value=“登录”
@click=“submitLogin()”
/>
社交帐号登录
<a
id=“weixin”
class=“weixin”
target=“_blank”
href=“http://qy.free.idcfengye.com/api/ucenter/weixinLogin/login”
<i class=“iconfont icon-weixin”
/>
<a id=“qq” class=“qq” target=“_blank” href=“#”
<i class=“iconfont icon-qq”
/>
3、修改nginx配置文件
4、在request.js添加拦截器，用于传递token信息
- guli-front\utils\request.js
// http request 拦截器
service.interceptors.request.use(
config => {
//debugger
//判断cookie中是否有名称叫 guli_token的数据
if (cookie.get(‘guli_token’)) {
//把获取到的cookie值放到header中
config.headers[‘token’] = cookie.get(‘guli_token’);
}
return config
},
err => {
return Promise.reject(err);
})
// http response 拦截器
service.interceptors.response.use(
response => {
//debugger
if (response.data.code == 28004) {
console.log(“response.data.resultCode是28004”)
// 返回 错误代码-1 清除ticket信息并跳转到登录页面
//debugger
window.location.href = “/login”
return
} else {
if (response.data.code !== 20000) {
//25000：订单支付中，不做任何提示
if (response.data.code != 25000) {
Message({
message: response.data.message || ‘error’,
type: ‘error’,
duration: 5 * 1000
})
}
} else {
return response;
}
}
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
});
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
面试准备
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
