---
# System prepended metadata

title: Recipe 说明文件

---

# Recipe 说明文件
* CDN 
    * https://cdnjs.cloudflare.com/ajax/libs/*
    * https://fonts.googleapis.com/css
* 分页面说明 （需要http-server启动）
    * AUTH
        * login
        * create
    * CREATE
        * empty 
        * (gallery selection page =>) full *静态*
        * recipe selection page + after search 
            * append / apply / replace popup
        * add bgm page *静态*
    * GALLERY
        * view
        * (create page, add images =>)selection *静态*
    * UPLOAD
        * (gallery page, add bundle =>)upload
        *
**P.S. 在会议中修改或注明的部分 已用两颗✳️号在本文代码注释标明；会议后按列表更新部分用三颗✳️号在本文代码注释标明**

---
### 1 AUTH
#### 1.1 index.html + login.js
```
JSON: https://mockend.com/in-case-of/1222/users/10 （文档中有举例object）
```
*login*

```
/*login.js*/
// get 与查看合法性已有
// 以下为post内容
    $.post('/login',hash).then(() =>
    {window.location.href="./new-gallery-final.html"},
        () => {
            alert("登录失败，请重新登录")
        })
```
![](https://i.imgur.com/PcJvfyh.png)
#### 1.2 sign-up.html + create.js
*create account*

```
/*create.js*/
 // 此处把 /register 改成我们的recipe pull 用户的地址
    $.post('/register',hash).then((response) =>{console.log(response)},
        (request) => {
        let {errors} = request.responseJSON;
        if(errors.enterusername  &&  errors.enterusername === 'invalid'){
           $('#RegisterForm').find('[name = "enterusername"]').siblings('.error').text('该用户已经存在。');
        }
        })

    
```
![](https://i.imgur.com/36tZcOI.png)










---
### 2 CREATE
#### 2.1 new-create-edit-0.html
*empty create page*
![](https://i.imgur.com/K5eZ5f5.png)


[](https://)




#### 2.2 new-create-edit-0-2.html （embeded js） + create-page-slider.js
*gif/video*


*编辑中的create page*
*是上一版静态文件保留了第一张图片*


```

<li class="nav-item"><a class="nav-link active d-flex justify-content-end align-content-center" href="#">gif</a></li>

<li class="nav-item"><a class="nav-link" href="#">video</a></li>
  

```

![](https://i.imgur.com/j0iYVvE.png)






*编辑中的create page*
*是上一版静态文件保留了第一张图片*

```
// ** 大图方向确定正向
// ** 输入文本类型限制数字 未限制
// 规定时间轴内图盘最大张数的参数 maxlength
<textarea class="form-control form-control-xm " placeholder="3" maxlength="10"></textarea>
```

```
// 调整图片切换速度的参数 data-interval
   //  1)             
    /* new-create-edit-0-2.html */
    <div class="containerSlider" style="height: -2px;" data-interval="1"></div>
    
   //  2) 
    /* create-page-slider.js */
    var timer = setInterval(nextImage, 5);
    var curImage = 0;
    //edit number of images here
    var numImages = 10;
```
![](https://i.imgur.com/IOyCAFL.png)

*popup*
###### 生成api（同页面）create-pages-slider.js
![](https://i.imgur.com/yDiae7n.png)




#### 2.3.1 new-create-expand.html (embedded js)
*apply/append/replace recipe*
*跨域*

```
// embedded js 里有obj
JSON: data/recipe-lists.json

//选择recipe
   $("#Recipes").click(function() {
        $(this).replaceWith(this + '<p>selected</p>');
      });
```
![](https://i.imgur.com/uamZY36.png)
```
// *** 打印recipe date flow：
// Print recipe clicked
 $('li').click(function() {
        console.log(this);
    })
    
 // Print date and flow
function getDateAndFlow()
{

    console.log(document.querySelector('input[id="hire-date"]').value);
    console.log(document.querySelector('input[id="hire-date-1"]').value);
    console.log(document.querySelector('select[id="subject"]').value)
}


// *** 对于未完成填充的网页alert
// alert if time input is empty or illegal
function dateHandler(){
    if (document.querySelector('input[id="hire-date"]').value >= document.querySelector('input[id="hire-date-1"]').value)
    {
        alert("时间未填写或不合法！");
    }
}
************************** CONSOLE ******************************
new-create-expand.html:141 2021-01-06
new-create-expand.html:142 2021-01-15
new-create-expand.html:143 0
new-create-expand.html:141 2021-01-06
new-create-expand.html:142 2021-01-15
new-create-expand.html:143 2
<如下图>
```
![](https://i.imgur.com/eR0yuyR.png)
![](https://i.imgur.com/by1XQkh.png)







#### 2.3.2 new-create-expand-after-search.html (optional,看search api怎么使用)
```
// e.g. 
<* new-create-expand.html *> 

 $('#Recipes').on('submit',(e) => {
    e.preventDefault();
    let hash = {};
    let arg = ['searchField'];
    arg.forEach((name) => {
        let value = $('#Recipes').find(`[name= ${name}]`).val();
        hash[name] = value;
    })
    hash['name'] = 'searchField';

    if(hash['searchField'] === ''){
        $('#Recipes').find('[name = "searchField"]').siblings('.error').text('no inputs');
        alert("没有input");
        return
    }
    else{
    window.location.replace("./new-create-expand-after-search.html");
    }
```

#### 2.4 new-BGM-page-1.html
*BGM lists*
*静态*
```
// JSON: data/bgm.json
{	
    "BGM":[
        {
            "Name": "data/music1.mp3",

        },
        {
            "Name": "data/music2.mp3",
        }
        ]
}
```
![](https://i.imgur.com/TuRSdrO.png)



---
### 3 GALLERY
#### 3.1 new-gallery-final.html (embedded js) + popup.js
*gallery view*
```
JSON: data/gallery-view.json
{	
    // 注意"00001"是gallery page图片陈列的index而非group ID
    "00001":[
        {
            "GroupID": "00003",
            "Count": 16,
            "KeyID": 7,
            "KeyAddr": "00003_07.jpg",
            "Addr":"data/00003_2.jpg"
        },
        {
            "GroupID": "00003",
            "Count": 16,
            "KeyID": 7,
            "KeyAddr": "00003_07.jpg",
            "Addr":"data/00003_01.jpg"
        },
        {
            "GroupID": "00003",
            "Count": 16,
            "KeyID": 7,
            "KeyAddr": "00003_07.jpg",
            "Addr":"data/00003_03.jpg"
        }]
}

```

 
```
<script type="text/javascript">
// 为一组图片的parser
   $.getJSON("data/gallery-view.json",function (result){
            var setting = {
                subject:'00001',
                x : 2,
                cardw : 30*2,   //page card's width .
                cardh : 40*2,
                cardn : 7,      //the number of visible page card .
                margin : 2,     //margin between cards .
                JSON :result
            };
            $('#00001').slider(setting);
        });

```
```
// *** 打印被选择的图片组div
// the img name when its div clicked
$('img').click(function() {
    console.log(this);
})
    
```
![](https://i.imgur.com/0XjVj55.png)

![](https://i.imgur.com/sFh4kDP.png)


![](https://i.imgur.com/FPmDZhB.png)


*view images inside of a bundle after clicking*

![](https://i.imgur.com/aDYyKew.png)


#### 3.2 new-gallery-final-1.html
*在create page 按加号后的page*
*是上一版静态文件保留了第一行div*

![](https://i.imgur.com/rNS9afx.png)



---
### 4 UPLOAD
#### 4.1 gallery-up.html + upload.js
*upload multiple img/mv files*
*跨域*
```
// log例子如下 （从该图当下的console复制粘贴）
3*jpg <*成功*>
upload.js:161 FileList {0: File, 1: File, 2: File, length: 3}
upload.js:99 zip <*文件为zip遂失败*>
upload.js:161 FileList {0: File, 1: File, 2: File, length: 3}
upload.js:99 dmg <*文件为dmg遂失败*>

```
![](https://i.imgur.com/VbA5bch.png)
```

// 该图当下的FileList参数 （需要post给gallery page的json object）如下
FileList {0: File, 1: File, 2: File, length: 3}
0: File {name: "00001_00.jpg", lastModified: 1608889983055, lastModifiedDate: Fri Dec 25 2020 17:53:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 5871, …}
1: File {name: "00001_01.jpg", lastModified: 1608889998210, lastModifiedDate: Fri Dec 25 2020 17:53:18 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 5684, …}
2: File {name: "00001_02.jpg", lastModified: 1608890010934, lastModifiedDate: Fri Dec 25 2020 17:53:30 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 5868, …}
length: 3
__proto__: FileList

```
---

