springboot html vue.js 前後分離代碼示例

来源:https://www.cnblogs.com/m13002622490/archive/2022/03/24/16050295.html
-Advertisement-
Play Games

一,什麼是事務(本地事務)? 指作為單個邏輯工作單元執行的一系列操作,要麼完全地執行,要麼完全地不執行。 簡單的說,事務就是併發控制的單位,是用戶定義的一個操作序列。 而一個邏輯工作單元要成為事務,就必須滿足ACID屬性。 A:原子性(Atomicity) 事務中的操作要麼都不做,要麼就全做。 C: ...


1.html

<table class="table table-hover">
    <thead>
      <tr>
		<th style="width: 50px;" id="cts">
		<div class="checkbox d-inline">
		     <input type="checkbox" name="fhcheckbox" id="zcheckbox">
		     <label  style="max-height: 12px;" for="zcheckbox" class="cr"></label>
		     </div>
				</th>
		<th style="width: 50px;">NO</th>
		<th>名稱</th>
		<th>許可權標識</th>
		<th>備註</th>
		<th>操作</th>
		</tr>
       </thead>
	<tbody>
		<!-- 開始迴圈 -->	
		<template v-for="(data,index) in varList">
		<tr>
			<td><div class="checkbox d-inline"><input type="checkbox" v-bind:id="'zcheckbox'+index" name='ids' v-bind:value="data.FHBUTTON_ID"<label  style="max-height: 12px;" v-bind:for="'zcheckbox'+index" class="cr"></label></div>
			</td>
			<td scope="row">{{page.showCount*(page.currentPage-1)+index+1}}</td>
			<td>{{data.NAME}}</td>
			<td>{{data.SHIRO_KEY}}</td>
			<td>{{data.BZ}}</td>
			<td>
				<a v-show="edit" title="修改" v-on:click="goEdit(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-edit-2"></i></a>
				<a v-show="del" title="刪除" v-on:click="goDel(data.FHBUTTON_ID);" style="cursor:pointer;"><i class="feather icon-x"></i></a>
			</td>
		</tr>
		</template>
		<tr v-show="varList.length==0">
			<td colspan="10">沒有相關數據</td>
		</tr>
	</tbody>
   </table>

2.js代碼

var vm = new Vue({
	el: '#app',
	
	data:{
		varList: [],	//list
		page: [],		//分頁類
		pd: []			//map
    },
    
	methods: {
		
        //初始執行
        init() {
        	//覆選框控制全選,全不選 
    		$('#zcheckbox').click(function(){
	    		 if($(this).is(':checked')){
	    			 $("input[name='ids']").click();
	    		 }else{
	    			 $("input[name='ids']").attr("checked", false);
	    		 }
    		});
    		this.getList();
        },
        
        //獲取列表
        getList: function(){
        	this.loading = true;
        	$.ajax({
        		xhrFields: {
                    withCredentials: true
                },
        		type: "POST",
        		url: httpurl+'fhbutton/list?showCount='+this.showCount+'&currentPage='+this.currentPage,
        		data: {KEYWORDS:this.pd.KEYWORDS,tm:new Date().getTime()},
        		dataType:"json",
        		success: function(data){
        		 if("success" == data.result){
        			 vm.varList = data.varList;
        			 vm.page = data.page;
        			 vm.pd = data.pd;
        			 vm.hasButton();
        			 vm.loading = false;
        			 $("input[name='ids']").attr("checked", false);
        		 }else if ("exception" == data.result){
                 	showException("按鈕模塊",data.exception);//顯示異常
                 }
        		}
        	}).done().fail(function(){
                swal("登錄失效!", "請求伺服器無響應,稍後再試", "warning");
                setTimeout(function () {
                	window.location.href = "../../login.html";
                }, 2000);
            });
        }
 
		
	},
	
	mounted(){
        this.init();
    }
})

3.後臺代碼

package org.fh.controller.system;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.fh.controller.base.BaseController;
import org.fh.entity.Page;
import org.fh.entity.PageData;
import org.fh.service.system.FHlogService;
import org.fh.service.system.FhButtonService;
import org.fh.util.Jurisdiction;
import org.fh.util.Tools;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 說明:按鈕管理處理類
 * 作者:FH Admin
 * from:fhadmin.cn
 */
@Controller
@RequestMapping("/fhbutton")
public class FhbuttonController extends BaseController {
	
	@Autowired
	private FhButtonService fhButtonService;
	@Autowired
    private FHlogService FHLOG;
	
