本文接著上文《手把手叫你用VS2019寫個(gè)WebApi（可以供網(wǎng)頁(yè)、手機(jī)、電腦三端連接使用）從網(wǎng)頁(yè)訪問(wèn)后端并在后端通過(guò)EF獲取sqlserver中的數(shù)據(jù)》

https://blog.csdn.net/weixin_43935474/article/details/132497256?spm=1001.2014.3001.5501

上文中介紹了如何創(chuàng)建一個(gè)WebApi后端接口的例子，現(xiàn)在來(lái)寫個(gè)網(wǎng)頁(yè)端訪問(wèn)這個(gè)后端接口的例子。

開(kāi)發(fā)環(huán)境：Visual Studio Code

先打開(kāi)VS Code，新建終端，在下方終端內(nèi)先輸入

cd E:\WebCode\FirstVueApp\

表示我將在上述路徑下創(chuàng)建項(xiàng)目。然后輸入

npm create vue@latest

表示我要?jiǎng)?chuàng)建一個(gè)vue框架的項(xiàng)目，然后輸入項(xiàng)目名，默認(rèn)叫“vue-project”,也可以在此處輸入自己取的項(xiàng)目名稱

?然后按下回車，會(huì)提示是否添加一些可選功能，我的選擇如下：

?然后點(diǎn)擊資源管理器（界面左上角第一個(gè)菜單），點(diǎn)擊“打開(kāi)文件夾”，打開(kāi)剛才創(chuàng)建項(xiàng)目的目錄E:\WebCode\FirstVueApp\vue-project，即可顯示項(xiàng)目相關(guān)的文件。

然后在終端輸入npm install按下回車，再輸入npm run dev按下回車，按住Ctrl鍵再點(diǎn)擊Local:右側(cè)的網(wǎng)址，即可打開(kāi)瀏覽器顯示這個(gè)vue項(xiàng)目的網(wǎng)站顯示效果，

如下：

接些來(lái)，我們把網(wǎng)站頁(yè)面上顯示的內(nèi)容改掉，換成從webapi后端訪問(wèn)接口拿到的數(shù)據(jù)，具體操作如下：

先關(guān)閉上述網(wǎng)頁(yè)，然后在VS Code的終端按下Ctrl+C，結(jié)束命令。

然后輸入

npm install axios

安裝axios，用于訪問(wèn)后端接口。

然后把App.vue文件里面的內(nèi)容換成如下代碼：

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'
export default {
  setup() {
    const data = ref('')
    const fetchData = async () => {
      try {
        const response = await axios.get('https://localhost:44364/api/GetUserData')
        data.value = response.data
      } catch (error) {
        console.error(error)
      }
    }
    onMounted(() => {
      fetchData()
    })
    return {
      data
    }
  }
}
</script>

<template>
  <div class="greetings">
  <h1>恭喜你與后端webapi鏈接成功并從后端獲取到數(shù)如下?lián)?lt;/h1>
  <h1>{{ data }}</h1>
  </div>
</template>

注意：上述axios.get('https://localhost:44364/api/GetUserData')里面的網(wǎng)址是WebApi1項(xiàng)目啟動(dòng)后的服務(wù)器網(wǎng)址，你們的可能和我不一樣，自己改一下。

然后我們用VS打開(kāi)前一篇文章里面介紹的WebApi1項(xiàng)目，運(yùn)行起來(lái)，如下圖：

?然后回到VS Code，在終端輸入npm run dev回車，啟動(dòng)前端。打開(kāi)Local:右側(cè)的網(wǎng)址，即可如下顯示：

可以發(fā)現(xiàn)并沒(méi)有從后端拿到數(shù)據(jù)！那我們按下F12，再按F5刷新網(wǎng)頁(yè)，來(lái)查看問(wèn)題，發(fā)現(xiàn)訪問(wèn)后端數(shù)據(jù)的請(qǐng)求被攔截了，如下：

?這是因?yàn)楫?dāng)我們用啟動(dòng)前端的時(shí)候，vue會(huì)自己?jiǎn)?dòng)一個(gè)端口號(hào)是5173的服務(wù)器（我的端口是5173，你們的端口可能不是這個(gè)，要根據(jù)實(shí)際情況來(lái)看），然后我們的webapi1的服務(wù)器端口是44364，那么，前端要訪問(wèn)44364這個(gè)端口就是跨域訪問(wèn)，這種情況是被后端禁止的。

解決方法如下：

在WebApi1的Web.config文件的<system.webServer></system.webServer>節(jié)點(diǎn)中添加如下代碼：

	<httpProtocol>
		<customHeaders>
			<add name="Access-Control-Allow-Origin" value="*" />
			<add name="Access-Control-Allow-Headers" value="Content-Type" />
			<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
		</customHeaders>
	</httpProtocol>

然后重啟WebApi1項(xiàng)目，然后刷新前端，即可看到數(shù)據(jù)：

搞定！

然后現(xiàn)在我覺(jué)得顯示數(shù)據(jù)的時(shí)候很丑，我想用一個(gè)比較好看的表格來(lái)顯示，可以用element-plus包，這個(gè)餓了么開(kāi)發(fā)的網(wǎng)頁(yè)端組件，很漂亮，具體操作如下：

在終端輸入npm install element-plus --save按回車

npm install element-plus --save

然后main.ts文件添加如下代碼：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'


app.use(ElementPlus)

App.vue文件里面的<template>節(jié)點(diǎn)改成如下：

<template>
  <div class="greetings">
  <h1>恭喜你與后端webapi鏈接成功并從后端獲取到數(shù)如下?lián)?lt;/h1>
  <el-table :data="data" stripe style="width: 100%">
    <el-table-column prop="JobNumber" label="工號(hào)" width="180" />
    <el-table-column prop="WorkeName" label="姓名" width="180" />
    <el-table-column prop="Sex" label="性別" />
  </el-table>
  </div>
</template>

然候npm run dev回車，就可以看到下面的效果：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-740564.html

到了這里，關(guān)于手把手教你用VUE寫個(gè)例子訪問(wèn)后端WebApi的接口獲取數(shù)據(jù)并顯示出來(lái)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！