Front-end challenge full stack Представлены 13 эпизодов оригинальных бесплатных видеороликов Koa2.x

Node.js koa
Front-end challenge full stack Представлены 13 эпизодов оригинальных бесплатных видеороликов Koa2.x

Koa2 в настоящее время является самой популярной средой веб-разработки, основанной на платформе Node.js.Он небольшой, но хорошо масштабируемый. Koa имеет чистый вид, небольшой размер и чистое программирование. Его используют многие известные интернет-компании в Китае, и все BAT (Baidu, Ali, Tencent) используют его.

Используя koa для написания веб-приложений, комбинируя различные генераторы, вы можете избежать повторяющегося и утомительного вложения функций обратного вызова и значительно повысить эффективность обработки ошибок. Приложение Koa — это объект, содержащий массив промежуточного программного обеспечения, состоящего из набора функций-генераторов. Эти функции отвечают за различную обработку HTTP-запросов, такую ​​как создание кешей, указание прокси, перенаправление запросов и так далее. Эти функции промежуточного программного обеспечения состоят из стековой структуры на основе запроса запроса и выполняются последовательно.

Неважно, если вы немного запутались, когда читаете этот отрывок, если вы все еще не можете полностью понять этот отрывок, просто следуйте за техническим толстяком, чтобы выучить его.Когда вы вернетесь после изучения, вы обнаружите, что это очень просто.

Курс обновляется 2-3 раза в неделю.Технический жир не штатный лектор, а программист первой линии.Овертаймов много, и возможно закрытая разработка. Тем не менее, технический жир приложит все усилия, чтобы записать класс, спасибо за вашу поддержку.

Необходимые знания:

Если вы не знакомы с JavaScript, рекомендуется сначала постучаться в Rhino.Полное руководство по Javascript.

Если вы еще не знакомы с ES6, я предлагаю вам сначала сделать технологию толстой.«Технический жир заставляет вас играть в видеоурок по ES6»читать.

Если вы еще не знаете, как установить Node и использовать npm, найдите базовое видео в Интернете и посмотрите его.

Раздел 01: Настройка среды разработки Koa

Теплый и уютный дом - это то, к чему стремятся все, и программа одна. Хорошая среда для всех - это основа и гарантия для последующей деятельности. В этом уроке мы будем строить среду разработки Koa.

Установите Node.js

Установить Node очень просто.Если вы можете установить QQ, я считаю, что вы определенно можете установить Node самостоятельно. Но для разработки Koa2 требуется Node.js, для него требуется версия Node.js выше V7.6. Поскольку node.js версии 7.6 полностью поддерживает async/await, нет необходимости добавлять флаг, поэтому вы можете полностью поддерживать наш Koa2.

Ознакомьтесь с методом версии Node (версия для Windows):

Откройте «Выполнить» (сочетание клавиш: win + R), затем введите cmd, чтобы открыть инструмент командной строки, и введите:

node -v

Если ваша версия ниже, чем v7.6, то вам необходимо обновиться, вы должны проверить этот шаг, иначе он не оставит скрытых опасностей для будущих курсов.

Как обновить версию узла

Если ваша версия слишком низкая или система Windows, я расскажу вам о самом жестоком методе: напрямую загрузите новый установочный пакет, переустановите его и перезапишите исходное место установки.

Установка Место поиска местоположения, введите командную строку:

where node

Я не использую пакет n для обновления на работе, потому что пакет n нуждается в поддержке sh. Мой компьютер для записи уроков - Windows, и sh не очень хорошо его поддерживает. Если у вас компьютер Mac, вы можете использовать пакет n для обновления.

Метод обновления Mac:

sudo npm install -g n
sudo n stable

Можно легко выполнить две строки команд. Думаете, фронтенд-программисты не любят использовать Mac-разработку?

среда сборки

Найдите букву диска, которая вам нравится, а затем создайте папку, здесь я выбираю папку koa2 в папке code под диском E. Командная строка построена следующим образом:

cd code  //进入code文件夹
mkdir koa2 //创建koa2文件夹
cd koa2  //进入koa2文件夹

После входа мы инициализируем производственный файл package.json

npm init -y

После создания package.json установите пакет koa, здесь мы используем npm для его установки.

npm install --save koa

