前端淺學之Vue

来源:https://www.cnblogs.com/LoginX/archive/2022/10/03/Login_X54.html
-Advertisement-
Play Games

淺學Vue 引入 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> Hello Vue <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <s ...


淺學Vue

引入

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Hello Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#app",
				data:{
					message:"hello Vue!"
				}
			})
		</script>
	</body>
</html>

條件渲染

v-if,v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1 v-if="awesmoe">Vue is awesmoe</h1>
			<h1 v-else>Oh no</h1>
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#app",
				data:{
					awesmoe:true
				}
			})
		</script>
	</body>
</html>

v-else-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-if="type==='A'">A</div>
			<div v-else-if="type==='B'">B</div>
			<div v-else-if="type==='C'">C</div>
			<div v-else>not A/B/C</div>
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#app",
				data:{
					type:'A'
				}
			})
		</script>
	</body>
</html>

列表渲染

v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<ul id="example-1">
			<li v-for="item in items">
				{{item.message}}
			</li>
		</ul>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#example-1",
				data:{
					items:[
						{message:'Foo'},
						{message:'Bar'}
					]
				}
			})
		</script>
	</body>
</html>

事件處理

v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="example-1">
			<button v-on:click="greet">Greet</button>
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#example-1",
				data:{
					message:"Hello"
				},
				methods:{
					greet:function(){
						alert(this.message)
					}
				}
			})
		</script>
	</body>
</html>

Axios

引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

data,json

{
	"name": "百度",
	"url": "https://baidu.com/",
	"page": 66,
	"isNonProfit": true,
	"address": {
		"street": "廣州",
		"city": "廣東",
		"country": "中國"
	},
	"links": [{
		"name": "博客園",
		"url": "https://www.cnblogs.com/"
	}, {
		"name": "必應",
		"url": "https://www.bing.com/"
	}, {
		"name": "搜狗",
		"url": "https://www.sougou.com/"
	}]
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				名稱：{{info.name}}
			</div>
			<div>
				url：{{info.url}}
			</div>
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#app",
				data(){
					return{
						info:{
							name:'',
							url:''
						}
					}
				},
				mounted(){
					axios
						.get('data.json')
						.then(response=>this.info=response.data)
				}
			})
		</script>
	</body>
</html>

表單輸入綁定

v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message" value="這個value不顯示了,雙向綁定顯示Hello"/>
			<p>Message is :{{message}}</p>
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#app",
				data:{
					message:"Hello"
				}
			})
		</script>
	</body>
</html>

組件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<my-component-li v-for="item in items" v-bind:item="item">
					
				</my-component-li>
			</ul>
		</div>
		
		<script>
			//定義一個組件
			Vue.component("my-component-li",{
				props:["item"], 
				template:'<li>{{item}}</li>'
			})
			var app=new Vue({
				//element,綁定id
				el:"#app",
				data:{
					items:["張三","李四","王五"]
				}
			})
		</script>
	</body>
</html>

計算屬性

將計算結果緩存，變成靜態屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>當前時間方法:{{getCurrentTime()}}</p>
			<p>當前時間屬性:{{getCurrentTime1}}</p>
		</div>
		
		<script>
			var app=new Vue({
				//element,綁定id
				el:"#app",
				//方法
				methods:{
					getCurrentTime:function(){
						return Date.now();
					}
				},
				//計算屬性
				computed:{
					getCurrentTime1:function(){
						return Date.now();
					}
				}
			})
		</script>
	</body>
</html>

Vue-cli

用於快速生成項目模板

下載node.js，下載地址

安裝，一路next

驗證，cmd,node -v,npm -v

鏡像，npm config set registry https://registry.npm.taobao.org

下載，npm install vue-cli -g

驗證，vue -V

如果安裝失敗，可以先卸載，再次安裝最新版

還不行，執行npm config list，查看prefix，找到vue.cmd安裝目錄，加入path環境變數中

進入對應路徑下，執行vue init webpack firstvue創建一個項目，跟著提示選擇

