项目简介

阿里百秀，内容管理系统，分为内容管理和内容展示两大核心功能。

1. 功能模块

1.1 内容管理

模块	功能
用户	登录、退出、用户增删改查
文章	文章管理
分类	分类管理
评论	评论管理
网站设置	关键字、描述、网站logo、轮播图

1.2 内容展示

模块	功能
首页	导航、文章数据展示
列表页	根据分类显示文章列表
详情页	文章详情数据展示、实现评论功能

2. 开发模式

2.1 前后端混合开发模式

前端：客户端
后端：服务端
所有HTML代码和数据在服务器端拼接好，一次性将所有内容发送到客户端，浏览器执行代码，将内容呈现给用户

问题：

1. 前后端开发人员对互相的代码都不是别熟悉，混合开发两者在处理互相的代码时非常困难
2. 在开发的过程中难免会出现代码互相覆盖，导致工作量倍增
3. 优点：
   ① 前端耗时少。因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。尤其是移动端，更省电。
   ② 有利于SEO。因为服务器端响应的是完整的 HTML 页面内容，所以爬虫更容易爬取获得信息，更有利于 SEO。
   缺点：
   ① 占用服务器端资源。即服务器端完成 HTML 页面内容的拼接，如果请求较多，会对服务器造成一定的访问压力。
   ② 不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，尤其对于前端复杂度高的项目，不利于
   项目高效开发

2.2 前后端分离开发模式

前后端分离的概念：前后端分离的开发模式，依赖于 Ajax 技术的广泛应用。简而言之，前后端分离的 Web 开发模式，
就是后端只负责提供 API 接口，前端使用 Ajax 调用接口的开发模式。

好处：职责、分工明确，独立开发，互不影响。
优点：
① 开发体验好。前端专注于 UI 页面的开发，后端专注于api 的开发，且前端有更多的选择性。
② 用户体验好。Ajax 技术的广泛应用，极大的提高了用户的体验，可以轻松实现页面的局部刷新。
③ 减轻了服务器端的渲染压力。因为页面最终是在每个用户的浏览器中生成的。
缺点：
① 不利于 SEO。因为完整的 HTML 页面需要在客户端动态拼接完成，所以爬虫对无法爬取页面的有效信息。（解决方
案：利用 Vue、React 等前端框架的 SSR （server side render）技术能够很好的解决 SEO 问题！）

3. 项目架构

系统分层	使用技术
数据层	mongoDB
服务层	node.js (express)
客户端	art-template、jQuery、font-awesome、swipe

4. 项目运行环境搭建

1. 安装node.js软件并测试其是否安装成功
   1. win + R 开启windows系统中的运行程序，在运行程序中输入powershell回车，打开命令行程序
   2. 输入node -v命令查看node.js的版本，在命令行程序中输出了版本号没有报错即说明安装成功
2. 安装mongodb、mongodb-compass软件
3. 将阿里百秀项目文件夹复制到硬盘中（服务器端程序）
4. 在命令行工具中进入到项目根目录中
   1. 按住shift键，点击鼠标右键，选择在此处打开powershell窗口
5. 使用npm install命令安装项目所需依赖文件
6. 将阿里百秀静态页面复制到public文件夹中
7. 在命令行工具中输入node app.js开启项目

登录功能

1. 为登录按钮添加点击事件
2. 获取用户在文本框中输入的用户名和密码
3. 验证用户是否输入了用户名和密码，如果没有输入，阻止程序向下执行，提示用户输入用户名和密码
4. 调用实现登录功能的接口，登录成功，跳转到数据管理的首页，登录失败，提示用户名或密码错误

登录拦截

1. 使用script标签加载服务器端提供的接口地址
2. 判断isLogin变量的值，如果值为false，跳转到登录页面

添加用户

1. 为添加用户功能的每一个表单项添加name属性，且name属性值需要和接口文档中要求的参数名称保持一致
2. 为表单绑定提交事件，在事件处理函数中阻止表单默认提交的行为
3. 在事件处理函数中获取到用户在表单中输入的内容
4. 调用添加用户接口，将获取到的内容通过接口发送给服务器端，操作成功刷新页面，操作失败给出用户提示

展示用户列表

1. 向服务器端发送Ajax请求，索要用户列表数据
2. 第二步，使用模板引擎将数据和html模板进行拼接
3. 第三步就是将拼接好的内容展示在页面中

用户头像上传

1. 为文件选择控件添加onchange事件，在事件处理函数中获取到用户选择到的文件
2. 创建formData对象用于实现图片文件上传
3. 调用图片文件上传接口，实现图片上传
4. 在添加新用户表单中新增一个隐藏域，将图片地址存储在隐藏域中

