购物系统
项目地址：vue-shopping-webapp | springboot-shopping-webapp
前言
你：
一、项目介绍
vue-shopping-webapp的商家端是后台管理spa页面，用户端是网站。 采用基于vue和element-ui的最新前端技术栈，实现了登录、购物、管理等大量购物系统功能。 . 后端使用springboot进行数据处理，数据库使用mysql实现典型业务案例。 让你有前后端交互的项目经验。 我相信这个项目一定会对你有所帮助。
当前版本基于 webpack 4.0+ 和 vue-cli 2.x 构建。 Vue 使用 vue2.0。 可以到官网了解版本相关知识的功能。
- 登录
- 用户、商家登陆
- 页面
- 用户页面
- 商家spa页面
- 购物
- 商品分类
- 商品浏览
- 商品购买
- 购物车
- 加入购物车
- 购物车信息（商品总价、数量等）
- 购物车汇总购买
- 地址
- 修改、增加、删除收货地址
- 管理
- 商品上架、下架
- 用户订单管理
- 发货、退货、收货管理
- 评论
- 用户评论
- 商家管理评论
- Vant
- van-sku
复制代码目录结构
视图
├── public # 静态资源
│ ├── img # 图片资源
├── src # 源代码
│ ├── api # 地区码
│ ├── components # 全局公用组件
│ ├── css # 全局css样式
│ ├── images # 组件内部图片
│ ├── lib # css&&fonts
│ ├── router # 路由
│ ├── store # 全局store管理
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
├── .gitignore.js # git忽略文件设置
├── .babelrc.config.js # babel-loader 配置
├── package.json # package.json
└── vue.config.js # vue-cli 配置
复制代码弹簧靴
安装
# 克隆项目
git clone https://gitee.com/zhou_guo_xi/vue-shopping-webapp.git
# 安装依赖
npm install
# 启动服务
npm run dev
复制代码系统数据流程图
系统ER图
2.页面结构
家
从上图中我们可以看到一些图标，一张轮播图，购物超市的标题，以及购物超市底部的一些功能栏。 结构分为三层，分别是header区、main区和tabbar区。 主要区域是用于嵌套不同页面的路由视图。 图标来源：MUI。
列表
用户可以看到的产品列表页面。 商品的各种信息，包括商品编号、商品价格、商品标签、商品库存、商品图片、商品描述、商品数量、图文介绍、商品名称属性等。
管理
管理页面是一个水疗页面。 商户可以查看在售商品，下架商品，对订单进行一系列管理。
3.加入购物车
可以看到购物车中记录了商品的信息，自动计算出商品的总价。 一个用于动画效果的vue动画钩子。
"beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="ballflag" ref="ball">div>
复制代码 beforeEnter(el) {
el.style.transform = "translate(0,0)";
},
enter(el, done) {
el.offsetWidth;
//获取小球的位置
const ballposition = this.$refs.ball.getBoundingClientRect();
//获取购物车的位置
const badgeposition = document
.getElementById("badge")
.getBoundingClientRect();
const xDist = badgeposition.left - ballposition.left;
const yDist = badgeposition.top - ballposition.top;
el.style.transform = `translate(${xDist}px, ${yDist}px)`; //字符串的拼接
el.style.transition = "all 1.5s ease";
done();
},
afterEnter(el) {
this.ballflag = !this.ballflag;
},
复制代码点击加入购物车后，在vuex中调用mutations中的方法并传入相应的商品参数：this.$store.commit("addToCar", goodsinfo);，将加入购物车的数据存储在状态。 mutations中的方法如下：
addToCar(state, goodsinfo) {
var flag = false //如果没有找到对应的商品
state.car.some(item => {
//点击加入购物车时，把商品信息保存到car中 1.如果购物车中已经有这个对应的商品，那么只需要跟新数量
if (item.id == goodsinfo.id) {
item.count += parseInt(goodsinfo.count)
flag = true
return true
}
})
if (flag == false) { //没有找到对应的商品就直接加入到car中
state.car.push(goodsinfo)
}
localStorage.setItem('car', JSON.stringify(state.car)) //本地存储加入购物车的数量
}
复制代码如果需要再次处理购物车数据，比如更新购物车商品数据，删除购物车商品数据，可以直接操作state中保存的car对象，car对象是本地取的一个值：var car = JSON.parse (localStorage.getItem('car') || '[]')
4.购买流程
购买流程包括购物车合并购买和普通购买，两者大同小异，这里只演示购物车购买。
1.列出产品
其中，图片上传部分代码：
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd");
@PostMapping("/img")
public Map<String, Object> flailed(MultipartFile file, HttpServletRequest req){
Map<String, Object> result = new HashMap<>(); //hashmap是map接口主要实现类，hashmap可以去重，效率高但无序
String originName = file.getOriginalFilename();//file是前端来的数据
if(!originName.endsWith(".jpg")){
result.put("status", "error1");
result.put("msg", "文件类型不对");
return result;
}
String format = sdf.format(new Date());
String realPath = "D:/大学4年/大三上学期/images";//
File flooder = new File(realPath);
if(!flooder.exists()){
flooder.mkdirs();
}
String newName = UUID.randomUUID().toString() + ".jpg"; //防止文件重名
try {
file.transferTo(new File(flooder, newName));
String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort()
+ "/img/"
+ newName;
result.put("status", "success");
result.put("url", url);
} catch (IOException e){
result.put("status", "error2");
result.put("msg", e.getMessage());
}
return result;
}
复制代码2.购物车产品购买
这里有很多逻辑，但并不难。 有订单信息跟踪和修改（如订单支付状态、送货地址）。 购物车合并和购买依赖于数据库的主键和外键之间的关系。 购物车购买后，在购物车订单表中生成一个订单数据。 订单数据包括订单id，是外键，连接到购物车商品表。 根据刚才生成的order id对应购物车购买的商品信息：购买多个商品时获取若干条数据，几条数据共用一个order id，各自的信息没有使用，如如产品名称、产品单价、选择数量等。 这样就可以根据订单id查询订单的所有信息，方便商家管理订单。
3.商户管理
商家可以看到客户刚刚购买的订单，然后进行下一步操作。 比如送货等等。
5.附加1.跨域解析
后台创建CrosConfig类，直接把代码复制过来，马上使用。
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (response.status !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox./confirm/i('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
/confirm/iButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
复制代码好的，重要的宣布
总结
这个项目是由我的大学开发的。 我没有写太多技术帖子。 写作和逻辑组织能力仍然很差。 请原谅我。 项目比较简单郑州购物商城网站系统，但是也需要一定的vue+spingboot基础。 目的是给大家一个学习vue和springboot后练习的项目。 好记性不如烂笔头。 实践才是真理。 做更多，探索更多。 希望你喜欢。
