Vue-cli3.0項目---蜘蛛電影（步驟解析）

時間 2021-04-10

標籤 css html 前端 vue node ios css3 nginx git es6 欄目 CSS 简体版

原文原文鏈接

項目簡介css

蜘蛛電影主要是仿貓眼電影的一個vue項目
主要功能：
1. 城市定位
2. 展現正在熱映的電影
3. 展現即將上映的電影
4. 搜索
5. 展現影院
6. 個人頁面
7. 電影詳情

項目開發環境html

⁮編譯工具：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接口實現

建立項目vue

在對應的項目目錄下打開cmd
利用Vue-cli建立項目：（我選擇的是Vue3.x版本）
vue create 項目名
建立完後會生成一堆文件夾和文件：

在gitee建立項目對應的遠程倉庫
node

將本地庫與遠程庫進行關聯
ios

把master分支中初始的項目文件/目錄都推送到遠程倉庫中

css3

建立並切換到dev分支，把dev分支的初始項目文件/目錄也推送到遠程倉庫

nginx

建立並切換到一個新的分支（createComponents）用來專門建立組件
git

如下部分在createComponents分支上開發↓↓↓↓↓↓es6

初始化路由的配置---電影頁面，影院頁面，個人頁面

總共有三個頁面：電影頁面，影院頁面，個人頁面
電影頁面的路由配置：

影院頁面的路由配置：

個人頁面的路由配置：

在路由主配置頁面（index.js）中引入各路由：

路由重定向的配置

當跳轉的路由不存在，利用重定向默認跳轉到電影頁面（路徑：/movie）
重定向：redirect:'跳轉的路由'
在router文件夾下的index.js進行配置：

對項目中初始的index.html文件進行一些修改

//增長了user-scalable=no，不容許用戶放大縮小頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  
//引入公共的css樣式
<link rel="stylesheet" href="<%= BASE_URL %>css/common.css">  
//引入圖標
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2446917_rga2fsr9ns.css">

App.vue文件的修改

留出一個路由出口：<router-view />
加上keep-alive標籤：實現頁面緩存做用，由於切換組件被從新渲染時會影響性能，會顯著提升用戶體驗（會緩存不活動的組件）

建立頭部組件

在components文件夾下建立一個header文件夾，並在此文件夾下建立index.vue文件
1. 編寫相關的HTML,CSS代碼
2. 爲實現動態值（對應頁面對應標題）的切換（實現父子組件的數據傳遞），可利用在Vue中的props（數據單向傳遞。父組件值的會改變子組件的值，子組件的值改變不會影響父組件）
   定義一個名稱title，類型爲String，默認值爲'蜘蛛電影'
   而後在對應標籤（<h1></h1>）中的內容處寫上{{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（即取到首字母的區域）
   4) 利用offsetTop方法來得到每個首字母到達頂部的距離
   5) 對城市列表的包裹層（即類爲city_list的div，這裏表示的是第二步獲得div的父節點）用scrollTop的方法來改變到頂部滾動的距離，值爲第四步獲得的距離值
   6) 而後是改變點擊側邊欄字母裏的每一項的背景顏色
   7) 在類爲city_index的div上添加ref屬性，屬性值設爲city_index
   8) 利用this.$refs.xxx（屬性值）來獲取到此div元素
   9) 根據上一步獲取到的div元素來取得它的子元素li（即每個字母項）
   10) 先利用for循環把所有li的背景顏色變爲透明色
   11) 再對點擊的li改變背景色爲灰色（利用xxx.style.background='xxxx'）

正在熱映組件---渲染正在熱映的電影數據

部分正在熱映的電影數據：

1. 在data(){return {}}中定義一個數據：movielist數組（接收傳遞過來的正在熱映的電影數據）

2. 在showing組件中，在生命週期爲mounted的鉤子函數中，利用axios的get請求取得正在熱映的電影數據

3. 隨後將數據渲染到頁面上（利用v-for）
   其中傳遞過來的圖片路徑須要通過一些寬高設置的處理（使用Vue3.x的過濾方法（在main.js文件編寫））
   還有顯示怎樣版本的圖片標識可用v-if來進行判斷

即將上映組件---渲染即將上映的電影數據

部分即將上映的電影數據：

1. 在data(){return {}}中定義一個數據：cominglist數組（接收傳遞過來的即將上映的電影數據）

2. 在coming組件中，在生命週期爲mounted的鉤子函數中，利用axios的get請求取得即將上映的電影數據

3. 隨後將數據渲染到頁面上（利用v-for）
   其中傳遞過來的圖片路徑須要通過一些寬高設置的處理（使用Vue3.x的過濾方法（在main.js文件編寫））
   還有顯示怎樣版本的圖片標識可用v-if來進行判斷

搜索組件---渲染搜索結果的數據

部分搜索結果的電影數據：（這裏只提供了有關字母a,b,aaa的數據）

1. 在data(){return {}}中定義一個數據：message字符串（輸入框的值），movielist數組（接收傳遞過來的電影數據）

2. 在search組件中，在watch的鉤子函數中，若message發生變化，則利用axios的get請求取得搜索獲得的電影數據（在watch中，可作函數節流，Ajax異步數據獲取，操做DOM；依賴固定的數據類型等。一個本來就存在的數據，發生變化就執行函數）
   1) 在input標籤中，利用v-model雙向綁定message數據，監聽輸入框的值
   2) 在監聽message中進行axios的get請求

3. 隨後將數據渲染到頁面上（利用v-for）
   其中傳遞過來的圖片路徑須要通過一些寬高設置的處理（使用Vue3.x的過濾方法（在main.js文件編寫））