進入創建的firstvue，執行npm install

執行npm run dev

瀏覽器輸入列印的網址回車

Vue-cli目錄結構

  • build 和 config：WebPack 配置文件

  • node_modules：用於存放 npm install 安裝的依賴文件

  • src： 項目源碼目錄

  • static：靜態資源文件

  • .babelrc：Babel 配置文件，主要作用是將 ES6 轉換為 ES5

  • .editorconfig：編輯器配置

  • eslintignore：需要忽略的語法檢查配置文件

  • .gitignore：git 忽略的配置文件

  • .postcssrc.js：css 相關配置文件，其中內部的 module.exports 是 NodeJS 模塊化語法

  • index.html：首頁，僅作為模板頁，實際開發時不使用

  • package.json:項目的配置文件

    • name：項目名稱
    • version：項目版本
    • description：項目描述
    • author：項目作者
    • scripts：封裝常用命令
    • dependencies：生產環境依賴
    • devDependencies：開發環境依賴

Webpack

一款模塊載入器兼打包工具，它能把各種資源，如 JS、JSX、ES6、SASS、LESS、圖片等都作為模塊來處理和使用。

安裝

npm install webpack -g
npm install webpack-cli -g

檢驗

webpack -v
webpack-cli -v

配置

-webpack
--modules
---main.js
---hello.js
-webpack.config.js
  • entry：入口文件， 指定Web Pack用哪個文件作為項目的入口
  • output：輸出， 指定WebPack把處理完成的文件放置到指定路徑
  • module：模塊， 用於處理各種類型的文件
  • plugins：插件， 如：熱更新、代碼重用等
  • resolve：設置路徑指向
  • watch：監聽， 用於設置文件改動後直接打包

main.js

var hello=require("./hello");
hello.sayHi();

hello.js

exports.sayHi=function(){
	document.write("<div>Hello Webpack</div>");
}

webpack.config.js

module.exports = { 
	entry: "./modules/main.js",     
	output: {		
		path: "",
		filename: "./js/bundle.js"    ,
	},     
	module: {		
		loaders: [
			{test: /\.js$/,loader: ""}
		]
	},
	plugins: {},   
	resolve: {},     
	watch: true
}

打包

cmd進入webpack目錄下執行webpack

vue-router

官方的路由管理器

安裝

npm install vue-router --save-dev

不成功嘗試npm install --legacy-peer-deps [email protected]

例子

.html調用.js調用.vue

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App'
import router from './router' //自動掃描裡面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>迪師傅</h1>

    <router-link to="/main">首頁</router-link>
    <router-link to="/content">內容頁</router-link>
    <router-link to="/kuang">Kuang</router-link>
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Content.vue

<template>
  <h1>內容</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
import Kuang from "../components/Kuang";

//安裝路由
Vue.use(VueRouter);

//配置導出路由
export default new VueRouter({
  routes: [
    {
      //路由路徑
      path: '/content',
      name: 'content',
      //跳轉的組件
      component: Content
    },
    {
      //路由路徑
      path: '/main',
      name: 'main',
      //跳轉的組件
      component: Main
    },
    {
      //路由路徑
      path: '/kuang',
      name: 'kuang',
      //跳轉的組件
      component: Kuang
    }
  ]
})

Vue+Element

安裝

  1. 進入路徑，執行vue init webpack xxxx
  2. 進入xxxx，執行npm install --legacy-peer-deps [email protected]
  3. 安裝element-ui，npm i element-ui -S
  4. 安裝依賴，npm install
  5. 安裝SASS載入器，cnpm install sass-loader node-sass --save-dev
  6. 啟動，進行測試，npm run dev

sass-loader版本退回7.3.1

舉例

1.創建views目錄，創建視圖組件吧

Main.vue

<template>
  <h1>首頁</h1>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped>
