国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

Vue（3）-vue中的Ajax、Vuex、路由及UI組件庫

2年前作者：Brisa56分類：Toy博客閱讀(13)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Vue（3）-vue中的Ajax、Vuex、路由及UI組件庫。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

課程鏈接

4.Vue中的Ajax

4.1.vue腳手架配置代理

4.1.1.方法一

? 在vue.config.js中添加如下配置：

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

說明：

  1. 優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。
  2. 缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理。
  3. 工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 （優(yōu)先匹配前端資源【public下的資源】）

4.1.2.方法二

? 編寫vue.config.js配置具體代理規(guī)則：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'開頭的請(qǐng)求路徑
        target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true,//用于控制請(qǐng)求頭中的host值
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'開頭的請(qǐng)求路徑
        target: 'http://localhost:5001',// 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true,//用于控制請(qǐng)求頭中的host值
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin設(shè)置為true時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:5000
   changeOrigin設(shè)置為false時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:8080
   changeOrigin默認(rèn)值為true
*/

說明：

  1. 優(yōu)點(diǎn)：可以配置多個(gè)代理，且可以靈活的控制請(qǐng)求是否走代理。
  2. 缺點(diǎn)：配置略微繁瑣，請(qǐng)求資源時(shí)必須加前綴。

4.2.插槽

  1. 作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信的方式，適用于 父組件 ===> 子組件 。

  2. 分類：默認(rèn)插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默認(rèn)插槽：

      父組件中：
        <Category>
           <div>html結(jié)構(gòu)1</div>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認(rèn)內(nèi)容...</slot>
            </div>
        </template>

    2. 具名插槽：

      父組件中：
        <Category>
            <template slot="center">
              <div>html結(jié)構(gòu)1</div>
            </template>

            <!-- <template slot="footer"></template> -->
            <template v-slot:footer><!--v-slot只能配合template使用-->
               <div>html結(jié)構(gòu)2</div>
            </template>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽默認(rèn)內(nèi)容...</slot>
               <slot name="footer">插槽默認(rèn)內(nèi)容...</slot>
            </div>
        </template>

    3. 作用域插槽：

      1. 理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定。（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由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標(biāo)題 -->
				<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'],
                //數(shù)據(jù)在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗']
                    }
                },
            }
        </script>

    作用域如何理解：主要在于子組件slot標(biāo)簽中的:games=‘games’ 和父組件的scope=‘xxx’

5.Vuex

5.1.理解Vuex

5.1.1.概念

? 在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件，對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

5.1.2.何時(shí)使用？

? 多個(gè)組件需要共享數(shù)據(jù)時(shí)

5.1.3.vuex原理

vue3 ajax,web前端,vue.js,ajax,ui

比喻：
vue3 ajax,web前端,vue.js,ajax,ui

vue3 ajax,web前端,vue.js,ajax,ui

  • 這三個(gè)由store管理，且他們的數(shù)據(jù)類型都是對(duì)象，且必須要所有組件都能看到store才行

5.2.vuex使用

5.2.1.搭建vuex環(huán)境

  1. 安裝vuex：
  npm i vuex//vue3版本所對(duì)應(yīng)的vuex4版本

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

  1. 創(chuàng)建文件：src/store/index.js

    //引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應(yīng)用Vuex插件
Vue.use(Vuex)

//準(zhǔn)備actions對(duì)象——響應(yīng)組件中用戶的動(dòng)作
const actions = {}
//準(zhǔn)備mutations對(duì)象——修改state中的數(shù)據(jù)
const mutations = {}
//準(zhǔn)備state對(duì)象——保存具體的數(shù)據(jù)
const state = {}

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

  2. 在main.js中創(chuàng)建vm時(shí)傳入store配置項(xiàng)

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

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

5.2.2.基本使用

  1. 初始化數(shù)據(jù)、配置actions、配置mutations，操作文件store.js

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