4. 在輸入框輸入數據的這種實時監測數據的狀況下，只要最後一次肯定的結果，前面的都清除掉。（即在這期間axios會觸發屢次請求，要把沒用到的請求中斷掉）
這個時候就要使用函數防抖的一個手段：
1. 可以使用定時器的方式
2. 也可利用axios終止請求的一些方法
   1) 一開始可先判斷終止請求的函數是否已經存在了，若存在就終止
   2) 在axios的第二個參數中新建一個cancelToken的實例（利用axios的構造函數CancelToken）（使得請求具備能夠取消的功能）

cinemalist組件---渲染影院的數據

部分影院的數據：（這裏只提供了江門，成都的影院數據）

1. 在data(){return {}}中定義一個數據：cinemalist數組（接收傳遞過來的影院數據）

2. 在cinemalist組件中，在生命週期爲mounted的鉤子函數中，利用axios的get請求取得影院的數據

3. 隨後將數據渲染到頁面上（利用v-for）
   還有顯示怎樣小卡片可用v-if來進行判斷

4. 在後面的步驟，會實現根據不一樣的城市地區渲染不一樣地區的影院數據

到目前爲止，在setData分支上的開發大概已完成了，能夠把此分支上的東西合併到dev分支上，再推送到遠程倉庫中

1. 在setData分支：git add .，git commit提交代碼到本地庫
2. 切換到dev分支：git checkout dev
3. 合併到dev分支上：git merge setData --no-ff
4. 推送代碼到gitee的遠程庫中：git push origin dev
5. 能夠刪除setData分支：git branch -d setData

接下來可繼續進行相應的開發了

建立新分支getCity，專門用來城市關聯數據的功能（不一樣城市關聯不一樣的影院數據）

建立並切換分支getCity：git checkout -b getCity

如下操做均在getCity分支上開發↓↓↓↓↓↓

全局封裝berrter-scroll組件

做用：
1. 使得滾動起來順滑，沒有那麼生硬
2. 解決滑動時不會觸發點擊事件（實現tap事件的一種方法，還有能夠利用zepto，vue-touch來實現）

組件生效的前提：
1. 包裹容器的高度或寬度必須小於內容的高度和寬度
2. 要等所要觸發的內容都渲染完

步驟：
1. 先安裝better-scroll插件：npm i -S better-scroll
2. 在components文件夾下建立一個scroller文件夾，並在此文件夾下建立index.vue文件
3. 編寫HTML,CSS部分
   HTML部分是有一個包裹層wrapper，裏面是一個slot插槽（顯示對應HTML模塊）
4. 引入better-scroll插件：import BScroll from "better-scroll";
5. 在鉤子函數mounted中編寫：
   1) 新建一個better-scroll實例：this.scroll = new BScroll('對應的包裹層元素',{相關的一些配置})
   2) 實現上拉刷新，須要綁定一個scroll事件：this.scroll.on("scroll", (pos) => {})
      在scroll事件中執行實現上拉刷新的方法（利用props接收由父組件傳過來的方法）：handleToScroll(){}
      還要綁定一個touchend事件(滑動結束會觸發)，來代表加載成功：this.scroll.on("touchEnd", (pos) => {})
      在touchEnd事件中執行相對應的方法（利用props接收由父組件傳過來的方法）：handleToTouchEnd(){};
   以上的這些都要在內容都加載完後才觸發，因此須要用到vue中的.$nextTick(()=>{})，mounted中的內容都添加到這裏面的函數中執行
6. 在鉤子函數updated中編寫：
   this.scroll.refresh();  //當數據更新時從新計算滑動值
7. 而在city組件中用到此滑動組件時，會發現側邊欄字母沒法控制對應字母區域的跳轉
   由於此時better-scroll在控制着這一塊區域，對應的方法就沒法生效了
   因此要利用better-scroll中的方法（scrollTo(x,y)），在better-scroll中添加此方法：toScrollTop(y) {this.scroll.scrollTo(0, y);}
   隨後在city組件中調用該方法
   1) 在scroller元素上添加ref屬性，屬性值爲city_list
   2) 經過獲取到這個元素來調用其身上的方法
8. 全局註冊此組件，使得能夠在文件中隨時使用。在main.js文件中編寫：

better-scroll組件全局的編寫：

better-scroll組件的調用：

全局封裝loading組件

因爲有些內容都要經過請求加載出來，在等待數據響應的過程當中，能夠在加載的過程當中添加一個loading組件，看上去也會更美觀一點，用戶的體驗感也會更好

1. 在components文件夾下建立一個loading文件夾，並在此文件夾下建立index.vue文件
2. 編寫HTML,CSS部分
   （可本身寫，也可直接去找一些css3實現loading效果的組件，推薦網址：https://codepen.io/trending）
3. 全局註冊此組件，使得能夠在文件中隨時使用。在main.js文件中編寫：

loading組件全局的編寫：

loading組件的調用：
（可在data中定義一個Boolean類型的數據：isLoading，爲true就顯示loading組件，不然就顯示better-scroll組件）

設置城市數據的本地存儲與狀態管理

對於一些不怎樣變化的數據，能夠存儲到本地（如：localStorage）

城市數據的本地存儲：（利用localStorage）
1. 當經過ajax請求獲得的數據後，利用window.localStorage.stetItem('xx',xx)來存儲數據（注意要先用JSON.stringfy方法來變爲字符串再存放）
2. 在ajax請求前，能夠先作一個判斷，若本地存儲中有相關數據，則直接進行賦值（注意取出數據時先要用JSON.parse方法來變爲JSON對象再賦值），不然就進行ajax請求取得數據

