操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

全代碼svn地址 （用戶名：liu，密碼;123）

通常我們的vue項目是前后分離的，vue前端通過后臺api提供的接口(url)操作數據庫，這里我們通過axios來實現。

可以使用我的在線API的URL進行測試

和使用構造的API描述文檔（81端口的后臺已經設置了跨域；82端口的后臺沒有設置跨域；）

還有在線測試的系統（用戶名：liu，密碼：12345），有點慢（現在升級為2兆帶寬，速度還是可以的了）

我們后臺有這樣一個接口：:8081/api//（如果使還沒有后臺接口，可以先使用:81/api/Data/這個地址）微信小程序調鏈接地圖，它的作用是獲取表的所有數據。在地址欄輸入上述地址，看一下結果：

很明顯，只要我們vue前臺訪問這個地址，就可以拿到這些數據了。下面我們來一步步做：

1，安裝axios：

和安其它包一樣：npm axios

2，新建接口文件:

在src文件夾中新建api文件夾，在api文件夾中新建api.js文件（在里面將后臺的接口地址稍微修飾，變成前臺可以調用的方法）：

// 引入axios
import axios from 'axios'
// 請求延時（毫秒數，如果請求話費超過了'timeout'的時間，請求將被中斷）
axios.defaults.timeout = 100000

3，寫方法：

我們寫一個 方法

這里的 用來傳參，雖然這里還沒用到

export const getAllData = params => {
  return axios.get(`http://localhost:8081/api/projectInfo/GetAll`,{ params: params });
};

4微信小程序調鏈接地圖，調用方法：

比如我們要在xxx.vue文件里使用這個 方法：

①先引入方法：

import { getAllData } from '../api/api'

②然后就可以使用 方法了：

 getAllData().then((res) => {

      console.log(res)
    })

5，運行，看一下是否獲取到數據，結果一運行就報錯了。

原來是跨域的錯誤。

6，跨域修改：

首先我們把在api.js寫的方法改一下，改成：

export const getAllData = params => {
  return axios.get(`api/projectInfo/GetAll`,{ params: params });
};

然后為url加一個基礎前綴：

axios.defaults.baseURL="/api"

之后，做代理配置：

 proxyTable: {
      // 配置多個代理
      "/api": {
        target: "http://localhost:8081",
        secure:true,
        changeOrigin: true,
        pathRewrite: {
          // 路徑重寫，
          "^/api": "" // 替換target中的請求地址
        }
      },
    },

（如果你想進行測試而暫時不想自己創建后臺，想用上面的在線API URL時，只需要將這里的

target: "http://localhost:8081",

改為：

target: "http://112.125.90.247:81",

或

target: "http://112.125.90.247:82",

81是后臺也進行過跨域配置的接口，82是后臺未進行過跨域配置的接口

）

現在來說一下上述修改起到了什么作用：

我們get.axios里的初始url為api//，經過axios..="/api"，要訪問的url變為api/api//。

代理配置中的

"/api": {
        target: "http://localhost:8081",

表示，當碰到以/api為前綴的地址時，將/api替換為:8081，所以我們現在要訪問的地址就是:8081/api//

7，再運行，發現有結果了

返回的格式不用去管，這是后臺配置的，我們只需要看到里有9011條數據，說明獲取數據成功了。

8，新增、編輯、刪除的寫法

對應在線文檔的這三個方法

/**
 * 數據管理頁面新增一條數據
 * @param {*} params
 * qs.stringify()將對象 序列化成URL的形式，以&進行拼接，來傳遞參數
 * @returns
 */
export const addData = params => {
    return axios.post(`${base}/api/Data/post`, qs.stringify(params), {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }

    }); // 這里是跨域的寫法
};
/**
 * 數據管理頁面編輯一條數據
 * @param {*} params
 * @returns
 */
export const editData = params => {
    return axios.post(`${base}/api/Data/put`, qs.stringify(params), {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
    }); // 這里是跨域的寫法
};
/**
 * 數據管理頁面根據id刪除一條數據
 * @param {*} id
 * @returns
 */
export const DeleteDataById = id => {
    return axios.get(`${base}/api/Data/DeleteById/${id}`);
};

其對應的后臺代碼為：

/// 

		/// 新增數據
		/// 
		///一條數據
		[HttpPost]
		public MessageModel<string> Post([FromBody] Data request)

		{
			var data = new MessageModel<string>();
			request.Id = Guid.NewGuid().ToString();
			request.CreateTime = DateTime.Now;
			//插入數據
			var id = DbContext.Insertable(request).ExecuteCommand();
			//查詢是否添加成功
			var success1 = DbContext.Queryable<Data>().Where(it => it.Id == request.Id)
				.ToList();
			data.success = success1.Count > 0;
			if (data.success)
			{
				data.response = id.ToString();
				data.msg = "添加成功";
				log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
				log.Info("Data" + "-" + "Add" + "-" + request.Id);
			}
			return data;
		}
		/// 

		/// 編輯數據
		/// 
		///一條數據
		[HttpPost]
		public MessageModel<string> Put([FromBody] Data request)
		{
			var data = new MessageModel<string>();
			request.UpdateTime = DateTime.Now;
			if (request.Id != null)
			{
				var id = DbContext.Updateable(request).ExecuteCommand();

				data.success = (id > 0);
				if (data.success)
				{
					data.msg = "更新成功";
					data.response = id.ToString();
					log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
					log.Info("Data" + "-" + "Edit" + "-" + request.Id);
				}
			}
			return data;
		}
		/// 

		/// 根據主鍵Id刪除一條數據
		/// 
		///編號
		[HttpGet]
		public MessageModel<string> DeleteById(string Id = "")
		{
			var data = new MessageModel<string>();
			var id = DbContext.Deleteable<Data>().In(Id).ExecuteCommand();
			data.success = (id > 0);
			if (data.success)
			{
				data.msg = "刪除成功";
				data.response = id.ToString();
				log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
				log.Info("Data" + "-" + "Delete" + "-" + Id);
			}
			return data;
		}

可能會出現put請求和請求不被允許的情況（報405之類的錯誤），一種解決方法是將put請求改成post請求，將請求改成get請求（例如上面的編輯和刪除方法）