Giter VIP home page Giter VIP logo

vue2.0-taopiaopiao's Introduction

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

描述

写这个项目的目的一是为了学习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一下本项目,这是对作者最大的支持。

vue2.0-taopiaopiao's People

Contributors

canfoo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue2.0-taopiaopiao's Issues

选座问题

点击购买,没反应,故不能到选座页面,是本身就没有这个功能么。

server 文件夹下面运行 npm run start 报错了 貌似说 sever 里的package有问题能帮我看看吗?

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_global\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: node ./bin/www
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_global\node_modules\npm\lib\utils\lifecycle.js:222:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_global\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:827:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\vue_pro\taobaopiao\vue2.0-taopiaopiao\server
12 error Windows_NT 6.1.7601
13 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_global\node_modules\npm\bin\npm-cli.js" "run" "start"
14 error node v4.4.5
15 error npm v3.0.0
16 error code ELIFECYCLE
17 error [email protected] start: node ./bin/www
17 error Exit status 1
18 error Failed at the [email protected] start script 'node ./bin/www'.
18 error This is most likely a problem with the taopiaopiao-server package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error node ./bin/www
18 error You can get their info via:
18 error npm owner ls taopiaopiao-server
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

刷新bug

上面tab切换到即将上映,滚动一段距离,刷新后回到正在热映,但是滚动却没有恢复

版本问题 请问下这个怎么解决

ERROR in

Vue packages version mismatch:

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

@ ./src/main.js 61:8-35

在执行npm install安装依赖报之前,项目对环境有什么特殊需求吗?

D:\NodeJs_workspace\taopiaopiao>npm install
npm WARN registry Unexpected warning for http://registry.npm.taobao.org/: Miscellaneous Warning ETIMEDOUT: request to http://registry.npm.taobao.org/babel-preset-es2015 failed, reason: connect ETIMEDOUT 114.55.80.225:80
npm WARN registry Using stale package data from http://registry.npm.taobao.org/ due to a request error during revalidation.
npm WARN deprecated [email protected]: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

