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

30
历届学生/朱立伟/项目案例/weather/app.js Executable file
View File

@@ -0,0 +1,30 @@
const express = require('express')
const app = express()
const request = require('request');
const URL = {
index: 'http://v.juhe.cn/weather/index',
key: '62a1ba7a26c06fa3720a8e91c103d5b5'
}
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
// http://127.0.0.1:3000/weather/index
app.get('/weather/index', function (req, res) {
var cityname = req.query.cityname;
console.log(`${URL.index}?format=2&cityname=${encodeURI(cityname)}&key=${URL.key}`);
request(`${URL.index}?format=2&cityname=${encodeURI(cityname)}&key=${URL.key}`, function (error, response, body) {
res.json(JSON.parse(body))
});
})
app.listen(3000, function () {
console.log('node app listening on port 3000!')
})

7
历届学生/朱立伟/项目案例/weather/css/clear.css Executable file
View File

@@ -0,0 +1,7 @@
body,ul,li,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}

51
历届学生/朱立伟/项目案例/weather/css/index.css Executable file
View File

@@ -0,0 +1,51 @@
@charset "UTF-8";
.weather_top {
height: 12rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 21px;
}
.weather_top .top_number {
font-size: 4.5rem;
color: #fff;
}
.top_bottom {
font-size: .7rem;
color: #dcd8d8;
}
.weather_info {
width: 100%;
height: 5rem;
padding: 13px 10px;
border-top: 1px solid #9e9c9c;
border-bottom: 1px solid #9e9c9c;
}
.weather_info ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.weather_info ul li .icon {
width: 1.7em;
height: 1.7em;
}
.weather_info ul li{
text-align: center;
}
.weather_info ul li p {
font-size: 13px;
}
.weather_list {
margin-top: 20px;
margin-bottom: 20px;
}
.weather_list ul li{
display: flex;
justify-content: space-between;
padding: 0 25px;
align-items: center;
}

34
历届学生/朱立伟/项目案例/weather/edit.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./css/clear.css">
</head>
<body>
<div class="page-group">
<div class="page" id='edit'>
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left back" href="/docs-demos/router">
<span class="icon icon-left"></span>
返回
</a>
<h1 class='title'>路由</h1>
</header>
<div class="content">
<div class="content-block">
这是ajax 加载的新页面，点击左上角的 <a href="#" class='back'>返回</a> 按钮返回上一页。
</div>
</div>
</div>
</div>
</body>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
</html>

