一.框架简述
- 后端实现框架：SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger搭建实现
- 前端框架实现：vue+element实现的独立vue项目
上一篇文章也写过：
https://blog.csdn.net/lucky_fang/article/details/127729768现在的框架其实是在这边文章的基础上的升级版，进行了完善和拓展，更加符合实际开发，区别还挺大。上一篇文章只是单纯的获取token，并且token由底层代码进行redis存储，也没有token续费，所以这一次优化了redis自定义存储，我们可以自定义存储token、用户信息和自定义清除redis登录关键缓存信息，并且增加了解析token获取用户信息和token续费功能，配合前端进行自动续费，这样登录过程中token过期了能及时刷新续费token。
二.首页
登录、注册、网站首页、查看订单（前端未实现，后端已实现单一订单，后续打算改造成合并订单，支持多商品下单~）
1.登录
登录请求：
账号密码登录
接口返回：
accessToken就是登录token，前端会存储在页面缓存，my_token，userInfo为当前登录用户信息，如果refreshTokenFlag为true，则前端需要把缓存token刷新为返回的refreshToken，即为token续费：
续费：
登录和退出接口封装了直接的请求：
登录窗口和注册窗口封装为vue组件使用：
引用方法：
登录调用：
-
handleLogin(
) {
//登录
-
this.
$refs.
loginForm.
validate(
valid => {
-
if (valid) {
-
const loading =
this.$loading({
-
lock:
true,
-
text:
'登录中,请稍后。。。',
-
spinner:
"el-icon-loading"
-
});
-
this.
$store.
dispatch(
'login',
this.
loginForm).
then(
(res)=>{
-
if(res.
code ===
200){
-
this.$notify({
-
title:
'登录成功',
-
message: res.
data.
userName+
'，欢迎您！',
-
type:
'success'
-
});
-
this.
box =
false;
-
// this.$router.push({path: '/'});
-
}
-
}).
finally(
() =>
-
loading.
close()
-
);
-
}
-
});
-
},
退出类似：
-
logoutFun(
){
//退出登录
-
this.$confirm(
"确定退出登录?", {
-
confirmButtonText:
"确定",
-
cancelButtonText:
"取消",
-
type:
"warning"
-
})
-
.
then(
() => {
-
this.
$store.
dispatch(
'logout').
then(
(res)=>{
-
if(res.
code ===
200){
-
this.$notify({
-
title:
'退出成功',
-
type:
'success'
-
});
-
}
-
});
-
})
-
}
页面缓存方法：
import {setStore,getStore} from "@/utils/store";设置缓存：
setStore({name: 'product', content: {productName: this.searchName}});根据key获取：
let obj = getStore({name: 'product'});2.退出
接口返回：
3.注册
注册完成后，记住用户名、密码，去登录
4.商品分类
接口返回，每个分类附带其下的商品数量：
5.商品列表
接口返回，默认展示根据第一个分类id查询商品，第一个分类为iphone13：
6.商品搜索
接口返回，根据名称搜索：
7.根据分类查询商品列表
接口返回，分局分类id查询：
三.商品详情
太长了，长截图都截不完~~~~
想到商品详情，就必然会用到富文本编辑器，用来自定义录入和编辑商品信息，这里运用了
vue-quill-editor
安装后，在main.js引入：
因为这种功能是管理后台的功能，这里只是安装了，略过~~~
效果图如下，你也许会好奇商品详情下面介绍的内容也太多太高大上了，怎么做？
简单，因为是富文本，但是作者有没有商品上传功能，所以手动去某东，某宝商品详情，直接把网页代码拷贝下来
选择鼠标右键，copy下来，贴到数据库字段：
四.立即购买
点击立即购买，跳转购物车页面，购物车记到本地缓存中，不在数据库
往购买列表添加新商品：
五. 其他就不一一细说了，这里就简单介绍一下
感谢您的耐心看完
源码并不复杂！
需要源码的可私聊，作者原创，低价。
如果您有好的项目设想创作，而苦于实现，那非常欢迎留言，作者来把您的设想变成真实的产品！
转载：https://blog.csdn.net/lucky_fang/article/details/127792675