城市數據的狀態管理：（這裏就要用到store文件夾下的東西）
1. 先在store文件夾下新建一個名爲city的文件夾，在city文件夾下新建一個index.js文件（專門用來對城市數據進行狀態管理）
2. 在store的index.js文件中，引入上面的city模塊文件：import city from './city'
3. 把上面引入的city子模塊添加到modules中
4. 在city文件中的配置：（每一個子模塊都有本身的state、mutation、action等方法）
   1) 在state中定義兩個變量：nm（城市名），id（城市id）
   2) 在mutation中定義一個方法用來接收傳遞過來的值並更新state狀態裏的值：
      CITY_INFO(state,payload){
            state.nm=payload.nm;
            state.id=payload.id;
      }
    3) exports default{}的配置：
       export default {
           namespaced:true,  //使其成爲帶命名空間的模塊。保證在變量名同樣的時候，添加一個父級名拼接(在使用模塊中的mutations、getters、actions和獲取屬性時，要加上模塊名)
           state,
           actions,
           mutations
       }

5. 在電影組件（movie）的城市標籤顯示中，獲取到store狀態裏的city模塊的城市名來實現動態顯示城市數據（獲取對應的屬性值：$store.state.模塊名.模塊屬性）

6. 在city組件中，實現點擊每個城市就會更新當前的城市狀態信息並存儲起來
   1) 爲每一個城市li綁定click事件，並執行handleToCity()方法
   2) 在handleToCity方法中：
      經過this.$store.commit("模塊名/模塊中的mutations", {對應的值})方法把接收到對應的城市名和城市id都傳給city的狀態管理並更新
      利用localStorage存儲當前狀態的城市名和城市id
      選擇完城市後，利用this.$router.push('路由路徑')來自動跳轉到正在上映的電影頁面

經過當前城市的id關聯渲染相關的即將上映的電影數據和影院數據

這裏渲染的數據只提供了成都和江門地區
要想選擇完對應的城市後從新渲染相關的數據，無非就是從新發起ajax請求接收數據
但在生命週期mounted中，一旦有緩存系統keep-alive存在，那麼再次請求是不會進行觸發了
因此就要在actived生命週期中進行相關的請求
（activated生命週期是在keep-alive組件激活時調用的）
常規來講，是應該在activated生命週期中執行的，但我這裏反而要在mounted生命週期中執行才生效（目前我也不太清楚這個緣由，好奇怪）

渲染對應城市的即將上映的電影數據和影院數據的一些步驟：
1. 若是沒有切換城市的話，咱們則無需發送ajax請求
   1) 在data中新定義一個數據prevCityId（表示上一次選擇的城市id），一開始賦值爲-1
   2) 經過this.$store.state方法來獲取到城市狀態管理中的城市id
   3) 把prevCityId與獲取到當前狀態的城市id做比較，若相等（即沒有切換城市），則直接return退出，不須要發送請求，直接渲染緩存的數據
2. 若切換了城市，要發送請求，則要在請求的地址拼接上當前狀態的城市id進行請求數據，而且要把當前狀態的城市id賦值給prevCityId

全局封裝彈窗組件

若利用vue來建立這個組件，在傳參數或者複用的時候會有點麻煩，因此咱們這裏能夠利用JS來封裝此組件，並接收對應的參數
1. 在components文件夾下建立一個名爲JS的文件夾，在JS文件夾下建立一個index.js文件（做爲JS主模塊文件），在JS文件下建立一個名爲msgBox的文件夾，在msgBox文件夾下建立一個index.vue

2. 在msgBox對應的index.vue中編彈窗的HTML,CSS部分

3. 編寫JS對應的index.js文件
   1) 引入vue對應的createApp和h函數：import { createApp,h } from 'vue'
   2) 引入剛纔編寫的msgBox vue組件：import msgBox from './msgBox'
   3) 定義導出一個名爲messageBox的閉包函數，爲引入此組件提供一個接口：export var messageBox=(function(){})()
   4) 在此閉包函數中，首先定義一個默認配置的變量：defaults
   5) 接下來就是編寫返回出去的一個函數
   6) 接收傳過來的配置參數，並覆蓋掉默認的參數
   7) 定義對應的動態組件並掛載到DOM上（Vue2.0中能夠用Vue.extend({})方法，Vue3.0中能夠用createApp({})方法）
      i) 利用createApp定義一個名爲app的實例：const app=createApp({})
      ii) 利用render(){return h()}來進行渲染組件及相關的props屬性和插槽屬性等
        （h返回一個"虛擬節點"，包含向 Vue 描述它應在頁面上渲染哪一種節點的信息，包括全部子節點的描述。共接收三個參數：1. HTML 標籤名、組件或異步組件。使用返回 null 的函數將渲染一個註釋（必選），2. 一個對象，與咱們將在模板中使用的 attribute、prop 和事件相對應（可選），3. 子代 VNode，使用h()生成，或者使用字符串來獲取「文本 VNode」，或帶有插槽的對象（可選））
      iii) 新建立一個div節點，將此組件添加到body，並掛載

4. 而後繼續編寫msgBox對應的index.vue文件
   要接收傳過來的插槽屬性值，可利用v-slot和slot的配合
   要接收props的值，先在props:{}中定義那兩個函數值，經過this.$props.xxx來調用對應的函數方法

這裏是關於彈窗的一下小改進：
1. 在cancel和ok對應的區域中，判斷哪一個有值就顯示哪一個區域（利用v-if）
2. 點擊ok區域後也要移除掉彈窗並解除綁定
3. cancel和ok值都當作props屬性傳進去，並在對應的msgBox vue組件中進行接收

實現城市定位

城市的定位是在movie組件（電影頁面）中進行的
實現城市定位的方法是經過高德地圖開放的API實現的（詳情可查看網址：https://blog.csdn.net/qq_42817227/article/details/98303058?ops_request_misc=%7B%22request%5Fid%22%3A%22161728232116780357267112%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=161728232116780357267112&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-98303058.first_rank_v2_pc_rank_v29&utm_term=使用高德地圖定位）

1. 在movie組件中，先引入彈窗組件：import { messageBox } from "@/components/JS";

2. 在methods中定義一個方法handleOk（實現定位的方法），編寫此方法的前提是須要在public文件夾中的index.html中引入對應的js連接
   handleOk的函數方法：
   1) 編寫對應提供的定位函數方法
   2) 在成功獲取到的函數方法中，把定位獲得的城市名和城市id都存儲在localStorage中，同時利用this.$store.commit()方法更新城市的當前狀態
   
