网站目录结构
baixiu
-admin(服务器端页面文件夹)
-api(后台页面数据接口文件夹)
-_userLogin.php(登录请求接口)
-_getUserInfo.php(获取用户信息接口)
-_getCategoriesInfo.php(获取分类目录页面数据接口)
-public(后台公共模块文件夹)
-login.php(后台登录界面)
-index.php(后台首页)
-static(静态资源文件文件夹)
-assets(外部资源文件夹css、js、img等)
-uploads(上传文件夹)
-public(前台公共模块文件夹)
-_header.php(抽取的头部公共模块) -> 公共头部模块数据渲染
-_aside.php(抽取的侧边栏公共模块)
-api(前台页面数据接口文件夹)
-_getMorePost.php(请求更多数据)
-config.php(数据库配置文件)
-index.php(前台首页) -> 首页最新文章列表数据渲染
-detail.php(详情页)
-list.php(列表页) -> 分类页面文章列表数据渲染
day1
1. 将静态资源文件放到static文件夹
通过sublime修改所有的样式与图片路径
assets/ -> static/assets/
uploads/ -> static/uploads/
查找 -> 到文件中查找 -> 替换路径
2. cmd命令到指定文件夹 ren *.html *.php -> 将文件后缀名html改为php
因为修改了文件后缀名,所以在文件中的引用也需要修改。
注意修改的文件要在当前对应的文件夹中进行替换
.html -> .php
更换文件中的引入文件的后缀名
1. 选择当前文件夹下所有文件的后缀替换:
2. 更换单个文件的替换:快捷键ctrl + h
3. 抽取公共头(header)和公共侧边栏(aside)到公共文件夹下(public)
在需要用到公共模块的页面中引入相应的模块,用incude_once
4. 在网页的根目录下配置相关选项 -> config.php
定义数据库的主机、账号、密码、名字 -> define('DB_HOST','127.0.0.1') ...
注意该配置选项的引入,在页面中引入(require_once),它的路径是当前页面开始的相对路径
5. 渲染公共头部分类的数据
① 连接数据库操作 -> 获取数据库的数据
② 利用foreach循环渲染数据到页面上
6. 渲染首页文章的数据
① 导入配置文件,连接数据库,获取数据库中的数据 -> 注意此时接收数据变量的命名
② 利用foreach循环渲染数据到页面上
7. 渲染分类列表文章的数据
① 在首页的分类跳转链接设置跳转的页面路径,并传入类别的id
② 导入配置文件,连接数据库,获取数据库中的数据
③ 利用foreach循环渲染数据到页面上
day2
因为涉及到很多数据库的操作,所以可以将其单独提取出来做成一个函数
8. 点击侧边的分类列表,跳转到对应的分类文章(list.php)页面
① 在头部公共模块中,设置跳转链接,传入相应页面的参数(categoryId)
② 在分类文章列表页通过get获取相应的参数值(categoryId),并根据内容及参数编写我们需要从数据库中获取的数据,执行sql语句,返回数据
③ 通过foreach将数据渲染到具体的文章页面中
9. 分类页面,点击文章列表最底部的加载更多按钮获取更多的数据
① 首先为加载更多按钮添加点击事件,然后发送ajax请求到对应的api后台得到相应的数据
api:
1. 在该项目中创建一个名叫api的文件夹,放入相关的接口文件
2. 后端
通过post请求获得前台传过来的页码(currentPage),页数(pageSize)以及categoryId
编写相应的加载更多sql语句,得到数据的范围为(currentPage-1)*pageSize, pageSize
执行sql语句,得到二维数组
编写得到分类文章总数的sql语句,执行sql语句,将其加入到响应数组中
定义一个响应数组,如果没有得到二维数组,返回错误信息。
如果得到二维数组,向响应变量中写入相关的数据
-> 'code'、'msg'、'data'、'total'(同类文章总数量用于前台判断)
将这个响应数组返回到请求的页面
3.前端
在绑定点击事件前,分别定义当前页(currentPage=1)以及每页数据(pageSize=10)
点击按钮先让当前页加一,然后发送ajax请求
因为后台是用post接收数据的,所以前台的请求方式type应该设置为post
url对应api接口文件
发送给后端的数据data: 页码,请求数据项,分类文章Id
请求成功后,对接收的数据进行判断,成功的数据再渲染到模板中添加到页面中
需要注意的是,后台数据库中的数据是有限的,所以有必要判断数据加载完的条件
当前页码数 >= 数据库中的最大页码数,让加载更多按钮消失
10. 点击分类页面文章的题目,进入文章的详情页面
① 给文章题目的链接设置需要跳转的页面,并传入当前文章的id
② 文章的详情页面可以通过get请求拿到,并通过id获取文章相关的详情信息
③ 将获得的信息渲染到页面上
day3
11. 后台admin登录页面 (会话技术)
完成的是登录的功能
1. 用户输入邮箱和密码,点击登录
2. 收集用户的数据,发送到服务端
3. 把用户数据和数据库数据对比
4. 把登录j结果通知前台
前端跳转:location.href = 'page.html'
后端跳转:header('location:page.html')
前端:
对后台页面完成登录的验证 - 除了登录页面,都需要做登录验证
一定要记住,如果要使用session就必须先开启
没有isLogin这个key, 有isLogin, 但是值跟我们在登录的时候存储的不一样
如果没有登录过,就应该强制登录
登录按钮注册点击事件
手机用户的数据,ajax发送给服务端
收集到用户数据的时候需要先对数据格式进行验证
格式正确在发送
判断返回的数据是否登录成功
成功就跳转后台页面,否则提示错误
后端:
得到用户的邮箱和密码
根据邮箱和密码到数据库中查找有没有对应的数据
最终通知前台是否登录成功
12. 后台侧边栏aside,导航栏nav-bar提取到公共文件夹中
分别将后台页面相同的侧边栏,导航栏抽取到公共文件夹下,页面用到的位置引入即可
13. 抽离了公共模板,需要对侧边栏菜单的折叠与展开重新设置相应的属性值
抽取了公共模板后,对菜单的展开以及菜单项的激活状态产生了影响,需要手动添加相关的属性
在页面引入侧边栏地方的上面定义一个变量,记录当前页面的名字
在侧边栏公共模块中,用一个数组记录需要展开菜单项的页面名字,利用in_array判断当前是哪个页面在引用当前公共模块,如果是属于菜单项的页面正在引用,则设置相关的属性值,让菜单项展开,否则关闭菜单项。
可以通过对每个li标签判断当前引用页面是否与当前li所对应的页面信息相同,如果相同则添加激活类,否则不添加
14. 对侧边栏的头像以及昵称的动态渲染
① 在侧边栏的公共模块中发送ajax请求,得到服务器返回的用户头像以及昵称的信息,并将其动态渲染到页面对应的地方
② 对应接口
连接数据库,获取数据,其中sql查询语句中用户的id是通过session获取的,其值在登录成功的时候就被设置好了。
将相关的数据写入到相应的数组中去,并以json格式返回该数组变量
15. 对分类目录页面的表格进行数据的动态渲染
前端:
分类页面发送ajax请求,获得分类表格的相关信息,将其渲染到表格中
后端:
接口查询数据库分类表的数据,得到数据,处理后给客户端响应数据
day4
16. 分类目录页面的表格添加信息
前端:
添加按钮绑定点击事件,收集用户信息,并对其进行验证
验证通过后,对相关后台页面发送ajax请求
后端:
获得前台传过来的信息,先编写sql语句判断数据库中是否有重复的类名
如果重复,返回错误的信息
不重复,编写新增信息的sql语句,
implode(',', 数组) -> 数组中的元素以,分割转为字符串
array_keys(关联数组) -> 获取所有的键
array_values(关联数组) -> 获取所有的值
|
|