Vue (3) - Vue の Ajax、Vuex、ルーティングおよび UI コンポーネント ライブラリ

ネット 2023-08-11 18:51:09 訪問数: null

コースリンク

目次

4. Vue の Ajax

4.1.vue スキャフォールディング構成エージェント

4.1.1. 方法 1

vue.config.js に次の設定を追加します。

devServer:{
    
    
  proxy:"http://localhost:5000"
}

例証します:

  1. 利点: 構成はシンプルで、リソースを要求するときにフロントエンド (8080) に直接送信できます。
  2. 欠点: 複数のプロキシを構成することはできず、リクエストがプロキシを経由するかどうかを柔軟に制御することはできません。
  3. 動作方法: プロキシが上記のように構成されている場合、フロントエンドに存在しないリソースがリクエストされた場合、リクエストはサーバーに転送されます(フロントエンドリソース[パブリック下のリソース]と一致する優先順位)。

4.1.2. 方法 2

特定のプロキシ ルールを構成するには vue.config.js を記述します。

module.exports = {
    
    
	devServer: {
    
    
      proxy: {
    
    
      '/api1': {
    
    // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,//用于控制请求头中的host值
        pathRewrite: {
    
    '^/api1': ''}
      },
      '/api2': {
    
    // 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,//用于控制请求头中的host值
        pathRewrite: {
    
    '^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

例証します:

  1. メリット: 複数のプロキシを設定でき、リクエストがプロキシを経由するかどうかを柔軟に制御できます。
  2. 短所: 設定が少し面倒で、リソースを要求するときにプレフィックスを追加する必要があります。

4.2. スロット

  1. 機能:親コンポーネントが子コンポーネントの指定された位置に HTML 構造を挿入できるようにします。また、これはコンポーネント間の通信方法でもあり、親コンポーネント ===> 子コンポーネントに適しています。

  2. カテゴリ: デフォルト スロット、名前付きスロット、スコープ付きスロット

  3. 使い方：

    1. デフォルトのスロット:

      父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

    2. 名前付きスロット:

      父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <!-- <template slot="footer"></template> -->
            <template v-slot:footer><!--v-slot只能配合template使用-->
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

    3. スコープ付きスロット:

      1. 理解: データはコンポーネント自体にありますが、データに従って生成される構造はコンポーネントのユーザーが決定する必要があります。(ゲームデータはCategoryコンポーネント内にありますが、データを使用してトラバースされる構造はAppコンポーネントによって決定されます)

      2. 特定のエンコーディング:

        父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{
         
         {g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{
         
         {g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
            
            
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
            
            
                    return {
            
            
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

    スコープを理解する方法: 主にサブコンポーネントのスロット タグ内: games='games' および親コンポーネントのscope='xxx'

5.Vuex

5.1. Vuex を理解する

5.1.1. コンセプト

Vueで一元的な状態 (データ) 管理を実装し、 Vue アプリケーション内の複数のコンポーネントの共有状態を一元管理 (読み取り/書き込み) する Vueプラグインであり、コンポーネント間の通信手段でもあり、適切です任意のコンポーネント間の通信に使用します。

5.1.2. いつ使用するか?

複数のコンポーネントがデータを共有する必要がある場合

5.1.3. vuex の原則

ここに画像の説明を挿入

比喩：
ここに画像の説明を挿入

ここに画像の説明を挿入

  • これら 3 つはストアによって管理され、それらのデータ型はすべて オブジェクトであり、すべてのコンポーネントがストアを認識できる必要があります。

5.2. vuexの使用

5.2.1. vuex環境の構築

  1. vuex をインストールします。
  npm i vuex//vue3版本所对应的vuex4版本

  npm i vuex@3//vue2版本下载vuex3版本

  1. ファイルを作成します。src/store/index.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
      
      }
//准备mutations对象——修改state中的数据
const mutations = {
      
      }
//准备state对象——保存具体的数据
const state = {
      
      }

//创建并暴露store
export default new Vuex.Store({
      
      
	actions,
	mutations,
	state
})

  2. main.jsVMを作成するときにstore構成アイテムを渡します。

    ......
//引入store
import store from './store'
......

//创建vm
new Vue({
      
      
	el:'#app',
	render: h => h(App),
	store
})

5.2.2. 基本的な使い方

  1. データの初期化、構成actions、構成mutations、ファイルの操作store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
      
      
    //响应组件中加的动作
	jia(context,value){
      
      
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
      
      
    //执行加
	JIA(state,value){
      
      
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
      
      
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
      
      
	actions,
	mutations,
	state,
})

  2. コンポーネントの vuex でデータを読み取ります。$store.state.sum

  3. コンポーネント内の vuex のデータを変更します。$store.dispatch('action中的方法名',数据)または$store.commit('mutations中的方法名',数据)

備考: ネットワーク リクエストやその他のビジネス ロジックがない場合、コンポーネント内でアクションをスキップすることもできます。つまり、 を記述せずに、状態を解析するときにこれを追加せずに HTML ページをdispatch直接記述することができますcommit
が、vue を記述するときに必須ですjsで

5.2.3. ゲッターの使用

  1. 概念: 状態内のデータを使用前に処理する必要がある場合、ゲッターを使用して処理できます。

  2. 構成をstore.js追加getters

    ......

const getters = {
      
      
	bigSum(state){
      
      
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
      
      
	......
	getters
})

  3. コンポーネント内のデータを読み取ります。$store.getters.bigSum

5.2.4. 4 つのマップメソッドの使用

  1. mapState メソッド:stateデータを計算されたプロパティにマッピングするために使用されます。

    computed: {
      
      
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({
      
      sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters メソッド:gettersデータを計算されたプロパティにマッピングするために使用されます。

    computed: {
      
      
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({
      
      bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

  3. mapActions メソッド:生成とactions対話を支援するために使用されるメソッド、つまり、含まれる$store.dispatch(xxx)関数

    methods:{
      
      
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({
      
      incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations メソッド:生成とmutations対話を支援するために使用されるメソッド、つまり:含まれる$store.commit(xxx)関数

    methods:{
      
      
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({
      
      increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

備考:mapActions と mapMutations を使用する場合、パラメータを渡す必要がある場合は、テンプレートでイベントをバインドするときにパラメータを渡す必要があります。それ以外の場合、パラメータはイベント オブジェクトになります。

5.2.5. モジュール性 + 名前空間

  1. 目的: コードの保守を容易にし、さまざまなデータの分類をより明確にします。

  2. 改訂store.js

    const countAbout = {
      
      
  namespaced:true,//开启命名空间
  state:{
      
      x:1},
  mutations: {
      
       ... },
  actions: {
      
       ... },
  getters: {
      
      
    bigSum(state){
      
      
       return state.sum * 10
    }
  }
}

const personAbout = {
      
      
  namespaced:true,//开启命名空间
  state:{
      
       ... },
  mutations: {
      
       ... },
  actions: {
      
       ... }
}

const store = new Vuex.Store({
      
      
  modules: {
      
      
    countAbout,
    personAbout
  }
})

  3. 名前空間が有効になった後、状態データがコンポーネントに読み込まれます。

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 名前空間が有効になると、ゲッター データがコンポーネントに読み込まれます。

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 名前空間が有効になった後、コンポーネント内でディスパッチが呼び出されます。

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{
      
      incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 名前空間が有効になった後、コンポーネント内で commit が呼び出されます。

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{
      
      increment:'JIA',decrement:'JIAN'}),

6. ルーティング

6.1. 関連する理解

6.1.1. ルーティングの理解

  1. 理解: ルートはマッピング関係 (キーと値) のセットであり、複数のルートをルーターで管理する必要があります。
  2. フロントエンド ルーティング: キーはパス、値はコンポーネントです。(バックエンドルーティング値は関数です)

6.1.2. vue-router の理解

Vue 用のプラグイン ライブラリ。SPA アプリケーションの実装に特に使用されます。

SPA アプリケーションとは:

  1. シングルページ Web アプリケーション (シングルページ Web アプリケーション、SPA)
  2. アプリケーション全体に対して完全なページは 1 つだけです
  3. ページ内のナビゲーション リンクをクリックしてもページは更新されず、ページの部分的な更新のみが行われます。
  4. データは ajax リクエストを通じて取得する必要があります。

6.2. 基本的なルーティング

6.2.1. 基本的な使い方

  1. vue-router をインストールします。コマンド: npm i vue-router
    vue2 はnpm i vue-router@3バージョン 3をダウンロードする必要があります

  2. プラグインを適用します:Vue.use(VueRouter)

  3. ルーター構成項目を書き込みます。

    //引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
      
      
	routes:[
		{
      
      
			path:'/about',
			component:About
		},
		{
      
      
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

  4. 切り替えを実装します (アクティブクラスは強調表示スタイルを設定できます)

    <router-link active-class="active" to="/about">About</router-link>

  5. ターゲット プレースメント

    <router-view></router-view>

6.2.2. いくつかの注意事項

  1. 通常、ルーティング コンポーネントはpagesフォルダーに保存され、一般コンポーネントは通常componentsフォルダーに保存されます。
  2. 切り替えることにより、「非表示」ルーティング コンポーネントはデフォルトで破棄され、必要に応じてマウントされます。
  3. 各コンポーネントには独自の$routeプロパティがあり、独自のルーティング情報が保存されます。
  4. アプリケーション全体にはルーターが 1 つだけあり、これは$routerコンポーネントのプロパティを通じて取得できます。

6.3. ネストされた (マルチレベル) ルーティング

  1. ルーティング ルールを設定するには、子設定項目を使用します。

    routes:[
	{
      
      
		path:'/about',
		component:About,
	},
	{
      
      
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
      
      
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
      
      
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

  2. Jump (フルパスを書き込むため):

    <router-link to="/home/news">News</router-link>

6.4. ルートのクエリパラメータ

  1. パラメータを渡す

    <!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

  2. パラメータを受信します。

    $route.query.id
$route.query.title

6.5. ルートの命名

  1. 機能: 配線ジャンプを簡素化できます。

  2. 使い方

    1. ルートに名前を付けます。

      {
        
        
	path:'/demo',
	component:Demo,
	children:[
		{
        
        
			path:'test',
			component:Test,
			children:[
				{
        
        
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

    2. 簡略化されたジャンプ:

      <!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

6.6. ルートのparamsパラメータ

  1. ルーティングを設定し、params パラメーターを受け取るように宣言します

    {
      
      
	path:'/home',
	component:Home,
	children:[
		{
      
      
			path:'news',
			component:News
		},
		{
      
      
			component:Message,
			children:[
				{
      
      
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

  2. パラメータを渡す

    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

    特別な注意: ルートが params パラメータを運ぶ場合、 to のオブジェクト書き込みメソッドを使用する場合、パス設定項目は使用できません。名前設定!を使用する必要があります。

  3. パラメータを受信します。

    $route.params.id
$route.params.title

6.7. ルーティングプロパティの設定

役割: ルーティングコンポーネントがパラメータを受信しやすくする

{
    
    
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
    
    
		return {
    
    
			id:route.query.id,
			title:route.query.title
		}
	}
}

6.8. <router-link>replace 属性

  1. 役割: ルーティング ジャンプ時のブラウザ履歴の動作モードを制御します。
  2. pushブラウザ履歴を書き込むには、との2 つの方法がありますreplace。ルートがジャンプすると、デフォルトではpush
    push履歴レコードが追加される
    replaceか、現在のレコードが置き換えられます。
  3. replaceモードをオンにする方法:<router-link replace .......>News</router-link>
    ここに画像の説明を挿入

6.9. プログラムによるルーティングナビゲーション

  1. 機能: ルーティング ジャンプの助けを借りずに、ルーティング ジャンプ<router-link> をより柔軟にします。

  2. 特定のエンコーディング:

    //$router的两个API
this.$router.push({
      
      
	name:'xiangqing',
		params:{
      
      
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
      
      
	name:'xiangqing',
		params:{
      
      
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退

//传数字 正数就是前进几步 负数就是后退几步
this.$router.go() //可前进也可后退

6.10. キャッシュルーティングコンポーネント

  1. 機能: 表示されていない配線コンポーネントをマウントしたままにし、破棄しないようにします。

  2. 特定のエンコーディング:

 <!-- 缓存一个时 -->
  <!--  <keep-alive include="News">  --><!--缓存哪个路由<写组件名>的内容，不写则都缓存-->

  <!-- 缓存多个时 -->
   <keep-alive :include="[News, Message]"> 
       <router-view></router-view>
   </keep-alive>

6.11. 2 つの新しいライフサイクル フック

  1. 機能: ルーティング コンポーネントのアクティブ化ステータスをキャプチャするために使用される、ルーティング コンポーネントに固有の 2 つのフック。
  2. 具体的な名前:
    1. activatedルーティング コンポーネントがアクティブ化されると発生します。
    2. deactivatedルーティング コンポーネントが非アクティブ化されるとトリガーされます。
      PS: 前に述べた nextTick もフックです

6.12. ルートガード

  1. 役割: ルートの権限を制御する

  2. カテゴリ: グローバル ガード、専用ガード、コンポーネント ガード

  3. グローバルガード:

    //全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
      
      
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){
      
       //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
      
       //权限控制的具体规则
			next() //放行
		}else{
      
      
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
      
      
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
      
      
	console.log('afterEach',to,from)
	if(to.meta.title){
      
       
		document.title = to.meta.title //修改网页的title
	}else{
      
      
		document.title = 'vue_test'
	}
})

  4. 専用ガード：

    beforeEnter(to,from,next){
      
      
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){
      
       //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
      
      
			next()
		}else{
      
      
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
      
      
		next()
	}
}

  5. コンポーネント内のガード:

    //进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
      
      
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
      
      
}

6.13. ルーターの 2 つの動作モード

6.13.1.ハッシュと履歴

  1. URLの場合、ハッシュ値は何ですか? —— #及其后面的内容就是hash值。
  2. ハッシュ値は HTTP リクエストに含まれません。つまり、ハッシュ値はサーバーに送信されません。
  3. ハッシュモード:
    1. 住所には常に # 記号が含まれていますが、これは美しくありません。
    2. 将来的にアドレスがサードパーティの携帯電話アプリを通じて共有された場合、アプリの認証が厳格であれば、そのアドレスは不正なものとしてマークされます。
    3. 互換性が良くなります。
  4. 履歴モード:
    1. 住所は清潔で美しいです。
    2. 互換性はハッシュ モードよりもわずかに悪くなります。
    3. アプリケーションがデプロイされて起動されると、ページ サーバー 404 を更新する問題を解決するためにバックエンド担当者のサポートが必要になります。

6.13.2. nodejsデプロイメントプロジェクト(簡易版)

Nodejs がプロジェクトをデプロイする一般的なプロセス:

  1. プロジェクトをパッケージ化しnpm run build、違いがハッシュモードかヒストリーモードかに注意してください
  2. プロジェクトを初期化するnpm init
  3. NodejsにExpressをインストールするnpm i express
  4. server.js を作成します
    (ダウンロードが必要な場合がありますnpm install --save connect-history-api-fallback)
//使用nodejs部署项目server.js
const express = require('express')
//hash模式不用这样
//history模式下，使用connect-history-api-fallback来解决 单独复制并新建一个页面填入http://localhost:5005/home/message等页面不出现内容的问题
const history = require('connect-history-api-fallback');
const app = express()
//history模式下
app.use(history())

//指定路径
app.use(express.static(__dirname+'/static'))

/* app.get('/person',(req,res)=>{
    res.send({
        name:'tom',
        age:18,
    })
}) */

app.listen(5005,(err)=>{
    
    
    if(!err) console.log('服务器启动成功了')
})
  1. プロジェクトを実行するnode server

7.VUE UI组件库

7.1. モバイル端末でよく使われるUIコンポーネントライブラリ

  1. ヴァント https://youzan.github.io/vant
  2. キューブUI https://didi.github.io/cube-ui
  3. Mint UI http://mint-ui.github.io

7.2. PC上でよく使われるUIコンポーネントライブラリ

  1. 要素UI https://element.eleme.cn
  2. IView UI https://www.iviewui.co

おすすめ

転載: blog.csdn.net/m0_43416592/article/details/129720450
おすすめ
TIOBE 5 月リスト: Fortran がトップ 10 に「復活」
GCC 14.1 发布
ランキング
Linuxの一般的なコマンドの緊急対応
FPGAの設計者は、5つの基本的なスキルです
Javaの研究では、2019年6月12日ノート
Golang底层原理剖析之内存逃逸
VIM - Viは、プログラマーのテキストエディタを改善しました
魔法書（MagicTable）入門チュートリアルは、CADの一括転送複数のテーブルExcelをExcelを回し--CAD
mockitoとの望ましくないモック
EVE-NG MPLS L2VPN BGP pw -- スタティック ルート、スタティック mpls lsp
抵抗性タッチスクリーンドライバ（II）
PHP 安装扩展 Api Version 和扩展extensions路径不匹配的问题
アーカイブ
もっと
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)

コードワールド

© 2018 codetd.com