Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 中文字幕日本一级高清片,不卡一区二区三区卡,国产午夜不卡精品午夜电影 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          使用vue實現(xiàn)查詢，顯示，刪除
          
        
           
          
	
	
          
		使用vue實現(xiàn)查詢，顯示，刪除
          
                        
          端框架：vue.js
          效果圖：

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

          頁面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
           }
           p{
           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代碼：
          <div id="app">
           <h1>圖書管理系統(tǒng)</h1>
           <p>
           <label>圖書名稱：</label>
           <input type="text" v-model="bookName" placeholder="請輸入圖書名稱關鍵字..." />
           </p>
           <table>
           <thead>
           <th>名稱</th>
           <th>作者</th>
           <th>單價</th>
           <th>操作</th>
           </thead>
           <tbody>
           <tr v-for="(book,index) in books">
           <td>{{ book.name }}</td>
           <td>{{ book.author }}</td>
           <td>¥{{ book.price | prodFormart }}元</td>
           <td><button type="button" @click="doRemove(index)">刪除</button></td>
           </tr>
           </tbody>
           </table>
           </div>

          js代碼：
          <!---導入外部vue.js->
          <script src="./js/vue.min.js"></script>
           <script>
           var vm=new Vue({
           el: "#app",
           data: {
           bookList: [// 模擬數據源
           {
           name: "原則",
           author: "[美] 瑞·達利歐 / 劉波、綦相 / 中信出版社",
           price: 98.00
           },
           {
           name: "爸爸，窮爸爸",
           author: "[美] 羅伯特?T?清崎、莎倫?L?萊希特 / 楊君，楊明 / 世界圖書出版公司",
           price: 18.80
           },
           {
           name: "影響力",
           author: "[美] 羅伯特·西奧迪尼 / 陳旭 / 中國人民大學出版社",
           price: 45.00
           },
           ],
           bookName: ""
           },
           methods: {
           doRemove: function (index) {
           if (confirm("是否刪除該圖書？")) {
           this.books.splice(index, 1);
           }
           }
           },
           computed: {// 實現(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>
          最終效果展示：
          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          需要源碼的私信我噢
          就廢話不多說了，大家還是直接看代碼吧
          //執(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


          補充知識：關于分頁時怎么實現(xiàn)當本頁面最后一條記錄被刪除時,自動向上一個頁面跳轉的實現(xiàn)（java實現(xiàn)）
          問題詳解
          在做批量刪除時，發(fā)現(xiàn)若批量刪除整頁時，會自動跳到第一頁首頁，而不是返回刪除當前頁的上一頁，不符合產品要求且使界面交互不好，給用戶帶來糟糕體驗。
          思路詳解
          在controller層傳參時要考慮到不僅要傳入需要刪除的id集合，同時傳入pageSize,pageNum以及總條數集合的查詢條件（如：本示例會傳入groupId(分組id)）,在刪除成功后初始化當前頁，先根據查詢條件查詢出總條數數量，在pageSize不等于null或為0的情況下。算出余數[（pageSize*pageNum-count）%pageSize ].若余數為0，則當前頁等于pageNum-1;若余數不為0，則當前頁=pageNum.將結果當前頁傳給前臺即可。
          后臺代碼實現(xiàn)
          controller層#
          @Api(description="分組下的學生",value="分組下的學生")
@RestController
@RequestMapping("studentGroup")
public class StudentGroupController {
 @Autowired
 private RestStudentGroupService restStudentGroupService;
 
 @RequestMapping(value="deleteGroupStudent",method=RequestMethod.POST)
 @ApiOperation(value="刪除分組中的學生",notes="刪除分組中的學生")
 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("參數錯誤");
 responseObj.setSuccess(true);
 return responseObj;
 }
 ServiceResult<Long> serviceResult=dubboStudentGroupService .deleteCorpGroup(idList, groupId);
 if(!serviceResult.getSuccess()){
 throw new RuntimeException("分組下學生查詢失敗");
 }
 //應前端要求加此dto，封裝傳給前臺的當前頁屬性
 CurrenPageDto currenPageDto=new CurrenPageDto();
 //初始化當前頁
 Integer currentPage=1;
 //查出該分組id下的學生數量
 ServiceResult<Long> itemCountLongs=dubboStudentGroupService.getTotalCount(groupId);
 Long itemCountLong=itemCountLongs.getResult();
 Integer itemCount=itemCountLong!=null ? itemCountLong.intValue() : 0;
 //"查詢到學生數量：{},pageSize:{}", itemCount,pageSize;
 if(pageSize !=null && pageSize !=0){
 //算出余數
 Integer temp=(pageNum*pageSize-itemCount)%pageSize;
 if(temp==0){
 //余數為0的話就pageNum-1
 currentPage=(pageNum - 1)==0 ? 1 : (pageNum -1) ;
 }else {
 //余數不為0則等于pageNum
 currentPage=pageNum;
 }
 currenPageDto.setPresentPage(currentPage);
 }
 ResponseObj responseObj=ResponseObj.SUCCESS();
 responseObj.setData(currenPageDto);
 return responseObj;
 }
}

          dubbo接口的service層#
          ①：//刪除分組下的學生
ServiceResult<Long> deleteCorpGroup(List<Long> idList,Long groupId);
②：//根據條件查詢對應的條目總數
ServiceResult<Long> getTotalCount(Long groupId);

          dubbo接口的serviceImpl層#
          `①：``//刪除分組下的學生`

`@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(``"調用{}方法 異常"``,` `"[RestStudentGroupServiceImpl .deleteCorpGroup]"``);`

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

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

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

`}`

`return` `result;`

`}`

`②：``//根據條件查詢對應的條目總數`

`@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(``"調用{}方法 異常"``,` `"[RestStudentGroupServiceImpl .getTotalCount]"``);`

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

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

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

`}`

`return` `result;`

`}`

 |

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

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

#dubbo接口的dao層#

`①：``//刪除分組下的學生`

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

`②：``//根據條件查詢對應的條目總數`

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

 |

          dubbo接口的sql#
          ①：//刪除分組下的學生
 <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>
②：//根據條件查詢對應的條目總數
 <select id="getFindCorpGroupDirectoryCount" resultType="long">
 SELECT COUNT(1)
 FROM student_group 
 where group_id=#{groupId}
 </select>

          Entity類(學生分組類)#（get,set函數省略）
          |
          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為學生表id
          */
          private Long id;
          /**
          * @描述:創(chuàng)建時間
          * @字段: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;
          /**
          * @描述:更新時間
          * @字段: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：; "復制java代碼")
          <textarea style="margin: 0px; padding: 0px; outline: none; font: 16px / 24px tahoma, arial, 宋體;"></textarea>
          著移動端越來越火，要學的效果和實現(xiàn)的功能也越來越多，所以整理一下自己工作中會用到的一些效果，跟大家分享一下。當然啦，也是為了以后用到的時候，更方便的使用！效果：
          html
          css
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
无码丰满熟妇一区二区|
日韩人妻无码一区二区三区|
无人码一区二区三区视频|
国产乱码精品一区二区三区香蕉|
国产在线精品一区免费香蕉|
亚洲色婷婷一区二区三区|
国产伦精品一区二区三区免费下载|
精品性影院一区二区三区内射
|
国产大秀视频一区二区三区
|
精品国产日产一区二区三区|
一区二区三区午夜|
国产成人av一区二区三区在线观看|
亚洲综合一区二区精品导航|
九九久久99综合一区二区|
成人精品视频一区二区三区不卡|
国产精品被窝福利一区|
天码av无码一区二区三区四区|
国产福利一区二区精品秒拍|
无码一区二区三区在线|
国产精品av一区二区三区不卡蜜|
中文字幕人妻第一区|
韩国理伦片一区二区三区在线播放
|
亚洲一区精品无码|
东京热人妻无码一区二区av|
中文字幕一区二区三区有限公司
|
日韩精品一区二区午夜成人版|
成人区人妻精品一区二区不卡|
色天使亚洲综合一区二区|
日本一区高清视频|
乱色熟女综合一区二区三区|
精品久久久久一区二区三区|
久久精品无码一区二区日韩AV|
中文字幕日韩一区二区三区不|
精品人妻少妇一区二区三区|
亚洲一区爱区精品无码|
亚洲AV无码一区二区三区在线|
精品无人乱码一区二区三区|
精彩视频一区二区三区|
中文字幕无码一区二区三区本日|
高清在线一区二区|
国产一区二区在线观看app|