Если вы устанавливаете неправильно, обычно это проблема со скоростью сети, вы можете использовать cnpm для установки.

HelloKoa2

Теперь, когда среда установлена, давайте попрактикуемся в нашей первой программе. Создайте новый файл index.js в папке и каталоге и введите следующий код. Конкретный код объясняется в видео.

const Koa = require('koa')
const app = new Koa()
 
app.use( async ( ctx ) => {
  ctx.body = 'hello koa2'
})
 
app.listen(3000)
console.log('[demo] start-quick is starting at port 3000')

После написания введите в командной строке:

node index.js

Затем введите: http://127.0.0.1:3000 в браузере, чтобы увидеть результат.

Раздел 02: Как использовать async/await

После выхода первого урока многие друзья не были знакомы с использованием async/await. Если вы плохо понимаете эту грамматику, боюсь выучить Коа хорошо будет сложно.Чтобы не оставлять дырку для будущих курсов, давайте успокоимся и разберемся с грамматикой этого ES2017. Прежде чем изучать синтаксис async/await, вам нужно понять Promise, вы можете прочитать мой "Tech Fat приглашает вас поиграть в обучающее видео по ES6» для дополнительных занятий.

что такое асинхронный и ждущий

Если вы хотите понять грамматику, вы можете сначала понять основное значение двух слов: асинхронный — это сокращение от асинхронного, а ожидание можно назвать сокращением от асинхронного ожидания. Поняв эти два слова, легко понять, что async — это объявление того, что метод является асинхронным, а await — это ожидание завершения асинхронного метода.УведомлениеДело в том, что await нужно использовать в асинхронных методах, потому что сам доступ к await приведет к остановке и блокировке программы, поэтому его нужно использовать в асинхронных методах.

Что именно делает асинхронность?

Async делает метод асинхронным. Это легко понять. Ключ в том, каково его возвращаемое значение? Что мы делаем с ним, когда получаем?

Согласно предыдущему опыту, мы надеемся использовать return для прямого возврата значения асинхронной функции, но если это так, то что делает await do, давайте напишем кусок кода для его проверки.

async function testAsync(){
    return 'Hello async';
}
const result = testAsync();
console.log(result);

Выполните этот код с узлом в терминале, вы обнаружите, что Promise {'Hello async'} выводится, а затем вы обнаружите, что он возвращает Promise.

PS E:\code\BXShop> node test.js
Promise { 'Hello async' }

что ждет ждет?

await обычно ждет завершения выполнения асинхронного метода, но на самом деле await ждет только выражение, в официальной документации это выражение говорит об объекте Promise, но оно также может принимать обычные значения. Давайте напишем фрагмент кода для проверки этого результата. В программе у нас есть асинхронные методы, есть и обычные методы. Наконец, при выводе на консоль вы обнаружите, что можете выводить напрямую.

function getSomething(){
    return 'something';
}
 
async function testAsync(){
    return 'Hello async';
}
 
async function test(){
    const v1=await getSomething();
    const v2=await testAsync();
    console.log(v1,v2);
}
 
test();

Используйте async/await одновременно

Из предыдущих двух примеров мы узнали об асинхронности и ожидании соответственно.Давайте создадим поддельный пример и рассмотрим проблему ожидания. Это просто подделка.В реальных проектах большинство из них уходят в фоновый режим для запроса данных и выполняют их после возврата данных.

function takeLongTime() {
    return new Promise(resolve => {
        setTimeout(() => resolve("long_time_value"), 1000);
    });
}
 
async function test() {
    const v = await takeLongTime();
    console.log(v);
}
 
test();

Резюме: Этот раздел предназначен в основном для того, чтобы компенсировать отсутствие предыдущих основ для всех.Теперь у нас есть базовое понимание асинхронности и ожидания, что устраняет препятствия для нашего будущего обучения. Но если вы недостаточно знакомы с Promises, обязательно потратьте более 10 минут на его изучение.

Раздел 03: Прием запросов на получение

Когда внешний и внутренний интерфейс взаимодействуют, серверная часть сообщит вам, что запрос является запросом GET/POST. Мы также хорошо знакомы с двумя типами запросов во внешнем интерфейсе. Например, когда мы использовать систему электронной коммерции, нам нужно передать GET, чтобы получить подробную информацию о продукте.Номер продукта в форме отправляется в фон, и фон возвращает нам данные. Поскольку мы все знакомы с запросами, давайте посмотрим, как эти запросы принимаются и обрабатываются Koa2 в этом уроке.

