В последнее время мои друзья часто жалуются на источник данных при написании проектов, ведь для фронтенда ресурсом данных интерфейса данных всегда является Mock. Я видел много отличных питонов в интернете, и нода летает. Но я чувствую, что нет хорошего плана процесса, который мог бы войти в процесс, который мы разрабатываем. Для того, чтобы помочь моим друзьям и для вас, кому нужны данные, вы можете более подробно рассмотреть весь процесс. Поскольку я тоже фронтенд, я знаю, что нужно каждому, и решение. Тогда учись со мной!
предисловие
Обучение безгранично, я надеюсь, что вы сможете следовать моим идеям и просто реализовать их. В статье я подробно объясню работу и детали каждого шага, некоторые часто используемые API-интерфейсы nodejs и простой синтаксис koa2. Вы также можете начать изучение koa2 с этой статьи. Это действительно полезная веб-инфраструктура. Кроме того, в статье также объясняется схема и конкретная реализация междоменного запроса данных и, наконец, форматирование данных и базовый запрос. Трое лучших вышли на сцену и вместе спели хорошее шоу.
стек технологий
- http.request: метод запроса узла http может использоваться как httpclient для инициирования http-запроса к серверу.Сканер должен инициировать http-запрос к целевой ссылке для получения информации о странице.
- cheerio: информация о странице, запрашиваемая через http, из-за отсутствия синтаксического анализа dom в браузере выглядит как беспорядочная строка, что очень плохо, но мы можем использовать библиотеку cheerio для ее синтаксического анализа в dom, чтобы мы могли использовать синтаксис, подобный jquery. для анализа информации о странице
- koa2-static: промежуточное ПО для статических ресурсов koa-static, которое может обращаться к статическим ресурсам в нашем проекте.
- koa2-cors: реализовать междоменный ajax-запрос данных, ключом к этому методу является настройка на стороне сервера.
- AXIOS + Promise: из-за характеристик однопоточности Node неизбежна необходимость использования большого количества асинхронного программирования, многоуровневых вложенных обратных вызовов, чтобы попытаться написать Promise.
Реализация
1. Строительство окружающей среды
Создаем новую папку, после входа инициализируем производственный файл package.json
npm init -y
После сгенерированного package.json устанавливаем пакет koa, здесь мы используем npm для установки
npm install --save koa
Остальные зависимости устанавливаются так же, как и выше, и здесь они не будут развернуты, а будут написаны вместе
npm install --save koa-static
npm install --save koa2-cors
2. Nodejs выходит на сцену
Разогрейте и постройте краеугольный камень рептилий
Прежде чем петь, его нужно хорошо отрепетировать, должен быть сценарий, каждый должен четко знать свою личность и время появления. Поэтому каждый раз, выходя на сцену, нужно репетировать и разогревать нижнюю часть тела. Вот как можно устроить хорошее шоу. Давайте сделаем то же самое, сначала разогреем код. Создайте новый demo01.js в нашей папке, а затем введите следующий код
var http = require('http') // Node.js提供了http模块，用于搭建HTTP服务端和客户端
var url = 'http://www.runoob.com/nodejs/nodejs-tutorial.html'; //输入任何网址都可以
http.get(url,function(res){ //发送get请求
var html=''
res.on('data',function(data){
html += data //字符串的拼接
})
res.on('end',function(){
console.log(html)
})
}).on('error',function(){
console.log('获取资源出错！')
})
Откройте терминал и выполните команду node demo01.js, вы увидите все html-структуры этой веб-страницы, которая является первым гонгом и барабаном для нашей драмы.
начать наше шоу
В приведенном выше примере мы можем получить весь HTML-код этой веб-страницы, а это значит, что мы можем найти в этом HTML-коде нужные нам ресурсы. nodejs предоставляет для этого очень быстрый и удобный API Cheerio. Его функция была представлена в предисловии, здесь прямая демонстрация того, как работать. Представляем нашу радость
const cheerio = require('cheerio')
После референса мы оборачиваем его, чтобы он больше походил на jquery.Преимущество jquery в том, что с DOM очень просто работать
var $ = cheerio.load(html)
Следующим шагом будет переход в наш html для поиска нужных нам ресурсов.Потребности у всех разные.Здесь мы сосредоточимся на кейсах по получению видеоресурсов на imooc. Чтобы сделать нашу основную часть (упомянутую в предыдущей разминке) читаемой, мы инкапсулируем эту часть в функцию, которая получает html в качестве параметра.
function filterChapters(html) {
var $ = cheerio.load(html)
var chapters = $('.course-wrap') //在html里寻找我们需要的资源的class
var courseData = [] // 创建一个数组，用来保存我们的资源
chapters.each(function(item) { //遍历我们的html文档
var chapter = $(this)
var chapterTitle = chapter.find('h3').text().replace(/\s/g, "")
var videos = chapter.find('.video').children('li') //使用childern去获取下个节点
var chapterData = {
chapterTitle: chapterTitle,
videos: []
}
videos.each(function(item) { //遍历视频中的资源，title，id， url
var video = $(this).find('.J-media-item') //同样的方式找到我们需要的class部分
var videoTitle = video.text().replace(/\n/g, "").replace(/\s/g, "");
var id = video.attr('href').split('video/')[1]; //切割我们的href的到我们的id
var url = `http://www.imooc.com/video/${id}` // es6字符串模板的方式去通过id拿到我们的视频url
chapterData.videos.push({
title:videoTitle,
id: id,
url: url
})
})
courseData.push(chapterData)
})
return courseData //返回我们需要的资源
}
Pit Mining Record: Ресурсы, которые мы получаем, могут иметь разрывы строк или символы пробела.Если мы их не удалим, следующий формат json будет неправильным, но он будет содержать \n и другие символы, что явно не является форматом и данными нам нужно Поэтому, когда мы .text(), мы должны удалить \n, \t и т. д., которые идут с этим html. Используйте обычный и заменяющий API.
var videoTitle = video.text().replace(/\n/g, "").replace(/\s/g, "");
Закончить шоу
После получения нужных нам ресурсов он не будет в виде json-объекта, поэтому нам нужно его снова обработать.
var courseData = filterChapters(html)
let content = courseData.map((o)=>{
return JSON.stringify(o) // JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
})
После получения ресурса, который нам действительно нужен, следующим шагом будет его сохранение. Создайте новый файл index.json для хранения наших ресурсов. Используйте fs из nodejs для записи наших данных, вот краткое введение в fs, fs должен быть наиболее часто используемым API в узле, который содержит множество необходимых нам операций, таких как чтение, запись и загрузка. Заинтересованные студенты могут ознакомиться с документомfs. Вводим fs для записи пролезенных данных в нашу папку index.json
fs.writeFile('./index.json',content, function(err){ //文件路经，写入的内容，回调函数
if(err) throw new Error ('写文件失败'+err);
console.log("成功写入文件")
})
Готово, давайте посмотрим на наши результаты, откроем файл index.json, и мы сможем увидеть данные, которые мы взяли.
Это те данные, которые нам нужны? ! ! радостно. Игра nodejs очень хороша!
Во-вторых, koa2 играть
что такое коа, одолжитьОфициальный сайтОдно слово: koa — среда веб-разработки следующего поколения, основанная на платформе Node.js. Он небольшой, но очень масштабируемый. Koa имеет чистый вид, небольшой размер и чистое программирование. Зачем мне его использовать, nodejs также может выполнять мои следующие операции. Это правда, что мы также можем использовать creatServer для создания сервиса, но как программист мы должны впитывать новые знания, особенно хорошие и популярные, чтобы идти в ногу со временем! Его KOA2 действительно прост по сравнению с node. Koa был импортирован в предыдущей статье, а как его использовать будет непосредственно описано здесь. Для тех из вас, кто не понял, я думаю, вы можете взглянутьофициальный сайт коаУзнайте об основном использовании.
Мысль 1: Получив необходимые нам ресурсы, как мы можем разместить их в Интернете и запросить?
- easyMock, положите копию данных, которые вы залезли и киньте прямо в Mock, это поможет вам создать url, и вы сможете получить к нему доступ.
- koa2 запускает сервис, монтирует наши данные и обращается к номеру порта
Для меня, кто использует макет для рвоты, я не могу снова помещать просканированные данные на макет. Итак, начнем наше путешествие по koa2.
const app = new Koa()
const staticPath = './static' //静态文件夹
app.use(static(
path.join( __dirname, staticPath) ////设置静态文件地址，这里本来想用路由的但是觉得没必要启动。
))
app.use( async ( ctx ) => { //在我们的页面输出hello world，这里只是为了演示下koa的入门。我们访问我们的静态资源在地址栏加/index.json
ctx.body = 'hello world'
})
app.listen(3000, () => { //启动一个3000的端口
console.log('[demo] static-use-middleware is starting at port 3000')
})
Мысль 2: я с радостью захожу в свой порт, чтобы запросить данные, и обнаруживаю, что
Самопонимание koa2-cors:
CORS делит запросы на простые запросы и не простые запросы, просто можно считать, что простой запрос — это запрос get и post без дополнительных заголовков запроса, а если это post запрос, то формат запроса не может быть application/json (т.к. мой Этот кусок не очень хорошо понят. Если есть ошибка, я надеюсь, что кто-то может указать на ошибку и предложить исправления). Остальные запросы на размещение и публикацию, запросы с типом содержимого application/json и запросы с пользовательскими заголовками запросов не являются простыми запросами. Конфигурация простого запроса очень проста.Если вам нужно только завершить ответ для достижения цели, вам нужно только настроить Access-Control-Allow-Origin в заголовке ответа.
Решать проблему
app.use(cors({
origin: function(ctx) {
if (ctx.url === '/index') {
return false;
}
return '*';
},
Три, игра аксиом
Поскольку эта статья посвящена поисковым роботам, и я недавно написал проект vue, я использовал эту демонстрацию, чтобы продемонстрировать базовый запрос axios.Если вы хотите узнать больше об axios, вы можете перейти кaxios githubчтобы понять больше использования.
methods: {
getdata () {
axios.get('http://localhost:3000/index.js',{ //访问我们创建的端口
dataType: 'json',
contentType:"application/json",
crossDomain: true,
})
.then(function(response){
console.log(response.data);
})
.catch(function(err){
console.log(err);
});
}
},
mounted () {
this.getdata() //可以用async/awiter让你的请求变得更优雅，这里就不做处理。主要是太懒了...
}
После запроса данных распечатываем наши данные на консоль
Заключительные замечания:
Сила троих вместе слишком сильна. Давайте посмотрим прекрасное шоу. Вы видите здесь, что вы также хотите знать. Тогда почему бы вам не реализовать это самостоятельно, мой проект в моемgithubOn, вы можете клонировать его, но это не займет много времени одновременно. Это может решить проблемы вашего источника данных в будущем, почему бы не сделать это? Вы также можете следовать идеям всей статьи, чтобы реализовать их самостоятельно, и я с нетерпением жду ваших отличных работ, которыми вы поделитесь со мной. Комментарии и комментарии приветствуются ниже. Я джуниор, (не могу сказать, что ребенок студент) Я недавно ищу компанию для стажировки. Надеюсь получить рекомендацию по внедрению. В следующей статье я запущу свои боевые работы Vue. Вы также можете подписаться на меня и учиться вместе со мной. Наслаждайтесь и делитесь, приобретайте дружбу.