前言

学习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