Vue后臺(tái)管理項(xiàng)目

一、自我總結(jié)后臺(tái)管理界面項(xiàng)目里的知識(shí)點(diǎn)

• 項(xiàng)目起始 初學(xué)vue使用https://panjiachen.github.io/vue-element-admin-site/zh/guide/下載文檔進(jìn)行操作

單頁應(yīng)用
1. webapck 把很多的js,img,hmtl,css .... 打包成一個(gè)html文件以及相應(yīng)的css和js
2. node可以操作本地文件
3. npm下載安裝nodejs模塊(插件)
4. 路由,單頁應(yīng)用通過改變路由來改變頁面顯示的內(nèi)容
模板(使用下面技術(shù))
1. vue 
2. elm-ui
3. webapck
4. 文檔地址:  https://panjiachen.github.io/vue-element-admin-site/zh/guide/
5. 使用
* 下載項(xiàng)目源文件
* npm i 安裝依賴的模塊或者插件
* npm run dev 啟動(dòng)服務(wù)
接口：http://132.232.87.95:3000/ 

• 單頁應(yīng)用 APS

單頁應(yīng)用
1. webapck 把很多的js,img,hmtl,css .... 打包成一個(gè)html文件以及相應(yīng)的css和js
2. node可以操作本地文件
3. npm下載安裝nodejs模塊(插件)
4. 路由,單頁應(yīng)用通過改變路由來改變頁面顯示的內(nèi)容

模板(使用下面技術(shù))
1. vue 
2. elm-ui
3. webapck
4. 文檔地址:  https://panjiachen.github.io/vue-element-admin-site/zh/guide/
5. 使用
* 下載項(xiàng)目源文件
* npm i 安裝依賴的模塊或者插件
* npm run dev 啟動(dòng)服務(wù)
這里的dev是根據(jù)package.json里scripts對(duì)象里的start來決定的

在文件夾shift+右擊亚斋，調(diào)出對(duì)應(yīng)文件夾的命令窗口

• vue文件格式

<template>
  <div>
    // 只能有一個(gè)標(biāo)簽作媚，html里的內(nèi)容放在這里面
  </div>
</template>
<script>
import  from './'
// 到入 從某某文件里導(dǎo)出某某 ./用來選定當(dāng)前文件夾 不能直接填否者會(huì)報(bào)錯(cuò)
export default {
    // 導(dǎo)出，vue js的代碼放這里
    生命周期函數(shù) 了解可以看vue基礎(chǔ)篇
};
</script>
<style scoped lang="less">
    // css代碼放這里 scoped表示該樣式只用于這個(gè)文件 lang="less"需安裝less插件才可用 關(guān)于less請(qǐng)看我主頁的文章
</style>

• 組件使用流程
  組件->全局組件->局部組件->組件注冊(cè)->組件使用->路由設(shè)置->路徑相關(guān)->vue文件格式->組件導(dǎo)入帅刊、導(dǎo)出->eleme-ui引用->樣式更改

全局組件：定義在Vue對(duì)象(main.js里)外,必須注冊(cè)才能使用 注冊(cè)之后 Vue對(duì)象都可以訪問使用 
Vue.componet('組件名',{
    data:function(){
        // data必須是函數(shù)
        return:{
            // 返回想要的函數(shù)對(duì)象等
        }
    }
    template:`里面可以是標(biāo)簽也可以是其他的`
})

組件注冊(cè)：script里加 component('組件名', {
  // ... 選項(xiàng) ...
})

局部組件：定義在vue組件里面纸泡，只有在這個(gè)vue組件里才能使用

• 配置路由

