| mi | 您所在的位置：网站首页 › 货品识别扫一扫 › mi |
|
mi-shopping 仿小米商城
1.开发环境：
windows10操作系统、Hbuilder X2.7.9、MySQL 5.5.24、Node 12.15.0 2.技术栈： Html：超文本标记语言。 Scss：强大的专业级CSS扩展语言。 JavaScript、Es6语法：Web页面脚本语言。 Iconfont：阿里巴巴矢量图标库。 Vue：渐进式 JavaScript 框架。 Vuex：一个专为 Vue.js 应用程序开发的状态管理模式。 Vuex-persistedstate：持久化vuex状态插件。 Uni-App：使用 Vue.js 开发所有前端应用的框架，开发一次，多端覆盖。 使用到的有uni-app全局的配置、组件的使用、API网络的请求、路由页面跳转、获取位置、生物指纹认证、动画、下拉刷新、第三方授权登录、分享等。 Vant Weapp：轻量、可靠的移动端 Vue UI 组件库。 Node.js： 基于 Chrome V8 引擎的 JavaScript 运行环境。 Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 Cors：跨域资源共享。 Body-parser：HTTP请求体解析中间件。 MySQL：关系型数据库管理系统。 3.实现功能 商品搜索，高亮搜索关键字，从数据库模糊搜索商品，保存搜索关键字的记录等。 扫一扫，调用系统相机。 轮播图、九宫格渲染，从数据库获取数据。 上拉加载更多商品，从数据库每次获取10条商品数据。 商品页面的渲染、商品分享到微信、朋友圈、商品加入购物车等。 菜单导航栏分类的切换，补齐全部商品分类。 底部栏分类页面的渲染，滑动屏幕自动切换分类。 底部栏购物车页面的渲染，对购物车商品的操作有：商品数量添加或减少、选中状态切换、选中的商品删除、商品全选、商品全不选、计算总价等。 微信登录、获取账号信息、注销操作，登录信息写入数据库等。 提交订单对用户的登录状态进行判断，用户结算页面，编辑收货地址，自动获取用户的地理位置，也可以手动选择三级联动。用户选择支付方式，模拟支付，调用系统的指纹识别，指纹验证成功则将购买的商品、用户信息、对时间的格式化等写入数据库。 底部栏个人中心页面的渲染，显示账号信息，功能列表。 我的订单页面，从数据库获取用户已购买的订单详细信息。 4.数据库设计使用node搭建的后台，先创建一个名为“webshopping”数据库，运行“webshopping.sql”。 在api文件夹先装包，修改index.js中数据库配置。完成之后执行 node index.js启动，共有18个接口，端口为3000； 5.页面结构图 6.主要配置文件及说明主要的配置文件在项目下的pages.json文件，对 uni-app 进行全局配置，对每个页面文件的路径、窗口样式、原生的导航栏、图标、底部的原生tabbar 等进行了配置。 manifest.json文件，对项目的基本配置、分享消息及朋友圈等。 请求api的接口在项目main.js文件中。 7.项目截图 |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |