2024年前端最新Day211&212，阿里面试官必问

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

//要求传递的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);

}

}

三、创建接口根据token获取用户信息

---

在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);

}

---

用户登录注册【前端】

====================================================================

一、在nuxt环境中安装插件

---

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) // 返回接口返回的错误信息

    });

    5、修改layouts中的default.vue页面

    （1）显示登录之后的用户信息