系統(tǒng)分析的作業(yè)是寫一個電影購票系統(tǒng)惊畏。于是用vue2.0和豆瓣api簡單地搭建了一個購票系統(tǒng)。
前端使用vue2.0, 搭建單頁面應(yīng)用
vue提供了腳手架vue-cli密任，使用vue-cli可以快速搭建前端開發(fā)環(huán)境
npm install -g vue-cli
vue init webpack wonderWallMovie
cd wonderWallMovie
npm install
前端架構(gòu)改進(jìn):
1颜启、引入vuex管理數(shù)據(jù)流
2、引入element-ui作為前端的UI框架
3浪讳、使用sass作為前端樣式語言农曲。
4、組件化抽離
以index-page為例驻债，前端開發(fā)頁面將十分簡潔
<template lang="jade">
.index-page
el-carousel
el-carousel-item(v-for="item in carousels" key="item.src")
img(:src="item.src")
.hot-showing
.title 正在熱映
movielist(:data="moviesList")
</template>
<script>
import movielist from '@/components/movie-list'
let icarousels = [
{src: require('../assets/movie-1.jpg')},
{src: require('../assets/movie-2.jpg')},
{src: require('../assets/movie-3.jpg')},
]
export default {
data: function() {
return {
carousels: icarousels
}
},
mounted () {
// 獲取正在上映的列表
this.$store.dispatch('getMovies')
},
components: {
movielist
},
computed: {
moviesList () {
return this.$store.getters.moviesList.subjects
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
@import "../styles/pages/index-page.sass"
</style>
服務(wù)端使用java的spring-boot框架
spring-boot是非常簡單乳规，容易上手的服務(wù)端開發(fā)框架。
當(dāng)然也可以選擇nodejs合呐，python等其他語言進(jìn)行開發(fā)暮的，只要接口統(tǒng)一即可。
服務(wù)端接口使用Restful API
wonderWall 服務(wù)端接口
GET /api/hotMovies 返回正在熱映的電影列表
GET /api/movies 返回所有電影的列表
GET /api/movies/:movieId 返回具體電影的信息
GET /api/movies/:movieId/cinema 返回該電影支持上映的電影院
GET /api/movies/:movieId/cinema/:cinemaId 返回該電影院上映該電影的所有廳次
GET /api/movies/:movieId/cinema/:cinemaId/hall 返回該廳次的所有座位
POST /api/movies/:movieId/cinema/:cinemaId/hall/:seatIds 生成訂單
GET /api/movies/search?q= 搜索具體一個電影
POST /api/login 登錄
POST /api/logout 登出
前后端分離淌实，實(shí)現(xiàn)快速開發(fā)
由于在開發(fā)過程中服務(wù)端涉及到數(shù)據(jù)模型的抽象冻辩，數(shù)據(jù)庫的建立等等，為了保持前后端的開發(fā)速度拆祈，做了前后端分離恨闪。
ps: 服務(wù)端使用java spring-boot ，前后端分離需要服務(wù)端在服務(wù)器上穩(wěn)定運(yùn)行放坏，需要使用命令：
nohup mvn spring-boot:run &
開發(fā)環(huán)境配置
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 代理api到豆瓣
proxyTable: {
target: 'http://returngirl.cn:8080/',
changeOrigin: true,
pathRewrite: {
// '^/api': ''
}
}
}
}
服務(wù)端的程序部署在個人的騰訊云服務(wù)器上咙咽。本地開發(fā)把a(bǔ)pi代理到服務(wù)器即可。
部署 && 持續(xù)集成
生產(chǎn)環(huán)境配置
1淤年、編譯壓縮代碼钧敞，生成生成環(huán)境的代碼。
npm run build//即執(zhí)行了（node build/build.js）
vue-cli + wepback打包后生成的文件如下：
2麸粮、配置服務(wù)器的nginx指向index.html
3溉苛、配置nginx實(shí)現(xiàn)前后端分離
持續(xù)集成
持續(xù)集成使用web-hook(以github為例)
然后使用nodejs編寫web-hook程序,使用Pm2管理進(jìn)程. （web-hook同時也監(jiān)聽了我個人日志的更新）
后期持續(xù)集成考慮專用gitlab runner.
成果
項(xiàng)目代碼地址：
