基于vue-cli和豆瓣api搭建电影系统

系统分析的作业是写一个电影购票系统。于是用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.

成果

http://returngirl.cn:8000

image.png

项目代码地址：

https://gitlab.com/returnGirl/vue-movie