实习总结二

蔚落 2022-06-12 14:59 186阅读 0赞

声明：实习总结不会写出公司核心代码，所以代码会将所有变量进行更改，如果哪里出现问题，请谅解。

## 思路： ##

### 后端： ###

首先创建PO对象。对传回来的对象，进行数据库操作。增、删、改。至于查询，则是刚进入到页面的时候便要进行查询，将数据返回到前端。所以需要两个接口，一个接口用来将查询的数据发送给页面。另一个接口需要对数据进行增删改。那么问题来了、传回来一组数据。你该如何对数据进行分类。进行增删改。我的思路是根据ID（也是数据库中插入数据的ID）。根据这个ID我们进行判断。如果进行删除，那么就将删除项的ID放进delID数组中。不需要的话，就获取PO对象，若改PO对象没有ID那么就是要创建的，则进行数据库的增加操作，如果有ID值，那么就进行更改操作。在此不进行数据的比较，直接进行更改。那么我前端传回来的数据，就不是一个PO对象，是一个VO对象。包含一个删除ID数组（String\[\]delID）和一个PO对象集合（List(Subject)）

### 前端： ###

前端界面已经写好，只需增加一个“添加”按钮、一个保存“按钮”和一个“删除”（×）。在刚打开界面的时候，获取后台数据，在界面遍历之后输出到相应的位置。当点击“×”时，此时将该条数据的ID放进delID数据中。

![Center][]

当点击“保存”按钮时，将编辑页面中的所有数据返回到后台。

## 流程： ##

### 后端： ###

Controller提供对外的接口。同时调用service方法（在这里不使用ServiceImpl是因为面向接口编程的思想）。ServiceImpl重写service方法。同时调用Dao层方法。创建PO对象。由于业务需要，创建Vo对象。

### 前端： ###

HTML页面调用controller.js中的方法。controller.js调用service.js方法来进行前后交互。同时在controller.js中使用state.go来实现url和HTML界面的跳转。

## 实现： ##

### 后端： ###

①创建PO对象：

![Center 1][]

第一行的注解：@Document(collection= "fi\_setting\_subject");是springdata mongodb的注解。在这里我只简单的解释一下。

@Document：

标注在实体类上，类似于[**hibernate**][hibernate]的entity注解，标明由mongo来维护该表。“fi\_setting\_subject”即为表名。subject及其父类的属性即为字段名。

org.springframework.data.mongodb.core.mapping.Document.class

把一个java类声明为mongodb的文档，可以通过collection参数指定这个类对应的文档。

@Document(collection="mongodb对应 collection名")

// 若未加 @Document，该 bean save到 mongo 的 user collection

// 若添加 @Document，则 save 到 reUser collection

@Document(collection="reUser")