const actions = {
    //響應(yīng)組件中加的動(dòng)作
	jia(context,value){
		// console.log('actions中的jia被調(diào)用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //執(zhí)行加
	JIA(state,value){
		// console.log('mutations中的JIA被調(diào)用了',state,value)
		state.sum += value
	}
}

//初始化數(shù)據(jù)
const state = {
   sum:0
}

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

  2. 組件中讀取vuex中的數(shù)據(jù)：$store.state.sum

  3. 組件中修改vuex中的數(shù)據(jù)：$store.dispatch('action中的方法名',數(shù)據(jù))或 $store.commit('mutations中的方法名',數(shù)據(jù))

備注：若沒有網(wǎng)絡(luò)請(qǐng)求或其他業(yè)務(wù)邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit
html頁面中解析state時(shí)可以不加this，但js中的vue書寫時(shí)需要

5.2.3.getters的使用

  1. 概念：當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時(shí)，可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

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

//創(chuàng)建并暴露store
export default new Vuex.Store({
	......
	getters
})

  3. 組件中讀取數(shù)據(jù)：$store.getters.bigSum

5.2.4.四個(gè)map方法的使用

  1. mapState方法：用于幫助我們映射state中的數(shù)據(jù)為計(jì)算屬性

    computed: {
    //借助mapState生成計(jì)算屬性：sum、school、subject（對(duì)象寫法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成計(jì)算屬性：sum、school、subject（數(shù)組寫法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用于幫助我們映射getters中的數(shù)據(jù)為計(jì)算屬性

    computed: {
    //借助mapGetters生成計(jì)算屬性：bigSum（對(duì)象寫法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成計(jì)算屬性：bigSum（數(shù)組寫法）
    ...mapGetters(['bigSum'])
},

  3. mapActions方法：用于幫助我們生成與actions對(duì)話的方法，即：包含$store.dispatch(xxx)的函數(shù)

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

    //靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  4. mapMutations方法：用于幫助我們生成與mutations對(duì)話的方法，即：包含$store.commit(xxx)的函數(shù)

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

備注：mapActions與mapMutations使用時(shí)，若需要傳遞參數(shù)需要：在模板中綁定事件時(shí)傳遞好參數(shù)，否則參數(shù)是事件對(duì)象。

5.2.5.模塊化+命名空間

  1. 目的：讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確。

  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. 開啟命名空間后，組件中讀取state數(shù)據(jù)：

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

  4. 開啟命名空間后，組件中讀取getters數(shù)據(jù)：

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

  5. 開啟命名空間后，組件中調(diào)用dispatch

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

  6. 開啟命名空間后，組件中調(diào)用commit

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

6.路由

6.1.相關(guān)理解

6.1.1.路由的理解

  1. 理解： 一個(gè)路由（route）就是一組映射關(guān)系（key - value），多個(gè)路由需要路由器（router）進(jìn)行管理。
  2. 前端路由：key是路徑，value是組件。（后端路由value是function）

6.1.2.vue-router理解

Vue的一個(gè)插件庫，專門用來實(shí)現(xiàn)SPA應(yīng)用

什么是SPA應(yīng)用：

  1. 單頁 Web 應(yīng)用(single page web application，SPA)
  2. 整個(gè)應(yīng)用只有一個(gè)完整的頁面
  3. 點(diǎn)擊頁面中的導(dǎo)航鏈按不會(huì)刷新頁面，只會(huì)做頁面的局部更新
  4. 數(shù)據(jù)需要通過ajax請(qǐng)求獲取。

6.2.基本路由

6.2.1.基本使用

  1. 安裝vue-router，命令：npm i vue-router
    vue2要下載npm i vue-router@3 3版本的才行

  2. 應(yīng)用插件：Vue.use(VueRouter)

  3. 編寫router配置項(xiàng):

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

//創(chuàng)建router實(shí)例對(duì)象，去管理一組一組的路由規(guī)則
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

  4. 實(shí)現(xiàn)切換（active-class可配置高亮樣式）

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

  5. 指定展示位置

    <router-view></router-view>

6.2.2.幾個(gè)注意點(diǎn)

  1. 路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾。
  2. 通過切換，“隱藏”了的路由組件，默認(rèn)是被銷毀掉的，需要的時(shí)候再去掛載。
  3. 每個(gè)組件都有自己的$route屬性，里面存儲(chǔ)著自己的路由信息。
  4. 整個(gè)應(yīng)用只有一個(gè)router，可以通過組件的$router屬性獲取到。

6.3.嵌套（多級(jí)）路由

  1. 配置路由規(guī)則，使用children配置項(xiàng)：

    routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通過children配置子級(jí)路由
			{
				path:'news', //此處一定不要寫：/news
				component:News
			},
			{
				path:'message',//此處一定不要寫：/message
				component:Message
			}
		]
	}
]

  2. 跳轉(zhuǎn)（要寫完整路徑）：

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