</style>

Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="溫馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表單驗證，需要在 el-form-item 元素中增加 prop 屬性
        rules: {
          username: [
            {required: true, message: '賬號不可為空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密碼不可為空', trigger: 'blur'}
          ]
        },

        // 對話框顯示和隱藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 為表單綁定驗證功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定頁面，該方式稱之為編程式導航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

2.創建路由

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

3.main.js配置

main.js

import Vue from 'vue'
import App from './App'
//掃描路由配置
import router from './router'
//導入elementUI
import ElementUI from "element-ui"
//導入element css
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router);
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render: h => h(App),//ElementUI規定這樣使用
})

4.App.vue中配置顯示視圖

<template>
  <div id="app">
    <router-link to="/login">login</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>

路由嵌套

舉例

在之前的基礎上新增和修改對應頁面

Profile.vue

<template>
  <h1>個人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>

List.vue

<template>
  <h1>用戶列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">個人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用戶列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>內容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分類管理</el-menu-item>
              <el-menu-item index="2-2">內容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>個人信息</el-dropdown-item>
              <el-dropdown-item>退出登錄</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在這裡展示視圖-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

index.js

import Vue from "vue";
import Router from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //路由嵌套
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTTP缺點有哪些，如何解決
    前言 大家好，我是蝸牛，在上一篇中，我們介紹了不同版本的HTTP區別和發展背景，這篇文章我們來聊聊HTTP的缺點，HTTP缺點大致總結有以下三點： 通信使用明文（不加密），內容可能會被竊聽。 不驗證通信方的身份，因此有可能遭遇偽裝（客戶端和服務端都有可能） 無法證明報文的完整性，有可能會被篡改。 其 ...
  • c++ string類 和c 風格string 的問題梳理
    一、引言：什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式，它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • day04-MySQL常用函數01
    5.MySQL常用函數 5.1合計/統計函數 5.1.1合計函數-count count 返回行的總數 Select count(*)|count (列名) from table_name [WHERE where_definition] 練習 -- 統計一個班級共有幾個學生 SELECT COUN ...
  • 我操作MySQL的驚險一幕
    前幾天因工作需要，組長給我安排了一個數據清洗的任務。 任務：把 A 表的數據洗到 B 表。 我的第一反應，什麼是「洗」？洗數據是什麼？洗錢我倒是知道。 ...
  • MyBatis-Plus修改數據，會不會把其他欄位置為null
    前兩天在用MyBatis-Plus寫了一張單表的增刪改查，在寫到修改的時候，就突然蹦出一個奇怪的想法。 MyBatis-Plus的BaseMapper中有兩個關於修改的方法。如下： int updateById(@Param("et") T entity); int update(@Param("e ...
  • .net程式員的android studio 初體驗 (環境設置2022年10月）
    現如今，手機錄屏是必不可少的能力之一。對於游戲領域作者來說，在平時直播玩游戲、製作攻略、操作集錦時，不方便切屏，這時在游戲內如果有一個錄製按鈕就可以隨時開啟，記錄下每個精彩瞬間，減少後期剪輯工作量；在直播App中開啟一鍵錄屏，不光方便主播後續的賬號運營與復盤，用戶也能隨時截取有意思的片段傳播在社交媒 ...
  • 實現可拖拽側邊欄
    效果演示圖 可拖拽側邊欄的使用情況非常多啊，博客園後臺管理左側邊欄就可以拖拽喲！廢話不多說，本隨筆實現的可拖拽側邊欄效果演示圖如下： HTML 代碼 <div class="container"> <div class="left"> <div class="resize-bar"></div> < ...
  • 獨闢蹊徑：逆推Krpano切圖演算法，實現在瀏覽器切多層級瓦片圖
    前言 此文我首發於CSDN（所以裡面的圖片有它的水印） 趁著隔離梳理一下之前做的一個有用的功能：在瀏覽器中去切割多解析度瓦片圖 這是一個有趣的過程，跟我一起探索吧 閱讀本文需具備前置知識：對krpano有所瞭解，如：使用krpano去開發全景 本著故弄玄虛的原則，最精彩的會放到最後揭曉，由淺入深，層 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類