preface

Learning VUE has been for a while, and I also want to practice writing the back end, so I want to write a vUE mobile project, so I started to write a few days ago, and now IT is almost written.

Back-end database using mysql, thanks to the big guy open source database data

Technology stack

Front end: Vue + Vant + Axios + less

Backend: KOA + mysql

Project address: Github

The project build

The front end runs on port 8080, the back end runs on port 3000, the front end uses AXIos for interface request, the back end defines the interface and uses KOA2-CORS to solve the cross-domain problem, uses KOA-BodyParser to parse the request body, and solves the problem that the get request can’t get the front end data.

The front end

# 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
Copy the code

The back-end

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev
Copy the code

useamfe-flexible 和 postcss-px2rem-excludeResolve the CSS adaptation problem on mobile devices

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Copy the code

.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
    }
  }
}
Copy the code

Related page display

Home page

search

Goods details

The order

classification

The shopping cart

Log in to register

If not logged in, some operations will perform login interception

Main functions implemented

  • The search function

    Here, vant’s Search component is taken as a sub-component of the current route. In hot search and history search, you can directly search related commodities by clicking on it, or you can enter keyword search. When you enter relevant keyword index, you can click on it to search.

  • Shopping cart function

    Create an array to store the selected state. Note that you cannot dynamically change the DOM by changing the array state directly through the index of the array. This is a drawback of vue2+, but has been fixed in vu3.0.

  • Function of the order

    It is mainly in order data synchronization and the change of the receiving address, there is a pit, which is the vUE data cache problem mentioned in the previous article, and finally used keepalive + beforeRouteEnter to solve the problem.

  • Login and registration function

    Some functions cannot be used without login, such as shopping cart, favorites, order and other operations. After login, use localStorage to store user status. After login, you can use some functions under my route, such as personal favorites, address editing and so on.

  • The back-end function

    The main thing is to create a service using KOA, connect to mysql using knex.js, and then define various APIS for front-end data operations.

The last address is github