路由設(shè)置：router文件夾是路由設(shè)置的文件夾，對(duì)應(yīng)里面的router.js 是配置路徑的地方
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap=[
  {
    path: './文件對(duì)應(yīng)的文件夾',
    component: () => import('@/views/對(duì)應(yīng)的文件夾)
    children: [  // 上面文件夾下的文件夾赖瞒，簡稱子文件
      {
        path: 'index 文件名一般固定為index',
        name: '和父文件里path對(duì)應(yīng)',
        component: () => import('@/views/index對(duì)應(yīng)的文件夾/index'), // 如果有幾個(gè)子文件時(shí)默認(rèn)顯示的文件
        meta: { title: '隨意命名', icon: '圖標(biāo)名' }
      }
    ]
  }
]
export default new Router({
  routes: constantRouterMap
})

然后在main.js函數(shù)里面導(dǎo)入
import Vue from 'vue'
import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

• 父子組件通信

    假設(shè)a為父組件女揭，b為子組件
    a引用b時(shí)需要引入,import b from 'b'
    a使用b時(shí)需要在a里面注冊(cè)b,
    components:{
        b
    }
    a使用b組件：<b></b>  后續(xù)一切動(dòng)作的源頭(如果沒有引用二者之間毫無關(guān)系)
    a使用b相當(dāng)于使用標(biāo)簽，但是標(biāo)簽一般都有屬性
    b可以自定義屬性 b里面使用 props 數(shù)組定義數(shù)組 注意是數(shù)組后接 :[ ] 屬性填在里面
    父組件傳數(shù)據(jù)給子組件：
    a使用b里聲明好的屬性栏饮，然后給屬性賦值吧兔，也就是所謂的父組件傳數(shù)據(jù)給子組件
    給屬性賦值可以是字符串也可以是變量，但是變量之前要加:
    子組件傳數(shù)據(jù)給父組件：
    a在b里聲明了自定義的事件袍嬉，以及函數(shù)
    在b里面觸發(fā)a的自定義事件來傳數(shù)據(jù) this.$emit("自定義事件名",數(shù)據(jù)data)

• 簡單的數(shù)據(jù)結(jié)構(gòu)

棧：存放基本數(shù)據(jù)類型(數(shù)字境蔼，字符串灶平，布爾，undef,null)
堆：存放對(duì)象
棧像一個(gè)杯子箍土，內(nèi)部的東西都是從外放進(jìn)來的逢享，而且是先進(jìn)后出
堆像一個(gè)倉庫，內(nèi)部存放對(duì)象吴藻，對(duì)象里包含很多信息拼苍，一個(gè)變量對(duì)應(yīng)一個(gè)對(duì)象，當(dāng)兩個(gè)變量對(duì)應(yīng)的對(duì)象是相同的話
  只要有一方更改调缨，對(duì)象里面的數(shù)據(jù)都會(huì)發(fā)生更改疮鲫，類似于通過一個(gè)變量綁定相同的對(duì)象然后實(shí)現(xiàn)雙向綁定
棧堆：先進(jìn)后出 數(shù)組的兩個(gè)方法可以解釋 push pop  
數(shù)列：先進(jìn)先出 數(shù)組的兩個(gè)方法可以解釋 push shift

• 組件的使用和引用

步驟：1.引入elme組件，形成靜態(tài)頁面
    需要注意標(biāo)簽內(nèi)綁定的事件函數(shù)弦叶、屬性和變量俊犯，更改或者對(duì)應(yīng)的在下面創(chuàng)建好不然不會(huì)顯示
    2.把相同部分做成一個(gè)小組件
    創(chuàng)建小組件，然后把相同部分的代碼放在組件里面伤哺，注意里面的變量屬性和函數(shù)要對(duì)應(yīng)存在否者不顯示
    3.引用剛才創(chuàng)建的小組件
    首先得導(dǎo)入燕侠，import  from '' 路徑要填對(duì) 同一個(gè)文件夾的話只需要./后接組件名
    然后在導(dǎo)出export default下面 注冊(cè)組件 components:{ 組件名 }
    4.使用組件，放在之前對(duì)應(yīng)的地方立莉，使用直接是<標(biāo)簽名/>
    5.在組件里面定義屬性然后傳需要的數(shù)據(jù)過去
    在組件的導(dǎo)出下面使用props:[屬性名] 定義屬性名 然后在引用的組件標(biāo)簽
    里面添加屬性并傳入需要的屬性绢彤，是變量的時(shí)候前面需要加:
    6.然后組件實(shí)現(xiàn)的功能都是在組件里面編輯的，到引用的上面直接就是有功能的了

• 三目運(yùn)算符

三目運(yùn)算符
三元表達(dá)式
if()else() => *?*:*
意思相近蜓耻，?為if,如果前面的true則打印?后面的茫舶，如果為false則打印：后面的

sc 快速生成vue組件的框架

二刹淌、實(shí)際應(yīng)用

一饶氏、 vue里頁面之間傳參通過router-link

獲取頁面?zhèn)鬟^來的參數(shù)
this.$route.params.參數(shù)名;
第一步: <router-link :to="`/cinema/edit/${scope.row.cinemaId}`">編輯</router-link>
通過router-link跳轉(zhuǎn)到對(duì)呀路由(/cinema/edit)下，后面接/然后就是參數(shù)有勾。模板字符串``里用${參數(shù)}來傳
第二步：{
        path: 'edit/:id',
        component: () => import('@/views/cinema/edit'),
        meta: {
          title: '編輯影院',
          icon: 'form'
        }
      }
