preface

This project is modeled after the page of Binke. Since the page of Binke air tickets cannot be opened, there is no page for writing air tickets. In addition, I only wrote booking page, login page and Register page for the back-end API.

Technology stack

Front end: Vue + stylus + AXIos

Back-end :egg.js + mysql + sequelize

Deployment :nginx + Xshell + Xftp

Results demonstrate

Vue front-end

Route encapsulation of the utils folder

Encapsulating the axios request

The import axios from 'axios const host =' http://127.0.0.1:7001/api 'export {host} function request (url, method, data, header = {}) { return new Promise((resolve, reject) => { return axios({ method: method, url: host + url, data: data, header: { 'content-type': 'application/json' // Default value}}).then((res) => {resolve(res.data)}).catch(error => {reject(error)})})} export function get (url, data) { return request(url, 'GET', data) } export function post (url, data) { return request(url, 'POST', data) }Copy the code

router.js

Lazy loading of routes

import Vue from 'vue' import Router from 'vue-router' const _import_ = file => () => import(`@/pages/${file}.vue`) Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/booking' }, { path: '/booking', name: 'booking', component: _import_('booking'), children: [ { path: '/', name: '/', component: _import_('hotel'), meta: {the title: '| | Booking.com website popular hotels and home stay facility'}}, {path: 'plane' name: 'plane' component: _import_ (' plane '), meta: {title: 'Booking aircraft '}}, {path: 'rentCar', name: 'rentCar', Component: _import_('rentCar'), meta: {title: 'Booking aircraft '}}, {path: 'rentCar', name: 'rentCar', Component: _import_('rentCar'), meta: {title: 'Booking '}}, {path: 'fWheel', name: 'fWheel', Component: _import_('fWheel'), meta: {title: }}, {path: 'taxi', name: 'taxi', Component: _import_('taxi'), meta: {title: 'Booking taxi '}}]}, {path: '/user/login', name: 'login', Component: _import_('login'), meta: {title: 'register'}}, {path: '/user/register', name: 'register', Component: _import_('register'), meta: {title: 'register'}}]})Copy the code

Page authoring

All that’s left is the writing of the page, and look at the back end

The back-end

Page structure

The creation of sequelize

  • Install sequelize

You can look it up

  • Add the following code to the config.default.js file of config
Config. sequelize = {dialect:'mysql', host:'127.0.0.1', port: 3306, username: 'root', password: '******', database: 'booking' }Copy the code
  • Add the following code to the plugin.js file of config
Sequelize: {enable:true, package:'egg-sequelize'}Copy the code
  • Create the sequelizer file in the app sibling directory. Write the following code
'use strict'

const path = require('path');

module.exports = {
  config: path.join(__dirname, 'database/config.json'),
  'migrations-path': path.join(__dirname, 'database/migrations'),
  'seeders-path': path.join(__dirname, 'database/seeders'),
  'models-path': path.join(__dirname, 'app/model')
}
Copy the code

Run the sequelize init command

./node_modules/.bin/sequelize init
Copy the code

And finally, the sequelize command is used to create a table, add the seed data to the table if you don’t know sequelize

Cross-domain problem

Add the following code to the config.default.js file of config

config.security = {
    csrf: {
      enable: false,
      ignoreJSON: true
    },
    domainWhiteList: ['*']
  };
  
  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  };
Copy the code
  • Add the following code to the plugin.js file of config
cors: {
	  enable: true,
	  package: 'egg-cors'
  },
Copy the code

Mysql link

  • MySQL installation
  • Create the database file config.js in the sibling directory of your app
{" development ": {" username" : "root", "password" : "* * * * * *", "database", "booking", "the host" : "127.0.0.1", "the dialect" : "mysql", "operatorsAliases": false }, "test": { "username": "root", "password": "******", "database": "Booking ", "host": "127.0.0.1", "dialect": "mysql", "operatorsAliases": false}, "production": {"username": "Root", "password" : "* * * * * *", "database", "booking", "the host" : "127.0.0.1", "the dialect" : "mysql", "operatorsAliases" : false } }Copy the code

Backend API writing

router.js

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.prefix('/api')
  router.get('/booking/currency', controller.booking.getCurrency);
  router.get('/booking/location', controller.booking.getLocation);
  router.get('/booking/hotelType', controller.booking.getHotelType);
  router.get('/booking/hotelRent', controller.booking.getHotelRent);
  router.get('/booking/hotelStation', controller.booking.getHotelStation);
  router.post('/user/login', controller.user.login)
  router.post('/user/register', controller.user.register)
};
Copy the code

The controller layer

'use strict';

const Controller = require('egg').Controller;

class UserController extends Controller {
  async login() {
    const { ctx } = this;
    const { username, password } = ctx.request.body
    await ctx.service.user.loginIn({ username, password })
  }

  async register() {
    const { ctx } = this;
    const { username, password } = ctx.request.body
    await ctx.service.user.register({ username, password })
  }
}

module.exports = UserController;
Copy the code

The service layer

Const Service = require('egg').Service class UserService extends Service {async loginIn(user) {  ctx, app } = this const userInfo = await ctx.model.User.findOne({where: { username: User.username}}) console.log(userInfo) let code = 0 if (userInfo == null) {MSG = 'user does not exist, Please register 'code = 378} else {if (user.password! = userinfo.password) {MSG = 'password error, please re-enter' code = 399} else {MSG = 'login successful' code = 200}} ctx.body = {MSG: MSG, code: Code}} async register(user) {const {CTX, app } = this let msg = '' let code = 0 const userInfo = await ctx.model.User.findOne({where: { username: user.username }}) if (userInfo ! = null) {MSG = 'user already exists, 'code = 356} else {await ctx.model.user. create(User) MSG =' register 'code = 200} ctx.body = {MSG: MSG, code: code } } } module.exports = UserServiceCopy the code

Model layer

Module.exports = app => {// console.log('model layer ') const {INTEGER, STRING, BOOLEAN} = app.sequelize; Const user = app.model.define('user', {id: {allowNull: false,// primaryKey: true,// autoIncrement: True,// increment type: INTEGER,// type comment: 'user id'}, username: {type: STRING(50), primaryKey: true,// primaryKey allowNull: False, defaultValue: ", comment: 'username'}, password: {type: STRING(32), allowNull: false, defaultValue: ", comment: 'user password'}, disabled: {type: BOOLEAN, allowNull: false, defaultValue: false, comment: 'is disabled'}}, {timestamps: false, tableName: 'user', underscored: false }) // console.log(location, '-----') return user }Copy the code

The back end is almost there and finally the launch of the website

Site deployment

The deployment of the site is shown here

Nginx server setup and configuration

Egg.js is deployed to the server

Nginx with mysql installation

Nginx with mysql installation

Nginx configuration file details

Thank you very much for the above documentation

My Github address: My Github

Website address: website address (server has expired)

The last

Finally, of course, I will shamelessly ask for a star again. If you think my project is good, you can give me a star to encourage me