3. 在生命週期mounted中，先執行handleOk方法進行定位，再判斷當前的城市狀態和當前定位的城市是否相等，若是不相等，則彈出彈窗提示切換定位（2s後再彈出）
   彈窗的參數值：
   messageBox({
       title: "定位",
       content: this.nowCityName,
       cancel: "取消",
       ok: "切換定位",
       handleOk: () => {
         this.handleOk();
         window.location.reload();
       },
    });
    
 4. 在生命週期updated中，數據更新了就從新判斷一下當前的城市狀態和當前定位的城市是否相等，看是否須要從新定位

到目前爲止，在getCity分支上的開發大概已完成了，能夠把此分支上的東西合併到dev分支上，再推送到遠程倉庫中

1. 在getCity分支：git add .，git commit提交代碼到本地庫
2. 切換到dev分支：git checkout dev
3. 合併到dev分支上：git merge getCity --no-ff
4. 推送代碼到gitee的遠程庫中：git push origin dev
5. 能夠刪除getCity分支：git branch -d getCity

接下來可繼續進行相應的開發了

建立新分支detailPage，專門開發電影詳情頁面

建立並切換分支detailPage：git checkout -b detailPage

如下操做均在detailPage分支上開發↓↓↓↓↓↓

建立組件---電影詳情頁面組件

1. 電影詳情頁面的渲染入口：
電影詳情頁面的組件渲染，能夠經過在movie組件中經過router-view命令視圖來渲染出來
但這樣一來，就會和以前寫的渲染正在上映和即將上映的組件的router-view產生衝突了，這個時候咱們能夠經過name來把它們區分開來（即命名視圖），致使不讓它們渲染混亂
咱們把渲染電影詳情組件的命令視圖的name設爲detail

2. 接下來就要在movie的路由中設置詳情頁的路由
因爲使用了命名視圖，因此在對應子路由渲染組件的時候，寫法也會稍微不同
並且可經過路由傳參的方式把在電影頁面獲得的電影id值傳給電影詳情頁面，電影詳情頁經過props接收傳過來的id值，可請求到對應的電影詳情數據並渲染出來
如下圖片是相關的路由配置

3. 編寫電影詳情頁的組件
  1) 在views文件夾下的movie文件夾中，新建一個名爲detail.vue的文件
  2) 編寫相關的HTML,CSS
     引入header組件，由於要在頭部的左側加上一個回退上一級功能，因此須要增長一個圖標，在header組件中新增長一個插槽用來渲染圖標

3) 定義props屬性來接收從電影頁面傳過來的電影id（路由中定義的屬性名是什麼，這裏的props屬性名就定義什麼）
  4) 定義一個handleToBack方法實現返回上一級路由，利用 this.$router.back()方法來實現
  5) 而後就是利用ajax請求接收數據了，經過和接收到的電影id配合，來取得相應的電影詳情數據
  6) 其中在演職人員的展現中，咱們能夠利用swiper插件來實現移動端的滑動展現（要引入swiper相關的CSS，JS文件）
     （swiper中文網：https://www.swiper.com.cn/）

到目前爲止，在detailPage分支上的開發大概已完成了，能夠把此分支上的東西合併到dev分支上，再推送到遠程倉庫中

1. 在detailPage分支：git add .，git commit提交代碼到本地庫
2. 切換到dev分支：git checkout dev
3. 合併到dev分支上：git merge detailPage --no-ff
4. 推送代碼到gitee的遠程庫中：git push origin dev
5. 能夠刪除detailPage分支：git branch -d detailPage

以上基本就是客戶端的一些開發了，你也能夠自行完善一些其餘的功能

也能夠進行一下真機測試，即在手機上瀏覽開發的這個項目

進行真機測試的前提，就是手機和電腦要鏈接到同一個網絡
查看運行項目時的Network的地址,直接在手機瀏覽器中輸入這個地址就能夠查看了

若你這裏顯示的Network地址爲unavailable
解決方法：
在vue.config.js文件中，添加一個public屬性，屬性值爲此網絡的IPv4地址，並加上相應的端口號，重啓項目，就有顯示啦

項目的一些優化

1. 能夠在此項目開始的時候，加一個等待加載的動畫（在index.html文件中添加）
2. 修改基礎的公共根路徑（能夠指定一個根目錄，在此目錄下訪問全部的文件，組件）
   利用publicPath來修改生產模式和開發模式的基礎公共根路徑（在vue.config.js文件下配置）
   這是個人配置修改：

項目的打包

項目打包命令：npm run build
打包後的文件放在dist目錄中

下面是後端的操做↓↓↓↓↓↓

咱們的後端開發須要用到的技術

1. Node.js
2. Express
3. MongoDB
4. 其餘模塊

後端開發的前提準備

爲實現關於個人頁面的對應功能，須要進行後臺管理的開發，利用數據庫存儲用戶的對應信息
安裝node （可查看個人另外一篇文章：關於node）
安裝express：npm i -s express
可全局安裝express-generator：npm install -g express-generator
（express-generator會快速建立應用程序框架）

在項目目錄spider的同級目錄下，打開cmd
輸入命令：express -e 服務框架名

而後就會生成對應的一個目錄

進入此目錄，打開package.config文件，若是你想實時修改（監聽）文件
可把scripts中的"start": "node ./bin/www"改成"start": "nodemon ./bin/www"（前提是要安裝nodemon的這個插件）
運行後，在瀏覽器輸入對應的地址（我這裏設置的端口是3000），若出現下圖的內容，則證實已經打開成功

