《Web应用开发实战》课件——单元8 项目实战-商品信息管理系统.pptx

8.1商品管理系统简介

引入前台数据查询功能后台数据管理功能搜索引擎商品管理系统企业门户网站

引入商品管理系统开发中涉及的交互有哪些？Express框架搭建的服务器

目录01项目需求02实现步骤03项目准备

项目需求基于Express框架和MySQL数据库实现一个商品管理系统，以维护DuDa企业门户网站中的商品信息。

项目需求管理员登录、商品添加、修改、删除、查询等功能。管理员登录商品列表页商品添加页商品修改页

实现步骤创建项目文件夹03改写端口、启动项目05项目路由规划02实现ejs模板引擎01项目数据准备04

项目准备1.项目数据准备表名表功能admin管理员账号表product_category商品类别表product商品信息表admin表数据库DuDaInfo，管理员账号表admin、商品类别表product_category、商品表product。

product_category表：cat_id为主码、自增项目准备1.项目数据准备product表：id为主码、自增，cat_id为外码

数据库DuDaInfo，管理员账号表admin、商品类别表product_category、商品表product。项目准备1.项目数据准备product_categoryproduct

2.项目路由规划，统一加前缀/admin项目准备页面路由地址页面模板管理员登录/admin/loginlogin.ejs管理员退出登录/admin/logout后台商品列表/admin/productproduct/index.ejs商品添加页面/admin/addproduct/productadd.ejs商品信息添加提交/admin/doAdd商品信息修改页面/admin/editproduct/productedit.ejs商品信息修改提交/admin/doEdit商品信息删除/admin/delete商品信息查询/admin/searchproduct/index.ejs路由规划规范、效率

express-eDuDa_Manage搭建项目环境，指定模板引擎为ejs0102cdDuDa_Managenpminstallnpminstallmysql//连接MySQL数据库npninstallmultiparty//处理上传图片npminstallmd5-node//用户密码加密切换目录，并安装依赖包3.创建项目文件夹项目准备

图片、CSS样式、JS文件等静态资源直接放入public文件夹。静态资源处理0102将html文件另存为ejs文件，放入views文件夹，提取页面公共代码，存入header.ejs和left.ejs文件中。页面处理项目准备4.实现ejs模板引擎03在Express框架中，页面的静态资源路径从“/”开始。静态资源路径处理

项目实现公共模板文件views/include/left.ejsviews/include/header.ejs

5.改写端口，启动项目项目准备进入项目文件夹，打开CMD窗口nodemonapp.js服务器测试浏览器打开地址：http://localhost:3006/监听端口3006在app.js末尾追加代码：

小结项目需求首页、列表页、详情页、图文页实现步骤准备项目数据?项目路由规划?创建项目文件夹?项目页面模板?改写端口、启动项目项目准备admin、product_category、product表login.ejs、index.ejs、productadd.ejs、productedit.ejs-模板引擎/admin/login、/admin/product、/admin/add等-路由地址

8.2管理员登录

引入搜索引擎商品管理系统

引入如何在Express框架中实现管理员登录功能？

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

任务需求页面输入admin表中已存好的管理员账号和密码才能登录成功，进入后台管理首页，否则提示登录失败。

实现步骤主程序配置Session和路由前缀03启动项目浏览页面05创建模板引擎02编写路由代码01数据准备04

1.数据准备任务实现admin表admin+md5(123456)

任务实现2.创建模板引擎02表单form文本框密码框提交按钮模板文件views/login.ejs-登录页面。

!DOCTYPEhtmlhtmlheadtitle用户登录/titlelinkrel=stylesheethref=/stylesheets/bootstrap.min.csslinkrel=stylesheethref=/styleshe