使用vue實(shí)現(xiàn)查詢，顯示，刪除

端框架：vue.js

效果圖：

圖書管理顯示，查詢，刪除

頁(yè)面css樣式：

<style>

* {

margin: 0;

padding: 0;

}

#app {

width: 900px;

padding: 20px;

margin: 50px auto;

box-shadow: 0 0 10px #828282;

}

table,

td,

th {

border-collapse: collapse;

border-spacing: 0

}

table {

width: 100%

}

td,

th {

border: 1px solid #bcbcbc;

padding: 5px 10px

}

th {

background: #42b983;

font-size: 1.2rem;

font-weight: 400;

color: #fff;

cursor: pointer

}

tr:nth-of-type(odd) {

background: #fff

}

tr:nth-of-type(even) {

background: #eee

}

padding:20px;

}

button{

display: inline-block;

border:none;

background: #42b983;

padding:10px;

color:#fff;

width:80px;

border-radius: 20px;

cursor: pointer;

}

input{

width:80%;

padding:10px;

}

</style>

html代碼：

<h1>圖書管理系統(tǒng)</h1>

<p>

</p>

<table>

<thead>

</thead>

<tbody>

<td>{{ book.author }}</td>

<td>¥{{ book.price | prodFormart }}元</td>

</tr>

</tbody>

</table>

</div>

js代碼：

<!---導(dǎo)入外部vue.js->

