基于VUE实现的优鲜食物的移动端购物网站【100010164】
项目描述
一个基于优鲜食物的移动端购物网站(大部分功能模块已实现,适合有一定 Vue 基础的人学习,项目实施需要的资源已经放在素材文件夹下,包括接口文档、图片资源等)
技术栈
Vue CLI + Vue Router + Vuex + Less + Mint UI + axios + Swiper + Animate + Better Scroll + Mock + Vue Touch
项目展示(此处只列举部分)
-
首页
-
城市选择
-
购物车
-
商品详情
-
个人中心
-
收获地址
基本使用
使用 less
cnpm install less less-loader -S-D
使用 swiper
cnpm install swiper -S-D
//在组件中引入
//引用swiper
import Swiper from 'swiper'
//引入css文件
import 'swiper/dist/css/swiper.min.css'
//然后在挂载的时候初始化swiper
mounted() {
this.nextTick(() => {
this.scroll = new Swiper('.swiper-container', {
autoplay: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
})
}
使用 mint-ui
cnpm install mint-ui -S
cnpm install babel-plugin-component -S-D
打开.babelrc 进行配置,在 plugin 插入一项配置,例如:
"plugins": ["transform-vue-jsx", "transform-runtime", ["component", [
{
"libraryName" : "mint-ui",
"style": true
}
]]]
//此处是插入了component这个
使用:
main.js中import 'mint-ui/lib/style.css'
import {Navbar, TabItem} from 'mint-ui'
使用 vuex
cnpm install vuex -S
创建 store 文件夹
- index.js
- state.js
- getters.js
- mutation-types.js
- actions.js
- mutations.js
需要注意:每个.js 文件写的时候都需要注意导出 export default{} 或 export const …
并且 state getters actions mutations 都是有多个 每个间要用,号隔开,在 index.js 中分别引入(import)state.js getters.js actions.js mutations.js vue vuex
使用 vuex Vue.use(vuex),创建 vuex
export default Vuex.Store({
state,
getters,
actions,
mutations,
})
在 main.js 中为 vue 实例挂载 vuex,引入 store/index.js,在实例中挂载。
使用 animate.css
cnpm install animate.css
在 main.js 中引入
import animate from 'animate.css'
在页面中使用
<transition enter-active-class="animated fadeIn"></transition>
使用 better-scroll
使用 better-scroll 实现各种滚动效果
npm install better-scroll -S
具体使用看官方文档
this.$nextTick(() => {
if(!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {
click: true
})
} else {
this.scroll.refresh()
}
})
需要注意的是子元素的高度一定要大于父元素的高度,子元素设置超出隐藏
跨域访问接口
正常情况下,要实现跨域,是通过后台进行配置响应的响应头的参数。
vue-cli 则跨域通过 node.js 代理服务器实现跨域请求。
文件路径 config/index.js
proxyTable: {
'/api': { // 匹配所有以 '/api'开头的请求路径 即匹配的是axios中传入的url参数,/api/user 这种形式才会匹配
target: 'http://d.apicloud.com/mcm/api', // 代理目标的基础路径
changeOrigin: true, // 支持跨域
pathRewrite: {// 重写路径: 去掉路径中开头的'/api' 当真正的接口不需要api时重写
'^/api': '' //去掉匹配到的路径的/api 如果不去掉就删除pathRewrite
}
}
}
//最后得到的路径就是 target+url
//假设请求的url为 /api/user
//经过node.js代理后 真正请求的是 http://d.apicloud.com/mcm/api/user
//需要注意的是F12显示的仍然是localhost:8080/api/usesr 但实际上发送的地址是经过node.js代理服务器实现的跨域请求
请求头
const instance = axios.create({
baseURL: '/api',
timeout: 1000,
headers: {
'X-APICloud-AppId': 'A6914327011091',
'X-APICloud-AppKey': '8ac17d22e49cb7982d82796097cec52a6c7cd01d.1475375422841'
}
})
//get请求
promise = instance.get(url)
//post请求
promise = instance.post(url)
关于浮点数计算的问题
state.totalPrice = parseFloat((state.totalPrice + food.price).toFixed(2))
需要注意:不能直接(state.totalPrice + food.price).toFixed(2),因为 toFixed() 返回一个数值的字符串表现形式。
首页左右滑动效果
组件用的是 mint-ui 提供的当时 存在一个问题 它只提供了滑动效果 不会和 tab 动态的关联起来,所以借助了 vue-touch。
vue-touch 使用:
cnpm install vue-touch@text
main.js 绑定 vue
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
FoodList 中使用
<v-touch @swipeLeft=""></v-touch> //从左往右滑动
<v-touch @swipeRight=""></v-touch> //从右往左滑
绑定事件,使用this.$emit('v-swipeLeft') //自定义事件
Home 中使用
<FoodList @v-swipeLeft=""/>
绑定事件
触发nav的updateSelectedIndex事件
通过this.$refs.nav.updateSelectedIndex(更改的下标) //要先给nav绑定ref="nav"
优化建议:是否可以通过 watch 监听 navBar 的下标变化,如果变化了,在 this.$nextTick 中执行初始化方法。
mockjs 图片资源
安装:
cnpm install mockjs -S
在 mock 文件目录下新建 data.js ,格式: JSON 数据类型。
// mockServer.js
import Mock from 'mockjs'
import data from './data.json'
// 返回水果的接口
Mock.mock('/fruits', {code:0, data: data.fruits})
// 返回食材的接口
Mock.mock('/ingredients', {code:0, data: data.ingredients})
// 返回零食的接口
Mock.mock('/snacks', {code:0, data: data.snacks})
//返回牛奶的接口
Mock.mock('/milks', {code:0, data: data.milks})
//返回蔬菜的接口
Mock.mock('/vegetables', {code:0, data: data.vegetables})
在 main.js 中引入
import './mock/mockServer.js'
♻️ 资源
大小: 3.81MB
➡️ 资源下载:https://download.csdn.net/download/s1t16/87301521
相关文章
- Vue笔记:vue-router
- vue+koa2即时聊天,实时推送比特币价格,爬取电影网站
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue.js语法
- [Vue @Component] Write Vue Functional Components Inline
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- vue.js3: i18n根据浏览器语言自动选择当前语言(vue@3.2.37 / vue-i18n@9.2.0-beta.36)
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- Vue入门教程:node安装vue命令行工具及启动项目
- 一个典型的Vue应用的App.vue
- vue项目路由不跳转的问题
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue项目报错:migrating.js?2bb5:56 [Element Migrating][ElInput][Event]: click is removed.
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- ASP.NET Core微服务(五)——【vue脚手架解析接口】
- vue中 evenBus调用,兄弟间传值
- vue 常用语法糖
- vue-router路由实现页面的跳转
- 在vue项目中禁用eslint
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 30 道 Vue 面试题
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(二)环境搭建
- Vue学习笔记之Vue中的路由使用
- Vue:第一个vue-cli项目