6.4.路由的query參數(shù)

  1. 傳遞參數(shù)

    <!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉(zhuǎn)</router-link>
				
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的對(duì)象寫法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳轉(zhuǎn)</router-link>

  2. 接收參數(shù)：

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

6.5.命名路由

  1. 作用：可以簡(jiǎn)化路由的跳轉(zhuǎn)。

  2. 如何使用

    1. 給路由命名：

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

    2. 簡(jiǎn)化跳轉(zhuǎn)：

      <!--簡(jiǎn)化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link>

<!--簡(jiǎn)化后，直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link>

<!--簡(jiǎn)化寫法配合傳遞參數(shù) -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳轉(zhuǎn)</router-link>

6.6.路由的params參數(shù)

  1. 配置路由，聲明接收params參數(shù)

    {
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符聲明接收params參數(shù)
					component:Detail
				}
			]
		}
	]
}

  2. 傳遞參數(shù)

    <!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉(zhuǎn)</router-link>
				
<!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的對(duì)象寫法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳轉(zhuǎn)</router-link>

    特別注意：路由攜帶params參數(shù)時(shí)，若使用to的對(duì)象寫法，則不能使用path配置項(xiàng)，必須使用name配置！

  3. 接收參數(shù)：

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

6.7.路由的props配置

? 作用：讓路由組件更方便的收到參數(shù)

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

	//第一種寫法：props值為對(duì)象，該對(duì)象中所有的key-value的組合最終都會(huì)通過props傳給Detail組件
	// props:{a:900}

	//第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件
	// props:true
	
	//第三種寫法：props值為函數(shù)，該函數(shù)返回的對(duì)象中每一組key-value都會(huì)通過props傳給Detail組件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

6.8.<router-link>的replace屬性

  1. 作用：控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式
  2. 瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace。路由跳轉(zhuǎn)時(shí)候默認(rèn)為push
    push是追加歷史記錄
    replace是替換當(dāng)前記錄
  3. 如何開啟replace模式：<router-link replace .......>News</router-link>
    vue3 ajax,web前端,vue.js,ajax,ui

6.9.編程式路由導(dǎo)航

  1. 作用：不借助<router-link> 實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活

  2. 具體編碼：

    //$router的兩個(gè)API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

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

//傳數(shù)字 正數(shù)就是前進(jìn)幾步 負(fù)數(shù)就是后退幾步
this.$router.go() //可前進(jìn)也可后退

6.10.緩存路由組件

  1. 作用：讓不展示的路由組件保持掛載，不被銷毀。

  2. 具體編碼：

 <!-- 緩存一個(gè)時(shí) -->
  <!--  <keep-alive include="News">  --><!--緩存哪個(gè)路由<寫組件名>的內(nèi)容，不寫則都緩存-->

  <!-- 緩存多個(gè)時(shí) -->
   <keep-alive :include="[News, Message]"> 
       <router-view></router-view>
   </keep-alive>

6.11.兩個(gè)新的生命周期鉤子

  1. 作用：路由組件所獨(dú)有的兩個(gè)鉤子，用于捕獲路由組件的激活狀態(tài)。
  2. 具體名字：
    1. activated路由組件被激活時(shí)觸發(fā)。
    2. deactivated路由組件失活時(shí)觸發(fā)。
      PS:之前講的nextTick也是一個(gè)鉤子

