Pile technologique front-end : Vue-Cli
Logiciel front-end : WebStorm 2020.3
Style front-end : Bootstrap
Pile technologique back-end : SpringBoot
Logiciel backend : IntelliJ IEDA2019
JavaJDK : 1.8
Serveur : Alibaba Cloud Centos 7
Autres : MyBatis, Redis, MySql, Docker,
2) Inscription et connexion par SMS :
Lorsque l'utilisateur s'inscrit avec son numéro de téléphone mobile, cliquez sur le bouton "Obtenir le code de vérification", et le téléphone recevra un message texte avec un code de vérification envoyé par le site Web. Basé sur Redis, le code de vérification est valable 5 minutes et chaque numéro de téléphone mobile ne peut obtenir le portail du code de vérification SMS que trois fois.
Figure 1 Page d'affichage du produit
4) Classification des utilisateurs : 
Lorsqu'un utilisateur scanne le code QR pour acheter un abonnement VIP annuel, les produits sur le site Web seront achetés à moitié prix et les enregistrements MySql en arrière-plan le changement de rôle de l'utilisateur.
Figure 2 Page d'affichage du classement
Gros pièges rencontrés dans le projet : 
1) Le test local de la fonction d'envoi d'email a réussi, et des bugs de test côté serveur sont apparus fréquemment Solutions.
3. Description du module principal
1
Description du module Vue-Cli :
(1) Le développement basé sur les spécifications d'échafaudage deviendra très flexible. (2) Vue-Cli est construit sur la base de webpack et est livré avec une configuration par défaut raisonnable. L'outil d'empaquetage webpack peut regrouper des pages uniques et divers composants de développement. (3) Vue-Cli est une riche collection de plug-ins officiels, héritant des meilleurs outils de l'écosystème front-end.
2) Processus d'installation :
(1) Installez WebStorm (pour le développement), installez node.js, installez vue-cli, installez axios (pour lancer des requêtes inter-domaines) et introduisez le style bootstrap.
3) Processus de déploiement :
npm run build # 在WebStorm终端执行，生成dist文件夹 docker pull nginx:1.19.10 # 不建议Vue-cli项目部署到tomcat，因为tomcat属于动态服务器，启动需要java环境，是为了解析动态语言jsp的；像纯静态的就部署到静态服务器nginx上。 mkdir html # 为了做docker容器内外的数据卷映射 mv dist/ html/ docker run -p 80:80 --name nginx01 -d -v /root/html/dist/:/usr/share/nginx/html nginx:1.19.10 # 数据卷映射 # 此时可访问 http://120.79.133.235:80/index.html
Figure 3 Répertoire WebStorm
[1] Maîtrisez d'abord le routage (routeur) et les composants (composants [composants publics], vues [composants privés]). Une fois le composant créé, il doit être enregistré auprès de la route [2]. ] asserts encapsule le style bootstrap et est importé dans main.js ; [3] Afin d'envoyer des requêtes inter-domaines, l'instance axios est encapsulée dans utils, le code est le suivant :
import axios from 'axios'
// 创建默认实例
const instance = axios.create({
baseURL: 'http://120.79.133.235:8989/eb',
// timeout: 10000,
});
// 请求拦截器
instance.interceptors.request.use(config=>{
console.log("请求拦截器");
return config;
})
// 响应拦截器
instance.interceptors.response.use(response=>{
console.log("响应拦截器");
return response;
}, err=>{
console.log("响应出现错误时进入的拦截器");
});
// 暴露instance实例对象
export default instance;
Dans chaque composant, le get et les méthodes de demande de publication pour le backend sont les suivantes : // Get请求
// 向后端接口发当前页码，获取当前页面的商品List
instance.get("/item/findAllItem?page="+this.page).then(res=>{
that.items = res.data.items;
that.totalPage = res.data.totalPage;
that.page = res.data.page;
});
// Post请求
// 向后端接口发送当前商品id和用户id，获取商品购买状态
instance.post("/order/alipay/callback",{itemId:this.itemid,userId:this.user.id}).then(res=>{
if ( res.data.code == 20000 ) {
alert("提示：您已购买该商品");
} else {
alert("提示：您未购买该商品");
}
});
}// 跳转到MailReg组件
this.$router.push({name:"MailReg"});
// 跳转到item组件，并传递当前商品的id
this.$router.push({path:"/item",query:{ItemId:myid}});
// item组件接收方法：
this.itemid = this.$route.query.ItemId;
// 另外不同组件可以依据token获取登录用户信息，需要用到redis，详见下文2 用户积分排行榜模块说明：
1.1 Reids概述：
1） Redis是一种基于内存的数据存储NoSql；
2） Redis支持丰富的数据类型(String, List, Set, ZSet, Hash)；
3） Redis有两种持久化方法: （1）快照(snapshot)存储，也叫rdb持久化，保存当前时刻的数据状态；（2） AOF(append only file)存储，将所有redis的写命令记录到日志文件中，Redis支持持久化间隔最快也是一秒，所以它是事务不安全的，即是可能丢失数据的。
4）Redis的应用场景：
(1) 利用Redis字符串完成项目中手机验证码存储的实现。------本项目采用
(2) 利用Redis字符串类型完成具有时效性的业务功能，如订单还有40分钟即将关闭。
(3) 利用Redis实现分布式集群系统中的Session共享。
(4) 利用Redis的ZSet数据类型(可排序set类型：元素+分数)实现排行榜功能。 ------本项目采用
(5) 利用Redis完成分布式缓存。 ------本项目实现MySql中数据的缓存
(6) 利用Redis存储认证之后的token信息。 ------非常方便，本项目采用。
(7) 利用Redis解决分布式集群系统中分布式锁问题。
1.2 基于Redis实现前端组件从后端获取用户信息：
Step1：前端Login.vue组件中用户输入登录信息提交的接口如下：
// 这里调用了后端/user/login接口，获取当前登录用户的token，存入Session的localStorage中，在后续网页浏览过程中可随时调取这个token
instance.post("/user/login",this.user).then(res=>{
if ( res.data.state ) {
alert(res.data.msg+",点击确定进入主页");
// 前端存储token信息
localStorage.setItem("token",res.data.token);
that.$router.push({path:"/itemList"});
} else {
alert(res.data.msg);
that.user = {};
}
});Step2：后端/user/login接口实现如下：
// Controller层
@PostMapping("login")
public Map<String, Object> loginAccount(@RequestBody User user, HttpSession session) {
return userService.loginAccount(user, session);
}
// Service层
// 情况3：查询到一个用户时
// 获取主体对象
try {
Subject subject = SecurityUtils.getSubject();
subject.login(new UsernamePasswordToken(user.getName(), user.getPassword()));
User userDB = userListDB.get(0);
String token = session.getId();
if (userDB.getScore() == null) {
userDB.setScore(0.0);
userDAO.updateUserScore(userDB);
}
redisTemplate.opsForValue().set("TOKEN_" + token, userDB, 30, TimeUnit.MINUTES);
redisTemplate.opsForZSet().add("userRank", userDB, userDB.getScore());
map.put("token", token);
map.put("state",true);
map.put("msg","登录成功");
return map;
...Redis整合SpringBoot有两种Template，即RedisTemplate和StringRedisTemplate。其中StringRedisTemplate是RedisTemplate的子类，两个方法基本一致，不同之处在于操作的数据类型不同，RedisTemplate中的两个泛型都是Object，意味着存储的key和value都可以是一个对象，而StringRedisTemplate的两个泛型都是String，意味着StringRedisTemplate的key和value都只能是字符串。
在Step2中，我将token和数据库中的用户信息userDB绑定在一起存入了Redis中，后续前端组件获取登录用户信息的代码如下：
// 从localStorage获取token
let token = localStorage.getItem("token");
let that = this;
// 发送axios请求，根据token获取用户信息
instance.get("/user/token?token="+token).then(res=>{
that.user = res.data;
console.log(that.user);
})后端/user/token的接口如下：
@GetMapping({"token"})
public User findUser(String token) {
System.out.println("接收的token信息：" + token);
return (User)redisTemplate.opsForValue().get("TOKEN_" + token);
}Step3：用户退出登录时，应消除浏览器中对应的token，后端接口代码如下：
// 退出登录
@DeleteMapping({"logout"})
public Map<String, Object> logout(String token) {
Map<String, Object> map = new HashMap<>();
try {
redisTemplate.delete("TOKEN_" + token);
Subject subject = SecurityUtils.getSubject();
subject.logout();
map.put("state", true);
map.put("msg", "提示：退出账户成功");
return map;
} catch (Exception e) {
e.printStackTrace();
map.put("state", false);
map.put("msg", "提示：退出账户失败");
return map;
}
}1.3 基于Redis的用户积分排行榜实现：
MySql中的用户信息如图4所示：
Redis中的UserRank如图5所示：
Step1：当用户登录时，他的首要任务是接入UserRank对应的信息，后端代码如下：
if (userDB.getScore() == null) {
userDB.setScore(0.0);
userDAO.updateUserScore(userDB);
}
redisTemplate.opsForValue().set("TOKEN_" + token, userDB, 30, TimeUnit.MINUTES);
redisTemplate.opsForZSet().add("userRank", userDB, userDB.getScore());userDB是数据库中当前登录用户的信息（一定是有的，你注册了，对吧？），若用户首次登录我将他的分数在数据库设置为0.0，之后我在Redis的ZSet中加入这个用户，你知道，Set集合不会存储重复key值的元素，因此不会同一个用户出现在UserRank中两次。两个template完成了token绑定User，User绑定UserRank中Score的过程，之后的分数更新过程会反复使用这两个template实现。
Step2：当用户信息更新时，相应的与用户信息有关的两个template都要发生变化，代码如下：
// key值序列化
redisTemplate.setKeySerializer(new StringRedisSerializer());
// 由当前用户的token获取当前用户的信息
User firstUser = (User)redisTemplate.opsForValue().get("TOKEN_" + token);
// 删除zSet中的当前用户
redisTemplate.opsForZSet().remove("userRank", firstUser);
// 产生新的当前用户（昵称改变）
List<User> userListDB = this.userDAO.selectUserByName(user.getName());
User secondUser = userListDB.get(0);
// 更新token中当前用户的信息
redisTemplate.opsForValue().set("TOKEN_" + token, secondUser, 30, TimeUnit.MINUTES);
// 产生zSet中的当前用户
redisTemplate.opsForZSet().add("userRank", secondUser, secondUser.getScore());Step3：当用户扫码支付时，首次进入的后端controller如下：
// 支付单件商品
@GetMapping("payForItem")
public byte[] alipay(String itemid,String userid, String token) {
this.token = token;
log.info("itemid=====>"+itemid);
log.info("userid=====>"+userid);
PayVo payVo = new PayVo();
payVo.setItemId(itemid);
payVo.setUserId(userid);
System.out.println(payVo.getUserId());
return alipayService.alipay(payVo);
}在alipayService有一个小型用户分级，即vip用户购物价格减半：
// 1：支付的用户
String userId = payVo.getUserId();
// my 1: 依据用户id查询用户
User user = userService.selectUserById(Integer.valueOf(userId));
// 依据商品id查询商品
Item item = itemService.getItemById(payVo.getItemId());
// my 1: 依据用户id查询用户
if ( item == null ) return null;
// 2: 支付金额
String tempMoney = item.getPrice().toString();
String money = "";
if ( user.getRole().equals("normal") ) {
money = tempMoney;
}
if ( user.getRole().equals("vip") ) {
Double tempMoney2 = Double.valueOf(tempMoney)*0.5;
money = String.valueOf(tempMoney2);
}在payForItem相同文件下，调用了payCommonService，在这里会实现用户积分更新和用户等级更新：
payCommonService.payUserPublic(bodyJsonObject, userId, user.getName(), orderNumber, tradeno, "alipay", this.token);
将"VIP"这件商品的id设置为“666”，当用户购买该商品时，当前用户更新过程如下：
if ( itemId.equals("666") ) {
int myuserId = Integer.valueOf(userId);
User userDB = userService.selectUserById(myuserId);
// key值序列化
this.redisTemplate.setKeySerializer(new StringRedisSerializer());
// 由当前token获取当前用户信息
User firstUser = (User)redisTemplate.opsForValue().get("TOKEN_" + token);
// 由当前用户信息删除当前用户zSet
redisTemplate.opsForZSet().remove("userRank", firstUser);
// 更新当前用户信息身份
userDB.setRole("vip");
// 更新当前用户新身份的分数
userService.updateUserRole(userDB);
List<User> userListDB = this.userDAO.selectUserByName(userDB.getName());
// 获取当前新身份用户的完整信息
User secondUser = userListDB.get(0);
// 更新当前token对应的当前用户
redisTemplate.opsForValue().set("TOKEN_" + token, secondUser, 30, TimeUnit.MINUTES);
// 设置当前用户的zSet
redisTemplate.opsForZSet().add("userRank", secondUser, secondUser.getScore().doubleValue());
}当前用户积分更新过程如下：
// 更新当前用户的积分
double tempScore = Double.valueOf(orderDetail.getPrice()) * 0.3;
String key1 = "TOKEN_" + token;
// 由当前token获取当前用户
User user = (User)redisTemplate.opsForValue().get(key1);
// 更新当前用户的zSet分数
redisTemplate.opsForZSet().incrementScore("userRank", user, tempScore);
// 获取当前用户的zSet分数
double newScore = redisTemplate.opsForZSet().score("userRank", user);
// 删除当前用户的zSet（因为要更新当前用户的信息，将当前用户在数据库中的分数进行同步）
redisTemplate.opsForZSet().remove("userRank", new Object[] { user });
user.setScore(newScore);
userDAO.updateUserScore(user);
// 更新token对应的当前用户的信息
redisTemplate.opsForValue().set(key1, user);
// 新增当前用户的zSet
redisTemplate.opsForZSet().add("userRank", user, newScore);Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Étapes de création du projet SpringBoot
Logiciel de base de données couramment utilisé
Que sont les bases de données en mémoire ?
Lequel a une vitesse de lecture plus rapide, mongodb ou redis ?
Comment utiliser Redis comme serveur de cache
Comment Redis résout la cohérence des données
Comment MySQL et Redis assurent-ils la cohérence des doubles écritures ?
Quelles données le cache Redis stocke-t-il généralement ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
