bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
历届学生/zheng-yuqing/项目练习/学生项目/ajax案例/ajax.js Normal file
View File

@@ -0,0 +1,61 @@
class AJAX {
constructor() {
console.log("构造函数");
// 请求基地址
// this.baseUrl = "http://127.0.0.1:3000/api/json";
this.baseUrl = "http://127.0.0.1:3000/api";
this.http = new XMLHttpRequest();
}
/**
*
* @param {*object} parmas
* {
* url: '', // 请求地址
* data : { page: 1, count: 15 } // 请求参数
* success: () => {} // ajax成功后，回调拿回请求结果
* error: () => {} // ajax 失败后，回调拿回错误结果
* }
*/
get(parmas) {
// 将data 参数转化为 ?key=value&key=value
var str = ""
for (const key in parmas.data) {
str += `&${key}=${parmas.data[key]}`
}
str = str.replace("&", "?")
this.http.open("GET", `${this.baseUrl}${parmas.url}${str}`);
this.http.send();
this.readyState(parmas.success, parmas.error)
}
post(parmas) {
this.http.open("POST", `${this.baseUrl}${parmas.url}`);
this.http.setRequestHeader('Content-type', 'application/json; charset="utf-8"');
this.http.send(JSON.stringify(parmas.data));
this.readyState(parmas.success, parmas.error)
}
put() { }
delete() { }
// 给 get post put delete 进行状态监听的封装
readyState(success, error) {
this.http.onreadystatechange = () => {
if (this.http.readyState == 4) {
if (this.http.status == 200) {
var data = JSON.parse(this.http.response);
success(data)
} else {
error(this.http)
}
}
}
}
}
var http = new AJAX();

145
历届学生/zheng-yuqing/项目练习/学生项目/ajax案例/caipu.html Normal file
View File

@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #efefef;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content ul {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<div class="content">
</div>
</body>
<script src="./ajax.js"></script>
<script>
// 定义标题列表
var index = 0;
var title = [
{ type: 1, title: '推荐', page: 1, total_page: 0, content: [] },
{ type: 2, title: '时令', page: 1, total_page: 0, content: [] },
{ type: 3, title: '食肉', page: 1, total_page: 0, content: [] },
{ type: 4, title: '素食', page: 1, total_page: 0, content: [] },
{ type: 5, title: '烘焙', page: 1, total_page: 0, content: [] },
];
function renderTitle() {
title.forEach((v, i) => {
$(".title").innerHTML += `
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
$(".content").innerHTML += `
<ul class="${i == 0 ? 'active' : ''}">
</ul>
`
})
// 生成好li标签
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((item, index) => {
item.classList.remove("active");
_(".content ul")[index].classList.remove("active")
})
v.classList.add("active")
_(".content ul")[i].classList.add("active")
index = i;
getList();
}
})
getList();
// 使用li标签
}
function getList() {
if (title[index].content.length == 0) {
http.get({
url: '/index/class',
data: {
type: title[index].type,
page: title[index].page
},
success: (res) => {
var data = res.result;
title[index].total_page = data.total_page;
title[index].content = title[index].content.concat(data.items);
renderContentLi();
},
error: (err) => { }
});
}
}
function renderContentLi() {
title[index].content.forEach((v, i) => {
_(".content ul")[index].innerHTML += `
<li>
<p>${v.title}</p>
</li>
`
})
}
renderTitle()
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

140
历届学生/zheng-yuqing/项目练习/学生项目/ajax案例/caipu2.html Normal file
View File

@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
height: 40px;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #efefef;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content ul {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title">
</ul>
<div class="content">
</div>
</body>
<script src="./ajax.js"></script>
<script>
var inderx = 0
var title = [
{ tpye: 1, title: "推荐", page: 1, total_page: 0, content: [] },
{ type: 2, title: '时令', page: 1, total_page: 0, content: [] },
{ type: 3, title: '食肉', page: 1, total_page: 0, content: [] },
{ type: 4, title: '素食', page: 1, total_page: 0, content: [] },
{ type: 5, title: '烘焙', page: 1, total_page: 0, content: [] },
];
function renderTitle() {
title.forEach((v, i) => {
$(".title").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
$(".content").innerHTML += `
<ul class="${i == 0 ? 'active' : ''}"></ul>`
})
_(".title li").forEach((v, i) => {
v.onclick = () => {
_(".title li").forEach((item, index) => {
item.classList.remove("active")
_(".content ul")[index].classList.remove("active")
})
v.classList.add("active")
_(".content ul")[i].classList.add("active")
index = i;
getList();
}
})
getList();
}
function getList() {
if (title[index].content.length == 0) {
http.get({
url: '/index/class',
data: {
type: title[index].type,
page: title[index].page
},
success: (res) => {
var data = res.result;
title[index].total_page = data.total_page;
title[index].content = title[index].content.concat(data.items);
renderContentLi();
},
error: (err) => { }
});
}
}
function renderContentLi() {
title[index].content.forEach((v, i) => {
_(".content ul")[index].innerHTML += `
<li>
<p>${v.title}</p>
</li>
`
})
}
renderTitle()
// 获取单个标签
function $(className) {
return document.querySelector(className)
}
// 获取多个标签
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

45
历届学生/zheng-yuqing/项目练习/学生项目/ajax案例/index.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
</ul>
</body>
<script src="./ajax.js"></script>
<script>
http.get({
url: '/class',
data: {},
success: (res) => {
renderLi(res.result.principal)
},
error: (err) => {
}
});
function renderLi(data) {
console.log(data);
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}">${v.title}</a>
</li>
`
});
}
</script>
</html>