因爲咱們要用到數據庫來存儲咱們的用戶數據，咱們這裏就使用MongoDB數據庫
咱們能夠安裝mongoose模塊，利用express來對其操做數據
安裝mongoose：npm i -S mongoose
而後在spiderserver目錄下新建一個名爲db的文件夾，用來存放數據庫的數據
打開數據庫：（若你已經配置了mongodb的全局路徑，可在任意一處輸入命令。若沒有，則要在對應的mongodb的bin目錄下打開cmd輸入命令）
輸入命令：mongod --dbpath=db文件夾的路徑
咱們能夠新建一個名爲untils的文件夾，在此文件夾下新建一個名爲config.js的文件，這個文件是專門用來編寫數據庫和一些模塊的相關配置
編寫config.js文件：

而後再app.js文件中引入剛編寫的mongoose模塊文件：var {Mongoose}=require('./untils/config');
並調用它的鏈接數據庫方法：Mongoose.connect();
隨後可經過命令行或者可視化的數據庫工具Robo 3T來建立咱們對應的數據庫（具體操做可查看個人另外一篇文章《關於MongoDB》）
我這裏就使用可視化的數據庫工具來建立

建立完成後，咱們就能夠再次啓動咱們的服務器，看數據庫是否鏈接成功，若出現以下圖的狀況，則表示已鏈接成功

關於個人頁面須要編寫的相關接口

1. login：登錄接口
2. register：註冊接口
3. logout：登出藉口
4. verify：驗證接口
5. getUser：獲取用戶信息的接口
6. findPassword：找回密碼的接口
...

因爲後端採用的是MVC框架，咱們須要把數據和控制器分離出來，咱們能夠在此目錄下新建對應的文件夾models和controllers來分別處理相關的東西和編寫相關的接口
controllers是用來編寫相關的處理方法
models是用來管理相關的數據庫數據
在這兩個文件夾下分別新建文件users.js

編寫個人頁面的接口---驗證接口verify

咱們這裏的驗證接口是經過郵箱發送驗證碼驗證（會使用到nodemailer模塊）
準備一個發驗證碼的郵箱（開通SMTP服務）和一個接收驗證碼的郵箱
在untils文件夾下的config.js文件中編寫發送郵箱驗證碼的配置（先引入nodemailer模塊）：

在controllers文件夾下的users.js文件中先引入untils下的users.js模塊的Email對象，再編寫verify接口的處理方法：

在routers文件夾下的index.js文件中先引入controllers文件模塊，調用其verify接口的處理方法，而後配置verify接口的路由：（get請求）

設置驗證碼的時效性：
1. 在spiderserver/config/untils下的Email對象中新增一個獲取當前時間的方法

2. 在spiderserver/controllers/users.js下的驗證接口處理方法中，把發送驗證碼的時間存入session中

3. 在spiderserver/controllers/users.js下的註冊接口處理方法中，用當前的時間減掉剛纔存入session中的發送驗證碼的時間，判斷有沒有超過60秒，若超過60s則證實驗證碼已過時

編寫個人頁面的接口---註冊接口register

爲了能在註冊的時候拿到驗證時的驗證碼，須要對數據進行持久化操做，存入session中（利用express的中間件express-session）
安裝express-session：npm i -S express-session
在app.js文件中引入express-session模塊:var session=require('express-session');
引入模塊後可進行相關的配置：（記住要在路由聲明前進行配置）

在驗證接口中把接收郵箱和驗證碼都存入session中：
req.session.verify=verify; 
req.session.email=email; 

由於用戶的註冊信息須要保存到數據庫中，因此在models/users.js下進行相關的編寫：
1. 定義註冊接口的數據庫骨架
2. 定義對應的數據庫模型（注意讓惟一值生效的作法）
3. 定義一個數據保存的方法

隨後在controllers/users.js下編寫註冊接口的處理方法：
1. 引入剛定義的數據庫模型
2. 獲取到用戶進行post請求的註冊數據
3. 判斷傳進來的郵箱或者驗證碼是否與session中存放的相等
4. 利用定義的數據保存方法保存相應的用戶名，密碼，郵箱
5. 而後根據保存的結果判斷是否註冊成功

在routers文件夾下的index.js文件中配置rigister接口的路由：（post請求）
router.post('/register',usersController.register);

編寫個人頁面的接口---登陸接口login

在models/users.js下編寫數據庫查找數據的方法：

在controllers/users.js下編寫註冊接口的處理方法：
1. 獲取到用戶進行post請求的登陸數據
2. 根據用戶傳過來的登陸數據在數據庫進行查找匹配
3. 而後根據查找的結果判斷是否登陸成功，若登陸成功則把username存入session中

在routers文件夾下的index.js文件中配置login接口的路由：（post請求）
router.post('/login',usersController.login);

編寫個人頁面的接口---登出的接口logout

在controllers/users.js下編寫登出的處理方法：直接把存儲在session的用戶名變爲空

在routers文件夾下的index.js文件中配置logout接口的路由：（get請求）
router.get('/logout',usersController.logout);

編寫個人頁面的接口---獲取用戶信息的接口getUser

在controllers/users.js下編寫獲取用戶信息的處理方法：
判斷session中的username是否爲空，不爲空則獲取成功並把相應的用戶數據存放到session中，不然獲取失敗

在routers文件夾下的index.js文件中配置getUser接口的路由：（get請求）
router.get('/getUser',usersController.getUser);

編寫個人頁面的接口---找回密碼的接口findPassword

在models/users.js下編寫更新數據庫數據的方法：（根據傳過來的對應郵箱進行更新）

在controllers/users.js下編寫找回密碼的處理方法：
1. 獲取到用戶進行post請求的相關數據
2. 判斷傳過來的郵箱和驗證碼是否和session存儲的同樣
3. 若同樣，則調用usreModel下的updatePassword方法對密碼進行修改，不然失敗

截止目前，有關個人頁面的用戶接口已經寫完了
接下來繼續開發個人頁面的組件↓↓↓↓↓↓

配置個人頁面的子路由

