Node.js和Ajax阶段作业项目----博学谷主页

好累好像摆

2024-05-29 帮助1人

目标

利用html css知识对页面进行布局，微课部分利用artTemplate模板进行渲染，数据端口用nodejs写，用express创建服务器，并托管我们写好的页面

准备工作：

1.按照效果图对网页进行布局分析

学新通

2.设计HTML CSS布局

学新通

3.使用Express搭建静态服务器

1、使用npm init 初始化项目

2、安装相关依赖包（比如：express、jQuery、artTemplate）

3、新建在项目中新建相关目录和文件（存放html和css的目录、

启动文件）

4、编写Express代码，启动服务器，展示html页面

4.启动后端服务，提供前端所需数据接口

1、使用npm install 安装依赖

2、通过nodemon app.js 启动后端服务

样本数据（我们需要把样本json数据存到数据库中去）

{
"result": {
"data": [
{ "id": "5d246c4b0b00e74af45f6093", "name": "【前端】微信小程序", "count": "20", "price": "199", "img": "http://127.0.0.1:3001/images/wx.jpg" },
{ "id": "5d246c4b0b00e74af45f6094", "name": "【前端】快应用", "count": "100", "price": "19", "img": "http://127.0.0.1:3001/images/quickAPP.jpg" },
{ "id": "5d246c4b0b00e74af45f6095", "name": "【前端】JavaScript", "count": "100", "price": "免费", "img": "http://127.0.0.1:3001/images/js.jpg" },
{ "id": "5d246c4b0b00e74af45f6096", "name": "【前端】就业班", "count": "300", "price": "14980", "img": "http://127.0.0.1:3001/images/FE.png" },
{ "id": "5d246c583823d14b08268220", "name": "【前端】微信小程序", "count": "20", "price": "199", "img": "http://127.0.0.1:3001/images/wx.jpg" },
{ "id": "5d246c583823d14b08268221", "name": "【前端】快应用", "count": "100", "price": "19", "img": "http://127.0.0.1:3001/images/quickAPP.jpg" },
{ "id": "5d246c583823d14b08268222", "name": "【前端】JavaScript", "count": "100", "price": "免费", "img": "http://127.0.0.1:3001/images/js.jpg" },
{ "id": "5d246c583823d14b08268223", "name": "【前端】就业班", "count": "300", "price": "14980", "img": "http://127.0.0.1:3001/images/FE.png" },
{ "id": "5d246c972b4aa94b4db6c5bd", "name": "【前端】微信小程序", "count": "20", "price": "199", "img": "http://127.0.0.1:3001/images/wx.jpg" },
{ "id": "5d246c972b4aa94b4db6c5be", "name": "【前端】快应用", "count": "100", "price": "19", "img": "http://127.0.0.1:3001/images/quickAPP.jpg" },
{ "id": "5d246c972b4aa94b4db6c5bf", "name": "【前端】JavaScript", "count": "100", "price": "免费", "img": "http://127.0.0.1:3001/images/js.jpg" },
{ "id": "5d246c972b4aa94b4db6c5c0", "name": "【前端】就业班", "count": "300", "price": "14980", "img": "http://127.0.0.1:3001/images/FE.png" },
{ "id": "5d246caec502604b6c1f52e8", "name": "【前端】微信小程序", "count": "20", "price": "199", "img": "http://127.0.0.1:3001/images/wx.jpg" },
{ "id": "5d246caec502604b6c1f52e9", "name": "【前端】快应用", "count": "100", "price": "19", "img": "http://127.0.0.1:3001/images/quickAPP.jpg" },
{ "id": "5d246caec502604b6c1f52ea", "name": "【前端】JavaScript", "count": "100", "price": "免费", "img": "http://127.0.0.1:3001/images/js.jpg" },
{ "id": "5d246caec502604b6c1f52eb", "name": "【前端】就业班", "count": "300", "price": "14980", "img": "http://127.0.0.1:3001/images/FE.png" },
{ "id": "5d246cdd64d3e54ba11c8923", "name": "【前端】微信小程序", "count": "20", "price": "199", "img": "http://127.0.0.1:3001/images/wx.jpg" },
{ "id": "5d246cdd64d3e54ba11c8924", "name": "【前端】快应用", "count": "100", "price": "19", "img": "http://127.0.0.1:3001/images/quickAPP.jpg" },
{ "id": "5d246cdd64d3e54ba11c8925", "name": "【前端】JavaScript", "count": "100", "price": "免费", "img": "http://127.0.0.1:3001/images/js.jpg" },
{ "id": "5d246cdd64d3e54ba11c8926", "name": "【前端】就业班", "count": "300", "price": "14980", "img": "http://127.0.0.1:3001/images/FE.png" }
]
}
}