512
历届学生/zheng-yuqing/项目练习/学生项目/ajax案例/index.js Normal file
View File

@@ -0,0 +1,512 @@
const express = require('express');
const router = express.Router();
const config = require("../config")
const utils = require("../utils")
const cheerio = require('cheerio');
/**
* 1：首页获取分类数据接口
* 请求示例：http://127.0.0.1:3000/api/index/class?type=1&page=1
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/class
* 请求参数：
* type: 取值1(推荐)，2(时令)，3(食肉)，4(素食)，5(烘焙)
* page: 分页页码
*/
router.get('/index/class', function(req, res, next) {
var type = req.query.type || 1;
var page = req.query.page || 1;
utils.GET(config.HomeClassType(type,page),(result)=>{
let data = `${result.match(/jQuery2140868703264037048_1597809875093\(([\s\S]*?)\}\)/)[1]}}`
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: JSON.parse(data).data
});
})
});
/**
* 2：热门推荐
* 请求示例：http://127.0.0.1:3000/api/index/hot
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/hot
* 请求参数：无
*/
router.get('/index/hot', function(req, res, next) {
utils.GET(config.baseUrl,(result)=>{
const $ = cheerio.load(result);
let dat = []
$(".con1w .cj_swiper_item").each(function (index,el) {
dat.push({
img: $(this).find(".img").attr("style").match(/background: url\(([\s\S]*?)\) center/)[1],
title: $(this).find(".t").text(),
url: $(this).find("a").attr("href"),
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: dat
});
})
});
/**
* 3：每日三餐
* 请求示例：http://127.0.0.1:3000/api/index/threeMeals
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/threeMeals
* 请求参数：无
*/
router.get('/index/threeMeals', function(req, res, next) {
utils.GET(config.baseUrl,(result)=>{
const $ = cheerio.load(result);
var titleArray = []
$(".sc_titlew_scroller").eq(0).find("span").each(function(index,el){
titleArray.push({
title: $(this).find("em").text(),
content: []
});
})
var content = {};
$(".top_sancan2019 .swiper-slide").each(function(index,el){
content[index] = [];
$(this).find(".sancan_swiper_item").each(function(i,e){
content[index].push({
url: $(this).find("a").attr("href"),
img: $(this).find("a img").attr("src"),
title: $(this).find("a .text").text(),
des: $(this).find("a .yyw .des").text(),
})
})
});
for (const key in content) {
titleArray[key].content = content[key]
}
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: titleArray
})
})
});
/**
* 4：获取banner图
* 请求示例：http://127.0.0.1:3000/api/index/banner
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/banner
* 请求参数：无
*/
router.get('/index/banner', function(req, res, next) {
utils.GET(config.baseUrl,(result)=>{
const $ = cheerio.load(result);
let data = []
$(".swiper-container3 a").each(function (index,el) {
data.push({
url: $(this).attr("href"),
img: $(this).find("img").attr("src"),
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 5：获取banner点击后的详情
* 请求示例：http://127.0.0.1:3000/api/index/bannerInfo?url=https://m.meishij.net/zt/chushulaoji6dianyinshiyuanzeyi.html
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/bannerInfo
* 请求参数：
* url：要进入的轮播url地址
*/
router.get('/index/bannerInfo', function(req, res, next) {
let url = req.query.url;
utils.GET(url,(result)=>{
const $ = cheerio.load(result);
let data = {}
data.banner = $(".topimgw img").attr("src")
data.title = $(".zttitlew h1").text()
data.content = $(".ztcontentw").html()
data.comment = []
$(".zt_pllist .zt_plitem").each(function (index,el){
data.comment.push({
name: $(this).find(".c1 strong").text(),
time: $(this).find(".c1 span").text(),
img: $(this).find(".c1 .avatarw img").attr("src"),
content: $(this).find(".pltxt").text()
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 6：菜谱视频大全列表
* 请求示例：http://127.0.0.1:3000/api/video/list
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/video/list
* 请求参数：page
*/
router.get('/video/list', function(req, res, next) {
console.log("请求地址：", config.VideoList(1))
var page = req.query.page || 1;
utils.GET(config.VideoList(page),(result)=>{
let data = result.match(/jQuery21408367060449076322_1597835324516\(([\s\S]*?)\)/)[1]
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: JSON.parse(data).data
});
})
});
/**
* 7：搜索接口
* 请求示例：http://127.0.0.1:3000/api/search/list?q=猪蹄&page=1
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/search/list
* 请求参数：
* q 要搜索的菜名称
* page 页码
*/
router.get('/search/list', function(req, res, next) {
var q = req.query.q || '';
var page = req.query.page || 1;
utils.GET(config.SearchWord(encodeURIComponent(q), page),(result)=>{
const $ = cheerio.load(result);
var data = []
$(".hasbb1").each(function (index,el) {
data.push({
href: $(this).find("a").attr("href"),
title: $(this).find("a h3").text(),
des: $(this).find("a .des").text(),
img: $(this).find("a img").attr("src"),
})
});
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 8：分类页面获取左侧分类菜单
* 请求示例：http://127.0.0.1:3000/api/type/leftMenu
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/type/leftMenu
* 请求参数：无
*/
router.get('/type/leftMenu', function(req, res, next) {
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: config.leftType
});
});
/**
* 9：分类页面获取右边的小内容
* 请求示例：http://127.0.0.1:3000/api/type/rightMenu?url=/fenlei/shiyongfenlei/
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/type/rightMenu
* 请求参数：
* url: 左侧分类的url字段
*/
router.get('/type/rightMenu', function(req, res, next) {
let url = `${config.baseUrl}${req.query.url}`;
utils.GET(url,(result)=>{
const $ = cheerio.load(result);
let data = []
$(".right_sort_list_scroller ul li a").each(function (index,el) {
data.push({
id: $(this).attr("href"),
img: $(this).find("img").attr("src"),
title: $(this).find("span").text(),
})
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 10：点击右边小分类获取分类列表
* 请求示例：http://127.0.0.1:3000/api/type/rightMenuList?url=https://m.meishij.net/fenlei/recai/
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/type/rightMenuList
* 请求参数：
* url: 右侧分类的url字段
* p: 页码
*/
router.get('/type/rightMenuList', function(req, res, next) {
let url = req.query.url;
let page = req.query.p || 1;
console.log(`${url}p${page}`)
utils.GET(`${url}p${page}`,(result)=>{
const $ = cheerio.load(result);
var data = []
$(".con_data_s2_list").eq(0).find("li a").each(function (index, el){
var num = $(this).find("span").text().split("　 ");
console.log(num)
data.push({
url: $(this).attr("href"),
img: $(this).find(".imgw img").attr("src"),
title: $(this).find(".imgw img").attr("alt"),
like: num[0],
view: num[1],
})
});
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
})
});
/**
* 11：获取详情
* 请求示例：http://127.0.0.1:3000/api/index/info?url=https://m.meishij.net/html5/zuofa/douruhezidangao_1.html
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/info
* 请求参数：
* url: 右侧分类的url字段
*/
router.get('/index/info', function(req, res, next) {
let url = req.query.url;
let page = req.query.p || 1;
utils.GET(url,(result)=>{
const $ = cheerio.load(result);
var data= {};
if ($(".topimgw").length != 0) {
// 标题
data.title = $(".cpc_c1 h1").text()
// 作者
data.posttime = $(".cpc_c1 .posttime").text()
// 如果有视频
if ($(".topimgw .vw").length != 0) {
data.videoSrc = $(".topimgw .vw #artical_video").attr("src")
}
// 背景图
data.backImg = $(".topimgw img").attr("src");
data.Statistics = []
// 卡路里等
$(".yycardw .yyinfos .yy_left .yy_left_item").each(function (index,el){
data.Statistics.push({
title: $(this).find("strong").text(),
proportion: $(this).find(".jd").attr("style")
})
});
data.stepInfo = {
arr: [],
message: ''
};
var startIndex = 0;
// 图标步骤
$(".cpargsw .cpargs").each(function (index,el){
data.stepInfo.arr.push({
title: $(this).text(),
position: index != 3 ? startIndex+= -30 : -0
})
})
data.stepInfo.message = $(".cpdesw .cpdes").text()
data.material = {
main: [],
accessories: []
}
// 主料
$(".cpc_c3 .c_mtr_ul").eq(0).find(".c_mtr_li").each(function (index,el){
data.material.main.push({
title: $(this).find(".t").text(),
nums: $(this).find(".a").text()
})
})
// 辅料
$(".cpc_c3 .c_mtr_ul").eq(1).find(".c_mtr_li").each(function (index,el){
data.material.accessories.push({
title: $(this).find(".t1").text(),
nums: $(this).find(".a").text()
})
});
// 详细步骤
data.DetailedSteps = [];
$(".cpc_c4 .stepitem").each(function (index,el){
// 如果有成品图的话
if ($(this).find(".doneimgw").length !== 0) {
data.DetailedSteps.push({
step_title: $(this).find(".step_title").text(),
step_img: [],
step_text: null,
})
$(this).find(".doneimgw .imgset img").each(function (i,e){
data.DetailedSteps[index].step_img.push($(this).attr("src"))
})
} else {
data.DetailedSteps.push({
step_title: $(this).find(".step_title").text(),
step_img: $(this).find("img").attr("src") || null,
step_text: $(this).find(".stepdes").text(),
})
}
})
// 其他推荐
data.OtherRecommen = [];
$(".con_data_s1_list li").each(function (i,e){
data.OtherRecommen.push({
url: $(this).find("a").attr("href"),
title: $(this).find("strong").text(),
img: $(this).find("img").attr("src"),
})
})
// 相关推荐
data.RelatedRecommen = [];
$(".con_data_s2_list li").each(function (i,e){
if ($(this).find(".title").text().length !=0) {
data.RelatedRecommen.push({
title: $(this).find(".title").text(),
url: $(this).find("a").attr("href"),
view: $(this).find("span").text(),
img: $(this).find("img").attr("src"),
})
}
})
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: data
});
}
})
});
/**
* 12：获取banner图下面的九宫格分类数据
* 请求示例：http://127.0.0.1:3000/api/index/type
* 接口基地址：http://127.0.0.1:3000/
* 请求地址：/index/type
* 请求参数：
* url: 右侧分类的url字段
* p: 页码
*/
router.get('/index/type', function(req, res, next) {
res.json({
status: 200,
message: '请求成功',
copyright: 'bmy',
result: [
{
title: '快手菜',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_shiyongfenlei_1.png',
href: 'https://m.meishij.net/fenlei/kuaishoucai/'
},
{
title: '下饭菜',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_shiyongfenlei_2.png',
href: 'https://m.meishij.net/fenlei/xiafancai/'
},
{
title: '肉食',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_shiyongfenlei_5.png',
href: 'https://m.meishij.net/fenlei/roushi/'
},
{
title: '早餐',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_sancan_1.png',
href: 'https://m.meishij.net/fenlei/zaocan/'
},
{
title: '午餐',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_sancan_2.png',
href: 'https://m.meishij.net/fenlei/wucan/'
},
{
title: '夜宵',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_sancan_5.png',
href: 'https://m.meishij.net/fenlei/yexiao/'
},
{
title: '蛋糕面包',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_hongbei_1.png',
href: 'https://m.meishij.net/fenlei/dangaomianbao/'
},
{
title: '甜品点心',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_hongbei_3.png',
href: 'https://m.meishij.net/fenlei/tianpindianxin/'
},
{
title: '热菜',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_jiachangcaipu_1.png',
href: 'https://m.meishij.net/fenlei/recai/'
},
{
title: '主食',
img: 'https://s1.c.meishij.net/images/get3/fenlei/fl_jiachangcaipu_6.png',
href: 'https://m.meishij.net/fenlei/zhushi/'
},
]
})
});
module.exports = router;

70
历届学生/zheng-yuqing/项目练习/学生项目/ajax案例/info.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
</ul>
<button>下一页</button>
</body>
<script src="./ajax.js"></script>
<script>
var page = 1,
total_page = 0;
function getData() {
http.get({
url: '/classList',
data: {
id: location.search.split("=")[1],
// split分割
page: page
},
success: (res) => {
console.log(res);
total_page = res.result.total_page
renderLi(res.result.data)
},
error: (err) => {
}
});
}
function renderLi(data) {
data.forEach(v => {
document.querySelector("ul").innerHTML += `
<li>
<p>${v.title}</p>
<img src="${v.preview}" alt="">
</li>
`
});
}
getData()
document.querySelector("button").onclick = () => {
page += 1;
if (page <= total_page) {
getData()
}
}
</script>
</html>