Разница между запросом и строкой запроса

В koa2 запросы GET принимаются через запрос, но есть два общепринятых метода: запрос и строка запроса.

  • запрос: возвращает отформатированный объект параметра.
  • строка запроса: возвращает строку запроса.

Давайте сначала напишем простой пример и посмотрим на результат.

demo1.js

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    let url =ctx.url;
    let request =ctx.request;
    let req_query = request.query;
    let req_querystring = request.querystring;
 
    ctx.body={
        url,
        req_query,
        req_querystring
    }
 
});
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

После написания запустите сервис с помощью node demo1.js в терминале. Все работает нормально и доступно в браузере по адресу http://127.0.0.1:3000?user=jspang&age=18. Мы можем получить строку строк JSON на веб-странице, которая является интерфейсом, который мы хотим передать нам из бэкэнда.

{"url":"/?user=jspang&age=18","req_query":{"user":"jspang","age":"18"},"req_querystring":"user=jspang&age=18"}

Помимо получения запросов Get в ctx.request, вы также можете получать запросы GET непосредственно в ctx. ctx также делится на запрос и строку запроса. С приведенными выше соединениями мы уже знакомы с их отличиями и не будем их повторять. Следуя приведенному выше коду, давайте посмотрим, как получить запрос GET непосредственно под ctx.

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    let url =ctx.url;
 
    //从request中获取GET请求
    let request =ctx.request;
    let req_query = request.query;
    let req_querystring = request.querystring;
 
    //从上下文中直接获取
    let ctx_query = ctx.query;
    let ctx_querystring = ctx.querystring;
 
    ctx.body={
        url,
        req_query,
        req_querystring,
        ctx_query,
        ctx_querystring
    }
 
});
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

Запустите службу и просмотрите результаты в браузере.

Суммировать:Есть два способа получить запрос GET: один получается из запроса, а другой всегда получается из контекста. Также получается два формата: запрос и строка запроса. Каждый должен различать память и вносить гибкие изменения в соответствии с реальными потребностями.

Раздел 04. Как принимаются POST-запросы (1)

В этом разделе в основном рассказывается, как принимать запросы POST. Для обработки POST-запросов Koa2 не инкапсулирует удобный способ получения параметров, которые необходимо получить путем разбора нативного объекта запроса node.js req в контексте.

Шаги для получения почтового запроса:

  1. Разберите собственный объект nodex.js req в контексте ctx.
  2. Разобрать данные формы POST в строку запроса (например, user=jspang&age=18).
  3. Преобразование строки в формат JSON.

Разница между ctx.request и ctx.req

  • ctx.request: это инкапсулированный объект запроса контекста в Koa2, который более интуитивно понятен и прост в использовании.
  • ctx.req: собственный объект HTTP-запроса node.js, предоставляемый контекстом. Хотя это не так интуитивно понятно, но может получить больше контента и подходит для нашего глубокого программирования.

ctx.method получить тип запроса

Koa2 предоставляет атрибут ctx.method, который может легко получить тип запроса, а затем написать разные соответствующие методы в соответствии с типом запроса, что очень часто используется в работе. Давайте сначала возьмем небольшой пример и получим различное содержимое страницы в соответствии с типом запроса. При выполнении запроса GET получается страница заполнения формы, а при выполнении запроса POST получается страница обработки POST.