[email protected] install D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli
node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download(403): https://node-zopfli.s3.amazonaws.com/Release/zopfli-v2.0.2-node-v57-win32-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI, unknown) (falling back to source compile with node-gyp)
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (D:\software\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack at PythonFinder. (D:\software\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack at D:\software\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "D:\software\nodejs\node.exe" "D:\software\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "configure" "--fallback-to-build" "--module=D:\NodeJs_workspace\taopiaopiao\node_modules\node
-zopfli\lib\binding\node-v57-win32-x64\zopfli.node" "--module_name=zopfli" "--module_path=D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli\lib\binding\node-v57-win32-x64"
gyp ERR! cwd D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli
gyp ERR! node -v v8.9.4
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'D:\software\nodejs\node.exe D:\software\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=D:\NodeJs_workspace\taopiaopiao\node_mod
ules\node-zopfli\lib\binding\node-v57-win32-x64\zopfli.node --module_name=zopfli --module_path=D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli\lib\binding\node-v57-win32-x64' (1)
node-pre-gyp ERR! stack at ChildProcess. (D:\NodeJs_workspace\taopiaopiao\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack at emitTwo (events.js:126:13)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:214:7)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:925:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
node-pre-gyp ERR! System Windows_NT 10.0.16299
node-pre-gyp ERR! command "D:\software\nodejs\node.exe" "D:\NodeJs_workspace\taopiaopiao\node_modules\node-pre-gyp\bin\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli
node-pre-gyp ERR! node -v v8.9.4
node-pre-gyp ERR! node-pre-gyp -v v0.6.39
node-pre-gyp ERR! not ok
Failed to execute 'D:\software\nodejs\node.exe D:\software\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli\lib\binding\no
de-v57-win32-x64\zopfli.node --module_name=zopfli --module_path=D:\NodeJs_workspace\taopiaopiao\node_modules\node-zopfli\lib\binding\node-v57-win32-x64' (1)
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'D:\NodeJs_workspace\taopiaopiao\node_modules\fsevents\node_modules'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\node-zopfli):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: node-pre-gyp install --fallback-to-build
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

added 595 packages in 320.541s
无法安装依赖包,能帮忙看看是什么问题吗?感谢!

编译后,无法正常访问。

1

在根目录下npm run deploy 后,无报错,
default

然后进去server中npm run start:strict ,无报错。
123

但是访问的时候,就一直等待。

2

另外,启动server后,运行npm run dev的时候,可以成功。

主要是因为8080端口其他的应用还要使用,所以就。。。

打包

执行npm run build 怎么没有dist 文件夹?

更新 vuex2.1.1

vuex2.1.1更新了模块功能,store的调用可以简化很多

有关底部导航栏的问题

我看到底部使用footerNav.vue 这个组件,
上面的showNav的值是怎么改变的?

props: {
  	'showNav': {
  		type: Boolean,
  		default: true
  	}
  },

请教。

svg files loading issue

npm run start

> [email protected] start E:\workspace\vue\taopiaopiao\server
> node ./bin/www

services running on port 9090
GET /javascripts/app.f27ee68ddb3ef9c510cd.js 200 5.378 ms - 130244
GET /app 304 4.786 ms - -
GET /javascripts/app.f27ee68ddb3ef9c510cd.js 304 0.929 ms - -
GET /stylesheets/app.012a750207e0e7ec260354a1e81618cc.css 304 1.567 ms - -
GET /javascripts/vendor.6fc7238190796b50b9d8.js 304 0.299 ms - -
GET /javascripts/manifest.320b50c7c0f2c60ccd61.js 304 0.404 ms - -
GET /movie/swiper 304 4.383 ms - -
GET /movie/hot/?city=bj 304 9.007 ms - -
GET /movie/coming/?limit=20&offset=0 304 14.427 ms - -
GET /public/img/hno.5bb3a6e.svg 500 3.549 ms - 1355
Error: Failed to lookup view "error" in views directory "./views"
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1008:7)
    at E:\workspace\vue\taopiaopiao\server\app.js:65:7
    at Layer.handle_error (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\layer.js:71:5)
    at trim_prefix (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:315:13)
    at E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:335:12)
    at IncomingMessage.next (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:275:10)
    at done (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1003:25)
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:582:14)
GET /public/img/hok.42539e3.svg 500 3.956 ms - 1355
GET /movie/city 304 11.953 ms - -
Error: Failed to lookup view "error" in views directory "./views"
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1008:7)
    at E:\workspace\vue\taopiaopiao\server\app.js:65:7
    at Layer.handle_error (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\layer.js:71:5)
    at trim_prefix (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:315:13)
    at E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:335:12)
    at IncomingMessage.next (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:275:10)
    at done (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1003:25)
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:582:14)
GET /public/img/mno.8a74b01.svg 500 1.763 ms - 1355
Error: Failed to lookup view "error" in views directory "./views"
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1008:7)
    at E:\workspace\vue\taopiaopiao\server\app.js:65:7
    at Layer.handle_error (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\layer.js:71:5)
    at trim_prefix (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:315:13)
    at E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:335:12)
    at IncomingMessage.next (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:275:10)
    at done (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1003:25)
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:582:14)
GET /public/img/mok.d9e5301.svg 500 5.900 ms - 1355
Error: Failed to lookup view "error" in views directory "./views"
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1008:7)
    at E:\workspace\vue\taopiaopiao\server\app.js:65:7
    at Layer.handle_error (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\layer.js:71:5)
    at trim_prefix (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:315:13)
    at E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:335:12)
    at IncomingMessage.next (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:275:10)
    at done (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1003:25)
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:582:14)
GET /public/img/eno.fb4a488.svg 500 1.040 ms - 1355
Error: Failed to lookup view "error" in views directory "./views"
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1008:7)
    at E:\workspace\vue\taopiaopiao\server\app.js:65:7
    at Layer.handle_error (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\layer.js:71:5)
    at trim_prefix (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:315:13)
    at E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:335:12)
    at IncomingMessage.next (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\router\index.js:275:10)
    at done (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\response.js:1003:25)
    at Function.render (E:\workspace\vue\taopiaopiao\server\node_modules\express\lib\application.js:582:14)
GET /app 304 1.375 ms - -
GET /img/nostart.0a7b703.svg 304 0.916 ms - -
GET /img/star.ef7d74b.svg 304 2.034 ms - -
GET /img/3dimax.a8f3047.svg 304 3.224 ms - -
GET /img/imax.737a19b.svg 304 3.928 ms - -
GET /img/3d.265e474.svg 304 0.328 ms - -

求解vuex里的city里的updateCityAsync函数

你好。我有个疑惑,就是下面这段代码里的 Vue.http.get(/movie/hot/?city=${city.rN}),它请求的是前缀等于城市的首字母缩写的_hot.json文件吗??那这里的rN是自己在局部state里自定义的吧??
`import { UPDATECITY } from './type'
import { mapMutations } from 'vuex'

import Vue from 'vue'
export default {
updateCityAsync ({ commit, state }, {city}) {
if (!city.name) {
city.name = state.name
city.rN = state.rN
}
return Vue.http.get(/movie/hot/?city=${city.rN}).then((response) => {
let data = response.data
let lists = data.data.data.returnValue
//模拟索引数据的id号
lists.forEach((item, index) => {
item.mID = index
})
city.data = lists
commit(UPDATECITY, { city })
})
}
}
`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.