router里面在路徑對(duì)應(yīng)的后面加/:id,用id來接受參數(shù),當(dāng)然參數(shù)是自定義的
第三步: 在跳轉(zhuǎn)后的頁面獲取參數(shù)this.$route.params.id   id對(duì)應(yīng)我們?cè)诼酚衫锒x的儲(chǔ)存參數(shù)的變量上

二疹启、vue里獲取接口數(shù)據(jù)

 created() {
        let id = this.$route.params.id;
        this.findList(id);
    },
    methods: {
        findList(id){
            const url = process.env.BASE_API + '/cinema/findById'
          //  封裝后的使用
            axios.get(url,{
                params:{
              // 參數(shù)
                    cinemaId:id
                }
            }).then( res => {
                this.list=res.data.data.cinema;
            }).catch( error => {
                console.log(error)
            })
        }
    },

和js原生對(duì)比不然發(fā)現(xiàn)有不同的地方,這里是對(duì)接口進(jìn)行了一些封裝

image.png

image.png

image.png

image.png

• 由圖片可以看出，這個(gè)是經(jīng)過了一些列封裝然后使得用的時(shí)候方便
  創(chuàng)建文件夾utils用來放封裝函數(shù)->request.js對(duì)獲取后臺(tái)數(shù)據(jù)的axios進(jìn)行封裝->然后使用的時(shí)候在config文件夾下的dev-env.js里更改BASE_API為我們接口的各個(gè)部分即可

三蔼卡、 結(jié)合數(shù)組函數(shù)map實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

<template>
    <!-- 聯(lián)動(dòng)選擇組件 -->
    <div>
        <el-select @change="changeCity" v-model="film.cityId" filterable placeholder="請(qǐng)選擇城市">
      <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="film.districtId" style="margin-left: 20px;" placeholder="請(qǐng)選擇區(qū)域">
      <el-option v-for="item in district" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    props:[
        'film'
    ],
    data() {
        return {
            options:[],
            district:[]
        }
    },
    created() {
        this.getlist();
    },
    methods: {
        getlist(){
            const url = process.env.BASE_API +'/city/getList';
            axios.get(url,{
                params:{}
            }).then(res=>{
                const cities = res.data.cities;
                const arr = cities.map(item=>{
                    return{
                        value:item.cityId,
                        label:item.name
                    }
                })
                this.options = arr;
            }).catch(error=>{
                console.log(error)
            })
        },
        changeCity(cityId){ 
            this.getDistrId(cityId)
            this.film.districtId=''
        },
        getDistrId(cityId){
            const url = process.env.BASE_API +'/district/findByCityId';
            axios.get(url,{
                params:{
                    cityId
                }
            }).then(res=>{
                const distr = res.data.districts;
                const arr = distr.map(item=>{
                    return{
                        value:item.objectId,
                        label:item.name
                    }
                })
                this.district = arr;
            }).catch(error=>{
                console.log(error)
            })
        }
    },
}
</script>
<style>
</style>

• @ v-on的縮寫 : v-bind縮寫 @綁定事件 :變?yōu)樽兞?/li>

四喊崖、 結(jié)合數(shù)組函數(shù)push、indexOf雇逞、splice增刪輸入框

<template>
<!-- 增刪輸入框組件 -->
  <div class="sb">
    <el-form-item class="input" label="劇照">
      <el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="film.pics">
      </el-input>
      <el-button @click="addDomain" class="button" type="info">新增</el-button>
    </el-form-item>
    <el-form-item class="input" label='劇照' v-for="(domain) in photos.domains" :key="domain.key">
     <div>
        <el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="film.pics">
      </el-input>
      <el-button @click.prevent="removeDomain(domain)" class="button" type="info">刪除</el-button>
     </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
    props:[
        "film"
    ],
  data() {
    return {
      photos: {
        domains: []
      }
    };
  },
  created() {
  },
  methods: {
    addDomain() {
        this.photos.domains.push({
        value: "",
      });
    },
    removeDomain(item) {
      var index = this.photos.domains.indexOf(item);
      if (index !== -1) {
        this.photos.domains.splice(index, 1);
      }
    }
  }
};
</script>
<style>
.input {
  position: relative;
  right: 80px;
}
.button {
  position: relative;
  float: right;
  top: -40px;
  left: 75px;
}
.ab {
  clear: both;
}
</style>