6.12.路由守衛(wèi)

  1. 作用：對(duì)路由進(jìn)行權(quán)限控制

  2. 分類：全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)

  3. 全局守衛(wèi):

    //全局前置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換前執(zhí)行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
		if(localStorage.getItem('school') === 'atguigu'){ //權(quán)限控制的具體規(guī)則
			next() //放行
		}else{
			alert('暫無權(quán)限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換后執(zhí)行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改網(wǎng)頁的title
	}else{
		document.title = 'vue_test'
	}
})

  4. 獨(dú)享守衛(wèi):

    beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暫無權(quán)限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

  5. 組件內(nèi)守衛(wèi)：

    //進(jìn)入守衛(wèi)：通過路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi)：通過路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) {
}

6.13.路由器的兩種工作模式

6.13.1.hash & history

  1. 對(duì)于一個(gè)url來說，什么是hash值？—— #及其后面的內(nèi)容就是hash值。
  2. hash值不會(huì)包含在 HTTP 請(qǐng)求中，即：hash值不會(huì)帶給服務(wù)器。
  3. hash模式：
    1. 地址中永遠(yuǎn)帶著#號(hào)，不美觀 。
    2. 若以后將地址通過第三方手機(jī)app分享，若app校驗(yàn)嚴(yán)格，則地址會(huì)被標(biāo)記為不合法。
    3. 兼容性較好。
  4. history模式：
    1. 地址干凈，美觀 。
    2. 兼容性和hash模式相比略差。
    3. 應(yīng)用部署上線時(shí)需要后端人員支持，解決刷新頁面服務(wù)端404的問題。

6.13.2. nodejs部署項(xiàng)目（簡(jiǎn)單版）

nodejs部署一個(gè)項(xiàng)目的大致流程：文章來源地址http://www.zghlxwxcb.cn/news/detail-787834.html

  1. 打包項(xiàng)目 npm run build 注意區(qū)別是hash還是history模式
  2. 初始化一個(gè)項(xiàng)目 npm init
  3. 安裝nodejs中的express npm i express
  4. 寫好server.js
    （可能需要下載npm install --save connect-history-api-fallback）
//使用nodejs部署項(xiàng)目server.js
const express = require('express')
//hash模式不用這樣
//history模式下，使用connect-history-api-fallback來解決 單獨(dú)復(fù)制并新建一個(gè)頁面填入http://localhost:5005/home/message等頁面不出現(xiàn)內(nèi)容的問題
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('服務(wù)器啟動(dòng)成功了')
})
  1. 運(yùn)行項(xiàng)目 node server

7.VUE UI組件庫

7.1.移動(dòng)端常用 UI 組件庫

  1. Vant https://youzan.github.io/vant
  2. Cube UI https://didi.github.io/cube-ui
  3. Mint UI http://mint-ui.github.io

7.2.PC 端常用 UI 組件庫

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

