项目简介
蜘蛛电影主要是仿猫眼电影的一个vue项目
主要功能：
1. 城市定位
2. 展示正在热映的电影
3. 展示即将上映的电影
4. 搜索
5. 展示影院
6. 我的页面
7. 电影详情
项目开发环境
编译工具：vscode
操作系统：win10
node环境：node 12.18.3 npm6.14.6
Vue脚手架：vue-cli 4.5.4
版本管理工具：git bash 2.28.0
服务器软件：Tomcat9.0（我设置Tomcat服务器对应的地址为：localhost:8082）
项目开发流程
1. 项目需求分析
2. 项目工期评估
3. 项目责任划分
前端：
静态页面制作
前端框架选型
前端页面架构
后端：
数据库开发
API接口文档
API接口实现
创建项目
在对应的项目目录下打开cmd
利用Vue-cli创建项目：（我选择的是Vue3.x版本）
vue create 项目名
创建完后会生成一堆文件夹和文件：
在gitee创建项目对应的远程仓库
将本地库与远程库进行关联
把master分支中初始的项目文件/目录都推送到远程仓库中
创建并切换到dev分支，把dev分支的初始项目文件/目录也推送到远程仓库
创建并切换到一个新的分支（createComponents）用来专门创建组件
以下部分在createComponents分支上开发↓↓↓↓↓↓
初始化路由的配置---电影页面，影院页面，我的页面
总共有三个页面：电影页面，影院页面，我的页面
电影页面的路由配置：
影院页面的路由配置：
我的页面的路由配置：
在路由主配置页面（index.js）中引入各路由：
路由重定向的配置
当跳转的路由不存在，利用重定向默认跳转到电影页面（路径：/movie）
重定向：redirect:'跳转的路由'
在router文件夹下的index.js进行配置：
对项目中初始的index.html文件进行一些修改
//增加了user-scalable=no，不允许用户放大缩小页面
//引入公共的css样式
//引入图标
App.vue文件的修改
留出一个路由出口：
创建头部组件
在components文件夹下创建一个header文件夹，并在此文件夹下创建index.vue文件
1. 编写相关的HTML,CSS代码
2. 为实现动态值（对应页面对应标题）的切换（实现父子组件的数据传递），可利用在Vue中的props（数据单向传递。父组件值的会改变子组件的值，子组件的值改变不会影响父组件）
定义一个名称title，类型为String，默认值为'蜘蛛电影'
然后在对应标签（）中的内容处写上{
{title}}，接收传递过来的数据
创建尾部组件
在components文件夹下创建一个footer文件夹，并在此文件夹下创建index.vue文件
编写相应的HTML,CSS代码
创建页面组件---电影页面
在views文件夹下创建一个movie文件夹，并在此文件夹下创建index.vue文件
1. 初始化页面代码
2. 在script标签中引入头部组件和尾部组件
import Header from "@/components/header";
import Footer from "@/components/footer";
3. 为切换头部组件中的标题，在Header标签中添加属性title，值为'蜘蛛电影'，传递给header组件
4. 编写相应的HTML,CSS代码
HTML中分为两部分：
1) 电影菜单栏（城市定位，正在热映，即将上映，搜索）
2) 正在上映和即将上映的电影页面展示（通过router-view标签进行相应的渲染）
5. 对电影菜单栏的每一个功能都使用router-link标签，使其跳转到对应的子路由
配置电影页面中的子路由
电影页面中的子路由有：'city'（城市），'showing'（正在热映），'coming'（即将上映），'search'（搜索）
利用children来进行配置子路由（会拼接到/movie后面）
当在电影页面时，默认显示正在热映的页面，即路由重定向到'/movie/showing'
电影页面---创建城市的组件
在components文件夹下创建一个city文件夹，并在此文件夹下创建index.vue文件
1. 编写相应的HTML,CSS代码
HTML中分为三部分：
1) 热门城市
2) 城市分类
3) 首字母侧边栏
电影页面---创建正在热映的组件
在components文件夹下创建一个showing文件夹，并在此文件夹下创建index.vue文件
1. 编写相应的HTML,CSS代码
HTML中分为每一部电影的区域
而每一个电影区域中分为三部分：
1) 电影图片
2) 电影信息：电影名，电影分数，主演，影院场次
3) 购票按钮
电影页面---创建即将上映的组件
在components文件夹下创建一个coming文件夹，并在此文件夹下创建index.vue文件
1. 编写相应的HTML,CSS代码
HTML中分为每一部电影的区域
而电影的每一个区域中分为三部分：
1) 电影图片
2) 电影信息：电影名，想观看人数，导演，主演，上映时间
3) 预售按钮
电影页面---创建搜索的组件
在components文件夹下创建一个search文件夹，并在此文件夹下创建index.vue文件
1. 编写相应的HTML,CSS代码
HTML中分为两部分：
1) 搜索输入框
2) 搜索结果展示区域：大类型，每一部电影对应的信息（电影图片，电影名，电影分数，电影英文名，电影类型，电影日期）
创建页面组件---影院页面
在views文件夹下创建一个cinema文件夹，并在此文件夹下创建index.vue文件
1. 初始化页面代码
2. 在script标签中引入头部组件和尾部组件
import Header from "@/components/header";
import Footer from "@/components/footer";
3. 为切换头部组件中的标题，在Header标签中添加属性title，值为'蜘蛛影院'，传递给header组件
4. 编写相应的HTML,CSS代码
HTML中分为两部分：
1) 影院菜单栏（全城，品牌，特色）
2) 影院页面展示（通过router-view标签进行相应的渲染）
影院页面---创建展示影院的组件
在components文件夹下创建一个cinemalist文件夹，并在此文件夹下创建index.vue文件
1. 编写相应的HTML,CSS代码
HTML中分为每一个影院的区域
而每一个影院区域分为3部分：
1) 影院名和价钱
2) 地址和距离
3) 一些折扣卡之类的
创建页面组件---我的页面
在views文件夹下创建一个mine文件夹，并在此文件夹下创建index.vue文件
1. 初始化页面代码
2. 在script标签中引入头部组件和尾部组件
import Header from "@/components/header";
import Footer from "@/components/footer";
3. 为切换头部组件中的标题，在Header标签中添加属性title，值为'我的蜘蛛'，传递给header组件
4. 编写相应的HTML,CSS代码
HTML中就渲染一个登录页面的组件
我的页面---创建登录组件
在components文件夹下创建一个login文件夹，并在此文件夹下创建index.vue文件
1. 编写相应的HTML,CSS代码
HTML中分为五个部分
1) 账户名输入框
2) 密码
3) 验证码
4) 登录按钮
5) 找回密码和立即注册
到目前为止，在createComponents分支上的开发大概已完成了，可以把此分支上的东西合并到dev分支上，再推送到远程仓库中
1. 在createComponents分支：git add .，git commit提交代码到本地库
2. 切换到dev分支：git checkout dev
3. 合并到dev分支上：git merge createComponents --no-ff
4. 推送代码到gitee的远程库中：git push origin dev
5. 可以删除createComponents分支：git branch -d createComponents
接下来可继续进行相应的开发了
创建新分支setData，专门用来渲染数据的
创建并切换分支setData：git checkout -b setData
以下操作均在setData分支上开发↓↓↓↓↓↓
我把相关数据的api文件都放在Tomcat搭建的服务器上，由于数据存放的ip地址为localhost:8082，而项目运行的ip地址为localhost:8081 所以在渲染数据的时候就存在一个跨域问题
解决跨域问题
在项目目录中新建文件：vue.config.js
编写：（编写完后记得重启项目，才会生效）
渲染数据时使用axios来进行一个ajax的请求
1. 安装axios：npm i -S axios
2. 引入axios：
在main.js文件中编写import axios from 'axios'
3. 把axios添加在Vue的原型上，在开发中就能利用this直接调用axios：
createApp(App).config.globalProperties.$axios=axios;
4. 使用axios：（利用getCurrentInstance方法的ctx来调用挂载的axiox）
import { getCurrentInstance } from "vue";
const { ctx } = getCurrentInstance();
ctx.$axios.xxx
城市组件---渲染城市数据
部分城市数据：
1. 在data(){return {}}中定义两个数据：hotlist数组（接收传递过来的热门城市数据），citylist数组（接收传递过来的普通城市数据）
2. 在city组件中，在生命周期为mounted的钩子函数中，利用axios的get请求取得城市数据
3. 随后将数据渲染到页面上（利用v-for）
4. 在methods中编写一个方法，使得点击侧边栏字母能跳转到对应首字母的城市列表，并且对应点击的字母背景色变为灰色（在侧边栏字母对应的li上添加一个touchstart事件监听，此方法为handleToIndex）
handleToIndex方法思路：
1) 先在类为city_sort的div上添加ref属性，属性值设为city_sort，便于在js中获取到此元素
2) 利用this.$refs.xxx（属性值）来获取到此div元素
3) 根据上一步获取到的div元素来取得它的子元素h2（即取到首字母的区域）