用户列表展示

1. 在页面加载时向服务器端发送Ajax请求，索要用户列表数据
2. 使用模板引擎将数据和html模板进行拼接
3. 将拼接好的内容展示在页面中

用户信息修改

1. 通过事件委托的形式为编辑按钮点击添加事件
2. 在事件处理函数中获取到当前点击用户的id值
3. 根据用户id获取用户的详细信息，并且通过模板引擎将用户的详细信息渲染到左侧的表单中
4. 为修改按钮添加点击事件，在事件处理函数中获取到用户在表单中输入的内容，调用修改用户信息接口实现用户信息修改功能。

删除用户

1. 为删除按钮添加点击事件
2. 确认用户是否要进行删除操作
3. 获取到当前被点击用户的id
4. 调用删除用户接口根据id删除用户，如果删除成功，刷新当前页面，让页面显示最新的内容

批量删除用户

1. 管理复选框的选中状态
   1. 当全选按钮被选中时，所有用户要被选中，当全选按钮取消选中时，所有用户要被取消选中
   2. 当用户前面的复选框按钮状态被改变时，要检查是否有用户处于未选中状态，如果有，取消全选按钮的选中状态，如果没有，就意味着所有用户都处于选中状态，此时将全选按钮设置为选中状态
2. 管理批量删除按钮的状态
   1. 当全选按钮被选中时，显示批量删除按钮，当全选按钮被取消选中时，隐藏批量删除按钮
   2. 当用户前面的复选框按钮状态改变时，检查所有用户的选中状态，如果有用户被选中，显示批量删除按钮，如果所有用户都没有处于选中状态，隐藏批量删除按钮
3. 实现批量删除用户功能
   1. 批量删除按钮添加点击事件，在点击事件处理函数中，将所有被选中的用户id执行存储在一个数组中
   2. 调用用删除用户接口，实现删除用户功能

修改密码

1. 为修改密码表单中的每一个表单项添加name属性，name属性的值要和接口中的参数名称保持一致
2. 为修改密码表单添加表单提交事件，在事件处理函数中，阻止表单的默认提交行为
3. 获取到用户在表单中输入的内容
4. 调用修改密码接口，实现密码修改功能，如果密码修改成功，跳转到登录页面，让用户重新登录

添加分类

1. 为表单中的每一个表单项添加name属性，name属性的值要和接口文档中要求的参数名称保持一致
2. 为表单添加表单提交事件，在事件处理函数中，阻止表单提交的默认行为
3. 获取到用户在表单中输入的内容
4. 调用分类添加接口，实现添加分类功能

分类数据展示

1. 向服务器端发送Ajax请求，索要分类页面数据
2. 使用模板引擎将服务器端返回的数据和HTML模板进行拼接
3. 将拼接好的内容展示在页面中

分类数据修改

1. 通过事件委托为编辑按钮添加点击事件，在事件处理函数中获取到要修改的分类数据id
2. 根据id调用接口，获取分类数据的详细信息
3. 利用模板引擎将分类数据和HTML字符进行拼接，拼接完成以后将内容渲染到页面中
4. 为修改按钮添加点击事件，在事件处理函数中获取到管理员在表单中输入的内容
5. 调用修改分类数据接口，实现分类数据修改功能。

分类数据删除

1. 通过事件委托的方式为删除按钮添加点击事件，在点击事件处理函数弹出删除确认框
2. 在用户点击了确认删除后，获取要删除的分类数据的id
3. 调用删除分类数据接口，实现删除分类数据功能，如果分类删除成功，刷新页面

添加文章

1. 获取文章分类数据，并将数据显示在所属分类的下拉列表中供管理员选择
2. 实现文章封面图片的上传，并将上传后的图片地址保存在一个隐藏域中
3. 为添加文章表单中的每一个表单项添加name属性，并且name属性值要和接口中要求的参数名称保持一致
4. 为添加文章表单绑定表单提交事件，在事件处理函数中阻止表单默认提交的行为
5. 获取到管理员在表单中输入的内容
6. 向服务器端发送添加文章的请求，实现文章添加功能，文章添加成功以后要跳转到文章列表页面

文章列表数据展示

1. 在页面一上来的时候向服务器端发送请求索要文章列表数据
2. 通过模板引擎将文章列表数据和HTML进行拼接，拼接完成以后将内容显示在页面中
3. 根据分页数据实现列表数据分页功能

文章数据列表筛选