var vm=new Vue({

el: "#app",

data: {

bookList: [// 模擬數(shù)據(jù)源

{

author: "[美] 瑞·達(dá)利歐 / 劉波、綦相 / 中信出版社",

price: 98.00

{

author: "[美] 羅伯特?T?清崎、莎倫?L?萊希特 / 楊君，楊明 / 世界圖書出版公司",

price: 18.80

{

author: "[美] 羅伯特·西奧迪尼 / 陳旭 / 中國(guó)人民大學(xué)出版社",

price: 45.00

bookName: ""

methods: {

doRemove: function (index) {

if (confirm("是否刪除該圖書？")) {

this.books.splice(index, 1);

}

computed: {// 實(shí)現(xiàn)查詢

books: function () {

var _this=this;

return _this.bookList.filter(function (book) {

return book.name.indexOf(_this.bookName) !=-1;

});

}

filters: {

prodFormart: function (val) {

return val.toFixed(2);

}

});

</script>

最終效果展示：

需要源碼的私信我噢

就廢話不多說(shuō)了，大家還是直接看代碼吧

//執(zhí)行的是刪除信息的操作
 String a=request.getParameter("name");
 a=URLEncoder.encode(a, "ISO-8859-1");
 String name=URLDecoder.decode(a, "UTF-8");
 String num=request.getParameter("num");
 System.out.println("name:"+name+"num:"+num);
 String sql="delete from person_info where name=? and num=?";
 String sz[]={name,num};
 JdbcUtils.update(sql, sz);

 //刷新操作\

 String sqls="select * from person_info";
 ResultSet rs=JdbcUtils.select(sqls, null);
 ArrayList<Person_info> list=new ArrayList<Person_info>();
 try {
 while(rs.next()){
 Person_info pi=new Person_info(rs.getString(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getString(5), rs.getString(6));
 list.add(pi);
 }
 request.setAttribute("list", list);
 request.getRequestDispatcher("Personnel_definition.jsp").forward(request, response);
 } catch (SQLException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 } 
  
 }

image.png

補(bǔ)充知識(shí)：關(guān)于分頁(yè)時(shí)怎么實(shí)現(xiàn)當(dāng)本頁(yè)面最后一條記錄被刪除時(shí),自動(dòng)向上一個(gè)頁(yè)面跳轉(zhuǎn)的實(shí)現(xiàn)（java實(shí)現(xiàn)）

問(wèn)題詳解

在做批量刪除時(shí)，發(fā)現(xiàn)若批量刪除整頁(yè)時(shí)，會(huì)自動(dòng)跳到第一頁(yè)首頁(yè)，而不是返回刪除當(dāng)前頁(yè)的上一頁(yè)，不符合產(chǎn)品要求且使界面交互不好，給用戶帶來(lái)糟糕體驗(yàn)。

思路詳解

在controller層傳參時(shí)要考慮到不僅要傳入需要?jiǎng)h除的id集合，同時(shí)傳入pageSize,pageNum以及總條數(shù)集合的查詢條件（如：本示例會(huì)傳入groupId(分組id)）,在刪除成功后初始化當(dāng)前頁(yè)，先根據(jù)查詢條件查詢出總條數(shù)數(shù)量，在pageSize不等于null或?yàn)?的情況下。算出余數(shù)[（pageSize*pageNum-count）%pageSize ].若余數(shù)為0，則當(dāng)前頁(yè)等于pageNum-1;若余數(shù)不為0，則當(dāng)前頁(yè)=pageNum.將結(jié)果當(dāng)前頁(yè)傳給前臺(tái)即可。

后臺(tái)代碼實(shí)現(xiàn)

controller層#

@Api(description="分組下的學(xué)生",value="分組下的學(xué)生")
@RestController
@RequestMapping("studentGroup")
public class StudentGroupController {
 @Autowired
 private RestStudentGroupService restStudentGroupService;
 
 @RequestMapping(value="deleteGroupStudent",method=RequestMethod.POST)
 @ApiOperation(value="刪除分組中的學(xué)生",notes="刪除分組中的學(xué)生")
 public ResponseObj deleteGroupStudent(@RequestParam(value="groupId",required=true)Long groupId,
   @RequestParam(value="ids",required=true)String ids,
   @RequestParam(value="pageSize",required=false)Integer pagesize,
   @RequestParam(value="pageNum",required=false)Integer pageNum){
 
 return restStudentGroupService.deleteGroupStudent(groupId,ids,pagesize,pageNum);
 }
 }

service層#

@FeignClient(value=ServiceName.VALUE)
public interface RestStudentGroupService {
 
 @RequestMapping(value="/school/cloud/student/deleteGroupStudent",method=RequestMethod.POST)
 public ResponseObj deleteGroupStudent(@RequestParam(value="groupId")Long groupId,
   @RequestParam(value="ids")String ids,
   @RequestParam(value="pageSize")Integer pagesize,
   @RequestParam(value="pageNum")Integer pageNum);
   }

serviceImpl層#

@Service
public class RestStudentGroupServiceImpl implements RestStudentGroupService {
 
 @Autowired
 private DubboStudentGroupService dubboStudentGroupService ;
 @Override
 public ResponseObj deleteGroupStudent(Long groupId,String ids,Integer pageSize,Integer pageNum) {
 
 List<Long> idList=TextUtils.split(ids);
 if(groupId==null || idList==null || idList.size()==0){
 ResponseObj responseObj=ResponseObj.ERROR("參數(shù)錯(cuò)誤");
 responseObj.setSuccess(true);
 return responseObj;
 }
 ServiceResult<Long> serviceResult=dubboStudentGroupService .deleteCorpGroup(idList, groupId);
 if(!serviceResult.getSuccess()){
 throw new RuntimeException("分組下學(xué)生查詢失敗");
 }
 //應(yīng)前端要求加此dto，封裝傳給前臺(tái)的當(dāng)前頁(yè)屬性
 CurrenPageDto currenPageDto=new CurrenPageDto();
 //初始化當(dāng)前頁(yè)
 Integer currentPage=1;
 //查出該分組id下的學(xué)生數(shù)量
 ServiceResult<Long> itemCountLongs=dubboStudentGroupService.getTotalCount(groupId);
 Long itemCountLong=itemCountLongs.getResult();
 Integer itemCount=itemCountLong!=null ? itemCountLong.intValue() : 0;
 //"查詢到學(xué)生數(shù)量：{},pageSize:{}", itemCount,pageSize;
 if(pageSize !=null && pageSize !=0){
 //算出余數(shù)
 Integer temp=(pageNum*pageSize-itemCount)%pageSize;
 if(temp==0){
 //余數(shù)為0的話就pageNum-1
 currentPage=(pageNum - 1)==0 ? 1 : (pageNum -1) ;
 }else {
 //余數(shù)不為0則等于pageNum
 currentPage=pageNum;
 }
 currenPageDto.setPresentPage(currentPage);
 }
 ResponseObj responseObj=ResponseObj.SUCCESS();
 responseObj.setData(currenPageDto);
 return responseObj;
 }
}

dubbo接口的service層#

①：//刪除分組下的學(xué)生
ServiceResult<Long> deleteCorpGroup(List<Long> idList,Long groupId);
②：//根據(jù)條件查詢對(duì)應(yīng)的條目總數(shù)
ServiceResult<Long> getTotalCount(Long groupId);

dubbo接口的serviceImpl層#

`①：``//刪除分組下的學(xué)生`

`@Override`

`public` `ServiceResult<Long> deleteCorpGroup(List<Long> idList, Long groupId) {`

`ServiceResult<Long> result=` `new` `ServiceResult<>();`

`try` `{`

`studentGroupDao.deleteCorpGroup(idList, groupId);`

`}` `catch` `(Exception e) {`

`log.error(``"調(diào)用{}方法 異常"``,` `"[RestStudentGroupServiceImpl .deleteCorpGroup]"``);`

`log.error(``"方法使用參數(shù)：[idList:{},groupId:{}]"``, idList, groupId);`

`log.error(``"異常信息：{}"``, e);`

`result.setErrMessage(``"調(diào)用deleteCorpGroup方法異常，異常信息："` `+ e.getMessage());`

`}`

`return` `result;`

`}`

`②：``//根據(jù)條件查詢對(duì)應(yīng)的條目總數(shù)`

`@Override`

`public` `ServiceResult<Long> getTotalCount(Long groupId) {`

`ServiceResult<Long> result=` `new` `ServiceResult<>();`

`try` `{`

`long` `count=studentGroupDao.getFindCorpGroupDirectoryCount(groupId);`

`result.setResult(count);`

`}` `catch` `(Exception e) {`

`log.error(``"調(diào)用{}方法 異常"``,` `"[RestStudentGroupServiceImpl .getTotalCount]"``);`

`log.error(``"方法使用參數(shù)：[groupId:{}]"``, groupId);`

`log.error(``"異常信息：{}"``, e);`

`result.setErrMessage(``"調(diào)用getTotalCount方法異常，異常信息："` `+ e.getMessage());`

`}`

`return` `result;`

`}`

 |

[](javascript：; "全選")[](javascript：; "復(fù)制java代碼")

<textarea style="margin: 0px; padding: 0px; outline: none; font: 16px / 24px tahoma, arial, 宋體;"></textarea>

#dubbo接口的dao層#

`①：``//刪除分組下的學(xué)生`

`Long deleteCorpGroup(``@Param``(value=` `"idList"``) List<Long> idList,``@Param``(value=` `"groupId"``) Long groupId);`

`②：``//根據(jù)條件查詢對(duì)應(yīng)的條目總數(shù)`

`Long getFindCorpGroupDirectoryCount(``@Param``(value=` `"groupId"``) Long groupId);`

 |

dubbo接口的sql#

①：//刪除分組下的學(xué)生
 <delete id="deleteCorpGroup">
 delete from student_group where group_id=#{groupId} and id in
 <foreach collection="idList" index="index" separator="," item="id"
  open="(" close=")">
 #{id}
 </foreach>
 </delete>
②：//根據(jù)條件查詢對(duì)應(yīng)的條目總數(shù)
 <select id="getFindCorpGroupDirectoryCount" resultType="long">
 SELECT COUNT(1)
 FROM student_group 
 where group_id=#{groupId}
 </select>

Entity類(學(xué)生分組類)#（get,set函數(shù)省略）

public class StudentGroup implements java.io.Serializable {

/**

private static final long serialVersionUID=1L;

/**

* @描述:

* @字段:id BIGINT(19)

private Long StudentGroupId;

/**

* @描述:

* @字段:group_id BIGINT(19)

private Long groupId;

/**

* @描述:

* @字段:id BIGINT(19)

* 此id為學(xué)生表id

private Long id;

/**

* @描述:創(chuàng)建時(shí)間

* @字段:create_time DATETIME(19)

private java.util.Date createTime;

* @描述:創(chuàng)建人用戶名

* @字段:create_user_name VARCHAR(``30``)

private String createUserName;

/**

* @描述:創(chuàng)建人用戶ID

* @字段:create_user_id BIGINT(19)

private Long createUserId;

/**

* @描述:更新時(shí)間

* @字段:update_time DATETIME(19)

private java.util.Date updateTime;

* @描述:更新人用戶名

* @字段:update_user_name VARCHAR(``30``)

private String updateUserName;

/**

* @描述:更新人用戶ID

* @字段:update_user_id BIGINT(19)

private Long updateUserId;

}

[](javascript：; "全選")[](javascript：; "復(fù)制java代碼")

著移動(dòng)端越來(lái)越火，要學(xué)的效果和實(shí)現(xiàn)的功能也越來(lái)越多，所以整理一下自己工作中會(huì)用到的一些效果，跟大家分享一下。當(dāng)然啦，也是為了以后用到的時(shí)候，更方便的使用！效果：

html

css

在線咨詢

上一篇：英雄聯(lián)盟網(wǎng)站，遮罩層效果 #程序員
下一篇：QQ瀏覽器打開(kāi)某網(wǎng)頁(yè)致vivo攝像頭升起騰訊：確認(rèn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

使用vue實(shí)現(xiàn)查詢，顯示，刪除

問(wèn)題詳解

思路詳解

后臺(tái)代碼實(shí)現(xiàn)

controller層#

service層#

serviceImpl層#

dubbo接口的service層#

dubbo接口的serviceImpl層#

dubbo接口的sql#

Entity類(學(xué)生分組類)#（get,set函數(shù)省略）

您的項(xiàng)目需求