publicclassUser\{

②创建VO对象：

![Center 2][]

③创建Dao方法：

![Center 3][]

④创建Service方法。

![Center 4][]

因为BaseService中存在save方法，所以一会在实现类直接重写就好。并不需要自己定义。

⑤编写serviceImpl。

![Center 5][]![Center 6][]

查询方法：

Queryquery.with(new Sort(Sort.Direction.Asc,”creatDate”));

这句话的意思是按照“creatDate”升序的条件进行查询。创建时间久的在前，新创建的在后面。

保存方法：

很简单的逻辑。因为传进来的是VO类，我们要讲PO类和delID拆开。放在两个数组中。然后对PO类进行逻辑判断。然后再判断delID是否为空。然后对其执行操作。

⑥创建controller。

![Center 7][]

controller中有几个注解：

**@ RequiresPermissions**：

shiro权限控制，只有这个权限的人才可以进行操作

![Center 8][]

**@RequestBody**：@RequestBody接收的是一个Json对象的字符串，而不是一个Json对象。然而在ajax请求往往传的都是Json对象，后来发现用 JSON.stringify(data)的方式就能将对象变成字符串。同时ajax请求的时候也要指定dataType:"json",contentType:"application/json" 这样就可以轻易的将一个对象或者List传到Java端，使用@RequestBody即可绑定对象或者List.

**@ RequestMapping**: RequestMapping是一个用来处理请求地址映射的注解，可用于类或方法上。用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。

前端：

界面一开始被前端的人只做成一个假的。我需要把它变成一个动态表格。点击添加按钮，多出来一排（一个对象）。

![Center 9][]

这里有几个函数，是我新掌握的：ng-repeat;ng-model;ng-click;track by;

被标记的地方是页面展示出的序号：

![Center 10][]![Center 11][]

通过trackby 方法绑定，使得的序号依次增加一

“添加”按钮通过调用addSubject方法。方法写在对应的controller中。

![Center 12][]

当前页面就会去遍历subjectList数组（脏检查）。当多一个成员时，那么就会多出来一行。

当点击保存按钮时，因为前后交互的是VO对象，所以我们需要定义一个：

![Center 13][]

然后将saveData传回后台。

![Center 14][]

在service方法中利用ajax进行数据传递:

![Center 15][]

然后在后台获取到data值。

当我们刚进入到页面时，需要从后台获取数据，所以我将方法写在refresh函数中：

![Center 16][]

这样就可以在刚进入页面时，遍获取数据同时显示。

## 问题： ##

**问题1：**在页面点击添加按钮。确实出现一行，但是同时添加多个之后，发现新加行内的数据都一样，所以说明新加行都是一个对象。所以更改添加函数，每次调用添加函数时，创建一个新的对象。问题解决。附添加函数代码

**问题2：**数据显示按照数据创建时间进行排序。

既然显示的数据是后台传过来的，那么我就在查询的时候就按创建时间查询“creattime”:

Query query.with(new Sort(Sort.Direction.ASC,"createDate"));

然后调用封装好的方法，进行查询。MongoDb查询（SpringData JPA）

**问题3：**将数据传回后台一直失败

问题报错是：Could not readJSON: Can not deserialize instance   ofcom.xx.xx.xx.xxxx.xxxxxVo out of START\_ARRAY token;一开始认为是json数据格式有问题，所以读不到。结果其实也是。后来需要的是一个Vo类型数据，里面包含两个属性（String\[ID\]，List(subject)）,而我前端只是传输了一个List数据，当然不行。所以定义一个对象，和后端的Vo对象匹配。问题解决。

**问题4：**在删除ID的同时，也会创建一个新的数据

没有在后台没有进行逻辑判断。判断插入数据空，因为使用paostman进行数据测试。

[Center]: /images/20220612/1774666b4d4643419f64aae247a5d2cc.png
[Center 1]: /images/20220612/1827b7d54eea4f37aa230868dcad3e8d.png
[hibernate]: http://lib.csdn.net/base/javaee
[Center 2]: /images/20220612/10a789900aac41d396f1b24064926a0d.png
[Center 3]: /images/20220612/3ad5628df9b0400b9f21b52685b3dae2.png
[Center 4]: /images/20220612/c28206b3637547fca1196bd78891d11c.png
[Center 5]: https://img-blog.csdn.net/20170725140903138?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamF2YV95ZXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: /images/20220612/2c127df71f4841189b65b68d8d8587d2.png
[Center 7]: /images/20220612/93ba7947436747f38cfde2fc3650bb51.png
[Center 8]: /images/20220612/2ef91f77510c451b9f761cc985579714.png
[Center 9]: /images/20220612/eff71e863c294a8c88b81cc47f9c7214.png
[Center 10]: https://img-blog.csdn.net/20170725141602259?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamF2YV95ZXM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 11]: /images/20220612/8d5ab2c141ff47679fb1f4e8114e2a3d.png
[Center 12]: /images/20220612/d9b94c1dfede433eaed89bf2e07235ee.png
[Center 13]: /images/20220612/3d4d65c2c5864ac3add1e0d53d55b658.png
[Center 14]: /images/20220612/b4dbf4ba8991402a882354d8c2619c12.png
[Center 15]: /images/20220612/5486e4ff47c74485bb5aec65f80c0019.png
[Center 16]: /images/20220612/3ba6f0fefa2a4de999f0977bc07d21d3.png