系统分析的作业是写一个电影购票系统。于是用vue2.0和豆瓣api简单地搭建了一个购票系统。
前端使用vue2.0, 搭建单页面应用
vue提供了脚手架vue-cli，使用vue-cli可以快速搭建前端开发环境
npm install -g vue-cli
vue init webpack wonderWallMovie
cd wonderWallMovie
npm install
前端架构改进:
1、引入vuex管理数据流
2、引入element-ui作为前端的UI框架
3、使用sass作为前端样式语言。
4、组件化抽离
image.png
以index-page为例，前端开发页面将十分简洁
<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>
服务端使用java的spring-boot框架
spring-boot是非常简单，容易上手的服务端开发框架。
当然也可以选择nodejs，python等其他语言进行开发，只要接口统一即可。
服务端接口使用Restful API
wonderWall 服务端接口
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 登出
前后端分离，实现快速开发
由于在开发过程中服务端涉及到数据模型的抽象，数据库的建立等等，为了保持前后端的开发速度，做了前后端分离。
ps: 服务端使用java spring-boot ，前后端分离需要服务端在服务器上稳定运行，需要使用命令：
nohup mvn spring-boot:run &
开发环境配置
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 代理api到豆瓣
proxyTable: {
target: 'http://returngirl.cn:8080/',
changeOrigin: true,
pathRewrite: {
// '^/api': ''
}
}
}
}
服务端的程序部署在个人的腾讯云服务器上。本地开发把api代理到服务器即可。
部署 && 持续集成
生产环境配置
1、编译压缩代码，生成生成环境的代码。
npm run build//即执行了（node build/build.js）
vue-cli + wepback打包后生成的文件如下：
image.png
2、配置服务器的nginx指向index.html
3、配置nginx实现前后端分离
image.png
持续集成
持续集成使用web-hook(以github为例)
image.png
然后使用nodejs编写web-hook程序,使用Pm2管理进程. （web-hook同时也监听了我个人日志的更新）
image.png
后期持续集成考虑专用gitlab runner.
成果
image.png
项目代码地址：