到了這里，關(guān)于Vue（3）-vue中的Ajax、Vuex、路由及UI組件庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • Vue2學(xué)習(xí)筆記のVue中的ajax

    hello, 這篇文章是Vue2學(xué)習(xí)筆記的第四篇，也是第四章：Vue中的ajax。 vue腳手架配置代理 方法一 在vue.config.js中添加如下配置： 說明： 1 優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。 2.缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理。 3.工作方式：若按照

    2024年02月11日
    瀏覽(16)
  • Vue2 第十七節(jié) Vue中的Ajax

    Vue2 第十七節(jié) Vue中的Ajax

    1.Vue腳手架配置代理 2.vue-resource 1.1 使用Ajax庫 --? axios ① 安裝 :? npm i axios ② 引入:? ?import axios from \\\'axios\\\' ③ 使用示例? 1.2 解決開發(fā)環(huán)境Ajax跨域問題 跨域：違背了同源策略，同源策略規(guī)定協(xié)議名，主機(jī)名，端口號(hào)必須一致 解決方法：配置代理服務(wù)器 兩種方式 方式① ： （

    2024年02月13日
    瀏覽(26)

  • Vue中的ajax和slot插槽

    在前后端分離項(xiàng)目中，解決跨域問題是一個(gè)常見的需求。下面列舉了幾種常用的跨域解決方法： CORS（跨域資源共享）：這是最常用且推薦的跨域解決方案。通過在服務(wù)器端設(shè)置響應(yīng)頭，允許特定的源（域名、協(xié)議、端口）訪問資源。在后端服務(wù)器上進(jìn)行配置即可實(shí)現(xiàn)跨域請(qǐng)

    2024年02月10日
    瀏覽(48)

  • Vue2學(xué)習(xí)之第四章——Vue中的ajax

    解決開發(fā)環(huán)境 Ajax 跨域問題 配置代理 方式一 在vue.config.js中添加如下配置： 說明： 優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。 缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理。 工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)，那么

    2024年01月24日
    瀏覽(25)
  • Vue中的Ajax 配置代理 slot插槽

    Vue中的Ajax 配置代理 slot插槽

    本案例需要下載 axios 庫 npm install axios 配置參考文檔 Vue-Cli devServer.proxy vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴(yán)格遵照

    2024年02月09日
    瀏覽(23)
  • Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署

    Ajax，前后端分離開發(fā)，前端工程化，Element，Vue路由，打包部署

    Ajax介紹 Axios 案例 前后端分離 前端工程化 環(huán)境準(zhǔn)備，nodejs安裝，D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element資料NodeJS安裝文檔 Vue項(xiàng)目簡(jiǎn)介 它本來默認(rèn)端口號(hào)是8080 ，但這就和tomcat沖突了所以修改為7000 Vue項(xiàng)目開發(fā)流程 Vue組件庫Element pagination分頁組件，table表格組件，Dial

    2024年02月05日
    瀏覽(104)
  • vue3+elementPlus登錄向后端服務(wù)器發(fā)起數(shù)據(jù)請(qǐng)求Ajax

    vue3+elementPlus登錄向后端服務(wù)器發(fā)起數(shù)據(jù)請(qǐng)求Ajax

    后端的url登錄接口 先修改main.js文件 login.vue 此時(shí)前端有跨域問題 先配置跨域 vue.config.js? 項(xiàng)目中如果沒有這個(gè)文件 請(qǐng)自行創(chuàng)建。 此時(shí)可以看到跳轉(zhuǎn)到登錄到home頁面 ?完整的后端登錄方法? 消息提示使用elementPlus 的Elmessage?

    2024年01月18日
    瀏覽(29)
  • vue3.2中的vuex使用

    vue3.2中的vuex使用

    Vuex 中有以下幾個(gè)核心概念： State：應(yīng)用程序的狀態(tài)存儲(chǔ)在單一的狀態(tài)樹中，即 State。State 可以通過 store.state 屬性訪問。 Mutation：狀態(tài)的變化必須通過提交 Mutation 來進(jìn)行。Mutation 是一個(gè)包含 type 和 payload 屬性的對(duì)象，type 是 Mutation 的類型，payload 是 Mutation 的有效負(fù)載。Mutat

    2023年04月11日
    瀏覽(25)
  • Vue3在點(diǎn)擊菜單切換路由時(shí)，將ElementPlus UI庫中el-main組件的內(nèi)容滾動(dòng)恢復(fù)到頂部

    Vue3在點(diǎn)擊菜單切換路由時(shí)，將ElementPlus UI庫中el-main組件的內(nèi)容滾動(dòng)恢復(fù)到頂部

    功能：Vue3在點(diǎn)擊菜單切換路由時(shí)，將頁面el-main的內(nèi)容滾動(dòng)到頂部，布局如下，使用UI組件庫為ElementPlus ?在網(wǎng)上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或?window.scrollTo(0,0) 滾動(dòng)，但是我使用無效，于是使用操作dom的方法，如下 可以使用 watch 函數(shù)來? 監(jiān)聽

    2024年01月18日
    瀏覽(36)

  • vue3中監(jiān)聽，組件通信如父子傳值、Vuex、Event Bus的使用

    目錄 一、監(jiān)聽 二、父子傳值： 1、父?jìng)髯樱?2、子傳父 三、全局狀態(tài)管理（Vuex）： 四、事件總線（Event Bus）： 我們有一個(gè)父組件ParentComponent和一個(gè)子組件ChildComponent。在父組件中，我們使用:childProp=\\\"parentData\\\"將數(shù)據(jù)傳遞給子組件。在子組件中，我們使用defineProps來接收父組件

    2024年02月13日
    瀏覽(32)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包