前言
這個專案是仿製繽客網的頁面，因為繽客網機票頁面打不開，所以就沒有編寫機票頁面，並且後端的api我只寫了booking頁面、login頁面、register頁面,不足之處請見諒。
技術棧
前端:vue + stylus + axios
後端:egg.js + mysql + sequelize
部署:nginx + xshell + Xftp
效果演示
Vue前端
utils資料夾的路由封裝
axios請求的封裝
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
路由的懶載入
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: '註冊'
}
}
]
})
複製程式碼頁面的編寫
剩下的就是頁面的編寫了，下面請看後端
後端
頁面結構
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 命令
./node_modules/.bin/sequelize init
複製程式碼最後就是sequelize命令的使用 建立表，加入種子資料 sequelize上面不會的也可以看看
跨域問題
在config的config.default.js檔案加入一下程式碼
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
}
複製程式碼後端差不多了 最後是網站的上線
網站的部署
非常感謝以上的文件
我的github地址: 我的github
網站地址: 網站地址
最後
最後的最後當然是厚著臉皮的再求個 star 啦，如果覺得我的專案還不錯的話，就給個 star 鼓勵一下吧~