一、简介
node.js版本：v12.16.3
node.js下载
vue官网教程
iview介绍
上传头像接口，图片存储在七牛云中，注册并实名认证之后可以免费使用
以下会描述使用vue搭建项目框架的过程，不涉及到具体页面的编写等，有兴趣的可以看一下，没兴趣的可以直接跳过，直接从github上克隆代码运行。
二、创建web项目
创建完成后进行相关配置
三、安装vue脚手架工具
3.1 首先在idea的Terminal中输入以下命令安装淘宝的npm镜像，这样下载速度快
执行以下命令
npm i -g cnpm --registry=https://registry.
idea中执行“npm”命令，提示'node' 不是内部或外部命令，也不是可运行的程序
3.2 开始安装vue脚手架工具
执行以下命令
cnpm i -g vue-cli
测试是否安装成功
vue -V
四、构建vue项目
执行以下命令
vue init webpack shop-project-web
分别执行上图中的命令
访问http://localhost:8080/
ok，构建完成。
五、安装iview并在项目引入（可以快速搭建页面）
首先先停止vue项目（在控制台按Ctrl+C，再按Y停止项目），停止以后执行以下命令
cnpm install view-design --save
在main.js中加入iview
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'//引入iviewimport ViewUI from 'view-design';import 'view-design/dist/styles/iview.css';Vue.use(ViewUI);Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',router,components: { App },template: '<App/>'})
ok，到这里我们就可以通过使用iview来快速搭建页面，这里不再详述页面的搭建过程等。
六、安装axios并在项目引入(便于实现ajax请求)
首先先停止vue项目（在控制台按Ctrl+C，再按Y停止项目），停止以后执行以下命令
cnpm install axios -S
在main.js中加入axios
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'//引入iviewimport ViewUI from 'view-design';import 'view-design/dist/styles/iview.css';Vue.use(ViewUI);//引入axiosimport axios from 'axios'Vue.prototype.$axios = axiosVue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#app',router,components: { App },template: '<App/>'})
七、安装七牛云js用于实现客户端图片上传
cnpm i qiniu-js
八、安装缓存插件用于缓存数据
cnpm install good-storage
九、vue项目介绍
vue架构里各个部分的作用如下图所示
在index.js里配置路由，以此实现页面的跳转
使用axios发出ajax请求
ok，看到这里相信大家对vue已经有了初步的了解，这里不再继续详述页面相关的东西。
十、解决跨域问题
在我们的gateway服务中添加一个配置类即可搞定
package com.liazhan.config;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.web.cors.reactive.CorsWebFilter;import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;import org.springframework.web.util.pattern.PathPatternParser;/*** @version:V1.0* @Description: 解决跨域问题* @author: Liazhan* @date /5/5 9:24*/@Configurationpublic class CorsConfig {@Beanpublic CorsWebFilter corsWebFilter(){CorsConfiguration config=new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedMethod("*");config.addAllowedOrigin("*");config.addAllowedHeader("*");//设置预检请求的缓存时间（秒），在这个时间段里，对于相同的跨域请求不会再预检了config.setMaxAge(18000L);UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource(new PathPatternParser());source.registerCorsConfiguration("/**",config);return new CorsWebFilter(source);}}
十一、使用七牛云实现头像上传
上传流程是客户端向服务端获取一个token，服务端生成token返回(添加同一个ip半小时内最多获取十次token限制)，然后客户端用这个token去实现在七牛云上传图片。
shop-common-core添加ip工具类，需要添加servlet依赖
<!--servlet--><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.4</version><scope>provided</scope></dependency>
package com.liazhan.core.utils;import javax.servlet.http.HttpServletRequest;import .InetAddress;import .UnknownHostException;/*** @version:V1.0* @Description: IP工具类* @author: Liazhan* @date /5/7 11:15*/public class IPUtil {public static String getIpAddr(HttpServletRequest request) {String ipAddress = null;try {ipAddress = request.getHeader("x-forwarded-for");if (ipAddress == null || ipAddress.length() == 0 || "unknown".equalsIgnoreCase(ipAddress)) {ipAddress = request.getHeader("Proxy-Client-IP");}if (ipAddress == null || ipAddress.length() == 0 || "unknown".equalsIgnoreCase(ipAddress)) {ipAddress = request.getHeader("WL-Proxy-Client-IP");}if (ipAddress == null || ipAddress.length() == 0 || "unknown".equalsIgnoreCase(ipAddress)) {ipAddress = request.getRemoteAddr();if (ipAddress.equals("127.0.0.1")) {// 根据网卡取本机配置的IPInetAddress inet = null;try {inet = InetAddress.getLocalHost();} catch (UnknownHostException e) {e.printStackTrace();}ipAddress = inet.getHostAddress();}}// 对于通过多个代理的情况，第一个IP为客户端真实IP,多个IP按照','分割if (ipAddress != null && ipAddress.length() > 15) { // "***.***.***.***".length()// = 15if (ipAddress.indexOf(",") > 0) {ipAddress = ipAddress.substring(0, ipAddress.indexOf(","));}}} catch (Exception e) {ipAddress="";}// ipAddress = this.getRequest().getRemoteAddr();return ipAddress;}}
shop-service-impl-member添加七牛云sdk依赖，修改常量类，添加头像上传接口
<!-- 七牛云 --><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.2.28</version></dependency>
package com.liazhan.member.consts;/*** @version:V1.0* @Description: 会员服务常量类* @author: Liazhan* @date /4/28 10:11*/public interface MemberConst {//登录token在redis的key前缀String MEMBER_LOGIN_TOKEN_PREFIX = "login.token";//登录token过期时间 1小时Long MEMBER_LOGIN_TOKEN_TIMEOUT = 3600L;//登陆token失效状态Integer MEMBER_LOGIN_TOKEN_INVALID = 0;//登陆token有效状态Integer MEMBER_LOGIN_TOKEN_VALID = 1;//七牛云accessKeyString QINIU_ACCESSKEY = "这里输入七牛云accessKey";//七牛云secretKeyString QINIU_SECRETKEY = "这里输入七牛云secretKey";//七牛云头像存储空间名称String QINIU_HEADIMG_BUCKET = "这里输入七牛云存储空间名称";//用户获取上传头像token的次数在redis的key前缀String HEADIMG_TOKEN_COUNT_PREFIX = "headimg.token.count";//用户获取上传头像token的次数在redis的过期时间 半小时Long HEADIMG_TOKEN_COUNT_TIMEOUT = 1800L;//用户获取上传头像token的最大次数 10次Integer HEADIMG_TOKEN_COUNT_MAX = 10;}
package com.liazhan.member.service;import com.alibaba.fastjson.JSONObject;import com.liazhan.base.BaseResponse;import com.liazhan.member.input.dto.UserRegistInpDTO;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import javax.servlet.http.HttpServletRequest;import javax.validation.Valid;/*** @version:V1.0* @Description: 会员注册相关接口* @author: Liazhan* @date /4/24 11:13*/@Api(tags = "会员注册相关接口")public interface MemberRegistService {@PostMapping("/regist")@ApiOperation(value = "会员注册接口")BaseResponse<JSONObject> regist(@RequestBody @Valid UserRegistInpDTO userInpDTO);@GetMapping("/getUploadHeadImgToken")@ApiOperation(value = "会员注册获取上传头像token接口")BaseResponse<JSONObject> getUploadHeadImgToken(HttpServletRequest request);}
package com.liazhan.member.service.impl;import com.alibaba.fastjson.JSONObject;import com.liazhan.base.BaseResponse;import com.liazhan.base.BaseServiceImpl;import com.liazhan.base.consts.BaseConst;import com.liazhan.core.utils.DtoUtil;import com.liazhan.core.utils.IPUtil;import com.liazhan.core.utils.RedisUtil;import com.liazhan.member.consts.MemberConst;import com.liazhan.member.dao.UserDao;import com.liazhan.member.dao.entity.UserDO;import com.liazhan.member.feign.WeiXinVerificationCodeServiceFeign;import com.liazhan.member.input.dto.UserRegistInpDTO;import com.liazhan.member.service.MemberRegistService;import com.qiniu.util.Auth;import mons.lang.StringUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.util.DigestUtils;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;import javax.validation.Valid;/*** @version:V1.0* @Description: 会员注册相关接口实现类* @author: Liazhan* @date /4/24 11:18*/@RestControllerpublic class MemberRegistServiceImpl extends BaseServiceImpl<JSONObject> implements MemberRegistService {@Autowiredprivate WeiXinVerificationCodeServiceFeign weiXinVerificationCodeServiceFeign;@Autowiredprivate UserDao userDao;@Autowiredprivate RedisUtil redisUtil;@Overridepublic BaseResponse<JSONObject> regist(@Valid UserRegistInpDTO userInpDTO) {//1.校验验证码是否正确BaseResponse<JSONObject> checkResponse = weiXinVerificationCodeServiceFeign.checkVerificationCode(userInpDTO.getPhone(), userInpDTO.getVerificationCode());if(!BaseConst.HTTP_RES_CODE_200.equals(checkResponse.getCode())){return getResultError(checkResponse.getMsg());}//2.密码用md5加密String encodePassword = DigestUtils.md5DigestAsHex(userInpDTO.getPassword().getBytes());userInpDTO.setPassword(encodePassword);//3.DTO转doUserDO userDO = DtoUtil.dtoToDo(userInpDTO, UserDO.class);//4.保存到数据库UserDO save = userDao.save(userDO);return save.getUserId()==null?getResultError("注册失败！"):getResultSuccess("注册成功！");}@Overridepublic BaseResponse<JSONObject> getUploadHeadImgToken(HttpServletRequest request) {//1.获取请求方ip,判断是否已超过请求次数,若是,则返回操作繁忙,否则次数+1String ipAddr = IPUtil.getIpAddr(request);String tokenCount = redisUtil.getString(MemberConst.HEADIMG_TOKEN_COUNT_PREFIX + ipAddr);if(StringUtils.isBlank(tokenCount)){redisUtil.setString(MemberConst.HEADIMG_TOKEN_COUNT_PREFIX+ipAddr,"1",MemberConst.HEADIMG_TOKEN_COUNT_TIMEOUT);}else{Integer tokenCountInt = Integer.valueOf(tokenCount);if(tokenCountInt<MemberConst.HEADIMG_TOKEN_COUNT_MAX){tokenCountInt++;redisUtil.setString(MemberConst.HEADIMG_TOKEN_COUNT_PREFIX+ipAddr,tokenCountInt+"",MemberConst.HEADIMG_TOKEN_COUNT_TIMEOUT);}else{return getResultError("图片上传繁忙，请稍后再试！");}}//2.生成tokenAuth auth = Auth.create(MemberConst.QINIU_ACCESSKEY, MemberConst.QINIU_SECRETKEY);String upToken = auth.uploadToken(MemberConst.QINIU_HEADIMG_BUCKET);JSONObject jsonObject = new JSONObject();jsonObject.put("token",upToken);return getResultSuccess(jsonObject);}}
ok，最终效果如下
页面还很简陋，登陆还没有添加验证码之类的校验，后续会完善一下。
由于目前还没有编写需要登陆token才能获取数据的接口，因此后续再添加axios响应拦截器，当请求响应token错误失败码时，将自动跳转到登陆页面。
后端项目github地址：/liazhan/shop-project/tree/845fd2f6cf4633d1f23ec5d11565737834e177ac
前端项目github地址：/liazhan/shop-project-web/tree/d071343165ab5a84c859dc4a8a10d6b72cd657e9
前端项目的运行方式如下：
1、clone下来之后用idea打开，打开Terminal界面
2、输入以下命令安装，若没有CNPM则根据上文提到的方式安装CNPM
cnpm install
3、运行
npm run dev
微服务电商实战(十一)搭建vue项目对接注册登陆接口 解决跨域问题 使用七牛云实现头像上传
如果觉得《微服务电商实战(十一)搭建vue项目对接注册登陆接口 解决跨域问题 使用七牛云实现头》对你有帮助，请点赞、收藏，并留下你的观点哦！
