多用户博客服务器Day5

发表于 | 更新于

博客系统设计思路流程：

  1. 设计

    • 数据设计
    • 前后端接口设计

  2. 编码

    • 封装数据库操作（Model）
    • 封装了服务区API（Ctrl ler 层）
    • 实现客户端代码（实现一组网页）

距离大功告成也就只剩下前端部分的设计，因为第一次接触前端开发。所以前端开发，只能对网上的模板进行修改，边查文档边修改。

网页开发三剑客：

  • HTML：表述网页的基本结构
  • CSS：表述网页中每一部分是什么样式
  • JavaScript：表述网页和用户之间的交互动作

前端框架采用Vue.js

中文文档

上手简单

下载好模板，对模板做一下“减法操作”，将网页代码先打包，然后上传到服务器，解压缩包，将网页代码放到服务器目录下。

让服务器访问到客户端页面操作：

上传到client_code目录下的网页代码都是静态文件，连接到服务器的时候需要让服务器去访问到client_code目录下的静态文件(网页代码)，用户才能在浏览器响应的网页

在服务器代码中通过set_base_dir(“./path”)设置访问目录，在server_code目录下执行

1
2
> ln -s ..client_code path
>

符号链接操作，在server_code 目录下创建了一个链接文件path，将path和client_code目录关联在一起，再去访问path就和访问client_code一样了

vue.js

各种前端框架最主要的功能是为了方便才做界面，代码往往涉及两个方面：

  • html中需要配套代码
  • js中也需要配套代码，js中执行一些操作，就会影响到html中的一些相关内容

点标签，显示所有次标签对应的文章

markdown

提交，储存博客的时候，都可以使用markdown的格式来表示，展示的时候，就自动把markdown数据转换成html格式的数据

Editor.md 第三方的JS的库，完成markdown和html相互之间的转换，以及markdown在先编辑的功能。

当前使用了一个取巧的办法，来实现列表页和详细页的切换，但是，vue router组件能更好的完成这件事情

博客列表页，博客详情页

博客管理页

删除博客

编辑博客

点击标题进入编辑页面，编辑页面中应该有一个markdown编辑器，编辑器里面的内容已经是博客当前内容了，编辑完成之后，点击提交按钮，就将数据发送到服务器上

插入博客