[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8977":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},8977,"vue2.0-taopiaopiao","canfoo\u002Fvue2.0-taopiaopiao","canfoo","vue2.0+router+vuex+express 构建淘票票的全栈demo","",null,"Vue",1227,374,52,3,0,52.72,false,"master",true,[22,23,24],"express","mint","vue2","2026-06-12 04:00:42","# vue2.0与express构建[淘票票](https:\u002F\u002Fh5.m.taobao.com\u002Fapp\u002Fmovie\u002Fpages\u002Findex\u002Findex.html?from=def&spm=a1z2r.7661912.h5-movie-list.121&sqm=a1z2r.7661912.1.1&bottomtab=show)页面\n\n### [react构建淘票票，请点击这里](https:\u002F\u002Fgithub.com\u002Fcanfoo\u002Freact-taopiaopiao)\n### [react-native构建淘票票，请点击这里](https:\u002F\u002Fgithub.com\u002Fcanfoo\u002Freact-native-taopiaopiao)\n\n## 描述\n写这个项目的目的一是为了学习vue2.0相关的知识点，二是为了给他想要了解vue2.0的童鞋提供一个学习demo。所以为了使这个项目更加完整，项目中加入一个server服务，模拟服务器环境，为前端提供数据来源，当用`npm run deploy`命令运行前端环境时，就可以直接将前端资源部署到server服务里。因此本项目有两个环境，一个是前端开发环境(端口是8080)，一个是server服务环境(端口是9090)。\n\n主要技术栈：\u003Cbr\u002F>\n- vue2.0\n- vue-router\n- vuex\n- mint-ui\n- nodejs\n- express\n\n## 如何运行\n下载项目\n```\n git clone https:\u002F\u002Fgithub.com\u002Fcanfoo\u002Fvue2.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:\u002F\u002Flocalhost:8080`\n```\n npm run dev\n```\n前端资源部署到server里，开发完成后，在vue2.0-taopiaopiao目录里执行以下命令，成功执行后，可以通过访问server提供的路径访问到页面了，访问路径为`http:\u002F\u002Flocalhost:9090\u002Fapp`\n```\n npm run deploy\n```\n\n备注：因为本项目有提供后台服务，所以当前端部署到服务器后，只要后台服务启动，就可以直接通过`http:\u002F\u002Flocalhost:9090\u002Fapp`路径访问到前端页面，无须再启动前端的开发服务。\n\n## 项目预览\n![Mou icon](.\u002FScreenshots\u002F1.gif) ----------\n![Mou icon](.\u002FScreenshots\u002F2.gif)\n![Mou icon](.\u002FScreenshots\u002F3.gif) ----------\n![Mou icon](.\u002FScreenshots\u002F4.gif)\n\n## 主要目录结构\n> build  \n> config \u003Cbr\u002F>\n> src  \u002F\u002F前端主要开发目录\u003Cbr\u002F>\n>  --assets  \u002F\u002F存放前端静态资源\u003Cbr\u002F>\n>  --components  \u002F\u002F存放组件\u003Cbr\u002F>\n>  --store  \u002F\u002Fvuex数据流管理\u003Cbr\u002F>\n>  --views  \u002F\u002F页面试图，由vue-router引入\u003Cbr\u002F>\n>  --App.vue \u003Cbr\u002F>\n>  --main.js  \u002F\u002F前端入口文件\u003Cbr\u002F>\n>server  \u002F\u002F后台服务\u003Cbr\u002F>\n>  --bin  \u002F\u002F启动后台服务配置\u003Cbr\u002F>\n>  --database  \u002F\u002F存放页面所需要的json数据\u003Cbr\u002F>\n>  --public  \u002F\u002F前端部署时存放在后台服务的位置\u003Cbr\u002F>\n>  --routes  \u002F\u002F路由于请求接口管理\u003Cbr\u002F>\n>  --views  \u002F\u002F前端模板存放位置\u003Cbr\u002F>\n>  --app.js  \u002F\u002F后台服务入口\u003Cbr\u002F>\n\n## 后台接口\n本项目是手动抓取淘票票部分数据，数据是16年12月份的，城市数据只有北上广有数据，其它城市都是随机从北上广数据抽取过来的，电影数据也是部分有数据。抓取的数据存放在server目录里的database里，供前端调用。\n\n1. 访问淘票票首页路径： `http:\u002F\u002Flocalhost:9090\u002Fapp`\n\n2. 部分数据接口\n\t- 获取热映数据\n\t```\n\tmethod: GET\n \turl: http:\u002F\u002Flocalhost:9090\u002Fmovie\u002Fhot\u002F?city=bj\n \t参数说明: city可以为bj、sh、gz\n\t```\n\t- 获取即将上映数据\n\t```\n\tmethod: GET\n \turl: http:\u002F\u002Flocalhost:9090\u002Fmovie\u002Fcoming\u002F?limit=20&offset=0\n \t参数说明: limit为每次请求的数据数量，offset为所有数据的偏移量\n\t```\n\t- 获取城市数据\n\t```\n\tmethod: GET\n \turl: http:\u002F\u002Flocalhost:9090\u002Fmovie\u002Fcity\n\t```\n\t- 获取电影院数据\n\t```\n\tmethod: GET\n \turl: http:\u002F\u002Flocalhost:9090\u002Fmovie\u002Fcinema\u002F?city=bj\n \t参数说明:  city可以为bj、sh、gz\n\t```\n\n\n## 项目博客地址\n如果对项目有疑惑的地方，请到[http:\u002F\u002Fwww.cnblogs.com\u002Fcanfoo\u002Fp\u002F6214406.html](http:\u002F\u002Fwww.cnblogs.com\u002Fcanfoo\u002Fp\u002F6214406.html)里留言。如果觉得这个项目对你有帮助的话，请Star一下本项目，这是对作者最大的支持。\n","该项目是一个基于Vue 2.0、Vue Router、Vuex和Express构建的淘票票全栈演示应用，旨在为开发者提供学习Vue 2.0相关技术的知识点。其核心功能包括前端页面展示与后端数据服务模拟，通过前后端分离架构实现。项目使用了Mint UI作为UI库，并集成了Node.js与Express来搭建简易的服务器环境，支持动态数据获取。适合于想要深入理解Vue生态系统及前后端协作流程的学习者或小型项目开发场景。",2,"2026-06-11 03:20:37","top_language"]