目录
文章初衷就是学习PHP开发后端项目的过程，推荐一个模块一个模块做，项目代码有没有放文末，这是个随机事件:) ，如果觉得文章不错麻烦动动小手指点个赞吧哈哈。
项目成果
商品后端维护功能
- 添加商品（需要有商品图片，在服务器保存）
- 商品的上架（status字段的取值为“新增”“已上架”“已下架”）
- 商品的基本信息修改（状态为已上架商品不能修改）
- 商品的删除（状态为已上架商品不能删除）
前端功能
- 商品列表页面
- 添加商品页面
- 商品维护页面
数据库表
商品Product（主键ID，商品名称Name，图片Pic，价格Price，状态Status）
项目效果图
商品列表首页
添加商品页面
商品维护页面
前端好麻烦，这里偷懒了。。。
项目的收获
- 熟悉PHP开发后端的流程
- 熟悉前后端数据交互的流程
- 后端连接数据库和增删改查的流程
- 前端如何把本地图片上传并实时显示
- 上传图片到服务器的流程
WEBAPP开发总体思想
WEBAPP就是网页应用（WEB application）
前端开发
负责渲染网页、编写Ajax传输请求数据与获得响应数据。
后端开发
负责与服务器的数据库打交道（DAO层）、业务逻辑（Service层）、编写响应前端的方法（Controller层）。
一开始没经验开发小项目中代码分层就会让我觉得很麻烦很愚蠢，写了很多没必要的代码。
后端代码的分层作用
使我们的项目工程化，而在大项目中代码量很多这个时候我们的大脑就容易混乱注意力不集中，分层就能很好集中我们的注意力开发特定的模块，使项目开发有规律可循并稳定前进。
在计算机网络、操作系统、计算机组成原理这些知识体系中分层思想出现较为频繁。
前端开发
网页样式使用BootStrap框架的样式，使得前端页面开发变得简单高效，我代码部分就不贴出引用部分了。
首页核心代码
这里HTML部分我就简单贴出body
<body>
<h1>你好，世界！</h1>
<p class="addBlock"><a href="addGoods.html" class="btn btn-primary addBtn" role="button">添加商品</a></p>
<!-- 商品列表容器 -->
<div class="row">
</div>
</body>JS部分使商品模块渲染的关键，这里是发送请求到后端，后端响应商品数据回来的ajax。
window.onload = function () {
var rowDiv = document.getElementsByClassName('row')[0];
//请求获得商品数据，并渲染页面
$.ajax({
url:'../controller/GoodsController.php',
type:'POST',
data:'Action=queryAllGoods',
dataType: 'json',
// processData: false,
// contentType: false,
success: function (response) {
console.log(response);
var htmlstr = '';
var status = ["已下架","已上架","新增"];
for(var i = 0; i < response.length; i++){
var goods = response[i];
var lable;
if(goods.status == 0) lable = "label label-default";
else if(goods.status == 1) lable = "label label-success";
else if(goods.status == 2) lable = "label label-danger";
// console.log(goods.status);
htmlstr = "<div id=\"goods"+goods.id+"\" class=\"col-xs-6 col-md-2 \">\
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
