任务7-Node.js应用开发项目化教程（慕课版）-.3 实现分类商品列表显示.pptx

实现分类商品列表显示

引入如何将数据库中的信息按照分类查询出来显示在模板页面？

目录01任务需求02实现步骤03任务实现

任务需求在Express中完成MySQL数据库表中的分类商品数据查询，显示在模板页面中。点击[数码产品]超链接地址栏带参数：/product?cat_id=3默认所有商品列表/product

实现步骤编写路由代码03启动项目，浏览页面05创建模板引擎02模板引擎解析数据01数据准备04

数据库DuDaInfo，商品类别表product_category、商品表product。任务实现1.数据准备product_category表，cat_id为主码product表，cat_id为外码

任务实现2.创建模板引擎productList.ejs--列表页模板

!--注意地址栏参数值要与表中类别号一致--productList.ejs：商品类别导航超链接设置，带地址栏参数（商品类别号cat_id字段值），以区分用户选择的类别。任务实现2.创建模板引擎product_category表

!--注意找重复--DIVid=productListDLclass=noMargin DT....../DT DD....../DD/DLDLclass=noMargin DT....../DT DD....../DD/DLDIVclass=clear/DIV/DIV分析商品类别数据布局标签结构，div-dl-dt和dd任务实现2.创建模板引擎

index.js023.编写路由代码任务实现两种情况（区别在于地址栏是否有参数）：1.默认全表查询“/product”2.分类查询“/product?cat_id=1routes/index.js

varexpress=require(express);constdb=require(../db.js);//注意路径varrouter=express.Router();/*商品列表页*/router.get(/product,function(req,res,next){varcat_id=req.query.cat_id;//取地址栏参数cat_id的值if(cat_id){//地址栏带了参数cat_id,分类查询 varsqlStr=select*fromproductwherecat_id=?orderbyiddesc; varsqlParam=[cat_id];}else{//地址栏没有参数cat_id,查询所有商品 varsqlStr=select*fromproductorderbyiddesc;varsqlParam=[];}db.conn.query(sqlStr,sqlParam,function(err,result){ console.log(result);//返回[{...},{...},...,{...}]数组 res.render(productList.ejs,{products:result});});});module.exports=router;参数化查询语句query()方法里面两参数查询结果带到渲染模板prouductList.ejs任务实现routes/index.js服务器代码两种情况：查全表-地址栏无参数分类查-地址栏带参数

任务实现4.模板引擎解析数据静态代码红框内代码注释掉动态代码for循环结合原有样式输出

!--产品列表展示--DIVid=productList %for(vari=0;iproducts.length;i++){% DLDTAhref=/detail/%=products[i].id% IMGalt=%=products[i].name%src=%=products[i].image%/A /DT DD Pclass=name Atitle=%=products[i].name%href=/detail/%=products[i].id% %=products[i].name%/A /P Pclass=price价格：￥%=products[i].price%元/P