-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
json-server & fake/mock API #13
Comments
port
https://github.com/xgqfrms-GitHub/json-server#可选择端口 $ json-server --watch db.json --port 7777
|
fetch data |
Error
try {
throw new Error("Whoops!");
} catch (e) {
alert(e.name + ": " + e.message);
} https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/throw |
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typi-code"
},
{
"id": 2,
"title": "json server",
"author": "typi code"
}
],
"datas": [
{
"id": 1,
"name": "typicode",
"password": "abc123"
},
{
"id": 2,
"name": "xgqfrms",
"password": "xyz123"
},
{
"id": 3,
"name": "xyzdata",
"password": "ufo123"
}
]
}
|
mlab & free mongodb
|
MongoDB CURD
|
APIhttp://docs.mlab.com/data-api/ "q" example - return all documents with "active" field of true:
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?q={"active": true}&apiKey=myAPIKey
"c" example - return the count of documents with "active" of true:
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?q={"active": true}&c=true&apiKey=myAPIKey
"f" example (include) - return all documents but include only the "firstName" and "lastName" fields:
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?f={"firstName": 1, "lastName": 1}&apiKey=myAPIKey
"f" example (exclude) - return all documents but exclude the "notes" field:
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?f={"notes": 0}&apiKey=myAPIKey
"fo" example - return a single document matching "active" field of true:
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?q={"active": true}&fo=true&apiKey=myAPIKey
"s" example - return all documents sorted by "priority" ascending and "difficulty" descending:
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?s={"priority": 1, "difficulty": -1}&apiKey=myAPIKey
"sk" and "l" example - sort by "name" ascending and return 10 documents after skipping 20
https://api.mlab.com/api/1/databases/my-db/collections/my-coll?s={"name":1}&sk=20&l=10&apiKey=myAPIKey
|
API Authenticationhttp://docs.mlab.com/data-api/#authentication https://mlab.com/user?username=xyzdata
|
OKconst myAPIKey = `YpeswCDPr9CvDfmeIuawnh-iD5-oH0_G`;
const url = `https://api.mlab.com/api/1/databases/xyzdata_crm/collections/test?q={}&apiKey=${myAPIKey}`;
// collection === test
// q={} === all
const getdata = () => {
fetch(url, {
method: 'GET',
mode: 'no-cors'
}).then(
(response) => {
console.log(`fetch response`, response);
return response.json();
}
).then(
(json) => {
console.log(`fetch json`, json);
let data = JSON.stringify(json);
return data;
}
).catch(
(err) => {
const color = `
color: red;
background: rgba(125, 125, 125, 0.7);
font-size: 23px;
`;
console.log(`%c Whoops, An Error occurred!`, color, err);
throw new Error("Whoops, An Error occurred!", err);
}
);
}; |
{
"datas": [
{
"key": "1",
"uname": "xray",
"utype": "内部用户",
"uid": 17,
"lname": "西湖区",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "是"
},
{
"key": "2",
"uname": "Sidney",
"utype": "外部用户",
"uid": 23,
"lname": "湖底公园",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "否"
},
{
"key": "3",
"uname": "Joe Black",
"utype": "内部用户",
"uid": 32,
"lname": "Sidney No. 1 Lake Park",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "是"
},
{
"key": "4",
"uname": "xray",
"utype": "外部用户",
"uid": 23,
"lname": "西湖公园1号",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "是"
},
{
"key": "5",
"uname": "Sidney",
"utype": "内部用户",
"uid": 66,
"lname": "西湖湖底",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "否"
},
{
"key": "6",
"uname": "Joe Black",
"utype": "外部用户",
"uid": 18,
"lname": "Sidney No. 1 Lake Park",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "是"
}
]
}
|
const url = `http://localhost:7777/datas/`;
const getUserId = (uid) => {
let new_url = `${url}?id=${uid}`;
return fetch(new_url, {
method: 'GET'
}).then(
(response) => response.json()
).then(
(json) => {
console.log(`get id data`, json);
console.log(`get id data json[0]`, json[0]);
// maps array data
console.log(`get id data, json.length`, json.length);
return json;
}
);
};
const xfetchSearch = {
getUserId
};
let data = xfetchSearch.getUserId(17);
// ??? how to the returned objects array data ???
/*
{
"key": "1",
"uname": "xray",
"utype": "内部用户",
"uid": 17,
"lname": "西湖区",
"pnum": "18123456789",
"email": "clarence.gray@example.com",
"vdate": "2017-01-01~2017-12-31",
"activation": "是"
},
*/ PromiseValue ??? |
PromiseValueTest OKhttps://stackoverflow.com/a/28917161/8202629 // let data = fetchSearch.getUserId(17).PromiseValue;
let data = fetchSearch.getAll();
let data = [];
fetchSearch
.getAll()
.then((json) => (data = json));
fetchSearch.getAll().then(
(json) => {
data = json;
return data;
}
); |
get ant form submit values demo
|
解构赋值 in deepth
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment // 解构赋值 ({a, b, ...rest} = {a:1, b:2, c:3, d:4});
let values = {
loginName: "undefined",
userId: "undefined",
userName: "undefined",
phoneNumber: "undefined",
email: "undefined",
validDate: "undefined"
};
const search_obj = {
loginName,
userId,
userName,
phoneNumber,
email,
validDate
};
const search_obj = values;
const test = (...search_obj) => {
console.log(`userId`, userId);
console.log(`userName`, userName);
console.log(`email`, email);
};
// 从作为函数实参的对象中提取数据
const user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
// Object same key name, auto match value
const userId(
{
id
}
) => id;
console.log("userId: " + userId(user));
// "userId: 42"
// customized Object keys names
const whois = (
{
displayName: dName,
fullName: {
firstName: fName
}
}
) => {
// console.log(displayName + " is " + firstName);
// Uncaught ReferenceError: displayName is not defined
console.log(dName + " is " + fName);
};
whois(user);
// "jdoe is John"
let values = {
loginName: "undefined",
userId: "undefined",
userName: "undefined",
phoneNumber: "undefined",
email: "undefined",
validDate: "undefined"
};
const search_obj = Object.assign({}, values);
const test = (...search_obj) => {
console.log(`userId`, userId);
console.log(`userName`, userName);
console.log(`email`, email);
};
/*
Object {
loginName: undefined,
userId: undefined,
userName: undefined,
phoneNumber: undefined,
email: undefined,
validDate: undefined
}
*/
export const getUserInfos = (uid, uname, email, phone) => {
let new_url = `${url}?uid=${uid}&uname=${uname}&$email=${email}&phone=${phone}`;
return fetch(new_url, {
method: 'GET'
}).then(
(response) => response.json()
).then(
(json) => {
console.log(`get id data`, json);
console.log(`get id data json[0]`, json[0]);
// maps array data
console.log(`get id data, json.length`, json.length);
return json;
}
);
};
|
const values = {...};
getUserInfos(values);
// getUserInfos({...values}); |
export const getUserInfos = (uid, uname, lname, utype, email, pnum, vdate, activation) => {
/* let new_url = `
${url}
?uid=${uid}&uname=${uname}&lname=${lname}&utype=${utype}
&email=${email}&pnum=${pnum}&vdate=${vdate}&activation=${activation}
`; */
let new_url = url;
// all
if(uid){
new_url = `${url}?uid=${uid}`;
}else if(uname){
new_url = `${url}?uname=${uname}`;
}else if(lname){
new_url = `${url}?lname=${lname}`;
}else if(utype){
let new_utype = "";
(utype === "innerUser") ? (new_utype="内部用户") : (new_utype="外部用户");
new_url = `${url}?utype=${new_utype}`;
}else if(lname){
new_url = `${url}?lname=${lname}`;
}else if(email){
new_url = `${url}?email=${email}`;
}else if(pnum){
new_url = `${url}?pnum=${pnum}`;
}else if(vdate){
new_url = `${url}?vdate=${vdate}`;
}
// 如果用户什么都不输入, 传递后端一个空对象 {};
// 如果某个字段有值,才把该字段封装到对象中,{key1: "value1", key2: "value2"}
return fetch(new_url, {
method: 'GET'
}).then(
(response) => response.json()
).then(
(json) => {
console.log(`%c get getUserInfos data`, color_css, json);
console.log(`get getUserInfos data json[0]`, json[0]);
// maps array data
console.log(`get getUserInfos data, json.length`, json.length);
return json;
}
);
}; |
json-server & fake/mock API
https://github.com/typicode/json-server
new
old
db
The text was updated successfully, but these errors were encountered: