项目进行时——完整网页设计，Java实训

项目进行时——完整网页设计，Java实训

写在前面

1.个人经验总结，可能存在错误

2.一些解决方案来自他人博客，已注明。

前端

1.padding问题

2.屏蔽eslint检查

3.p标签的font-size影响p的margin：

修正：手动设置margin为0

4.element-ui的el-header等有默认属性，且优先级高；

需要内置height改变默认值

5.自定义CCS样式失效，采用了浏览器自定义样式

说明代码处有错：

注：ccs的注释格式不支持//

6.iconfont图标引入变为小方块：

原因：引入图标的class前要加 iconfont

7.auto设置失效

原因：auto只有在父类元素display:flex时生效，display：block时无效

8.页面禁止渲染，错误：TypeError: Cannot read property ‘_wrapper’ of undefined

cllick绑定方法在methods中不存在

9.element的el-input标签设置class=“”，但是样式无效

label-width也有同样的问题（width自定义无效）。

原因：el-input的封装问题，class并未到textarea层次

解决：直接使用textarea，或者在el-input上直接属性定义；

10.elment的form的函数resetFields()无效

原因：必须有prop并且不能重复

更改掉即可，
其他可能原因：:model何ref内容必须一样

11.elment的el-form-item的label默认为右对齐，且优先级高覆盖自定义样式。

解决：1.在自定义样式后加 !important提高优先级（个人尝试，无效果，未解决问题）
2.官方设置方式：

12.element的el-dialog的body部分默认会有padding: 30px 20px;且无法通过自定义ccs样式更改（解决更改使用的封装的默认样式问题）

解决方式：通过使用/deep/ 的方式

1.通过浏览器的检查，找到封装的样式的class名：

2.在局部的ccs样式中修改封装的默认样式：

/deep/ .el-dialog__body{
  padding-right: 0;
}

来源：https://www.cnblogs.com/yyh28/p/12992861.html
/deep/简单介绍：https://developer.aliyun.com/article/694810
https://www.jianshu.com/p/83907d4221cd

13.element的checkbox的多选框失效，选一个就都选中了

原因：el-checkbox必须设置label属性且不相同。

<el-checkbox-group class="wo-form-item-in" v-model="customerInfoForm.tag">
  <el-checkbox label="latent" name="latent"><span class="row-two-tag">潜在客户</span></el-checkbox>
  <el-checkbox label="compa" name="latent"><span class="row-two-tag">上市公司</span></el-checkbox>
</el-checkbox-group>
//即使多选的内容在内部写（如上面的span），还是要使用label来区分

14.用element分页的实例：

https://www.cnblogs.com/zhoulifeng/p/9395295.html
https://www.jb51.net/article/152479.htm
https://blog.csdn.net/qq_39057641/article/details/83061640

15.element的评分el-rate的texts设置无效：(在标签的参数中变量等js方式的方式)

原因：对于标签的参数内为js语言或变量时,需要在参数前加:

16.element的form表单的label文字加空格（el-form-item的参数label的另一种写法）

<el-form-item class="wo-form-item" :label-width="woFormLabelWidth" prop="others">
  <label slot="label">&nbsp;&nbsp;其他评价</label>	//通过slot参数
  <el-input type="textarea" width="314px" :rows="6" resize="none" class="ftextarea wo-form-item-in" v-model="CumstomerRateForm.others" placeholder="请输入内容"></el-input>
</el-form-item>

https://www.jianshu.com/p/d8e03f8fc17c

17.触发el-dialog对话框后，整个页面包括对话框都变灰了

原因：再某个地方设置position:fixed，一般在本文件中，怎么刷新都会这样；
如果不在本页面中刷新后会正常（最好style后加scoped）:

18.div在设置宽度后，还是被同一级别的div挤压导致宽度小于设定宽度

原因：暂时不明确，应该和样式的规定有关
解决方案：设置最小宽度；

19.解决el-menu刷新时不能保持状态不变的问题

（前提是index要设置为path名：

）
https://www.cnblogs.com/willend/p/9066962.html

20.解决vue this.$router.push 后页面不刷新

添加watch观察路由， 发生变化重新获取数据

https://www.cnblogs.com/thinkingthigh/p/7196435.html

21.vue项目更改项目名后：

Error: Cannot find module ‘array-includes’

当下载一个vue项目运行时，报错Error: Cannot find module ‘array-includes’
1.删除node_modules文件夹；
2.执行npm cache clean，不行的话就执行npm cache clean --force；
3.cnpm install
4.npm run dev
https://www.jianshu.com/p/a464a1ad5208

22.深拷贝

let tmp = JSON.stringify(this.customerInfoForm);
this.ci = JSON.parse(tmp);

https://segmentfault.com/a/1190000018371840

23.关于VUE2.0中v-if使用数组内的条件动态判断无法生效判断

https://blog.csdn.net/qq_31659129/article/details/99552612

24.端口连接报错500，（后端错误）

原因：后端有某个地方未对好
此处原因：.xml中使用了{commonWord.lib}等，但是对于自身entity对象的使用不用commonWord,
注意：.xml中sql语句使用的变量都是entity的对于对象内的成员

25.Cannot deserialize value of type java.util.Date from String “2020-07-14 01:15:34”: expected format ‘yyyy-MM-dd’T’HH:mm:ss.SSSX’, parsing fails (leniency? null))

 @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
 
private Date sendTime;	//在Date这个变量前加上上面这句

https://www.cnblogs.com/Jimc/p/13141171.html

后端

1.步骤

1）持久化

1.创建实体类

2.mapper接口（实际情况，应先建立业务层的函数，再返回做这一步）

标识@mapper

3.mapper.xml，实现数据库语句

2）业务层biz

1.添加biz接口，业务层功能实现的函数

2.添加biz下impl文件夹下：bizimpl，业务实现层

内部实现函数：

表示业务层 ：

依赖的持久化对象：

3)控制层

1.新建类

2.@Controller标识