• 可見input類型標(biāo)簽使用v-model和數(shù)據(jù)雙向綁定更改值
  以及遍歷使用v-for((item,index) in list) :key="index"
• v-for key 實(shí)現(xiàn)輸入框的增加荤懂、刪除

<template>
  <div>
    <h3>v-for key 實(shí)現(xiàn)輸入框的增加、刪除</h3>
    <div
      :v-model="lists[index].value"
      :class="'input'+index"
      v-for="(list,index) in lists"
      :key="list.id"
    >
      <input type="text" placeholder="請(qǐng)輸入">
      <button v-if="panduan(index)" @click="add">+</button>
      <button v-else @click="del(index)">-</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [{}]
    };
  },
  created() {},
  methods: {
    add() {
      this.lists.push({
        value: ""
      });
    },
    del() {
      this.lists.pop();
    },
    panduan(index) {
      return this.lists.length - 1 === index;
    }
  }
};
</script>
<style>
button {
  width: 25px;
  height: 25px;
}
</style>
// key 指定一個(gè)屬性為區(qū)別兩個(gè)數(shù)據(jù)喝峦，一般是id势誊，類似于數(shù)據(jù)庫里的主鍵

五、渲染列表

<template>
<!-- 父子通信組件 -->
<div>    
    <el-form-item label="電影名稱">
    <el-input v-model="film.name"></el-input>
  </el-form-item>
  <el-form-item label="海報(bào)地址">
    <el-input v-model="film.poster"></el-input>
  </el-form-item>
  <el-form-item label="演員">
    <el-input v-model="film.actors"></el-input>
  </el-form-item>
  <el-form-item label="導(dǎo)演">
    <el-input v-model="film.director"></el-input>
  </el-form-item>
  <el-form-item label="產(chǎn)地">
    <el-input v-model="film.nation"></el-input>
  </el-form-item>
</div>
</template>

<script>
import Xuan from './Xuan'
export default {
    props:[
        'film'
    ],
    data() {
        return {
        }
    },
    components:{
      Xuan
    }
}
</script>
<style>
</style>

列表里大部分用的都是input標(biāo)簽,然后渲染方式就是綁定v-model雙向綁定更改數(shù)據(jù)
六谣蠢、父子通信

// 父組件
<template>
    <div>
        <Form></Form>
        <Form title="添加電影"></Form>
        <!-- 通過字符串添加 -->
        <Form :title="title"></Form>
        <!-- 通過變量以及組件里的屬性添加 -->

        <!-- 通過自定義事件把子組件的數(shù)據(jù)傳到父組件 -->
        <Form id="app" @aaa="test">自定義事件</Form>

        <!-- 二級(jí)聯(lián)動(dòng) -->
        <demo class="demo"></demo>

        <!-- 增刪輸入框 -->
        <xinzeng></xinzeng>
    </div>
</template>
<script>
// 加載Form 組件
import xinzeng from './components/xinzeng';
import demo from './components/demo';
import Form from './components/Form'
export default {
    data() {
        return {
            title:'這是通過組件的屬性添加的'
        }
    },
    created() {
        // emit 觸發(fā)自定義事件
        // this.$emit('aaa');
    },
    mounted() {
    },
    methods: {
        test(data){
            alert(data);
        }
    },
    // 注冊(cè)組件
    components:{
        Form,
        demo,
        xinzeng
    }
}
</script>
<style>
.demo{
    margin-top: 20px;
    margin-left: 20px;
}
</style>

// 子組件
<template>
    <div>
        <h3>{{title}}</h3>
        <span>用戶名:</span>
        <input v-model="user" type="text">
        <button @click="submit">傳數(shù)據(jù)</button>
        
    </div>
</template>

<script>
export default {
    props    //  屬性   如果把組件當(dāng)成標(biāo)簽
    :[
        "title",
    ],
    data() {
        return {
            user:''
        }
    },
    // 避免修改從父組件傳下來的屬性粟耻，修改會(huì)給后期維護(hù)帶來不利
    created() {
        console.log(this.title);
        // 可以通過this訪問title
    },
    methods: {
        submit(){
            // 觸發(fā)父組件的自定義aaa事件
            this.$emit("aaa",this.user)
        }
    },
}
</script>
<style>
    button{
        width: 100px;
    }
</style>