在src/router/mine/index.js中配置個人頁面相關的子路由（包括登陸組件，我的中心組件，註冊組件，找回密碼組件）
當顯示個人頁面時，重定向路由到我的中心頁面

完善以前建立的登陸組件的功能

1. 在data中定義兩個數據：username（用戶名），password（密碼）
2. 對用戶名的輸入框和密碼的輸入框都利用v-model分別對username，password數據進行雙向綁定
3. 給登陸按鈕添加一個touchstart事件，執行handleToLogin方法
4. 編寫handleToLogin方法：
   1) 向以前編寫的登陸login接口進行ajax請求（記得先進行對應的反向代理，要否則會出現跨域沒法訪問的問題，反向代理時本地編寫的接口最好放在前面，以避免有些沒必要要的錯誤）
   2) 根據status來判斷是否登陸成功（登陸成功則跳轉到我的中心的頁面）
   3) 引入彈窗組件，利用彈窗組件對其進行一個反饋信息的做用

設置用戶的一些狀態管理

在store文件夾下新建一個名爲user的文件夾，在此文件夾下新建一個index.js文件並編寫。隨後在store/index.js中引入該文件模塊

建立個人頁面的相關組件---我的中心組件

1. 在views/mine下新建一個名爲center.vue的文件
2. 編寫相應的HTML,CSS
   HTML部分中，當前用戶名經過$stor.state.xxx.xxx顯示出來

3. 對退出按鈕添加一個touchstart事件，並編寫handleToLogout方法：
4. 經過對logout接口進行ajax請求，經過status判斷是否登出成功，登出成功則跳轉到登陸頁面並更新用戶狀態管理的用戶名爲空

5. 在進入我的中心頁面前能夠先利用"導航守衛"判斷一下當前用戶的登陸狀態再決定是否能夠進入此組件（用戶的登陸狀態可利用向getUser接口發起請求來判斷）
   若此時用戶爲登陸狀態則能夠進入我的中心頁面並更新用戶狀態管理的用戶名爲當前用戶的用戶名，反之則跳轉到登陸頁面

建立個人頁面的相關組件---註冊組件

1. 在components新建一個名爲register的文件夾，在此文件夾下新建一個index.vue文件
2. 編寫相應的HTML,CSS

3. 在data中定義六個數據：username（用戶名），password（密碼），email（郵箱），verify（驗證碼），verifyInfo（驗證碼的相關信息），disabled（判斷按鈕是否禁用狀態）
4. 對用戶名的輸入框，密碼的輸入框，郵箱的輸入框和驗證碼的輸入框都利用v-model分別對username，password，email，verify數據進行雙向綁定
5. 引入彈窗組件，利用彈窗組件對其進行一個反饋信息的做用
6. 對發送驗證碼的按鈕添加一個touchstart事件，並編寫handleToVerify方法：（利用ajax對verify接口進行請求）
   點擊肯定後觸發countDown方法

7. 對註冊的按鈕添加一個touchstart事件，並編寫handleToRegister方法：（利用ajax對register接口進行請求）

建立個人頁面的相關組件---修改密碼組件

1. 在components新建一個名爲findPassword的文件夾，在此文件夾下新建一個index.vue文件
2. 編寫相應的HTML,CSS

3. 在data中定義三個數據：password（密碼），email（郵箱），verify（驗證碼）
4. 對密碼的輸入框，郵箱的輸入框和驗證碼的輸入框都利用v-model分別對password，email，verify數據進行雙向綁定
5. 引入彈窗組件，利用彈窗組件對其進行一個反饋信息的做用
6. 對發送驗證碼的按鈕添加一個touchstart事件，並編寫handleToVerify方法：（利用ajax對verify接口進行請求）

7. 對確認修改的按鈕添加一個touchstart事件，並編寫handleToPassword方法：（利用ajax對findPassword接口進行請求）

接下來是開發後臺管理頁面↓↓↓↓↓↓

設置後臺管理的管理員接口與權限

1. 先在spiderserver/models/users.js中的數據庫骨架新增一個值爲isAdmin，此值爲Boolean類型。用於判斷是否有管理權限

2. 在spiderserver/contorllers/user.js中，在登陸接口的處理方法中，當登錄成功時，也把其管理權限的值也存入到session中，以便之後判斷是否有管理權限。在獲取用戶信息接口的處理方法中，當獲取成功時，把其管理權限的值存入到data中

3. 在spiderserver/routes下新建一個名爲admin.js的文件，配置管理頁面的接口路由
   1) 先設置一個攔截器，用於判斷其用戶的管理權限，纔可進入管理頁面
   2) 配置管理頁面的主頁路由

4. 在spiderserver/app.js中引入該管理頁面的路由

後臺管理頁面是利用element-ui組件庫搭建的

element-ui中文官網：https://element-plus.gitee.io/#/zh-CN
1. 安裝element-ui插件：npm i -S element-ui
2. 在main.js文件中引入element-ui：
   import ElementPlus from 'element-plus';
   import 'element-plus/lib/theme-chalk/index.css';
   app.use(ElementPlus);

配置後臺管理頁面的路由

在spider/src/router下建立一個名爲admin的文件夾，在此文件夾下建立一個index.js文件
其子路由包括用戶管理頁面路由，電影管理頁面路由，影院管理頁面路由

隨後在spider/src/router下的index.js文件下引入該路由文件模塊

建立管理後臺組件---主頁面組件

1. 在spider/src/views下新建一個名爲admin的文件夾，在此文件夾下新建一個index.vue文件
2. 編寫相應的HTML,CSS（佈局爲頭部，側邊欄，主區域）

3. 在spider/store/user/index.js下，新增用戶的一個管理員狀態值isAdmin，默認值爲false

4. 在我的中心頁面根據其是否爲管理員渲染用戶的身份，若爲管理員則添加一個router-link標籤來跳轉到後臺管理頁面
   1) 在獲取到用戶信息後，把用戶的管理權限的值更新到用戶的狀態管理中
   2) 登出的時候，用戶狀態管理中的管理權限的值爲false

