PC端网上购物商城
前言
项目采用的技术栈: Vue+Node+MySQL
前端:用Vue-cli搭建,使用Vue全家桶+element-ui
后端:express框架
数据库:MySQL
其实项目初版本早就写完了,但感觉完成度不高,所以现在想完善这个项目,熟练下vue和node的开发运用,然后也记录一下我的开发过程
一、项目效果预览
商城前台部分
首页
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMy8xNmU2MjJiYmM4MGJhMjVi?x-oss-process=image/format,png)
选择所在城市
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMy8xNmU2MjJjMzNiOTZmYThl?x-oss-process=image/format,png)
首页右侧的购物车提示区
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1M2VhZDczMjUzZDY3?x-oss-process=image/format,png)
分类展示页面
![分类展示页](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1MzM4ZjZjODI3ODUx?x-oss-process=image/format,png)
购物车
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1M2VjMTI0MDlmMWRl?x-oss-process=image/format,png)
商品详情页
![商品详情页](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1MzNlN2NmNmVlNDAx?x-oss-process=image/format,png)
登录/注册
![登录/注册](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1MzRiZWY2NWNmYjAy?x-oss-process=image/format,png)
![登录/注册](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1MzRkMjcyNmJiZjVm?x-oss-process=image/format,png)
用户中心
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMy8xNmU2MjJkZmIwMWZiNTg3?x-oss-process=image/format,png)
商城后台部分
商品信息页
![商品信息页](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1MzQ0NGI5MzY5MjVh?x-oss-process=image/format,png)
添加商品
![添加商品](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xMC8xNmU1MzQ1YTZhOGYzMzIx?x-oss-process=image/format,png)
二、功能
普通用户