182
历届学生/朱立伟/项目案例/weather/index.html Executable file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/clear.css">
<script src="http://at.alicdn.com/t/font_1152627_w9suf9d944j.js"></script>
<style>
body,
.fg_title{
color: #fff !important;
}
.fg_content {
background: linear-gradient(315deg, #571c94 0%, #e609cf 100%);
}
.bar-nav~.content {
top: 0 !important;
padding-top: 2.2rem;
}
.fg_bar,
.fg_bar:after{
background-color: #f7f7f800 !important;
}
.fg_bar .icon {
color: #fff;
}
.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.address input {
color: #000;
}
.back-fff {
background: #fff;
}
.search input{
width: 100%;
padding: 10px;
color: #8d8d8d;
border: none;
border-bottom: 1px solid #eaeaea;
}
.search_tips p{
margin: 0;
color: #8d8d8d;
padding: 5px 0 10px 10px;
border-bottom: 1px solid #e2dfdf;
}
.item-title {
color: #5f646e;
}
.address .list-block {
margin: 0.2rem 0;
}
.address .icon{
color: #000;
padding-top: 6px;
}
</style>
</head>
<body>
<div class="page-group">
<!-- 单个page ,第一个.page默认被展示-->
<div class="page">
<!-- 标题栏 -->
<header class="bar bar-nav fg_bar">
<a class="icon icon-me pull-left open-panel"></a>
<a class="icon icon-edit pull-right open-city"></a>
<h1 class="title fg_title">合肥</h1>
</header>
<!-- 这里是页面内容区 -->
<div class="content fg_content">
<div class="weather_top">
<div class="top_number">
19°
</div>
<div class="top_bottom">
晴 | 空气 | 良
</div>
</div>
<div class="weather_info">
<ul>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tianqi"></use>
</svg>
<p>天气</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-thermometer"></use>
</svg>
<p>温度</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-feng"></use>
</svg>
<p>风力</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fangxiangpai"></use>
</svg>
<p>风向</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shidu"></use>
</svg>
<p>湿度</p>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-taiyangrichu"></use>
</svg>
<p>紫外线</p>
</li>
</ul>
</div>
<div class="weather_list">
<ul>
</ul>
</div>
</div>
</div>
</div>
<div class="popup popup-city">
<header class="bar bar-nav">
<a class="icon icon-left pull-left close-popup"></a>
<h1 class="title">城市管理</h1>
</header>
<div class="content address">
<div class="list-block">
<ul>
</ul>
</div>
</div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel back-fff panel-left panel-reveal">
<div class="content">
<div class="search">
<input type="text" placeholder="请输入搜索城市">
</div>
<div class="search_tips"></div>
</div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script src="./js/index.js"></script>
<script>
var weather = new _weather();
</script>
</body>
</html>

1
历届学生/朱立伟/项目案例/weather/js/iconfont.js Executable file
View File

File diff suppressed because one or more lines are too long

160
历届学生/朱立伟/项目案例/weather/js/index.js Executable file
View File

@@ -0,0 +1,160 @@
// 任务
// 1: 第二次打开app，请求的数据还是上一次的城市数据
(function(bom,dom) {
// 自执行函数
// js 模拟类
// this 指向
function Weather() {
this.cityList = ['合肥','蚌埠','六安','铜陵','黄山'];
this.localCity = [];
this.BaseUrl = {
index: 'http://127.0.0.1:3000/weather/index'
};
this.init()
}
Weather.prototype = {
init: function () {
this.getCityName()
this.getCityList()
this.get("合肥", (res) => {
this.RenderingPage(res)
});
},
getCityName() {
var self = this,len = 0;
$(".search input").on("input", function () {
if( $(this).val().length < len) {
$(".search_tips").empty()
}
self.cityList.forEach((value,index,city) => {
if ($(this).val() == value) {
$(".search_tips").empty()
$(".search_tips").append(`<p style="color: red;">${value}</p>`)
len = $(this).val().length;
self.CityNameClick()
}
});
})
},
CityNameClick() {
var self = this;
$(".search_tips p").on("click", function() {
// 如果是第一次打开app使用 localCity 数组存放数据然后set进localStorage
if (localStorage.getItem("city") == null) {
self.localCity.push($(this).text())
localStorage.setItem("city",JSON.stringify(self.localCity))
} else { // 如果第二次使用app，先读本地已经有的 city，然后将新的城市添加进去，最后set进localStorage
var lcoal = JSON.parse(localStorage.getItem("city"))
lcoal.push($(this).text())
localStorage.setItem("city",JSON.stringify(lcoal))
}
self.get($(this).text(), function(res){
self.RenderingPage(res)
$.closePanel()
})
})
},
RenderingPage(data) {
var future = data.future
var sk = data.sk
var today = data.today
$(".fg_title").text(today.city);
// 当前温度
$(".top_number").text(`${sk.temp}°`)
// 温度下面的信息
$(".top_bottom").text(`${sk.wind_direction} | ${sk.wind_strength} | ${sk.humidity}`)
// 构造一个新的今天的天气数组
var weather_list = [today.weather,today.temperature,sk.wind_strength,sk.wind_direction,sk.humidity,today.uv_index];
// 将今天的详细数据遍历到 weather_info 的 li上
$(".weather_info ul li").each(function(index){
$(this).find("p").text(weather_list[index]);
});
$(".weather_list ul").empty();
// 通过 forEach 遍历未来7天的数据构造成li标签，然后依次追加到 weather_list ul 中
future.forEach(function(value,index,arr){
$(".weather_list ul").append(` <li>
<p>${value.week}</p>
<p>${value.weather}</p>
<div class="wendu">
<span>${value.temperature.substring(0,3)}</span>
~
<span>${value.temperature.substring(4)}</span>
</div>
</li>`)
});
$.hideIndicator()
},
getCityList() {
var self = this;
$(".open-city").on("click", function() {
var list = JSON.parse(localStorage.getItem("city"))
$(".address ul").empty();
list.forEach(function(value,index,arr){
$(".address ul").append( `<li class="item-content">
<div class="item-media">
<span class="icon icon-remove"></span>
</div>
<div class="item-inner">
<div class="item-title">城市名</div>
<div class="item-after">${value}</div>
</div>
</li>`)
});
$.popup('.popup-city');
$(".address ul li").on("click",function() {
self.get($(this).find(".item-after").text(),function(res){
self.RenderingPage(res)
$.closeModal('.popup-city')
})
})
})
},
get: function (params,callback) {
$.showIndicator()
$.ajax({
url: this.BaseUrl.index,
type: "GET",
data: {
cityname: params
},
success: function (res) {
callback(res.result)
},
error: function (err) {
$.toast("获取天气信息失败，请联系管理员");
}
})
}
}
bom._weather = Weather
})(window,document)

16
历届学生/朱立伟/项目案例/weather/package.json Executable file
View File

@@ -0,0 +1,16 @@
{
"name": "weather",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"dev": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"request": "^2.88.0"
}
}