const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    //当请求时GET请求时，显示表单让用户填写
    if(ctx.url==='/' && ctx.method === 'GET'){
        let html =`
            <h1>Koa2 request post demo</h1>
            <form method="POST"  action="/">
                <p>userName</p>
                <input name="userName" /> <br/>
                <p>age</p>
                <input name="age" /> <br/>
                <p>webSite</p>
                <input name='webSite' /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body =html;
    //当请求时POST请求时
    }else if(ctx.url==='/' && ctx.method === 'POST'){
        ctx.body='接收到请求';
    }else{
        //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
    }
})
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

После написания этого кода вы можете выполнить его с помощью команды узла, а затем ввести http://127.0.0.1:3000 в браузере, чтобы просмотреть его.При первом входе он показывает нам страницу формы.После того, как мы нажмем отправить Видно, что сервер получил нашу информацию, но мы ничего не сделали. Когда мы в следующий раз вводим адрес, он выдает ошибку 404.

Суммировать:Этот класс теоретически объясняет, как получить параметры POST-запроса, затем изучает использование ctx.method и пишет небольшой кейс. Для этого урока вы должны напечатать случай самостоятельно, потому что на следующем уроке мы будем следовать этому коду, чтобы написать код для получения параметров POST.

Раздел 05. Как принимаются POST-запросы (2)

На прошлом уроке мы получили теоретические знания по парсингу параметров Post, в этом уроке разберем его подробно.

Разбор собственных параметров POST узла

Сначала мы объявляем метод, а затем разрешаем его с помощью объекта Promise. Здесь мы используем ctx.req.on для получения событий. Сложность в том, что для решения этой проблемы мы используем ES6 Promise.

function parsePostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
            let postdata="";
            ctx.req.on('data',(data)=>{
                postdata += data
            })
            ctx.req.addListener("end",function(){
              
                resolve(postdata);
            })
        }catch(error){
            reject(error);
        }
    });
}

Затем в способе обработки получения POST-запроса из предыдущего урока измените код следующим образом.

 let pastData=await parsePostData(ctx);
 ctx.body=pastData;

Строка POST, анализирующая объект JSON

Теперь POST-строка успешно выводится, но пользоваться ею очень неудобно, вообще мы любим инкапсулировать строку в JSON-объект и потом использовать ее в программе. Далее мы напишем строку для инкапсуляции метода объекта выкупа JSON.

Я объясню объяснение кода и идеи программирования в видео.

function parseQueryStr(queryStr){
    let queryData={};
    let queryStrList = queryStr.split('&');
    console.log(queryStrList);
    for( let [index,queryStr] of queryStrList.entries() ){
        let itemList = queryStr.split('=');
        console.log(itemList);
        queryData[itemList[0]] = decodeURIComponent(itemList[1]);
    } 
    return queryData
}

Дайте друзьям все коды для практики.

const Koa  = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
    if(ctx.url==='/' && ctx.method==='GET'){
        //显示表单页面
        let html=`
            <h1>JSPang Koa2 request POST</h1>
            <form method="POST" action="/">
                <p>userName</p>
                <input name="userName" /><br/>
                <p>age</p>
                <input name="age" /><br/>
                <p>website</p>
                <input name="webSite" /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body=html;
    }else if(ctx.url==='/' && ctx.method==='POST'){
        let pastData=await parsePostData(ctx);
         ctx.body=pastData;
    }else{
        ctx.body='<h1>404!</h1>';
    }
 
});
 
function parsePostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
            let postdata="";
            ctx.req.on('data',(data)=>{
                postdata += data
            })
            ctx.req.addListener("end",function(){
                let parseData = parseQueryStr( postdata )
                resolve(parseData);
            })
        }catch(error){
            reject(error);
        }
    });
}
 
 
function parseQueryStr(queryStr){
    let queryData={};
    let queryStrList = queryStr.split('&');
    console.log(queryStrList);
    for( let [index,queryStr] of queryStrList.entries() ){
        let itemList = queryStr.split('=');
        console.log(itemList);
        queryData[itemList[0]] = decodeURIComponent(itemList[1]);
    } 
    return queryData
}
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

Раздел 06: промежуточное ПО koa-bodyparser

Я научился сам писать код для приема и разбора POST-запросов.На самом деле, самые основные функции не нужно писать самим.Должно быть встроенное колесо,которое мы можем использовать.koa-bodyparser-это встроенное колесо . В koa мы называем этот вид промежуточного программного обеспечения колеса. Для обработки запросов POST промежуточное ПО koa-bodyparser может анализировать данные formData контекста koa2 в ctx.request.body.

Установить промежуточное ПО

Используйте npm для установки, следует отметить, что здесь мы используем --save, потому что его нужно использовать в рабочей среде.

npm install --save koa-bodyparser@3

Введение в использование

После завершения установки его нужно внедрить и использовать в коде. Мы используем require в верхней части кода для импорта.

const bodyParser = require('koa-bodyparser');

