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