根据上一篇文章写得静态jquery完成商品列表按价格升序、降序排序 https://blog.csdn.net/m0_37820751/article/details/102623401
这一篇博客则用简单的案例完成整个项目的流程,使用nodejs作为我们页面的服务器,oracle为数据库存储数据,art-template作为我们页面的模板引擎动态渲染数据。
1.首先电脑就要安装nodejs和oracle数据库并配置环境,网上很多教程,而且安装起来也很容易。
2.环境都配置好之后我们就可以在自己指定的目录下使用npm init命令来初始化你自己的项目,输入npm init命令后需要属于你初始化信息的填写,可以一路回车默认信息,初始化完毕之后就会有一个名为package.json的配置文件。
(npm是一个包管理器,在nodejs下载后就会包含有npm,npm可以在网络上下载你所需要的工具包)
C:\Users\Administrator>cd desktop/website
C:\Users\Administrator\Desktop\website>npm init
3. 到这里了,我们开始实施我们的项目了,首先需要web服务,那么就会用到express框架,它是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助创建各种 Web 应用,和丰富的 HTTP 工具。这时候就可以通过npm把express工具包下载到我们的项目中来。
C:\Users\Administrator\Desktop\website>npm i express
下载好express工具包后会发现多了一个node_modules文件夹,这个文件夹里面存在的就是我们npm下载的工具包,在里面可以找到我们的express,除express外还有很多其他工具包,那些都是express需要依赖的工具包,也会一并下载下来。
4.在项目下创建一个入口文件js,然后可以在js中定义一个常量通过require来获取express对象。然后监听开启我们的web服务。
目录结构
// 导入express 框架模块
const express = require('express');
//创建服务器应用
let app = express();
/* 开启服务器 第一个参数为自己设置的端口号,第二个是回调函数,可以告诉我们服务启动是否成功*/
app.listen(3000, function () {
console.log("服务器在3000端口启动");
})
5.使用window下的命令窗口cmd到我们项目的目录下,输入命令node 入口文件 就可以开启服务了。
6.接下来就导入需要的工具包,写相应的逻辑就可以了
目录结构
主文件入口 app.js
//需要npm install引入的依赖包
// 1.express 框架模块
// 2.art-template 模板引擎
// 3.express-art-template 框架模板
// 4.oracledb
const express = require('express');
const oracledb = require('./oracle');
const url = require("url");
//创建服务器应用
let app = express();
//app.use中间件,类似于拦截器,需要用next()
//设置静态目录
app.use(express.static('public'));
//引入框架-模板
app.engine("html", require("express-art-template"));
//sql查询的结果变量
let resultList;
//sql查询
oracledb.query("select * from goods", function (result) {
resultList = result;
})
//挂载路由
//首页
app.get("/", function (req, res) {
//返回前端html页面,并返回数据渲染页面
res.render("listSort.html", {
resultList: resultList //listSort.html文件中的name占位符为listSort
})
})
/* 升序降序请求接口 */
app.get("/sort", function (req, res) {
//获取url对象
let parseObj = url.parse(req.url,true);
//使用url对象的属性query取对应的url参数
if (parseObj.query.mode == 'asc') {
//使用封装好的oracle对象的query方法执行sql语句
oracledb.query("select * from goods order by price asc", function (result) {
resultList = result;
//重定向到路由为/的接口
res.redirect('/');
})
} else if (parseObj.query.mode == 'desc') {
oracledb.query("select * from goods order by price desc", function (result) {
resultList = result;
res.redirect('/');
})
}
})
/* 开启服务器 */
app.listen(3000, function () {
console.log("服务器在3000端口启动");
})
封装的oracle方法,oracle.js
var oracledb = require('oracledb');
var query = function(sql,callback){
oracledb.getConnection(
{
user: 'stu_user', //用户
password: 'orcl',//密码
connectString: 'localhost/ORCL' //连接地址
},
function (err, connection)
{
if (err)
{
console.error(err.message);
return;
}/*else{
console.log("连接成功");
}*/
connection.execute(sql, [], function (err, result)
{
if (err)
{
console.error(err.message);
doRelease(connection);
return;
}
console.log(result.rows);
callback(result.rows.map((v)=>
{
return result.metaData.reduce((p, key, i)=>
{
p[key.name] = v[i];
return p;
}, {})
}));
doRelease(connection);
});
}
);
}
function doRelease(connection) {
connection.close(
function(err) {
if (err)
console.error(err.message);
});
}
exports.query = query;
listSort.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>listSort</title>
<link href="listSort.css" type="text/css" rel="stylesheet">
</head>
<body id="tbody">
<div class="container" id="container">
<div class="top">
<ul>
<li class="sortBtn" title="按系统默认排序">默认</li>
<li class="sortBtn" title="按价格降序"><a href="/sort?mode=desc">价格</a></li>
<li class="sortBtn" title="按价格升序"><a href="/sort?mode=asc">价格</a></li>
</ul>
</div>
<div class="content" id="content">
{{each resultList}}
<div class="item">
<a href="#">
<div class="imgbox">
<img src={{$value.IMG}} alt="">
</div>
<div class="priceInfo">
<div class="price"><span>¥</span><strong>{{$value.PRICE}}</strong></div>
<div class="deal">{{$value.SOLD}}人付款</div>
</div>
<div class="title">
<a href="#">
<span>{{$value.DESCRIBE}}</span>
</a>
</div>
<div class="business">
<div class="shop"><a href="#">{{$value.BUSINESS}}</a></div>
<div class="location">{{$value.PROVINCE}} {{$value.CITY}}</div>
</div>
</a>
</div>
{{/each}}
</div>
</div>
<script src="jquery_3.4.1.js"></script>
<script src="listSort.js"></script>
</body>
</html>
listSort.css
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
color: black;
}
ul{
list-style: none;
}
.container{
position: relative;
overflow: hidden;
}
.top{
margin: 10px 0px;
padding: 5px;
float: left;
}
.sortBtn{
width: 100px;
height: 62px;
line-height: 60px;
margin-right: 5px;
padding-left: 20px;
color: black;
background-color: white;
border: 1px solid #999999;
cursor: pointer;
float:left;
}
.sortBtn{
background-repeat: no-repeat;
background-position: 70px center;
background-size: 40px 30px;
}
.sortBtn:nth-child(1){
background-image: url("img/funnel.png");
}
.sortBtn:nth-child(2){
background-image: url("img/down.png");
}
.sortBtn:nth-child(3){
background-image: url("img/up.png");
}
.sortBtn:nth-child(1):hover{
background-image: url("img/funnelRed.png");
}
.sortBtn:nth-child(2):hover{
background-image: url("img/downRed.png");
}
.sortBtn:nth-child(3):hover{
background-image: url("img/upRed.png");
}
.sortBtn:hover{
background-color: #e8e8e8;
color: red;
}
.sortBtn1:nth-child(1){
background-color: #e8e8e8;
background-image: url("img/funnelRed.png");
color: red;
}
.sortBtn2:nth-child(2){
background-image: url("img/downRed.png");
background-color: #e8e8e8;
color: red;
}
.sortBtn3:nth-child(3){
background-image: url("img/upRed.png");
background-color: #e8e8e8;
color: red;
}
.sortBtn a{
display: inline-block;
width: 100%;
height: 100%;
}
.content{
margin: 5px auto;
clear: both;
overflow: hidden;
}
.item{
width: 300px;
height: 500px;
border: 1px solid #ededed;
margin-right: 10px;
float: left;
overflow: hidden;
padding: 10px;
}
.item>a{
text-decoration: none;
color: black;
}
.imgbox{
}
.imgbox img{
width: 290px;
height: 290px;
}
.priceInfo{
height: 30px;
line-height: 30px;
margin-top: 10px;
}
.price{
float: left;
}
.deal{
float: right;
color: #888888;
}
.title{
margin-top: 15px;
}
.title>a{
text-decoration: none;
color: black;
}
.title>a:hover{
text-decoration: underline;
color: indianred;
}
.business{
height: 30px;
line-height: 30px;
margin-top: 10px;
}
.shop{
float: left;
}
.shop>a{
color: #888888;
}
.shop>a:hover{
color: #ff4040;
}
.location{
float: right;
}
listSort.js
$(document).ready(function () {
$('.top>ul>li').each(function (index) {
$(this).click(function () {
removeAllClass();
$(this).addClass(`sortBtn${index+1}`);
})
});
})
function removeAllClass() {
$('.sortBtn').removeClass(`sortBtn1`);
$('.sortBtn').removeClass(`sortBtn2`);
$('.sortBtn').removeClass(`sortBtn3`);
}
在github上有完整代码https://github.com/305810827/SortingAndPaging