gwh2008 / xmall-front

基于Vue开发的XMall商城前台页面 PC端

XMall-Front

基于Vue开发的XMall商城前台页面

宣传视频

• 作者亲自制作 点我观看

项目已部署，在线Demo

• 前台商城：http://xmall.exrick.cn/
• 后台管理系统：http://xmadmin.exrick.cn/

感谢 yucccc 的开源 vue-mall 项目提供前端页面及框架支持

后端全部重新开发接口，实现后台系统管理，后端接口项目请跳转至 xmall 项目仓库查看

新增与优化

• 优化页脚、增加商品搜索框组件
• 优化登录注册界面
• 新增搜索页面，实现高亮分页搜索
• 新增捐赠页面，捐赠列表显示
• 全部商品页面实现分页
• 优化订单详情，实现查看订单进度，可对订单进行处理
• 实现生成订单接口、优化地址管理编辑选择
• 实现查看个人订单分页
• 接入XPay个人收款支付系统
• 首页升级！重构首页，后台可配置，包括3D轮播图
• 新增分类查看品牌周边等

所用技术

• Vue 2.x
• Vuex
• Vue Router
• Element UI
• ES6
• webpack
• axios
• Node.js
• 第三方SDK
  • 极验Test-button人机验证码
• 第三方插件
  • hotjar：一体化分析和反馈
  • 搜狐畅言评论插件

本地开发运行

• 启动后端 xmall 项目后，在 config/index.js 中修改你的后端接口地址配置
• 在 src/api/goods.js 中的 getQuickSearch 方法里修改你的Elasticseach服务器IP以及RESTful快速搜索提示接口配置
• index.html 中复制粘贴替换你的 hotjar 代码
• 若不启动后端项目，勉强预览运行此前端项目可尝试注释掉 src/main.js 中第 8、10、37-59 行代码
• 在项目根文件夹下先后执行命令 npm install 、 npm run dev
• 商城前台端口默认9999 http://localhost:9999

部署

• 先后执行命令 npm install 、 npm run build 将打包生成的 dist 静态文件放置服务器中，并配置路由代理

技术疑问交流

• 给作者项目Star或捐赠后可加入交流群 475743731，还可免费获取 慕课网学习资源 和 UI框架
• 个人博客：http://blog.exrick.cn

作者其他项目推荐

• 微信小程序APP

  • 捐赠≥19.9可加群私聊群主提前下载前台源码 预览视频 赠送慕课网SpringCloud学习资源

  

• X-Boot前后端分离开发平台

  

捐赠