阿里百秀项目实战day1

开发流程

1.需求分析

用户登录
内容管理
分类管理
评论管理
用户管理
网站设置

2.原型设计 axure
3.UI设计
4.技术选型
5.数据库设计
6.项目架构设计
7.业务迭代开发
8.集中测试
9.部署上线

数据库结构介绍

数据库设计
根据业务需求设计数据库的结构，这个过程是每个项目开始时必须的，一般由专门的DBA角色完成。（表格设计）

选项表（options）用于记录网站一些配置属性信息，如网站标题，站点描述。
搭建项目架构
打开navicat，新建数据库baixiu-dev

新建查询，复制粘贴初始化数据库

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";SET AUTOCOMMIT = 0;
START TRANSACTION;SET time_zone = "+00:00";-- Database: `baixiu`
--
-- --------------------------------------------------------
--
-- 表的结构 `categories`
--
CREATE TABLE `categories` (`id` INT ( 11 ) NOT NULL COMMENT '主键',`slug` VARCHAR ( 200 ) NOT NULL COMMENT '别名',`name` VARCHAR ( 200 ) NOT NULL COMMENT '分类名称'
) ENGINE = INNODB DEFAULT CHARSET = utf8;--
-- 转存表中的数据 `categories`
--
INSERT INTO `categories` ( `id`, `slug`, `name` )
VALUES( 1, 'uncategorized', '未分类' ),( 2, 'funny', '奇趣事' ),( 3, 'living', '会生活' ),( 4, 'travel', '爱旅行' );-- --------------------------------------------------------
--
-- 表的结构 `comments`
--
CREATE TABLE `comments` (`id` INT ( 11 ) NOT NULL COMMENT '主键',`author` VARCHAR ( 100 ) NOT NULL COMMENT '作者',`email` VARCHAR ( 200 ) NOT NULL COMMENT '邮箱',`created` datetime NOT NULL COMMENT '创建时间',`content` VARCHAR ( 1000 ) NOT NULL COMMENT '内容',`status` VARCHAR ( 20 ) NOT NULL COMMENT '状态（held/approved/rejected/trashed）',`post_id` INT ( 11 ) NOT NULL COMMENT '文章 ID',`parent_id` INT ( 11 ) DEFAULT NULL COMMENT '父级 ID'
) ENGINE = INNODB DEFAULT CHARSET = utf8;--
-- 转存表中的数据 `comments`
--
INSERT INTO `comments` ( `id`, `author`, `email`, `created`, `content`, `status`, `post_id`, `parent_id` )
VALUES( 1, '汪磊', 'w@zce.me', '2017-07-04 12:00:00', '这是一条测试评论，欢迎光临', 'approved', 1, NULL ),( 2, '嘿嘿', 'ee@gmail.com', '2017-07-05 09:10:00', '想知道香港回归的惊人内幕吗？快快与我取得联系', 'rejected', 1, NULL ),( 3, '小右', 'www@gmail.com', '2017-07-06 14:10:00', '你好啊，交个朋友好吗？', 'held', 1, NULL ),( 4, '汪磊', 'www@gmail.com', '2017-07-09 22:22:00', '不好', 'held', 1, 3 ),( 5, '汪磊', 'w@zce.me', '2017-07-09 18:22:00', 'How are you?', 'held', 1, 3 ),( 6, '小右', 'www@gmail.com', '2017-07-11 22:22:00', 'I am fine thank you and you?', 'held', 1, 5 ),( 7, '哈哈', 'hh@gmail.com', '2017-07-22 09:10:00', '一针见血', 'approved', 1, NULL );-- --------------------------------------------------------
--
-- 表的结构 `options`
--
CREATE TABLE `options` ( `id` INT ( 11 ) NOT NULL COMMENT '主键', `key` VARCHAR ( 200 ) NOT NULL COMMENT '属性键', `value` text NOT NULL COMMENT '属性值' ) ENGINE = INNODB DEFAULT CHARSET = utf8;--
-- 转存表中的数据 `options`
--
INSERT INTO `options` ( `id`, `key`, `value` )
VALUES( 1, 'site_url', 'http://localhost' ),( 2, 'site_logo', '/static/assets/img/logo.png' ),( 3, 'site_name', '阿里百秀 - 发现生活，发现美！' ),( 4, 'site_description', '阿里百秀同阿里巴巴有咩关系，答案当然系一啲都冇' ),( 5, 'site_keywords', '生活, 旅行, 自由, 诗歌, 科技' ),( 6, 'site_footer', '<p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>' ),( 7, 'comment_status', '1' ),( 8, 'comment_reviewed', '1' ),( 9, 'nav_menus', '[{\"icon\":\"fa fa-glass\",\"text\":\"奇趣事\",\"title\":\"奇趣事\",\"link\":\"/category/funny\"},{\"icon\":\"fa fa-phone\",\"text\":\"潮科技\",\"title\":\"潮科技\",\"link\":\"/category/tech\"},{\"icon\":\"fa fa-fire\",\"text\":\"会生活\",\"title\":\"会生活\",\"link\":\"/category/living\"},{\"icon\":\"fa fa-gift\",\"text\":\"美奇迹\",\"title\":\"美奇迹\",\"link\":\"/category/travel\"}]' ),( 10, 'home_slides', '[{\"image\":\"/static/uploads/slide_1.jpg\",\"text\":\"轮播项一\",\"link\":\"https://zce.me\"},{\"image\":\"/static/uploads/slide_2.jpg\",\"text\":\"轮播项二\",\"link\":\"https://zce.me\"}]' );-- --------------------------------------------------------
--
-- 表的结构 `posts`
--
CREATE TABLE `posts` (`id` INT ( 11 ) NOT NULL COMMENT '主键',`slug` VARCHAR ( 200 ) NOT NULL COMMENT '别名',`title` VARCHAR ( 200 ) NOT NULL COMMENT '标题',`feature` VARCHAR ( 200 ) DEFAULT NULL COMMENT '特色图像',`created` datetime NOT NULL COMMENT '创建时间',`content` text COMMENT '内容',`views` INT ( 11 ) NOT NULL DEFAULT '0' COMMENT '浏览数',`likes` INT ( 11 ) NOT NULL DEFAULT '0' COMMENT '点赞数',`status` VARCHAR ( 20 ) NOT NULL COMMENT '状态（drafted/published/trashed）',`user_id` INT ( 11 ) NOT NULL COMMENT '用户 ID',`category_id` INT ( 11 ) NOT NULL COMMENT '分类 ID'
) ENGINE = INNODB DEFAULT CHARSET = utf8;--
-- 转存表中的数据 `posts`
--
INSERT INTO `posts` ( `id`, `slug`, `title`, `feature`, `created`, `content`, `views`, `likes`, `status`, `user_id`, `category_id` )
VALUES( 1, 'hello-world', '世界，你好', '/uploads/2017/hello-world.jpg', '2017-07-01 08:08:00', '欢迎使用阿里百秀。这是您的第一篇文章。编辑或删除它，然后开始写作吧！', 222, 111, 'published', 1, 1 ),( 2, 'simple-post-2', '第一篇示例文章', NULL, '2017-07-01 09:00:00', '欢迎使用阿里百秀。这是一篇示例文章', 123, 10, 'drafted', 1, 1 ),( 3, 'simple-post-3', '第二篇示例文章', NULL, '2017-07-01 12:00:00', '欢迎使用阿里百秀。这是一篇示例文章', 20, 120, 'drafted', 1, 2 ),( 4, 'simple-post-4', '第三篇示例文章', NULL, '2017-07-01 14:00:00', '欢迎使用阿里百秀。这是一篇示例文章', 40, 100, 'drafted', 1, 3 );-- --------------------------------------------------------
--
-- 表的结构 `users`
--
CREATE TABLE `users` (`id` INT ( 11 ) NOT NULL COMMENT '主键',`slug` VARCHAR ( 200 ) NOT NULL COMMENT '别名',`email` VARCHAR ( 200 ) NOT NULL COMMENT '邮箱',`password` VARCHAR ( 200 ) NOT NULL COMMENT '密码',`nickname` VARCHAR ( 100 ) DEFAULT NULL COMMENT '昵称',`avatar` VARCHAR ( 200 ) DEFAULT NULL COMMENT '头像',`bio` VARCHAR ( 500 ) DEFAULT NULL COMMENT '简介',`status` VARCHAR ( 20 ) NOT NULL COMMENT '状态（unactivated/activated/forbidden/trashed）'
) ENGINE = INNODB DEFAULT CHARSET = utf8;--
-- 转存表中的数据 `users`
--
INSERT INTO `users` ( `id`, `slug`, `email`, `password`, `nickname`, `avatar`, `bio`, `status` )
VALUES( 1, 'admin', 'admin@zce.me', 'wanglei', '管理员', '/static/uploads/avatar.jpg', NULL, 'activated' ),( 2, 'zce', 'w@zce.me', 'wanglei', '汪磊', '/static/uploads/avatar.jpg', NULL, 'activated' ),( 3, 'ice', 'ice@wedn.net', 'wanglei', '汪磊', '/static/uploads/avatar.jpg', NULL, 'activated' );--
-- Indexes for dumped tables
--
--
-- Indexes for table `categories`
--
ALTER TABLE `categories` ADD PRIMARY KEY ( `id` ),
ADD UNIQUE KEY `slug` ( `slug` );--
-- Indexes for table `comments`
--
ALTER TABLE `comments` ADD PRIMARY KEY ( `id` );--
-- Indexes for table `options`
--
ALTER TABLE `options` ADD PRIMARY KEY ( `id` ),
ADD UNIQUE KEY `name` ( `key` );--
-- Indexes for table `posts`
--
ALTER TABLE `posts` ADD PRIMARY KEY ( `id` ),
ADD UNIQUE KEY `slug` ( `slug` );--
-- Indexes for table `users`
--
ALTER TABLE `users` ADD PRIMARY KEY ( `id` ),
ADD UNIQUE KEY `slug` ( `slug` ),
ADD UNIQUE KEY `email` ( `email` );--
-- 在导出的表使用AUTO_INCREMENT
--
--
-- 使用表AUTO_INCREMENT `categories`
--
ALTER TABLE `categories` MODIFY `id` INT ( 11 ) NOT NULL AUTO_INCREMENT COMMENT '主键',
AUTO_INCREMENT = 15;--
-- 使用表AUTO_INCREMENT `comments`
--
ALTER TABLE `comments` MODIFY `id` INT ( 11 ) NOT NULL AUTO_INCREMENT COMMENT '主键',
AUTO_INCREMENT = 504;--
-- 使用表AUTO_INCREMENT `options`
--
ALTER TABLE `options` MODIFY `id` INT ( 11 ) NOT NULL AUTO_INCREMENT COMMENT '主键',
AUTO_INCREMENT = 11;--
-- 使用表AUTO_INCREMENT `posts`
--
ALTER TABLE `posts` MODIFY `id` INT ( 11 ) NOT NULL AUTO_INCREMENT COMMENT '主键',
AUTO_INCREMENT = 315;--
-- 使用表AUTO_INCREMENT `users`
--
ALTER TABLE `users` MODIFY `id` INT ( 11 ) NOT NULL AUTO_INCREMENT COMMENT '主键',
AUTO_INCREMENT = 5;
COMMIT;

搭建项目结构

基本目录结构

baixiu …项目文件夹（网站根目录）
—admin…后台文件夹
-----------index.php…后台脚本文件
—static… 静态文件夹
-----------assets…资源文件夹
-----------uploads…上传文件夹
—index.php.…前台脚本文件

整合静态资源文件

批量整合后台页面

抽离公共部分

侧边栏和导航栏都是一样的，用include引用公共部分

找到侧边栏部分的代码，复制
在admin文件夹下创建inc文件夹，新建sidebar.php

将复制的代码粘贴到sidebar.php中，把所有用到侧边栏代码的地方都换成

<?php include 'inc/sidebar.php';?>

再同理新建一个导航栏公共文件navbar.php

此时会出现点击侧边栏不再出现高亮的情况class=active时高亮
利用include后，可以使用被include页里的变量的情况，
在前面加上定义变量$current_page的语句

然后在sidebar.Php中

换为

全部换完后
加上样式切换

处理登陆页面

form加两个必要属性 action， method
input中type=emial时会自动校验在form上加novaluedate取消浏览器自动校验
autocompelete=“off” 关闭客户端自动完成功能