1. 向服务器端发送请求，索要文章分类数据，并将数据显示在所属分类的下来列表中
2. 为筛选按钮添加点击事件，在事件处理函数中获取到用户选择到的内容
3. 向服务器端发送请求，索要管理员要求的文章列表数据，并将数据显示在页面中

文章编辑

1. 为编辑按钮添加链接，并将文章id作为链接的查询参数传递到文章编辑页面
2. 在文章编辑页面获取地址栏中的id参数
3. 根据id获取文章详细信息，并将文章信息显示在文章编辑表单中
4. 为修改文章表单绑定表单提交事件，在事件处理函数中阻止表单默认提交的行为
5. 获取到用户在表单中输入的内容
6. 向服务器端发送请求，实现修改文章信息功能，如果文章信息修改成功，跳转到文章列表页面

文章删除

1. 通过事件委托为删除按钮添加点击事件，在事件处理函数中弹出一个删除确认框，跟管理员确认删除操作
2. 在事件处理函数中获取要要删除的文章的id
3. 发送Ajax请求，执行删除操作，删除操作成功，刷新页面

评论列表展示

1. 向服务器端发送请求，获取评论列表数据
2. 使用模板引擎将评论列表数据和HTML模板进行拼接，拼接完成以后再将内容展示在页面中
3. 根据分页数据实现分页功能

评论审核

1. 根据当前评论的状态更改审核按钮中的文字。如果当前评论是未审核状态，按钮中显示批准，如果当前评论是已审核状态，按钮中显示驳回
2. 通过事件委托的方式为审核按钮添加点击事件，在事件处理函数中获取到当前评论的状态
3. 向服务器端发送请求，告诉服务器端评论要更改为什么状态，如果修改成功，刷新页面，让页面中显示最新的数据

评论删除

1. 通过事件委托的方式为删除按钮添加点击事件，在事件处理函数中弹出删除确认框
2. 获取到管理员要删除的评论id值
3. 向服务器端发送请求，执行删除评论操作，评论如果删除成功，刷新页面

图片轮播数据添加

1. 实现图片上传功能，并且将上传后的图片地址保存在一个隐藏域中
2. 为图片轮播表单中的每一个表单项添加name属性，name属性的值要和接口中要求的参数名称保持一致
3. 为图片轮播表单绑定表单提交事件，在事件处理函数中阻止表单默认提交的行为
4. 获取到管理员在表单中输入的内容
5. 向服务器端发送请求，实现图片轮播数据添加功能，如果数据添加成功，刷新页面

轮播图数据展示

1. 向服务器端发送请求索要图片轮播列表数据
2. 使用模板引擎将图片轮播列表数据和HTML模板进行拼接，拼接完成以后将内容展示在页面中

图片轮播数据删除

1. 通过事件委托的方式为删除按钮添加点击事件
2. 在事件处理函数中弹出删除确认框
3. 获取到要删除的轮播图数据的id
4. 向服务器端发送请求，执行删除操作，删除操作成功，刷新页面

网站设置

1. 实现网站logo图片的上传，并且将上传后的图片地址保存在一个隐藏域中
2. 为表单中的每一个表单项添加name属性，name属性的值要和接口文档中要求的参数名称保持一致
3. 为表单绑定提交事件，在事件处理函数中阻止表单默认提交的行为
4. 获取到管理员在表单中输入的内容
5. 向服务器端发送请求，实现网站设置数据的添加功能

显示网站设置数据

1. 向服务器端发送请求，获取网站设置数据
2. 判断服务器端返回的数据是否为真，如果为真，将数据展示在表单中

展示登录用户信息

1. 根据userId变量的值，向服务器端获取当前登录用户的信息
2. 将用户信息显示在页面的左侧

轮播图数据展示

1. 向服务器端发送请求索要轮播图数据
2. 使用模板引擎将数据和HTML字符串进行拼接，将拼接好的内容显示在页面中
3. 将原有的实现轮播图效果的JavaScript代码挪到ajax方法的success函数的最后面

热门推荐

1. 向服务器端发送请求，索要热门推荐数据

2. 使用模板引擎将数据和html模板进行拼接，将拼接好的内容显示在页面中

   var str = '<div>{{name}}</div>';
   var obj = {name: '张三'}
   var html = template.render(str, obj);
   

搜索

1. 为搜索表单绑定表单提交事件
2. 在事件处理函数中阻止表单默认提交行为并且获取到用户输入的搜索关键字
3. 跳转到搜索结果页面并且将用户输入的搜索关键字传递到搜索结果页面
4. 在搜索结果页面中，从地址栏的查询参数中获取到用户输入的关键字
5. 根据用户输入的搜索关键字调用搜索接口，当服务器端返回数据以后，将搜索结果数据和HTML模板进行拼接，最终将拼接好的内容展示在页面中