Затем используйте его. Если вы его не используете, вы не можете его вызвать. Код использования выглядит следующим образом.

app.use(bodyParser());

После использования в коде можно напрямую использовать параметры получения POST-запроса ctx.request.body автоматически, чтобы дать нам промежуточное разрешение.

Полный код:

const Koa  = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
 
app.use(bodyParser());
 
app.use(async(ctx)=>{
    if(ctx.url==='/' && ctx.method==='GET'){
        //显示表单页面
        let html=`
            <h1>JSPang Koa2 request POST</h1>
            <form method="POST" action="/">
                <p>userName</p>
                <input name="userName" /><br/>
                <p>age</p>
                <input name="age" /><br/>
                <p>website</p>
                <input name="webSite" /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body=html;
    }else if(ctx.url==='/' && ctx.method==='POST'){
         let postData= ctx.request.body;
         ctx.body=postData;
    }else{
        ctx.body='<h1>404!</h1>';
    }
 
});
 
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

Суммировать:Изучив этот раздел, некоторые друзья обязательно скажут, что последние два раздела для вас не имеют значения, если вы технически толстый, а говорить об этом напрямую очень просто. Но я думаю, что изучение этого дела должно быть доскональным, не только для использования, но и для понимания того, почему можно парсить чужие промежуточные программы.

Раздел 07: Реализация собственной маршрутизации Koa2

Если вы работали во фронтенде несколько месяцев, вы четко знаете важность маршрутизации для программирования, это бизнес-логика и мышление фронтенда. Мы оцениваем эффект отображения различных страниц. В этом классе без помощи промежуточного ПО мы просто реализуем следующие маршруты нативными методами.

ctx.request.url

Чтобы реализовать нативную маршрутизацию, нужно получить путь, введенный в адресной строке, а затем прыгать по пути. Этого можно добиться с помощью ctx.request.url. Давайте посмотрим, как получить путь доступа на простом примере.

const Koa = require('koa')
const app = new Koa()
 
app.use( async ( ctx ) => {
  let url = ctx.request.url
  ctx.body = url
})
app.listen(3000)

Эта страница будет время для посещения http://127.0.0.1:3000/jspang/18 Выход / jspang / 18. Это будет, мы можем результаты страницы, в зависимости от достижения выхода.

Встроенная реализация маршрутизации

Посмотрите видео в этом разделе, потому что я не буду вводить html-часть.

Для реализации собственной маршрутизации необходимо ввести модуль fs для чтения файлов. Затем прочитайте его по маршруту маршрута и, наконец, верните на страницу для рендеринга. Давайте посмотрим на небольшой пример, чтобы учиться.

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();
 
function render(page){
   
   
        return  new Promise((resolve,reject)=>{
            let pageUrl = `./page/${page}`;
            fs.readFile(pageUrl,"binary",(err,data)=>{
                console.log(444);
                if(err){
                    reject(err)
                }else{
                    
                    resolve(data);
                }
            })
        })
    
}
 
async function route(url){
    
    let page = '404.html';
    switch(url){
        case '/':
            
            page ='index.html';
            break;
        case '/index':
            page ='index.html';
            break;
        case '/todo':
            page = 'todo.html';
            break;
        case '/404':
            page = '404.html';
            break;
        default:
            break; 
    }
    let html = await render(page);
    
    return html;
}
 
app.use(async(ctx)=>{
    let url = ctx.request.url;
    let html = await route(url);
    
    ctx.body=html;
})
app.listen(3000);
console.log('starting at 3000');

Резюме: На этом уроке мы научились нативно реализовывать маршрутизацию, которая также является основой, а на следующем уроке мы научимся использовать ее в общей работе.

Раздел 08: Начало работы с ПО промежуточного слоя Koa-router (1)

Хотя теперь мы можем сами написать роутинг Koa, наша собственная запись не элегантна и не совершенна, а просто реализует принцип. Если вы сделаете небольшую программу для тестирования, вы, возможно, сможете на ней какое-то время поработать, но в реальной работе она вас не удовлетворит. В этом классе мы будем использовать промежуточное программное обеспечение koa-router для завершения настройки маршрутизации. Экосистема промежуточного программного обеспечения koa достаточно сильна, и существует более одного типа промежуточного программного обеспечения для маршрутизации. Мы просто бросаем несколько кирпичей в начале, надеясь узнать больше о механизме маршрутизатора через koa-router.

Установите промежуточное ПО koa-router

npm install --save koa-router

После завершения установки его можно найти в package.json, после чего его можно внедрить и использовать в программе.

базовый вариант koa-маршрутизатора

О koa-router мы поговорим подробнее, поэтому разделим его на несколько уроков.Давайте сначала рассмотрим, как написать базовый koa-router.

const Koa = require('koa');
const Router = require('koa-router');
 
const app = new Koa();
const router = new Router();
 
router.get('/', function (ctx, next) {
    ctx.body="Hello JSPang";
});
 
app
  .use(router.routes())
  .use(router.allowedMethods());
  app.listen(3000,()=>{
      console.log('starting at port 3000');
  });

Многостраничная конфигурация

На самом деле, чтобы добавить несколько страниц, просто продолжайте заполнять get или post ниже, например, мы добавляем страницу todo.

const Koa = require('koa');
const Router = require('koa-router');
 
const app = new Koa();
const router = new Router();
 
router.get('/', function (ctx, next) {
    ctx.body="Hello JSPang";
})
.get('/todo',(ctx,next)=>{
    ctx.body="Todo page"
});
 
app
  .use(router.routes())
  .use(router.allowedMethods());
  app.listen(3000,()=>{
      console.log('starting at port 3000');
  });

Суммировать:Мы можем обнаружить, что настроить маршрутизацию с помощью промежуточного программного обеспечения очень просто, но маршрутизация по-прежнему очень сложна.Сегодня мы поговорим только о самом простом использовании koa-router.Мы продолжим увеличивать сложность в следующих уроках.

Раздел 09: Промежуточное ПО Koa-router (2) Иерархия

Благодаря изучению последнего класса у меня есть предварительное представление о koa-router, На самом деле маршрутизация все еще относительно сложна, а также является ключом к построению системы, поэтому нам нужно продолжать учиться.

установить префикс

Иногда мы хотим добавить еще один уровень перед всеми путями. Например, путь, который мы посетили, был http://127.0.0.1:3000/todo. Теперь мы хотим добавить уровень jspang перед всеми путями. становится http://127.0.0.1:3000/jspang/todo.В настоящее время вы можете использовать иерархию для выполнения этой функции. При создании маршрута можно указать префикс, и этот префикс будет размещен на верхнем уровне маршрута, то есть все запросы этого маршрута относятся к этому префиксу.

const router = new Router({
      prefix:'/jspang'
})

Напишите этот код, а затем добавьте уровень jspang к пути доступа. Вы можете ввести: http://127.0.0.1:3000/jspang/todo в браузере, чтобы протестировать его.

иерархия маршрутизации

Эта глава немного сложна, и для изучения рекомендуется добавить видео и текст.

Установка префикса вообще глобальна и не реализует иерархию маршрутизации.Если вы хотите установить иерархию для одной страницы, то это тоже очень просто. Просто используйте путь при использовании.

Например, такой способ записи загружает иерархию маршрутизации, где маршрутизатор эквивалентен родителю:router.use('/page', page.routes(), page.allowedMethods()).

Преимущество такого способа записи в том, что он не является глобальным, и мы можем добавлять слои к разным маршрутам.

Код такой: объявляем два маршрута, первый домашний, второй page, далее через use назначаем разные уровни фронта.

const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
 
 
let home = new Router();
home.get('/jspang',async(ctx)=>{
    ctx.body="Home JSPang";
}).get('/todo',async(ctx)=>{
    ctx.body ='Home ToDo';
})
 
 
 
 
let page = new Router();
page.get('/jspang',async(ctx)=>{
    ctx.body="Page JSPang";
}).get('/todo',async(ctx)=>{
    ctx.body ='Page ToDo';
})
 
//装载所有子路由
let router = new Router();
router.use('/home',home.routes(),home.allowedMethods());
router.use('/page',page.routes(),page.allowedMethods());
 
 
//加载路由中间件
app.use(router.routes()).use(router.allowedMethods());
 
 
 
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

Раздел 10: Параметры промежуточного программного обеспечения Koa-router (3)

Благодаря изучению двух коа-маршрутизаторов у меня уже есть базовые представления о маршрутизации, но некоторые друзья все еще оставляют мне сообщение, в котором говорится: «Параметры не будут переданы». Действительно, передача параметров очень важна в программировании и является одним из необходимых навыков. В этом уроке вы узнаете, как передавать параметры и получать их через koa-router.

Начнем с самого простого маршрута.

const Koa = require('koa');
const Router = require('koa-router');
 
const app = new Koa();
const router = new Router();
 
router.get('/', function (ctx, next) {
    
 
    ctx.body="Hello JSPang";
});
 
app
  .use(router.routes())
  .use(router.allowedMethods());
  app.listen(3000,()=>{
      console.log('starting at port 3000');
  });

Затем вспоминаем метод получения параметров, который мы изучили в третьем уроке, здесь мы используем самый простой в использовании метод ctx.query для получения, и модифицируем его на строку 6 следующего кода, чтобы мы могли легко получать получить параметры.

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/', function (ctx, next) {
    ctx.body=ctx.query;
});
app
  .use(router.routes())
  .use(router.allowedMethods());
  app.listen(3000,()=>{
      console.log('starting at port 3000');
  });

Резюме: Знания в этом классе не являются новыми знаниями. Мы все используем исходные знания для их достижения. Основная причина в том, что объединение и использование знаний также является навыком. Я надеюсь, что мои друзья будут применять то, что они узнали, и освоят это. .

Раздел 11: Использование файлов cookie в Koa2

Наиболее часто используемая операция с файлами cookie — это вход в систему и локальное сохранение информации о пользователе во время разработки. Например, когда мы делаем функцию входа в систему, мы надеемся, что пользователи смогут получить доступ к ресурсам без повторного входа в систему на следующей неделе.В настоящее время нам нужно использовать файлы cookie для удовлетворения наших потребностей. Контекст koa (ctx) напрямую предоставляет методы для чтения и записи.

  • ctx.cookies.get(name,[optins]): прочитать файлы cookie в запросе контекста.
  • ctx.cookies.set(name,value,[options]): Записывайте файлы cookie в контексте.

Запись действия с файлами cookie:

Давайте начнем с основного файла cookie для записи.

const Koa  = require('koa');
const app = new Koa();
 
app.use(async(ctx)=>{
    if(ctx.url=== '/index'){
        ctx.cookies.set(
            'MyName','JSPang'
        );
        ctx.body = 'cookie is ok';
    }else{
        ctx.body = 'hello world'
    }
});
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

Предварительный просмотр после написания, откройте F12, чтобы найти опцию Cookies в приложении. Вы можете найти имя и значение, которое мы написали.

Параметры файлов cookie

Например, когда мы хотим сохранить имя пользователя и статус входа пользователя, вы можете не входить в систему в течение 7 дней или не входить в систему в течение 30 дней. Это требует настройки некоторых параметров при записи:

  • Домен: укажите доменное имя, в котором находится файл cookie.
  • путь: путь, по которому записывается куки
  • maxAge: максимально допустимая продолжительность файла cookie.
  • expires: время истечения срока действия куки
  • httpOnly: будет ли он получен только в HTTP-запросах
  • overwirte: разрешить ли перезапись

const Koa  = require('koa');
const app = new Koa();
 
app.use(async(ctx)=>{
    if(ctx.url=== '/index'){
        ctx.cookies.set(
            'MyName','JSPang',{
                domain:'127.0.0.1', // 写cookie所在的域名
                path:'/index',       // 写cookie所在的路径
                maxAge:1000*60*60*24,   // cookie有效时长
                expires:new Date('2018-12-31'), // cookie失效时间
                httpOnly:false,  // 是否只用于http请求中获取
                overwrite:false  // 是否允许重写
            }
        );
        ctx.body = 'cookie is ok';
    }else{
        ctx.body = 'hello world'
    }
});
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

Читать куки:

Лучше поговорили о конкретных операциях написать cookie, мы сейчас пытаемся прочитать cookie.

const Koa  = require('koa');
const app = new Koa();
 
app.use(async(ctx)=>{
    if(ctx.url=== '/index'){
        ctx.cookies.set(
            'MyName','JSPang',{
                domain:'127.0.0.1', // 写cookie所在的域名
                path:'/index',       // 写cookie所在的路径
                maxAge:1000*60*60*24,   // cookie有效时长
                expires:new Date('2018-12-31'), // cookie失效时间
                httpOnly:false,  // 是否只用于http请求中获取
                overwrite:false  // 是否允许重写
            }
        );
        ctx.body = 'cookie is ok';
    }else{
        if( ctx.cookies.get('MyName')){
            ctx.body = ctx.cookies.get('MyName');
        }else{
            ctx.body = 'Cookie is none';
        }
      
    }
});
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

Раздел 12: Введение в шаблоны Koa2 (ejs)

Удалить весь html-код в JS во время разработки невозможно, что заведомо нереально, и нет возможности завершить масштабную веб-разработку. Мы должны заимствовать механизм шаблона, чтобы помочь нам в разработке.В этом уроке мы кратко поймем механизм шаблона Koa2.Целевой механизм koa2 полагается на промежуточное программное обеспечение для завершения разработки.

Установить промежуточное ПО

Использование механизма шаблонов в koa2 должно полагаться на промежуточное программное обеспечение Мы выбираем здесь промежуточное программное обеспечение koa-views и используем npm для его установки в первую очередь.

cnpm install --save koa-views

Следует отметить, что это koa-views вместо koa-view.Я столкнулся с этой ямой, когда устанавливал ее в первый раз, и она не удалась. Надеюсь, что мои друзья не наступят на эту простую и низкоуровневую яму. мой.

Установите механизм шаблонов ejs

ejs — известный и мощный шаблонизатор, который можно установить отдельно. Многие программы с открытым исходным кодом используют механизм шаблонов ejs.

npm install --save ejs

Написать шаблон

После установки шаблонизатора ejs можно писать шаблоны.Для единого управления шаблонами создаем новую папку просмотра и под ней создаем новый файл index.ejs.

views/index.ejs

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>http://jspang.com/wp-admin/post.php?post=2760&action=edit#
</head>
<body>
    <h1><%= title %></h1>
    <p>EJS Welcome to <%= title %></p>
</body>
</html>

Подробное объяснение объяснено в видео.

написать коа-файл

С файлом шаблона нам нужно настроить и отобразить в файле js.

const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()
 
// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
  extension: 'ejs'
}))
 
app.use( async ( ctx ) => {
  let title = 'hello koa2'
  await ctx.render('index', {
    title
  })
})
 
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

Суммировать:Этот класс просто кратко объясняет шаблонный механизм koa2, который играет роль привлечения новых идей.Не волнуйтесь, друзья, у нас в будущем будет практическая битва, чтобы соединить эти точки знаний в серии.

Раздел 13: KOA-Статический статический ресурс промежуточное программное обеспечение

В фоновой разработке есть не только запросы бизнес-логики, которые нужно обрабатывать кодом, но и множество запросов статических ресурсов. Например, запрашиваются статические ресурсы, такие как js, css, jpg и png. Их также много, и иногда также обращаются к статическим путям к ресурсам. Вполне возможно использовать koa2 для доступа к этим статическим ресурсам, но код будет длиннее. Итак, в этом классе мы используем koa-static промежуточное ПО для доступа к статическим ресурсам.

Установите коа-статик:

Используйте npm для установки промежуточного программного обеспечения и используйте версию 4.0.2 во время лекций.

npm install --save koa-static

Создайте новую статическую папку

Затем поместите изображения, файлы css и js в статический файл.

Используйте промежуточное ПО koa-static

Мы создаем новый файл demo12.js, вводим промежуточное ПО koa-static и используем его с методом app.use.

const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
 
const app = new Koa()
 
 
const staticPath = './static'
 
app.use(static(
  path.join( __dirname,  staticPath)
))
 
 
app.use( async ( ctx ) => {
  ctx.body = 'hello world'
})
 
app.listen(3000, () => {
  console.log('[demo] static-use-middleware is starting at port 3000')
})

Резюме: Среда статических ресурсов — это очень распространенный сервис на стороне сервера. Мы должны научиться его использовать. Давайте посмотрим видео в этом классе. Текст немного водянистый.

 

 

 

Пожалуйста, продолжайте смотреть учебник по MongoDB и возвращайтесь, чтобы продолжить обучение после его прочтения.

 

Категории