2021-10-17

2021SC@SDUSC

智能研究中心快递柜学习笔记3

api(Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

api.js里定义了角色管理、用户管理、权限管理、分级部门管理、日志管理、数据字典、验证登录、修改密码、系统通告、重复校验、获取系统访问量等类型接口。

例如角色管理：

//角色管理

const addRole = (params)=>postAction("/sys/role/add",params);

const editRole = (params)=>putAction("/sys/role/edit",params);

const checkRoleCode = (params)=>getAction("/sys/role/checkRoleCode",params);

const queryall = (params)=>getAction("/sys/role/queryall",params);

有添加、编辑、审计、查询所有四种状态角色

在manage.js中引用了axios（主要是用于向后台发起请求的，还有在请求中做更多是可控功能。是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。）包含了下载文档，excel导出、文件上传、获取文件服务访问路径等函数。 

assets文件，保存资源文件，存储图片等文件，编译时，系统不会编译assets下的资源文件，而是以原始方式保存。可以通过assetmanager操作这些文件。

less文件，less是一种css的扩展和动态样式表语言，css预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。less是一种开源语言，也是跨浏览器兼容的语言。

css预处理器是一种脚本语言，是css的扩展。它被编译成常规的css语法，然后由Web浏览器读取css。与css非常相似，但提供了诸如变量，函数，混合和操作等功能，可以帮助构建动态css。

less是用JavaScript编写的，需要运行Node.js或Web浏览器。我们可以在网站中包含less.js，它可以实时编译所有链接的.Less样式表。

优缺点：

优点：

1、是一个css预处理器。编译后，它会生成简单的css，适用于浏览器。

2、支持跨浏览器兼容性。

3、使用嵌套，使得代码更短、更干净，并以特定的方式组织

4、使用变量，可以更快地实现维护。

5、提供了一系列运算符，使编码更快，更省时。

6、提供@mport规则，可以轻松地处理外部文件。

7、提供了合并属性，接受多个值，如transform，transition和box-shadow。

8、用JavaScript编写的，它可以比css的其他预处理器更快地编译。

缺点：

1、与包含Compass，Gravity和Susy等框架的SASS等较早的预处理器相比，Less提供的框架更少。

2、在Less中，模块之间存在紧密耦合，因此重用和/或测试相关模块需要花费更多精力。

Common.less主要包括按钮定义（区域、间距等）列表控制（元素位置、大小、滚动条设置、图片显示、范围查询、内嵌子表样式等）

Index.less规定了列表查询通用样式，添加了移动端自适应功能

@media screen and (max-width: 900px)……

JAreaLinkage是实现地区联动的文件

参数名	类型	默认值	必填	说明
value(v-modal)	String		是	绑定值
type	String	cascader		控件的显示类型
width	String	100%		控件的宽度

type参数的可选值

• cascader 级联样式
• select 下拉样式

部分类选择器定义如下

.area-select {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  color: rgba(0, 0, 0, 0.65);

  font-size: 14px;

  font-variant: tabular-nums;

  line-height: 1.5;

  list-style: none;

  font-feature-settings: 'tnum';

  position: relative;

  outline: 0;

  display: block;

  background-color: #fff;

  border: 1px solid #d9d9d9;

  border-top-width: 1.02px;

  border-radius: 4px;

  outline: none;

  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

  -webkit-user-select: none;

  -ms-user-select: none;

  user-select: none;

}

.cascader-menu-list {

  position: relative;

  margin: 0;

  font-size: 14px;

  color: #565656;

  padding: 6px 0;

  list-style: none;

  display: inline-block;

  height: 204px;

  overflow-x: hidden;

  overflow-y: auto;

  min-width: 160px;

  vertical-align: top;

  background-color: #fff;

  border-right: 1px solid #e4e7ed;

}

 TableExpand.less中选用了jeecgboot的表格主题样式一（强制列不换行，列自适应但会导致列宽失效）