39
历届学生/朱立伟/项目案例/小说app/css/clear.css Normal file
View File

@@ -0,0 +1,39 @@
html {
font-size: 20px !important;
}
@media only screen and (min-width: 320px) {
html {
font-size: 17.1px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 20px !important;
}
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
body,ul,p{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
input {
outline: none;
}

33
历届学生/朱立伟/项目案例/小说app/css/footer.css Normal file
View File

@@ -0,0 +1,33 @@
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0px;
width: 100%;
background: #fff;
box-shadow: 0rem -0.2rem 0.4rem 0rem rgba(217, 217, 217, 0.5);
height: 2.5rem;
}
.footer ul {
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
align-items: center;
padding-top: .1rem;
}
.footer ul li {
text-align: center;
}
.footer ul li img {
width: 1.2rem;
height: 1.2rem;
}
.footer ul li p {
font-size: .5rem;
color: #4d4d4d;
}
.footer .main img{
width: 1.9rem;
height: 1.9rem;
}

125
历届学生/朱立伟/项目案例/小说app/css/index.css Normal file
View File

@@ -0,0 +1,125 @@
.search {
display: flex;
justify-content: space-between;
padding: 0.325rem 0.5rem 0 0.5rem;
align-items: center;
}
.search_class p{
font-size: 0.6rem;
color: #010101;
}
.search_left{
position: relative;
}
.search_left input{
background-color: #e6e6e6;
border-radius: 0.712rem;
border: none;
padding-left: 1.675rem;
box-sizing: border-box;
padding-top: 0.45rem;
padding-bottom: 0.45rem;
width: 15.4rem;
}
.search_left img{
position: absolute;
width: 0.65rem;
height: 0.65rem;
top: 50%;
margin-top: -6.5px;
}
.search_left img:first-child {
left: 0.6rem;
}
.search_left img:last-child {
right: 0.85rem;
}
.menu ul {
display: flex;
justify-content: space-around;
height: 45px;
align-items: center;
}
.menu ul li{
font-size: 0.6rem;
color: #4c4c4c;
}
.banner {
width: 100%;
height: 7.875rem;
background: #8d8d8d;
}
.banner img{
width: 100%;
}
.class_menu ul {
display: flex;
justify-content: space-around;
padding-top: 0.825rem;
padding-bottom: 0.95rem;
background: #fff;
}
.class_menu ul li {
text-align: center;
}
.class_menu ul li img {
width: 1.4rem;
height: 1.4rem;
}
.class_menu ul li p {
font-size: 0.45rem;
color: #000000;
margin-top: 0.35rem;
}
.list_book {
}
.book_item {
padding-top: 0.425rem;
padding-left: 0.85rem;
padding-right: 0.85rem;
margin-top: 0.25rem;
}
.item_title {
display: flex;
justify-content: space-between;
margin-bottom: 0.925rem;
height: 1.15rem;
align-items: center;
}
.item_title p{
font-size: 0.65rem;
color: #000000;
border-left: 0.4rem solid #ff4c8a;
padding-left: 0.35rem;
padding-top: 0.525rem;
}
.item_title span{
font-size: 0.4rem;
color: #4d4d4d;
padding-top: 0.525rem;
}
.book_content ul {
display: flex;
flex-wrap: wrap;
}
.book_content ul li {
margin-right: 0.59rem;
margin-bottom: 1.2rem;
}
.book_content ul li:nth-child(3n) {
margin-right: 0;
}
.book_content ul li img {
width: 5.225rem;
height: 7rem;
}
.book_content ul li p {
font-size: .6rem;
letter-spacing: 0.045rem;
color: #000000;
width: 5rem;
}

16
历届学生/朱立伟/项目案例/小说app/css/public.css Normal file
View File

@@ -0,0 +1,16 @@
body {
background-color: #e6e6e6;
}
.back-fff {
background: #fff;
}
.content{
padding-bottom: 50px;
padding-top: 84.5px;
}
.header {
position: fixed;
left: 0;
width: 100%;
top: 0;
}

BIN
历届学生/朱立伟/项目案例/小说app/img/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 285 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/book.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/item_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/man.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/mianfei.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/music.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/ph.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/sao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/sq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/tubiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
历届学生/朱立伟/项目案例/小说app/img/vip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

171
历届学生/朱立伟/项目案例/小说app/index.html Normal file
View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/index.css">
<title>小说app</title>
</head>
<body>
<div class="main">
<div class="header back-fff">
<div class="search">
<div class="search_left">
<img src="./img/search.png" alt="">
<input type="text" placeholder="搜索本地或书城">
<img src="./img/sao.png" alt="">
</div>
<div class="search_class">
<p>分类</p>
</div>
</div>
<div class="menu">
<ul>
<li>精选</li>
<li>女生</li>
<li>男生</li>
<li>出版</li>
<li>VIP</li>
<li>限免</li>
</ul>
</div>
</div>
<div class="content">
<div class="banner">
<img src="./img/banner.png" alt="">
</div>
<div class="class_menu">
<ul>
<li>
<img src="./img/ph.png" alt="">
<p>排行</p>
</li>
<li>
<img src="./img/vip.png" alt="">
<p>会员</p>
</li>
<li>
<img src="./img/sq.png" alt="">
<p>社区</p>
</li>
<li>
<img src="./img/mianfei.png" alt="">
<p>免费</p>
</li>
</ul>
</div>
<div class="list_book">
<div class="book_item back-fff">
<div class="item_title">
<p>猜你喜欢</p>
<span>查看更多</span>
</div>
<div class="book_content">
<ul>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
</ul>
</div>
</div>
<div class="book_item back-fff">
<div class="item_title">
<p>猜你喜欢</p>
<span>查看更多</span>
</div>
<div class="book_content">
<ul>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
<li>
<img src="./img/item_1.png" alt="">
<p>龙凤双宝：爹地，妈咪给你抱</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>
<img src="./img/book.png" alt="">
<p>书架</p>
</li>
<li>
<img src="./img/tubiao.png" alt="">
<p>书城</p>
</li>
<li class="main">
<img src="./img/man.png" alt="">
</li>
<li>
<img src="./img/music.png" alt="">
<p>轻音乐</p>
</li>
<li>
<img src="./img/user.png" alt="">
<p>我的</p>
</li>
</ul>
</div>
</div>
</body>
</html>