———————————————————————————————————————————

代码部分：

WEB部分代码

HTML

<!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>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/jquery.js"></script>
<script src="./js/template-web.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div class="header">
<div class="header-item">
<img src="./img/email.png" alt="" style="height: 40px;">
</div>
<div class="header-item">
<img src="./img/headerLogo.png" alt="" style="height: 40px;">
</div>
<div class="header-item">
<img src="./img/fdj.png" alt="">
</div>
</div>
<div class="body-one">
<img src="./img/FE.png" alt="" style="height: 170px;width: 100%;">
</div>
<div class="body-two">
<div class="body-two-header">
·就业课·
</div>
<div class="body-two-main">
<div class="body-two-main-item">
<img src="./img/fe-list.png" alt="">
</div>
<div class="body-two-main-item">
<img src="./img/java.png" alt="">
</div>
<div class="body-two-main-item">
<img src="./img/data.png" alt="">
</div>
</div>
<div class="body-two-main2">
<div class="body-two-main-item">
<img src="./img/python.png" alt="">
</div>
<div class="body-two-main-item">
<img src="./img//ui.png" alt="">
</div>
<div class="body-two-main-item">
<img src="./img/fe-list.png" alt="">
</div>
</div>
</div>
<div class="body-three">
<div class="body-three-header">
·微课·
</div>
<div class="body-three-item">
<img src="./img/wx.jpg" alt="">
<div class="body-three-item-header">【前端】微信小程序</div>
<div>
<span class="body-three-item-study">20人学习</span>
<span class="body-three-item-price">￥199</span>
</div>
</div>
<div class="body-three-item">
<img src="./img/wx.jpg" alt="">
<div class="body-three-item-header">【前端】微信小程序</div>
<div>
<span class="body-three-item-study">20人学习</span>
<span class="body-three-item-price">￥199</span>
</div>
</div>
</div>
<div class="body-foot">
<div class="body-foot-index">
<img src="./img/icon-index.png" alt="">
<span>首页</span>
</div>
<div class="body-foot-fenlei">
<img src="./img/icon-fenlei.png" alt="">
<span>分类</span>
</div>
</div>
<script type="text/html" id="muban">
{{each results}}
<div class="body-three-item">
<img src="{{$value.img}}" alt="">
<div class="body-three-item-header">{{$value.name}}</div>
<div>
<span class="body-three-item-study">{{$value.count}}人学习</span>
<span class="body-three-item-price">￥{{$value.price}}</span>
</div>
</div>
{{/each}}
</script>
</body>
</html>

css:

body{
background-color: #f1f1F1;
max-width:540px;
min-width: 320px;
margin: 0 auto;
}
.header{
background: #446ADF;
height: 64px;
width: 100%;
line-height: 64px;
display:flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
top: 0px;
clear: both;
margin: 0;
z-index:99999;
max-width:540px;
min-width: 320px;
}
.header-item{
margin: auto;
position: relative;
top: 10px;
}
.body-one{
max-width:540px;
min-width: 320px;
width: 100%;
height: 170px;
position: absolute;
top: 64px;
}
.body-two{
width: 100%;
height: 242px;
max-width:540px;
min-width: 320px;
background-color: #FFFFFF;
position: absolute;
top: 250px; /*170 64 16*/
}
.body-two-header{
height: 52px;
font-size: 18px;
color: #446ADF;
display: flex;
line-height: 38px;
justify-content: center;
letter-spacing: 10px;
/* background-color: pink; */
}
.body-two-main{
width: 100%;
height: 95px;
/* background: gray; */
display:flex;
flex-direction: row;
justify-content: space-around;
}
.body-two-main2{
width: 100%;
height: 95px;
display:flex;
flex-direction: row;
justify-content: space-around;
}
.body-two-main-item{
float: left;
}
.body-two-main-item img{
height: 70px;
width: 70px;
border-radius: 100%;
}
.body-three{
max-width:540px;
min-width: 320px;
width: 100%;
height: auto;
/* background:gray; */
position: absolute;
top: 508px;
background-color: #FFFFFF;
}
.body-three-header{
height: 54px;
font-size: 18px;
color: #446ADF;
display: flex;
line-height: 38px;
justify-content: center;
letter-spacing: 10px;
/* background-color: pink; */
}
.body-three-item{
float: left;
/* background-color: lightgreen; */
height: 158px;
margin: 10px;
margin-top: 0;
margin-bottom: 0;
}
.body-three-item img{
height: 100px;
width: 163.92px;
border-radius: 10%;
}
.body-three-item-header{
align-items: center;
font-size: 16px;
font-weight: 800;
padding-bottom: 6px;
}
.body-three-item-study{
float: left;
font-size: 14px;
color: #D0D0D0;
}
.body-three-item-price{
float: right;
font-size: 14px;
color: #446ADF;
}
.body-foot{
max-width:540px;
min-width: 320px;
width: 100%;
height: 58px;
position: fixed;
bottom: 0;
background: #FFFFFF;
z-index:99999;
}
.body-foot-index{
width: 40px;
float: left;
margin-left: 40px;
}
.body-foot-index img{
height: 30px;
}
.body-foot-index span{
color: #1296db;
}
.body-foot-fenlei{
width: 40px;
float: right;
margin-right: 40px;
}
.body-foot-fenlei img{
height: 30px;
}
.body-foot-fenlei span{
color: #1296db;
}

