vue2.0+router+vuex+express 构建淘票票的全栈demo
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Screenshots 优化图片滑动效果 Feb 10, 2017
build vue2.0 Dec 22, 2016
config vue2.0 Dec 22, 2016
server i Dec 1, 2017
src 修复首页警告key Apr 21, 2018
.babelrc vue2.0 Dec 22, 2016
.editorconfig vue2.0 Dec 22, 2016
.gitignore vue2.0 Dec 22, 2016
README.md modify readme Dec 13, 2017
index.html vue2.0 Dec 22, 2016
package.json vue2.0 Dec 26, 2016
yarn.lock ejs up v Dec 1, 2017

README.md

vue2.0与express构建淘票票页面

react构建淘票票,请点击这里

react-native构建淘票票,请点击这里

描述

写这个项目的目的一是为了学习vue2.0相关的知识点,二是为了给他想要了解vue2.0的童鞋提供一个学习demo。所以为了使这个项目更加完整,项目中加入一个server服务,模拟服务器环境,为前端提供数据来源,当用npm run deploy命令运行前端环境时,就可以直接将前端资源部署到server服务里。因此本项目有两个环境,一个是前端开发环境(端口是8080),一个是server服务环境(端口是9090)。

主要技术栈:

  • vue2.0
  • vue-router
  • vuex
  • mint-ui
  • nodejs
  • express

如何运行

下载项目

 git clone https://github.com/canfoo/vue2.0-taopiaopiao.git

打开一个终端(称这个终端为A终端)进入到vue2.0-taopiaopiao目录安装依赖包

 npm install

打开另一个一个终端(称这个终端为B终端)进入到server目录安装依赖包

 npm install

启动server服务(得先启动后台服务,否则前端页面没有数据),在server目录下执行以下命令,成功执行会终端会提示服务端口号为9090

 npm run start

启动前端开发服务,在vue2.0-taopiaopiao目录里执行以下命令,成功执行后,会自动打开浏览器访问前端开发环境,浏览地址是http://localhost:8080

 npm run dev

前端资源部署到server里,开发完成后,在vue2.0-taopiaopiao目录里执行以下命令,成功执行后,可以通过访问server提供的路径访问到页面了,访问路径为http://localhost:9090/app

 npm run deploy

备注:因为本项目有提供后台服务,所以当前端部署到服务器后,只要后台服务启动,就可以直接通过http://localhost:9090/app路径访问到前端页面,无须再启动前端的开发服务。

项目预览

Mou icon ---------- Mou icon Mou icon ---------- Mou icon

主要目录结构

build
config
src //前端主要开发目录
--assets //存放前端静态资源
--components //存放组件
--store //vuex数据流管理
--views //页面试图,由vue-router引入
--App.vue
--main.js //前端入口文件
server //后台服务
--bin //启动后台服务配置
--database //存放页面所需要的json数据
--public //前端部署时存放在后台服务的位置
--routes //路由于请求接口管理
--views //前端模板存放位置
--app.js //后台服务入口

后台接口

本项目是手动抓取淘票票部分数据,数据是16年12月份的,城市数据只有北上广有数据,其它城市都是随机从北上广数据抽取过来的,电影数据也是部分有数据。抓取的数据存放在server目录里的database里,供前端调用。

  1. 访问淘票票首页路径: http://localhost:9090/app

  2. 部分数据接口

    • 获取热映数据
    method: GET
    url: http://localhost:9090/movie/hot/?city=bj
    参数说明: city可以为bj、sh、gz
    
    • 获取即将上映数据
    method: GET
    url: http://localhost:9090/movie/coming/?limit=20&offset=0
    参数说明: limit为每次请求的数据数量,offset为所有数据的偏移量
    
    • 获取城市数据
    method: GET
    url: http://localhost:9090/movie/city
    
    • 获取电影院数据
    method: GET
    url: http://localhost:9090/movie/cinema/?city=bj
    参数说明:  city可以为bj、sh、gz
    

项目博客地址

如果对项目有疑惑的地方,请到http://www.cnblogs.com/canfoo/p/6214406.html里留言。如果觉得这个项目对你有帮助的话,请Star一下本项目,这是对作者最大的支持。