nodejs oracle数据库 art-template模板引擎实现的商品列表

最新推荐文章于 2022-04-20 12:48:04 发布

程序员-小许

最新推荐文章于 2022-04-20 12:48:04 发布

阅读量332

点赞数 1

文章标签： nodejs art-template oracle

本文链接：https://blog.csdn.net/m0_37820751/article/details/102631937

版权

根据上一篇文章写得静态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

程序员-小许

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
nodejs oracle数据库 art-template模板引擎实现的商品列表

根据上一篇文章写得静态jquery完成商品列表按价格升序、降序排序https://blog.csdn.net/m0_37820751/article/details/102623401这一篇博客则用简单的案例完成整个项目的流程，使用nodejs作为我们页面的服务器，oracle为数据库存储数据，art-template作为我们页面的模板引擎动态渲染数据。1.首先电脑就要安装nodejs...
复制链接

扫一扫