天天看点
返回

前端成神之路-阿里百秀

项目简介

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

1. 功能模块

1.1 内容管理
模块 功能
用户 登录、退出、用户增删改查
文章 文章管理
分类 分类管理
评论 评论管理
网站设置 关键字、描述、网站logo、轮播图
1.2 内容展示
模块 功能
首页 导航、文章数据展示
列表页 根据分类显示文章列表
详情页 文章详情数据展示、实现评论功能

2. 开发模式

2.1 前后端混合开发模式

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

前端成神之路-阿里百秀

问题：

  1. 前后端开发人员对互相的代码都不是别熟悉，混合开发两者在处理互相的代码时非常困难
  2. 在开发的过程中难免会出现代码互相覆盖，导致工作量倍增
2.2 前后端分离开发模式
前端成神之路-阿里百秀

好处：职责、分工明确，独立开发，互不影响。

3. 项目架构

系统分层 使用技术
数据层 mongoDB
服务层 node.js (express)

4. 项目运行环境搭建

  1. 安装node.js软件并测试其是否安装成功
  1. win + R 开启windows系统中的运行程序，在运行程序中输入powershell回车，打开命令行程序
  2. 输入​

    ​node -v​

     ​命令查看node.js的版本，在命令行程序中输出了版本号没有报错即说明安装成功
  1. 安装mongodb、mongodb-compass软件
  2. 将阿里百秀项目文件夹复制到硬盘中（服务器端程序）
  3. 在命令行工具中进入到项目根目录中
  1. 按住shift键，点击鼠标右键，选择在此处打开powershell窗口
  1. 使用​

    ​npm install​

     ​命令安装项目所需依赖文件
  2. 将阿里百秀静态页面复制到public文件夹中
  3. 在命令行工具中输入node app.js开启项目

5. 项目搭建

  1. 数据库配置，为alibaixiu数据库创建普通账号

    （1）​

    ​mongo​

    ​ 进入mongodb数据库操作环境

    （2）​

    ​use admin​

    ​ 切换到admin数据库

    （3）​

    ​db.auth('root', 'root')​

    ​ 登录admin数据库

    （4）​

    ​use alibaixiu​

    ​ 切换到alibaixiu数据库

    （5）​

    ​db.createUser({user: 'itcast', pwd: 'itcast', roles: ['readWrite']})​

    ​ 创建账号

    （6）​

    ​exit​

     ​ 退出mongodb数据库操作环境
  2. 将阿里百秀项目文件夹复制到硬盘中（服务器端程序）
  3. 在app.js中配置数据库账号密码
  4. 使用命令行工具进行到项目根目录中
  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. 当用户前面的复选框按钮状态被改变时，要检查是否有用户处于未选中状态，如果有，取消全选按钮的选中状态，如果没有，就意味着所有用户都处于选中状态，此时将全选按钮设置为选中状态
  1. 管理批量删除按钮的状态
  1. 当全选按钮被选中时，显示批量删除按钮，当全选按钮被取消选中时，隐藏批量删除按钮
  2. 当用户前面的复选框按钮状态改变时，检查所有用户的选中状态，如果有用户被选中，显示批量删除按钮，如果所有用户都没有处于选中状态，隐藏批量删除按钮
  1. 实现批量删除用户功能
  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模板进行拼接，最终将拼接好的内容展示在页面中
vue 数据 表单 服务器端
上一篇: Ant vs Maven vs Gradle比较
下一篇: eclipse 安装Spring Tool Suite（sts），不行来打我

继续阅读