vue+ egg 仿繽客網

時間 2020-03-05

標籤 vue egg 简体版

原文原文鏈接

前言

這個項目是仿製繽客網的頁面，由於繽客網機票頁面打不開，因此就沒有編寫機票頁面，而且後端的api我只寫了booking頁面、login頁面、register頁面,不足之處請見諒。html

技術棧

前端:vue + stylus + axios前端

後端:egg.js + mysql + sequelizevue

部署:nginx + xshell + Xftpnode

效果演示

Vue前端

utils文件夾的路由封裝

axios請求的封裝mysql

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' // 默認值
      }
    }).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)
}

複製代碼

router.js

路由的懶加載ios

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: {
            title: 'Booking.com | 官網 | 熱門酒店和民宿'
          }
        },
        {
          path: 'plane',
          name: 'plane',
          component: _import_('plane'),
          meta: {
            title: 'Booking 飛機'
          }
        },
        {
          path: 'rentCar',
          name: 'rentCar',
          component: _import_('rentCar'),
          meta: {
            title: 'Booking 租車'
          }
        },
        {
          path: 'fWheel',
          name: 'fWheel',
          component: _import_('fWheel'),
          meta: {
            title: 'Booking 觀光和活動'
          }
        },
        {
          path: 'taxi',
          name: 'taxi',
          component: _import_('taxi'),
          meta: {
            title: 'Booking 出租車'
          }
        }
      ]
    },
    {
      path: '/user/login',
      name: 'login',
      component: _import_('login'),
      meta: {
        title: '登陸'
      }
    },
    {
      path: '/user/register',
      name: 'register',
      component: _import_('register'),
      meta: {
        title: '註冊'
      }
    }
  ]
})

複製代碼

頁面的編寫

剩下的就是頁面的編寫了，下面請看後端nginx

後端

頁面結構

sequelize的建立

安裝sequelize 這個能夠去查資料
在config的config.default.js文件加入一下代碼

config.sequelize = {
    dialect:'mysql',
    host:'127.0.0.1',
    port: 3306,
    username: 'root',
    password: '******',
    database: 'booking'
  }
複製代碼

在config的plugin.js文件加入一下代碼

// Sequelize插件
  sequelize: {
    enable:true,
    package:'egg-sequelize'
  }
複製代碼

在app同級目錄下建立.sequelizer文件編寫如下代碼

'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')
}
複製代碼

執行 sequelize init 命令git

./node_modules/.bin/sequelize init
複製代碼

最後就是sequelize命令的使用建立表，加入種子數據 sequelize上面不會的也能夠看看github

跨域問題

在config的config.default.js文件加入一下代碼vue-router

config.security = {
    csrf: {
      enable: false,
      ignoreJSON: true
    },
    domainWhiteList: ['*']
  };
  
  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  };
複製代碼

在config的plugin.js文件加入一下代碼

cors: {
	  enable: true,
	  package: 'egg-cors'
  },
複製代碼

mysql的連接

安裝MySQL
在app的同級目錄建立database文件config.js

{
  "development": {
    "username": "root",
    "password": "******",
    "database": "booking",
    "host": "127.0.0.1",
    "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",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "operatorsAliases": false
  }
}

複製代碼

後端api的編寫

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)
};
複製代碼

controller層

'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;
複製代碼

service層

const Service = require('egg').Service

class UserService extends Service {
  async loginIn(user) {
    // sql 及存儲業務的組織
    const { ctx, app } = this
    const userInfo = await ctx.model.User.findOne({where: { username: user.username }})
    console.log(userInfo)
    let msg = ''
    let code = 0
    if (userInfo == null) {
      msg = '用戶不存在，請註冊'
      code = 378
    } else {
      if (user.password != userInfo.password) {
        msg = '密碼錯誤，請從新輸入'
        code = 399
      } else {
        msg = '登陸成功'
        code = 200
      }
    }
    ctx.body = {
      msg: msg,
      code: code
    }
  }

  async register(user) {
    // sql 及存儲業務的組織
    const { ctx, app } = this
    let msg = ''
    let code = 0
    const userInfo = await ctx.model.User.findOne({where: { username: user.username }})
    if (userInfo != null) {
      msg = '用戶已存在，請從新註冊'
      code = 356
    } else {
      await ctx.model.User.create(user)
      msg = '註冊成功'
      code = 200
    }
    ctx.body = {
      msg: msg,
      code: code
    }
  }
}

module.exports = UserService
複製代碼

model層

module.exports = app => {
  // console.log('model層')
  const { INTEGER, STRING, BOOLEAN }  = app.Sequelize;
  const user = app.model.define('user', {
    id: {
      allowNull: false,// 容許爲空嗎
      primaryKey: true,// 主鍵
      autoIncrement: true,// 自增
      type: INTEGER,// 類型
      comment: '用戶id'
    },
    username: {
      type: STRING(50),
      primaryKey: true,// 主鍵
      allowNull: false,
      defaultValue: '',
      comment: '用戶名'
    },
    password: {
      type: STRING(32),
      allowNull: false,
      defaultValue: '',
      comment: '用戶密碼'
    },
    disabled: {
      type: BOOLEAN,
      allowNull: false,
      defaultValue: false,
      comment: '是不是禁用狀態'
    }
  },
  {
    timestamps: false,
    tableName: 'user',
    underscored: false
  })
  // console.log(location, '-----')
  return user
}
複製代碼