	/**列表
	 * @param page
	 * @throws Exception
	 */
	@RequestMapping(value="/list", produces="application/json;charset=UTF-8")
	@RequiresPermissions("fhbutton:list")
	@ResponseBody
	public Object list(Page page) throws Exception{
		Map<String,Object> map = new HashMap<String,Object>();
		String errInfo = "success";
		PageData pd = new PageData();
		pd = this.getPageData();
		String KEYWORDS = pd.getString("KEYWORDS");				//關鍵詞檢索條件
		if(Tools.notEmpty(KEYWORDS)){
			pd.put("KEYWORDS", KEYWORDS.trim());
		}
		page.setPd(pd);
		List<PageData>	varList = fhButtonService.list(page);	//列出Fhbutton列表
		map.put("varList", varList);
		map.put("page", page);
		map.put("pd", pd);
		map.put("result", errInfo);
		return map;
	}

}

 ​-----------------------------------------------------------------自定義表單
28. 定義模版:拖拽左側表單元素到右側區域,編輯表單元素,保存表單模版
29. 表單模版:編輯維護表單模版,複製表單模版,修改模版類型,預覽表單模版
30. 我的表單:選擇表單模版,編輯表單規則,是否上傳圖片、附件、開啟富文本、掛靠流程開關等
31. 表單數據:從我的表單進去可增刪改查表單數據,修改表單規則
32. 掛靠記錄:記錄表單數據和流程實例ID關聯記錄,可刪除


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 可靠性Reliability 容忍硬體故障、軟體失效、人為錯誤即使發生了錯誤,系統仍可用。針對可消除影響的故障類型。 硬體故障:硬體增加冗餘;軟體容錯容忍多機失效; 軟體失效: 特點:長期引而不發,特定條件觸發。 方案:全面考慮,充分測試,反覆評估,及時響應。 人為錯誤:簡化人為操作;分離易錯場 ...
  • 使用 sort() 或內建函數 sorted() 對列表進行排序。它們之間的區別有兩點: sort() 方法是對原列表進行操作,而 sorted() 方法會返回一個新列表,不是在原來的基礎上進行操作。 sort() 是應用在列表上的方法,而 sorted() 可以對所有可迭代的對象進行排序操作。 # ...
  • (JVM | 第2部分:虛擬機執行子系統) 前言 參考資料: 《深入理解 Java 虛擬機 - JVM 高級特性與最佳實踐》 第1部分主題為自動記憶體管理,以此延伸出 Java 記憶體區域與記憶體溢出、垃圾收集器與記憶體分配策略、參數配置與性能調優等相關內容; 第2部分主題為虛擬機執行子系統,以此延伸出 c ...
  • 需求:請輸出一個4行5列的星星(*)圖案。 結果: ***** ***** ***** ***** public class XunHuanQianTao { public static void main(String[] args) { //外層控制行數 內層控制列數 for(int x=0;x ...
  • 我還記得我讀高中的時候,班裡邊很多同學都在玩天天酷跑,那時候對天天酷跑特別沉迷。早上六點早讀,我可以晚上玩酷跑到半夜,現在不得不感嘆年輕真好。為了懷念過去的青春,今天來一篇酷跑教程。 寫出來的效果圖就是這樣了: 下麵就更新一下全部的代碼吧還是老樣子先定義 import pygame,sys impo ...
  • 上一版:重磅!JDK 17 發佈,Oracle 宣佈從 JDK 17 開始正式免費。。 JDK 18 正式發佈 JDK 17 剛發佈半年,JDK 18 又如期而至,JDK 版本號這算是成年了? JDK 18 發佈了,棧長繼續為大家解讀! JDK 18 延續了 JDK 17 開創的免費策略,但,JDK ...
  • (JVM | 第1部分:自動記憶體管理與性能調優) 前言 參考資料: 《深入理解 Java 虛擬機 - JVM 高級特性與最佳實踐》 第1部分主題為自動記憶體管理,以此延伸出 Java 記憶體區域與記憶體溢出、垃圾收集器與記憶體分配策略、參數配置與性能調優等相關內容; 第2部分主題為虛擬機執行子系統,以此延伸 ...
  • 樹 定義 樹是遞歸定義的。 一棵樹是由n(n>0)個元素組成的有限集合,其中每個元素稱為結點(node),有一個特定的結點,稱為樹根(root),除根結點外,其餘結點能分成m(m>=0)個互不相交的有限集合T0,T1,T2,……Tm-1,其中的每個子集又都是一棵樹,這些集合稱為這棵樹的子樹。 如圖是 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...