An entry-level front – end separation project, including front – end and back – end subprojects. The front-end is multi-page application based on Vue buckets (the React single-page version has been added), and the back-end is based on Koa2+Sequelize and mainly provides API interfaces.

Online preview front-end source code back-end source code

Projects show

Project characteristics

  1. The front end
  • Vue-cli3 builds multi-page applications
  • Componentized development
  • Manage state using Vuex
  • Responsive pages for mobile
  1. The back-end
  • Use the Koa2 framework
  • Token authentication login is supported

Technology stack

  • Front-end: Vue + Vuex + VUE-Router
  • Back-end: Node + Koa2 + Sequelize
  • Third-party libraries: Axios, Tweenjs, LeanCloud
  • Middleware: JsonWebToken, KOA-JWT, KOA-Static, etc

Main directory structure

  1. The front end
. ├ ─ dist /Build the generated code├ ─ SRC /# source directory│ ├ ─ assets /# Common resources, mainly SCSS│ ├ ─ components /# Common Components│ ├ ─ HTTP /# HTTP request correlation│ ├ ─ a mixin /# mixin│ ├ ─ pages /# page│ │ ├ ─ cart /# a shopping cart│ │ ├ ─ home /# page│ │ ├ ─ member /# the user page│ │ ├ ─ product /# Product details page│ ├ ─ utils /# tool library├ ─ ─ vue. Config. JsConfigure multiple page entry├ ─ ─. Babelrc ├ ─ ─ package. The jsonCopy the code
  1. The back-end
. ├ ─ the database /# database directory├ ─ middleware /# middleware├ ─ public /# Published code (static resources)├ ─ routes /Server routing├ ─ ─ app. JsStart file
Copy the code

Run back-end projects locally

The front-end code is packaged in the remote library and placed in a public folder, so running the back-end project can preview the full effect.

  1. Clone remote library
git clone [email protected]:BlameDeng/sun-server-demo.git
Copy the code
  1. Install dependencies
yarn
Copy the code
  1. Start the project
node app
Copy the code

The browser open http://localhost:8000/home.html preview.

Run the front-end project locally

Front-end projects require background data support, so running front-end projects locally requires running server-side projects as well as doing some extra configuration work.

  1. Clone remote library
git clone [email protected]:BlameDeng/sun-client-demo.git
Copy the code
  1. Install dependencies
yarn
Copy the code
  1. You need to configure the appId and appKey of leanCloud because the graphical verification code of leanCloud is used
  • Create or open an existing application in LeanCloud
  • Enable graphic Captcha service (free)
  • Create a key.js file in the project root directory and write your app Id and key:
export default {
    appId: 'your appId',
    appKey: 'your appKey'
}
Copy the code
  1. Start the project (make sure the server is running)
yarn serve
Copy the code

The browser open http://localhost:8080/home.html preview.

PS

The server is configured to cross domains, so that the front-end project on port 8080 can get data from the back-end project on port 8000 when the front-end project is running at the same time. If you need to change the back-end project port, follow these steps:

  1. Modify the back-end project root directory app.js

  1. Modify the url.js in the HTTP directory of the front-end project sun-client-demo > SRC > HTTP

Change prefix to the port specified by the back-end project, such as ‘http://localhost:3000’. Note that the modifications are the port where the back-end project runs and the port where the front-end project obtains data. The front-end project itself still runs on the vuE-CLI specified port.