5. 在管理後臺的主頁面中，利用導航守衛來判斷當前用戶是否有管理權限來進入管理後臺

建立管理後臺組件---用戶管理組件

1. 在spider/src/views/admin下新建一個user.vue文件

2. 編寫相應的HTML,CSS（表格區域分爲帳號建立日期，用戶名，郵箱，操做（未凍結和刪除））

3. 在data中定義一個數據：tableData（數組，用於存放所有的用戶信息）

4. 在生命週期mounted中利用ajax對用戶管理接口發起請求（把獲得的所有用戶數據都利用tableData數據渲染到頁面上）

5. 對凍結操做的按鈕監聽一個click事件，並執行編寫的handleToFreeze方法：
   1) 傳入參數（利用scope上的屬性：scope.$index, scope.row）
   2) 利用ajax對凍結帳號操做的接口發起請求，根據status的值判斷凍結操做是否成功，利用element-ui的信息彈窗組件來反饋信息（若凍結操做成功，則把對應的isFreeze值取反便可）
   
6. 對刪除操做的按鈕監聽一個click事件，並執行編寫的handleToDelete方法：
   1) 傳入參數（利用scope上的屬性：scope.$index, scope.row）
   2) 利用ajax對刪除帳號操做的接口發起請求，根據status的值判斷刪除操做是否成功，利用element-ui的信息彈窗組件來反饋信息（若刪除操做成功，則利用splice方法把對應的tableData指定的index項刪除掉）

7. 對於凍結的帳號，登陸時應提示帳號已凍結，登陸失敗
   在spiderserver/controllers/users.js下編寫一些相應判斷

在login組件中也要在彈窗中反饋對應的信息

8. element-ui對數據進行分頁處理
   1) 引入分頁組件

2) 在data中定義兩個數據：currentPage（當前頁），pageSize（每頁顯示的數據）
   3) 經過computed根據當前頁和每頁顯示的數據來計算nowTableData的每一頁渲染的數據，此時table應該是渲染nowTableData的數據

4) 編寫handleCurrentChange方法來改變當前頁的值

建立管理後臺的接口---用戶管理接口

在用戶管理接口中，要實現三個方法：
1. 顯示全部用戶數據的方法
   1) 在spiderserver/models/users.js下編寫一個返回顯示全部用戶數據的方法

2) 在spiderserver/controllers/admin.js下編寫顯示全部用戶信息的操做的處理方法（引入models中剛編寫的方法）

3) 在spiderserver/routes/admin.js下配置顯示用戶數據的接口路由：router.get('/userList', adminController.userList);

2. 帳號凍結操做的方法
   1) 在spiderserver/models/users.js的數據庫骨架中，新增一個值爲isFreeze，此值爲Boolean類型。用於判斷用戶帳號是否被凍結

在spiderserver/models/users.js下編寫一個數據庫更新帳號的凍結狀態的方法（以郵箱號爲標識來更新isFreeze的值）

2) 在spiderserver/controllers/admin.js下編寫更新帳號的凍結狀態操做的處理方法（引入models中剛編寫的方法）

3) 在spiderserver/routes/admin.js下配置帳號凍結的接口路由：router.post('/updateFreeze', adminController.updateFreeze);

3. 帳號刪除的方法
   1) 在spiderserver/models/users.js下編寫一個數據庫刪除用戶帳號的方法（以郵箱號爲標識來刪除）

2) 在spiderserver/controllers/admin.js下編寫刪除用戶帳號操做的處理方法（引入models中剛編寫的方法）

3) 在spiderserver/routes/admin.js下配置帳號刪除的接口路由：router.post('/deleteUser', adminController.deleteUser);

關於用戶頭像上傳的操做

編寫用戶頭像上傳的接口：
1. 在spiderserver/models/users.js下的數據庫骨架中添加一個值爲userHead，類型爲String，默認值爲http://localhost:3000/images/default.jpg，表示用戶的頭像

2. 在spiderserver/models/users.js下編寫數據庫更新用戶頭像的方法

3. 在spiderserver/untils/config.js下編寫用戶頭像上傳的基礎公共路徑

4. 在spiderserver/controllers/users.js下編寫更新用戶頭像的方法（先引入剛編寫的config.js的Head對象，fs模塊）

5. 後端上傳東西能夠利用node中的multer模塊（詳情用法可參考文檔：http://expressjs.com/en/resources/middleware/multer.html）
   1) 在spiderserver/routes/users.js下引入multer模塊，並指定頭像的上傳路徑

2) 配置上傳文件接口的路由

前端的操做：
1. 在用戶的管理狀態中新增一個狀態量userHead，初始值爲空串

2. 在進入我的中心頁面前，若進入成功，也要更新一下用戶頭像狀態的值

3. 登出頁面的時候，把用戶頭像狀態的狀態值變爲空串

4. 在我的中心頁面組件中添加一個區域，是負責上文頭像文件的

5. 在上傳文件的按鈕上綁定一個touchstart事件，執行編寫的handleToUpload方法
   須要注意的是在調用用戶頭像上傳的這個接口時，要傳入文件的相關參數（利用FormData()對象，更多FormData的用法可參考：https://www.cnblogs.com/wssdx/p/11244766.html）和傳入"Content-Type"的值是爲"multipart/form-data"
   更新用戶頭像的狀態值時記得在後面加個隨機數來清除緩存

6. 在後臺管理頁面中，新增一列來存放用戶上傳的頭像

項目優化---密碼加密

加密可以使用node中的crypto模塊
1. 在spiderserver/untils下新建一個base.js，用來編寫加密的相關方法
   1) 引入crypto模塊：const crypto = require('crypto');
   2) 編寫一個加密方法setCrypto

