Vue全家桶 + vant + koa + mysql 仿移动端网易严选
2020/3/6 11:02:03
本文主要是介绍Vue全家桶 + vant + koa + mysql 仿移动端网易严选,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
学习vue也有一段时间了,而且也想多练习练习写后端,所以想自己写一个vue移动端项目,于是前阵子就着手开始写了,到现在也算是写得差不多了。
后端数据库使用的mysql,感谢大佬开源的数据库数据
技术栈
前端:Vue + vant + axios + less
后端:koa + mysql
项目构建
前端运行在8080端口上,后端运行在3000端口上,前端使用axios
进行接口请求,后端定义接口并使用koa2-cors
解决跨域问题,使用koa-bodyparser
解析请求体,解决get请求拿不到前端数据的问题。
前端
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 复制代码
后端
# install dependencies npm install # serve with hot reload at localhost:3000 npm run dev 复制代码
使用 amfe-flexible
和 postcss-px2rem-exclude
解决移动端css适配问题
index.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 复制代码
.postcssrc.js
module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, 'postcss-px2rem-exclude': { remUnit: 75, exclude: /node_modules|folder_name/i } } } 复制代码
相关页面展示
首页
搜索
商品详情
订单
分类
购物车
登录注册
未登录时部分操作会进行登陆拦截
实现的主要功能
-
搜索功能
这里将vant的search组件作为当前路由的子组件,热门搜索,历史搜索点击可直接搜索相关商品,也可输入关键词搜索,输入时有相关关键词索引,点击可进行搜索。
-
购物车功能
这里创建一个数组来保存选中状态,要注意的是,直接通过数组的索引来改变数组状态,是无法动态改变DOM的,这算是vue2+版本的一个缺陷吧,当然在vue3.0版本这个问题已经得到了解决。
-
订单功能
主要是在实现订单数据同步以及收货地址的修改,这里遇到了一个坑,就是上篇文章所提到的vue数据缓存的问题,最终使用
keepalive
+beforeRouteEnter
解决了。 -
登录注册功能
未登录状态下部分功能无法使用,比如购物车、收藏、下单等操作,登录后使用
localStorage
存储用户状态,登录后可使用my
路由下的部分功能,如个人收藏,地址编辑等。 -
后端功能
主要是使用
koa
创建服务,使用knex.js
连接mysql,然后定义各种api接口用于前端数据操作。
最后附上地址:github
这篇关于Vue全家桶 + vant + koa + mysql 仿移动端网易严选的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南