阿里百秀前后端交互项目相关推荐

1. 阿里云视频上传视频获取进度条问题(使用session方案,获取进度一直为0的解决方案)补充:前后端分离项目中获取进度解决方案

   1.场景描述: 之前用阿里云上传视频,前端反应上传视频经常出现获取视频url失败问题.但是接口我测过很多遍都是没有问题的.后台这边提供了一个视频上传的接口返回一个videoId,还提供了一个根据vid ...

2. springboot+mybatis+thymeleaf项目搭建及前后端交互

   前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

3. 【小项目】Axios 实现前后端交互

   Axios 实现前后端交互 文章目录 Axios 实现前后端交互 一.数据库 二.前端 三.后端 1.StudentServiceImpl.java 2.StudentController.java ...

4. 阿里云轻量应用服务器部署Node.js+React+MongoDB前后端分离项目

   最近用阿里云服务器部署了一个前端React,后端Node.js(Koa2),数据库MongoDB的前后端分离项目,其间踩了不少的坑,用这篇文章记录一下具体的步骤,希望对你们能有帮助. 1. 服务器的选 ...

5. 阿里百秀后台管理项目笔记 ---- Day01

   摘要 在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面 将静态页面全部拷贝到 ...

6. 移动端响应式布局项目之阿里百秀首页

   移动端响应式布局项目之阿里百秀首页 文章目录 移动端响应式布局项目之阿里百秀首页 前言 一.前期准备 1.1 建立文件夹 1.2 需求分析 1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份` ...

7. 移动web开发 17-1 响应式布局 bootstrap首页 框架 阿里百秀项目

   1 响应式开发原理 1.1 响应式开发原理 核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法 当屏幕宽度<=768 ...

8. 【项目实训6】前后端交互的格式以及规则

   前后端交互的方式有多种,在经过讨论以后选择了socket进行传递数据,数据格式为json.由于c++并不能直接操作json格式,需要通过jsoncpp第三方库进行操作. jsoncpp使用也很方便,下 ...

9. 阿里服务器部署springboot+vue前后端分离项目

   服务器部署springboot+vue前后端分离项目 最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...

最新文章

1. SCI论文写作视频1.论文的三段式结构
2. 竞赛 | 上汽拿出了2000辆车的真实数据集，千万级投资+直接录用机会等你来战！...
3. 批处理 探测在线计算机,批处理（bat）用来监测Windows网络状态脚本
4. JZOJ 5379. 【NOIP2017提高A组模拟9.21】Victor爱数字
5. C语言以递归实现归并排序Merge Sort算法(附完整源码)
6. 现代软件工程系列 结对编程 两周写好3D 陆战棋
7. hbuilderx的快捷键整理pdf_mac键盘快捷键详解，苹果电脑键盘快捷键图文教程
8. 病毒c语言代码大全,谁有C语言编写的病毒源代码？
9. mysql mpm_使用Zabbix + MPM全面监控MySQL
10. 和信虚拟终端的全面部署-虚拟终端网络工程实施
11. 毕业题目：Matlab GUI界面
12. 前端开发_HTML5_布局-div+css布局
13. 分享一下好用的本地格式化软件hijson，这个居然还有人要收费才能下载，真是醉了
14. win10 安装redis 解压版
15. OCR文本检测模型—CTPN
16. 试图将一个数学定理证明到最底层的数哲原理...
17. JZOJ5442【NOIP2017提高A组冲刺11.1】荒诞 三进制状压+欧拉序
18. 计算营业额python_告诉你怎么用Python进行企业营运分析！盈利这么多？
19. gitlab-runner错误之：New runner. Has not connected yet（runner注册成功到了gitlab，但是前面的图标是灰色三角形）
20. win10在电脑中添加新用户

热门文章

1. NuttX 入门笔记1 STM32F4Discovery 移植
2. 关于关闭QQ对话框的快捷方式
3. linux ubuntu 下禁用/启用touchpad
4. vue框架和uniapp框架区别,前端vue和uniapp哪个好用
5. PPP协议的简单了解
6. 【单片机自学笔记】(8)：c51中的复合赋值运算符，开发版上的数码管、74HC245、74HC138的使用方法，结构体数组
7. NVIDIA DALI从入门到放弃之四：Multiple GPU
8. android进阶4step3：Android常用框架——友盟推送简单使用(官翻)
9. 2021丨边缘计算领域值得关注的新书
10. 清华大学丁霄汉：深度网络重参数化——让你的模型更快更强