{"id":13536377,"url":"https://github.com/canfoo/vue2.0-taopiaopiao","last_synced_at":"2025-04-12T14:19:45.785Z","repository":{"id":58312616,"uuid":"77158392","full_name":"canfoo/vue2.0-taopiaopiao","owner":"canfoo","description":"vue2.0+router+vuex+express 构建淘票票的全栈demo","archived":false,"fork":false,"pushed_at":"2018-04-21T01:53:01.000Z","size":19017,"stargazers_count":1236,"open_issues_count":3,"forks_count":380,"subscribers_count":54,"default_branch":"master","last_synced_at":"2025-03-27T12:12:31.726Z","etag":null,"topics":["express","mint","vue2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/canfoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-22T16:10:07.000Z","updated_at":"2025-03-24T18:32:15.000Z","dependencies_parsed_at":"2022-08-31T18:51:20.510Z","dependency_job_id":null,"html_url":"https://github.com/canfoo/vue2.0-taopiaopiao","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canfoo%2Fvue2.0-taopiaopiao","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canfoo%2Fvue2.0-taopiaopiao/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canfoo%2Fvue2.0-taopiaopiao/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canfoo%2Fvue2.0-taopiaopiao/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canfoo","download_url":"https://codeload.github.com/canfoo/vue2.0-taopiaopiao/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247006666,"owners_count":20868033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","mint","vue2"],"created_at":"2024-08-01T09:00:38.138Z","updated_at":"2025-04-03T13:18:13.350Z","avatar_url":"https://github.com/canfoo.png","language":"Vue","funding_links":[],"categories":["Demo示例","Vue"],"sub_categories":[],"readme":"# vue2.0与express构建[淘票票](https://h5.m.taobao.com/app/movie/pages/index/index.html?from=def\u0026spm=a1z2r.7661912.h5-movie-list.121\u0026sqm=a1z2r.7661912.1.1\u0026bottomtab=show)页面\n\n### [react构建淘票票，请点击这里](https://github.com/canfoo/react-taopiaopiao)\n### [react-native构建淘票票，请点击这里](https://github.com/canfoo/react-native-taopiaopiao)\n\n## 描述\n写这个项目的目的一是为了学习vue2.0相关的知识点，二是为了给他想要了解vue2.0的童鞋提供一个学习demo。所以为了使这个项目更加完整，项目中加入一个server服务，模拟服务器环境，为前端提供数据来源，当用`npm run deploy`命令运行前端环境时，就可以直接将前端资源部署到server服务里。因此本项目有两个环境，一个是前端开发环境(端口是8080)，一个是server服务环境(端口是9090)。\n\n主要技术栈：\u003cbr/\u003e\n- vue2.0\n- vue-router\n- vuex\n- mint-ui\n- nodejs\n- express\n\n## 如何运行\n下载项目\n```\n git clone https://github.com/canfoo/vue2.0-taopiaopiao.git\n```\n 打开一个终端（称这个终端为A终端）进入到vue2.0-taopiaopiao目录安装依赖包\n```\n npm install\n```\n 打开另一个一个终端（称这个终端为B终端）进入到server目录安装依赖包\n```\n npm install\n```\n启动server服务（得先启动后台服务，否则前端页面没有数据），在server目录下执行以下命令，成功执行会终端会提示服务端口号为9090\n```\n npm run start\n```\n启动前端开发服务，在vue2.0-taopiaopiao目录里执行以下命令，成功执行后，会自动打开浏览器访问前端开发环境，浏览地址是`http://localhost:8080`\n```\n npm run dev\n```\n前端资源部署到server里，开发完成后，在vue2.0-taopiaopiao目录里执行以下命令，成功执行后，可以通过访问server提供的路径访问到页面了，访问路径为`http://localhost:9090/app`\n```\n npm run deploy\n```\n\n备注：因为本项目有提供后台服务，所以当前端部署到服务器后，只要后台服务启动，就可以直接通过`http://localhost:9090/app`路径访问到前端页面，无须再启动前端的开发服务。\n\n## 项目预览\n![Mou icon](./Screenshots/1.gif) ----------\n![Mou icon](./Screenshots/2.gif)\n![Mou icon](./Screenshots/3.gif) ----------\n![Mou icon](./Screenshots/4.gif)\n\n## 主要目录结构\n\u003e build  \n\u003e config \u003cbr/\u003e\n\u003e src  //前端主要开发目录\u003cbr/\u003e\n\u003e  --assets  //存放前端静态资源\u003cbr/\u003e\n\u003e  --components  //存放组件\u003cbr/\u003e\n\u003e  --store  //vuex数据流管理\u003cbr/\u003e\n\u003e  --views  //页面试图，由vue-router引入\u003cbr/\u003e\n\u003e  --App.vue \u003cbr/\u003e\n\u003e  --main.js  //前端入口文件\u003cbr/\u003e\n\u003eserver  //后台服务\u003cbr/\u003e\n\u003e  --bin  //启动后台服务配置\u003cbr/\u003e\n\u003e  --database  //存放页面所需要的json数据\u003cbr/\u003e\n\u003e  --public  //前端部署时存放在后台服务的位置\u003cbr/\u003e\n\u003e  --routes  //路由于请求接口管理\u003cbr/\u003e\n\u003e  --views  //前端模板存放位置\u003cbr/\u003e\n\u003e  --app.js  //后台服务入口\u003cbr/\u003e\n\n## 后台接口\n本项目是手动抓取淘票票部分数据，数据是16年12月份的，城市数据只有北上广有数据，其它城市都是随机从北上广数据抽取过来的，电影数据也是部分有数据。抓取的数据存放在server目录里的database里，供前端调用。\n\n1. 访问淘票票首页路径： `http://localhost:9090/app`\n\n2. 部分数据接口\n\t- 获取热映数据\n\t```\n\tmethod: GET\n \turl: http://localhost:9090/movie/hot/?city=bj\n \t参数说明: city可以为bj、sh、gz\n\t```\n\t- 获取即将上映数据\n\t```\n\tmethod: GET\n \turl: http://localhost:9090/movie/coming/?limit=20\u0026offset=0\n \t参数说明: limit为每次请求的数据数量，offset为所有数据的偏移量\n\t```\n\t- 获取城市数据\n\t```\n\tmethod: GET\n \turl: http://localhost:9090/movie/city\n\t```\n\t- 获取电影院数据\n\t```\n\tmethod: GET\n \turl: http://localhost:9090/movie/cinema/?city=bj\n \t参数说明:  city可以为bj、sh、gz\n\t```\n\n\n## 项目博客地址\n如果对项目有疑惑的地方，请到[http://www.cnblogs.com/canfoo/p/6214406.html](http://www.cnblogs.com/canfoo/p/6214406.html)里留言。如果觉得这个项目对你有帮助的话，请Star一下本项目，这是对作者最大的支持。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanfoo%2Fvue2.0-taopiaopiao","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanfoo%2Fvue2.0-taopiaopiao","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanfoo%2Fvue2.0-taopiaopiao/lists"}