2. 在spiderserver/controllers/users.js，先引入上面編寫的文件模塊，再去設置存放密碼爲加密的密碼形式
   如：

項目優化---登陸時防攻擊驗證碼

利用node的trek-captcha模塊生成圖形驗證碼
1. 在spiderserver/untils/base.js下引入trek-captcha模塊，再編寫圖形驗證碼生成方法

2. 在spiderserver/controllers/users.js，先引入上面編寫的文件模塊，再去編寫生成圖形驗證碼的處理方法

3. 在spiderserver/routes/users.js下配置生成圖形驗證碼的接口路由：

在login組件中使用此組件：
1. HTML中新增長一個區域：填寫驗證碼

2. 爲img標籤綁定一個touchstart事件，執行編寫的handleToVerifyImg方法實現點擊圖片更新驗證碼

3. 當登錄失敗點擊肯定後，也要從新刷新圖片驗證碼（在img標籤添加一個ref屬性，屬性值爲verImg，用於獲取到該img元素）

關於項目的線上部署

把打包好的項目交給後端，後端要選取一個web服務器（http服務器）
咱們此次選取的一個web服務器是nginx
什麼是nginx？
爲何要選擇nginx呢？
nginx的好處有哪些呢？
以上的種種問題可移步至另外一篇文章《關於nginx》!!!

而上線項目，則須要有一個雲服務器（對應的域名或一個IP地址），能夠去阿里雲，騰訊雲等看看

雲服務器都設置好之後，可經過windows的遠程鏈接來鏈接遠程服務器，在遠程服務器中也安裝nginx，配置對應的反向代理

截止目前，就能夠在瀏覽器上訪問公有的IP地址，就能夠訪問到咱們的這個項目了

項目過程當中遇到的一些問題

1. 在gitee建立遠程倉庫時沒有把readme初始化倉庫那一項去掉，致使一開始的遠程庫不是一個空倉庫，因此沒法把本地庫中的初始項目推送到遠程庫中，一直卡住
   git push時出現的報錯：（大概以下）

解決方法也可參考網址：https://blog.csdn.net/cuomer/article/details/81142159

2. 在router下的index.js編寫路由重定向的時候，如有任意不匹配的路由時，則跳轉到電影路由
   我原本寫的path值爲'/*'來表示任意不匹配的路由，以前都是能夠生效的，但此次作項目的時候不行
   因此我在網上找了一下解決的方案，把path的值改成'/:catchAll(.*)'就能夠了
   
3. 在解決跨域問題，編寫vue.config.js文件時，輸出模塊我寫成了export default{}形式，結果從新運行項目時報錯了，可能我沒有新增長一些模塊來支持這種es6的寫法，因此改爲了module.exports={}的形式
    require: node 和 es6 都支持的引入(CommonJS規範)
    export / import / export default: 只有es6 支持的導出引入
    module.exports / exports: 只有 node 支持的導出(CommonJS規範)
    
4. Vue3.x掛載全局及調用掛載上的方法
   在之前是能夠直接使用如下方法來進行全局的掛載
   import Vue from 'vue'
   Vue.prototype.xxx=xxx;
   在我想要全局掛載axios的時候，就利用了上面那個方法，報錯了
   我上網搜了一下，發現Vue3.x中Vue不能直接這樣掛載全局，下面是掛載的方法：
   import { createApp } from 'vue'
   import App from './App.vue'
   createApp(App).config.globalProperties.$xxx=xxx;
   調用全局掛載裏的方法:this.$xxx
   
5. 關於Vue3.x的過濾器定義和使用
   在Vue2.x的時候，定義過濾器：
   import Vue from 'vue'
   Vue.filter('過濾方法名',(xx)=>{
     return xxx;
   })
   使用的時候xx | 過濾方法名(xx)
   在我渲染正在熱映的組件時，想要設置一個過濾器來改變傳過來的圖片的寬高，使用了上面的方法結果就報錯了
   原來在Vue3.x中，這個方法已經廢除掉了
   下面是Vue3.x中用的方法：
   定義一個過濾方法，掛載到全局上：
   import { createApp } from 'vue'
   import App from './App.vue'
   createApp(App).config.globalProperties.$filters = {
          過濾方法名(xx) {
            return xxx;
          }
    }
    使用時：$filters.過濾方法名(xx)
    
6. computed和watch的區別：
   詳情可參考網址：https://blog.csdn.net/weixin_42757570/article/details/112214606

7. 在封裝better-scroll爲全局組件時，會出現監聽的scroll事件沒法生效
   查看了一下致使scroll事件沒法生效的一些緣由：
   1) DOM層級關係（wrapper裏面不能存在多個同級div，若出現多個同級div，則須要有一個div包裹住）
   2) content是否被成功添加滾動相關style
   3) 只有content的高度大於wrapper高度時候，才能夠滾動
   4) .wrapper元素上要給定位
   但調試來調試去，都好像不是這些緣由
   而後就試一下有沒有多是數據更新了，致使沒有從新計算 better-scroll，結果在鉤子函數updated中添加上了this.scroll.refresh()，就能夠了
   （當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常）
    
8. 本來在有keep-alive緩存系統的狀況下更新數據，要把請求等操做都在activated生命週期中執行。但我在mounted中執行能夠，在activated中就只執行了一次，好奇怪（有知道致使這個問題的大佬能夠在評論區評論哦！！！）

9. 修改基礎的公共根路徑：
   在vue-cli3.3以前的版本可利用baseUrl屬性
   在vue-cli3.3以後的版本可利用publicPath屬性
   （baseURL在vue-cli_3.3後面的版本中被棄用）
   
10. 在app.js文件中配置session時要注意放在路由聲明前，不然不會生效

以上就是蜘蛛電影項目的大概內容了，有更多的功能可自行去完善
最後附上此項目大概的思惟導圖：

如有什麼表達不當的地方，也歡迎指出，一塊兒進步哦！！！