View Code? Open in Web Editor
NEW
This project forked from exrick/xmall-front
基于Vue开发的XMall商城前台页面 PC端
Home Page: http://xmall.exrick.cn
JavaScript 15.50%
HTML 0.56%
Vue 83.03%
CSS 0.91%
xmall-front's Introduction
后端全部重新开发接口,实现后台系统管理,后端接口项目请跳转至 xmall 项目仓库查看
- 优化页脚、增加商品搜索框组件
- 优化登录注册界面
- 新增搜索页面,实现高亮分页搜索
- 新增捐赠页面,捐赠列表显示
- 全部商品页面实现分页
- 优化订单详情,实现查看订单进度,可对订单进行处理
- 实现生成订单接口、优化地址管理编辑选择
- 实现查看个人订单分页
- 接入 XPay 个人收款支付系统
![首页](https://camo.githubusercontent.com/8c69bf4c39bce27e6c000b963b80d1a4c42b04a0b3ae7c5ec2442b4d9145e52b/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323138333930362e6a7067)
![页脚](https://camo.githubusercontent.com/54b2e2c4af30bcc0bc51ec51e4a6f637f9c3b00b6361a45a61f928fde1fa591d/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323232323834312e6a7067)
![搜索框组件](https://camo.githubusercontent.com/b4e867d655257da6d455b321f0423093f8073ab459640586b65ea3889b8f8095/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323232333635302e6a7067)
![搜索结果](https://camo.githubusercontent.com/7d65453dc37cb284d9ba636bef4ade006807f11d7309eeeb42203662e1a55240/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313130393231353635362e6a7067)
![无搜索结果](https://camo.githubusercontent.com/8bbd5736033191135778c820046273da2eae63370df49fb4b2d0283407c13953/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323230323834322e6a7067)
![分页](https://camo.githubusercontent.com/905fa4809038c024bfed4db3d9b43b2c7c8cc03ff55c5ebe00b31bba857b2f2e/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323232333134322e6a7067)
![订单详情](https://camo.githubusercontent.com/637e7b6dc840c5653772bb185e3cde60c0f0faf9ccc51d8fdb6915bafba80eb1/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323139303033362e6a7067)
![订单进度](https://camo.githubusercontent.com/813ea33a93e88766d9bbed35d6f0811b1375da27227134d7b99463e91ea19a74/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313032323139303130372e6a7067)
![登录界面](https://camo.githubusercontent.com/e64f83450a8d5d9dbcbae752d14a08d4d71e7f1772c47af5a9107c18f5a8bdb3/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f515125453625383825414125453525394225424532303137313131343233333332312e6a7067)
- Vue 2.x
- Vuex
- Vue Router
- Element UI
- ES6
- webpack
- axios
- Node.js
- 第三方SDK
- 第三方插件
- 启动后端 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
![](https://camo.githubusercontent.com/27691a7dc4ba34931563f6b228bcd85a6113207aab228590fc0dd2b692a5a925/687474703a2f2f6f77657570717a64762e626b742e636c6f7564646e2e636f6d2f46677748536b31526e642d38464b714e4a68465353646371325156422e706e67)