创建微博

创建数据模型

回顾数据模型设计

步骤

1. db-model下新建Blog.js：
2. db-model-index.js中统一输出数据模型 并 创建外键关系：
3. 同步到数据库（建表）：执行sync.js:node src/db/sync.js
4. 查看数据库：建表成功：查看外键关系：
5. 由于执行了同步，所以数据库中users表清空了，需要再次重新注册用户。

页面和模板

回顾模板技术方案

查看模板代码

2. 【首页】 src-views下，修改原本的index.ejs（首页）：
3. 【input组件(微博输入框)】 src-views下，**删除原本自带的widgets中的文件，新建input.ejs(微博输入框)**：
   • trim() 方法：去除字符串的头尾空格
   • 注意：上传图片的change事件必须在插入图片的click事件外进行绑定，否则每次点击“插入图片”时就会绑定一个change事件（即点击几次“插入图片”就会绑定几个change事件=》发送几次ajax请求），这样子第3次点击上传图片时就会一次性发出3个ajax请求：
   • $filePicture[0].files[0]:
     • files[0]是JavaScript中DOM元素的files属性FileList 对象
     • $('xx')是jQuery对象
     • $('xx')[0]是将jQuery对象($('xx'))转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法
     • jQuery对象只能使用jQuery对象的属性和方法，JavaScript对象只能使用JavaScript对象的属性和方法
     • 补充：$('xx')[0].files[0].size可获得文件的大小，单位是字节（B），使用$('xx')[0].files[0].size可用于判断文件的大小。

开发页面路由

1. 删除框架自带的routes下的index.js，同时删除app.js中该路由的引入和注册
2. 新建页面路由：src-routes-view下，新建blog.js：
3. app.js中注册页面路由：app.js，引入并注册页面路由：
4. 测试：登录后访问首页：目前只有一个输入框

创建微博的上传图片功能

• 还是使用原本的上传图片api，上传的图片名称对应在页面上：

开发接口路由

回顾架构设计图

步骤

1. 【路由层】创建路由，获取前端数据，传递并调用controller层的create函数： input.ejs中可看到发布微博的路由是/api/blog/create，传递的参数是content、image，所以在routes-api下新建blog-home.js作为博客首页的API：
2. app.js注册路由：
3. 【controller层】创建create函数，调用service层createBlog函数来创建微博： controller下新建blog-home.js
4. 【service层】创建createBlog函数：service下新建blog.js：
5. 测试：输入“你好呀”后点击“发表”，数据库中添加成功：带图片测试：

xss攻击

• 例子：如果在输入框输入这段js代码后成功存储到数据库后，前端读取时就会在弹框中带出cookie的信息
• 可参考博客项目安全/xss攻击（xss库（函数））

使用xss工具（xss函数）

• 可以使用xss工具的xss函数帮助过滤尖括号（转译特殊字符）
• 安装：npm i xss --save --registry=https://registry.npm.taobao.org
• 使用：controller-blog-home.js中，引入并使用xss：
• 原理和具体效果：可参考博客项目安全/xss攻击（xss库（函数））

blogs表 数据格式校验

1. 编写微博内容的校验规则、创建校验微博数据格式的函数： validator下新建blog.js：
2. 和users表的数据校验通用一个genValidator来生成 格式校验的中间件
3. 【路由层】添加中间件进行格式校验：routes-api-blog-home.js: