安装完vue脚手架工具后：安装vue脚手架方法
项目拥有的文件夹：
build存放的是配置文件vue-loader等
config存放的是服务器运行的文件
node_modules存放的是依赖包：npm install
src存放的是组件，api文件等等
static存放的是静态文件，img、js、css等公共文件
src下面的api的index.js文件存放api接口
/*
接口功能：首页轮播图数据接口
接口参数：__t:时间戳
*/
const HOME_BANNER_API = '/v4/api/billboard/home';
/*
接口功能：正在热映的电影
接口参数：__t:时间戳
page: 请求页面
count:请求个数
*/
const NOW_PLAYING_API = '/v4/api/film/now-playing';
/*
接口功能：即将上映的电影
接口参数：__t:时间戳
page: 请求页面
count:请求个数
*/
const COMING_SOON_API = '/v4/api/film/coming-soon';
/*
接口功能：影院列表
接口参数：__t:时间戳
*/
const CINEMAS_API = '/v4/api/cinema';
export default {
HOME_BANNER_API,
NOW_PLAYING_API,
COMING_SOON_API,
CINEMAS_API
}
src下面的services文件下的services.js存放promise或取得data数据
import axios from 'axios'
import API from '../api'
// 请求首页的轮播图数据
export function getHomeBannerData(){
return new Promise((resolve, reject)=>{
axios.get(API.HOME_BANNER_API, {
params: {
__t: new Date().getTime()
}
})
.then(response=>{
// console.log(response);
let data = response.data.data.billboards.map(item=>{
return {
id: item.id,
imageUrl: item.imageUrl
}
})
resolve(data);
})
.catch(error=>{
console.log('请求失败');
})
})
}
//请求正在热映的电影数据
export function getNowPlayingData(page, count){
return new Promise((resolve, reject)=>{
//发送请求
axios.get(API.NOW_PLAYING_API, {
params: {
__t: new Date().getTime(),
page,
count
}
})
.then(response=>{
// console.log('成功');
//处理请求成功的数据
let data = response.data.data.films.map(item=>{
return {
name: item.name,
id: item.id,
cover: item.cover.origin,
cinemaCount: item.cinemaCount,
watchCount: item.watchCount,
grade: item.grade,
poster: item.poster.origin,
intro: item.intro
}
});
resolve({
data,
total: response.data.data.page.total
});
})
.catch(error=>{
console.log('失败');
})
})
}
//请求即将上映的数据
export function getComingSoonData(page, count){
return new Promise((resolve, reject)=>{
// 请求
axios.get(API.COMING_SOON_API, {
params: {
__t: new Date().getTime(),
page,
count
}
})
.then(response=>{
let data = response.data.data.films.map(item=>{
return {
name: item.name,
id: item.id,
cover: item.cover.origin,
premiereAt: item.premiereAt,
poster: item.poster.origin,
intro: item.intro
}
})
resolve({
data,
total: response.data.data.page.total
});
})
.catch(error=>{
console.log('失败');
})
})
}
src下面的router文件下index.js引入跳转的子页面
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from '@/pages/home/Index.vue'
import Films from '@/pages/films/Index.vue'
import Cinemas from '@/pages/cinemas/Index.vue'
import Shop from '@/pages/shop/Index.vue'
import Mine from '@/pages/mine/Index.vue'
import Card from '@/pages/card/Index.vue'
export default new Router({
routes: [
{
path: '/home',
alias: '/',
name: 'home',
component: Home
},
{
path: '/films',
name: 'films',
component: Films
},
{
path: '/cinemas',
name: 'cinemas',
component: Cinemas
},
{
path: '/shop',
name: 'shop',
component: Shop
},
{
path: '/mine',
name: 'mine',
component: Mine
},
{
path: '/card',
name: 'card',
component: Card
}
]
})