js:(js部分很少就是ajax请求服务和模板引擎使用的一些操作)

$.get('http://127.0.0.1:3001/class',(res)=>{
var strHtml = template('muban',res)
$('.body-three').html(strHtml)
})

———————————————————————————————服务器端部分代码

服务器端入口app.js

const express = require('express')
const app = express()
const cors = require('cors')
app.use(cors())
//创建模板渲染数据存放路由
const classRouter = require('./router/class')
app.use('/class',classRouter)
//创建图片存放路由
const imgRouter = require('./router/image')
app.use('/images',imgRouter)
//创建主页托管路由
const indexRouter = require('./router/index')
app.use('/',indexRouter)
app.listen(3001,()=>{
console.log('express server running at http://127.0.0.1:3001')
})

数据存放路由

const express = require('express')
const router = express.Router()
const indexRouterHandler = require('../router_handler/index')
router.use('/',indexRouterHandler.showindex)
module.exports = router

数据存放路由处理端

const db = require('../db/index')
exports.getNews = (req,res)=>{
const sql=`select * from cours`
db.query(sql,(err,results)=>{
if(err) return res.send(err)
return res.send({
results:results,
status:1,
})
})
}

注意此处应用了数据库所以在此前我们应先建立数据库与我们服务器的联系

建立db文件夹 db部分代码

const mysql = require('mysql')
const db = mysql.createPool({
host:'127.0.0.1',
port:'3308',
user:'root',
password:'admin123',
database:'db_bxg'
})
//此处数据根据你们自己的数据库来决定
module.exports=db

图片存放路由

const express = require('express')
const router = express.Router()
const imageRouter= require('../router_handler/image')
router.use('/',imageRouter.getImg)
module.exports = router

图片存放路由处理端

const fs = require('fs')
const path = require('path')
exports.getImg=readImg = (req,res)=>{
const url = req.url
let fpath = ''
fpath = path.join(__dirname,'../','/image',url)
fs.readFile(fpath,'binary',(err,data)=>{
if(err){
return res.end()
}
res.write(data,"binary");
res.end()
})
}

最后是托管我们写好的web部分

index路由端

const express = require('express')
const router = express.Router()
const indexRouterHandler = require('../router_handler/index')
router.use('/',indexRouterHandler.showindex)
module.exports = router

index路由处理

const fs = require('fs')
const path = require('path')
exports.showindex=(req,res)=>{
const url = req.url
console.log(url)
let fpath = ''
if(url==='/'){
fpath = path.join(__dirname,'../','/constroler/index.html')
}else{
fpath = path.join(__dirname,'../','/constroler',url)
}
fs.readFile(fpath,'binary',(err,data)=>{
if(err){
return res.end('404 Not Found')
}
return res.end(data,"binary")
})
}

这篇好文章是转载于：编程之路

Node.js和Ajax阶段作业项目----博学谷主页

WEB部分代码

———————————————————————————————服务器端部分代码

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