1 项目的组织结构
图1 项目组织机构示例
项目的组织机构很重要,应该设计结构分明、方便识别的文件组织结构,如图1所示。其中项目要有一个项目目录,项目的导入程序要在根目录下,不要放在java之下或者在其他子目录中。这样可以充分利用其在导入程序时自动扫描根目录及其子目录下组件的功能,避免进行扫描路径设置的麻烦。
2 refactor/rename问题
在开发过程中不可避免的修改文件名,可用refactor/remae工具进行修改,在修改文件名的同时会自动搜索其他文件中引用该文件名标识符并同步修改。但是,如果引用数太多时,也会有出现遗漏的情况,需要程序员手动修改;也有的修改后出现路径问题,也需要程序员手动修改。
3 跨域访问
3.1 资源文件
1 <!--script type=“text/javascript” th:src="@{/bootstrap-4.2.1-dist/js/bootstrap.min.js}">
</script-->
2 <script type=“text/javascript” src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
图2 导入库文件
导入公共库的有两种方法:
(1)在官网下载库文件(bootstrap),解压缩后找到文件(bootstrap.min.js)复制粘贴到您正在开发的项目下,具体放在工程里面的哪一级哪个目录下自己决定,然后在需要用到该框架的.html文件里用<link>标签引入bootstrap.min.css,用<script>标签引入bootstrap.min.js。如图2 第1行所示。
(2)不需要下载任何文件,使用BootstrapCDN快速地将 Bootstrap 应用到你的项目中,如图第2行所示。
在跨域应用中使用第一章方法会导致访问不到资源情况出现,此时应该改用第二种方法。
3.2 axios
1 // xx='/utest'
2 xx='http://k53110w9.zicp.vip/utest' //构造路由
3 axios.post(xx, //url
{//数据 },
{headers: //设置header
})
.then(function (res) { //处理返回数据
})
图3 一个axios例子
前端编程经常用到axios进行数据存取从中,通常我们会采用相对路径编程方式,例如图3中第1行(已经注释掉)。但是这种方式在跨域时会出现找不到资源的情况,此时应该改用全路径方式(明确指明服务器),例如图3中的第2行