前端项目开始之前

802 阅读3分钟

前言

前端项目在开始之前可以做好一些准备工作,下面就谈谈本人比较关注的几个点。

代码规范

规范的代码可以让读者更方便阅读和维护。一般在开发前规定,可以和团队成员协商设置。

通常我们可以从这几个方面着手: 变量和函数的命名规则。 空格、缩进、注释的使用规则等等。

变量名和函数名推荐使用驼峰法命名即除第一个单词之外,其他单词首字母大写,例如 let getData = () => {}。 使用空格来缩进代码块。 一条语句通常使用分号作为结束符。 使用小写文件名,大多数web服务器对大小写敏感。 文件扩展名.css .js .html .scss 等等。

以上规则可以通过eslint和你使用的开发工具一起配合去统一设置。

项目目录结构

vue/react项目都适用。

src目录结构

src下可以有pages,components,assets,common,其中pages主要放页面,components主要放组件,assets主要放图片,字体等等,common主要放统一封装的request、util、api、url、pageUrl。

common下的request是对请求的重新封装,util是整个项目中用到的一些工具类方法,api是整个项目中的所有的请求的包装,同时每一个包装好的请求暴露出来的是一个promise。url是整个项目中用到的所有的请求路径。pageUrl是整个项目中用到的所有的页面路径。

根目录配置文件

.gitignore文件,它的作用是忽略某些文件,避免被提交到代码仓库。 .eslintignore文件,它的作用是忽略对某些文件作代码检查。 .eslintrc.js文件,它的作用是对文件按照配置好的规则进行代码检查。 package.json文件,它的作用可以是提供项目的相关信息,比如项目名,项目版本,项目依赖包,项目运行脚本等等。 nginx.conf文件,它的作用是部署到nginx服务器之后,可以转发项目中的请求到对应的服务器。

项目部署

现如今,基本大部分的项目都采用的是前后端分离,也就是说前端项目可以独立部署到web服务器。

部署工具可使用jenkins,它可以完成打包部署,也可直接通过文件上传工具,将打包好的文件夹上传到对应的web服务器,具体看所在公司的公司的基础服务。

打包部署之前,需要注意的是你希望所有的接口请求是通过反向代理去完成请求还是前后端设置跨域然后去完成请求。

个人推荐使用前者,如果有特殊需求你就用第二种。

前端项目中的所有的请求都通过反向代理去请求,好处就是通过反向代理的话,就不需要在前端处理跨域问题,同时也能不直接暴露具体提供服务的服务器。

代理

正向和反向代理都是代理,通俗易懂点的词就是中介。

正向代理类似一个跳板机,代理访问外部资源。 反向代理就像一道防火墙,所有来自intenet的请求都需要经过它,然后根据请求转发到内部网络对应的web服务器。

正向代理的用途:访问原来无法访问的资源,控制客户端可否上网。 反向代理的用途:保证内网的安全,阻止web攻击,负载均衡。

谢谢阅读!