Summary for Full Stack Project(I)

Review for Bilding A Simplest Full Stack Project(FrontEnd)

项目地址: Journey

这次犯了大错误 把后端放在Host branch了 糟糕的工程习惯 下次一定要将他们分开repo

For full stack projects, the basic components are frontEnd for display, backEnd for process and a Database for storage. We all know that information transfering in the network contain dozens of requests and responses. Based on different protocols, we are able to connect and enjoy Internet. Through different requests and responses, We are able to get a project alive.

Ah, Seems a little away from the topic~~No problem!

Create a simple frontEnd with Create-react-App

Create a simple backEnd with Koa.js

Create a simple dataBase with mariadb

这篇主要总结前端踩到的坑 附赠征文系统的主题 自由的鸡

About the Project

本次项目是实现在线征文上传系统 说白了是富文本编辑 需求非常的简单 对于数据库的操作也只需要INSERT即可 整体业务逻辑就是 前端发送请求到后端 后端收到信息 并发送至数据库存储起来 就这样 没有了 没有了 没有了

Front End

Create-react-app 是一个非常方便的集成开发包 package都帮你配好了 直接

1
2
$ npm install create-react-app
$ npm start

就可以使用 查看demo
当然 在安装了serve以后 可以serve -s build开启局域网服务(又扯远了)

Braft-Editor 非常良心的富文本编辑开源库 对于富文本编辑的支持非常的详细 省了不少力

Review

对于JSX的CSS设置

  • 在标签中嵌入属性 需要应用驼峰命名法 例如 className onClick
  • 在设置 outline: noneborder: 0px 0px的冲突
  • 对于position: relative的相对设置 以及危险的absolute
  • 移动端的css设定: 对于这个棘手的问题 我的解决方法是
1
2
3
4
5
let isMobile = false

if(window.innerWidth <= 600){
isMobile = true
}

非常不优雅的解决方式 但是将这个设置进入state更是一件丢人的事 更好的解决方法应该是使用css的Media Query 然后再糊一些stylus 这边偷懒了… (并不想写CSS)

对于判别完的CSS进行了三目表达式操作 感觉应该优化

Bind事件函数

在设置this的触发函数时 不能忘了添加bind
例如:

1
this.sendRequest = this.sendRequest.bind(this)

React组件化

这次实现了将Footer和Input进行了组件化处理 尽量减少全局变量的使用 (毕竟是LVVM)
具体还有坑 以后再补充

对后端的通信

这里就要提一下 对于Braft Editor 官方Doc里虽然很详细 但是使用原生XML Request写的 用起来不是很舒服 也不能await. 于是这里用了Fetch(用法详细参照前几篇关于爬虫的post) 还是挺好的 之后就是 POST request至后端 关于Media图片上传的坑:

  • 后端需要运行Nginx 并且在/etc/nginx.conf中进行修改 才能实现图片上传
    这里是一个大坑 对于执行的root可能不允许超级管理员访问 于是暴力的将配置文件中的用户强行改成了当前用户fish

上传图片:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
uploadFn = (param) => {
const formData = new FormData()
for(var name in param) {
formData.append(name, param[name]);
}
fetch(`${config.url}${config.imagePort}`, {
method: 'POST',
body: formData
}).then((res) => {
console.log(res)
if(res.status === 200){
successFn(res)
} else{
errorFn(res)
}
}
)

const successFn = (response) => {
response.json().then(txt => {
param.success({
url: `http://localhost/${txt}`
})
})

setTimeout(2000)
windows.location = config.navSite
}

const progressFn = (event) => {
param.progress(event.loaded / event.total * 100)
}

const errorFn = (response) => {
alert("error")
}
}

非常粗略的重现了一下 大致是这样的逻辑

  • 图片上传失败会导致资料库无法添加 而对于Braft-Editor的数据获取 就是在editorProps里的content(和RawContent相应)

最后总结前端架构: 整个项目时间消耗太多 而且并不美观 希望能更熟练使用CSS 对于平面页面的设计 能够更好

Share