开发前期的一些准备【暂停更新】
本文档部分工具主要适用于react+node开发
前期准备——相关前端样式工具
插一个UI设计中的技巧,如果你决定用某个框架写前端eg.react,那么将经常用到antd的插件,则在设计界面的时候可以从antd官网下载库到Axure软件里,这样antd原生样式的控件就触手可得了,而且这样画出来的UI和实际开发出来的页面相似度高,也可以在前期设计的时候更多的了解和选择更合适的控件~
1、按钮悬浮样式
有较多细节话按钮样式
2、数据可视化图表
文档较为齐全、学习成本较低
3、阿里巴巴图标库
大部分图标精美、成套好用,ui(甚至做海报、ppt都可以用)如果是开发可以选择库自带的例如antd里的icon
4、渐变色配色
适合简单网页中的调色搭配,避免纯色过于呆板
5、免费高清图片网站
图片大多独立不成套,适合找少量图片做轮播或者背景用
注意:
(1)参考现成的组件时,文档介绍很重要,需要多渗透官方文档,具体实现可以参考一些实例
(2)一些国外网站可能加载比较慢可以尝试网上找镜像地址,可以快速访问(eg.antd的镜像网址)
(3)一个系统的配色最好提前定下基调和重复地方的颜色搭配,写到公共文档里大家方便查阅,例如按钮的大小颜色,一些框内文字开始位置(上下左右间距)可以在ui设计环节就定好统一合理的样式,尽量少地一边开发一边改ui
前期准备——相关前后端问题
1、API参考文档
主要用来参考格式,整洁通俗易懂
2、登录前后端短信验证
开源代码,便于学习,一般用于登录验证信息
前期准备——学习路径
1、react视频学习
提取码:cfdb
2、react组件图片上传
关于antd的上传踩坑
3、慕课平台
学习以下相关章节5-1 5-2 6-1 7-2 8-1
4、node开发b站视频
建议最少看6节,熟悉大致流程 ,可以下载项目代码实践一下(和数据库连接的操作参考例子)
5、10种跨域解决方案(附终极大招)
重点看CORS 后端通常会使用,前端这里使用在 package.json中标注proxy 的方法,参考这里
6、Restful API规范
RESTful 是目前最流行的 API 设计规范,用于 Web 数据接口的设计。
7、ES6
前期准备——开发工具(VS Code)
1、开发工具的配置
配置推荐文章一
配置推荐文章二
拓:1、头部注释:koroFileHeader
2、github相关的配置
3、用npm、node等开发也需要一定的安装,可以自行按需搜索一下
主要推荐大家安装一些代码自动补全和自动生成注释的一些功能,自动补全可以提醒代码的编写,可以自动补上一对标签的另一半,可以修改一个标签时自行修改另一半标签等,这些功能都可以提高编写效率。(关于整体颜色看个人习惯,不建议“尝新”,另外送大家一个vscode背景图插件:background-cover,可以给自己vscode设一个自己喜欢的背景)
菜鸡学习积累,如果错误欢迎大佬指正