springboot+jdbcTemplate+sqlite編程示例——以滬深300成分股數據處理為例

引言

我們在自己做一些小的項目或者小的數據處理分析的時候，很多時候是不需要用到mysql這樣的大型數據庫，并且也不需要用到maven這樣很重的框架的，取而代之可以使用jdbcTemplate+sqlite這樣的組合。

本文就介紹一下使用springboot+jdbcTemplate+sqlite編程的方法，本文會以處理滬深300成分股數據為例。

數據源

首先介紹一下本文進行數據處理的結果，我們最后會獲得滬深300成分股列表，包括每一只股票的代碼，名稱，所述行業以及權重，最后處理的結果如下圖所示

我們的數據源主要來自中證指數官網，有兩個數據源，分別是滬深300權重列表和行業分類表

滬深300指數-中證指數有限公司 (csindex.com.cn)

行業分類查詢-中證指數有限公司 (csindex.com.cn)?

綜合這兩張表就可得到滬深300成分股的權重占比以及所屬行業信息了

數據庫初始化

本文使用的sqlite數據庫可以說是一個嵌入式數據庫，幾乎沒有依賴，我們只需要在項目中引入sqlite-jdbc就行了

        <dependency><groupId>org.xerial</groupId><artifactId>sqlite-jdbc</artifactId><version>3.36.0</version></dependency>

當我們引入sqlite-jdbc之后，可以在依賴包中看到數據庫實例，我們不需要自己再去安裝數據庫

這個數據庫的所有信息都會保存在一個db文件里，我們可以在項目的資源目錄中創建這個db文件

然后在application.properties配置文件中指定該db文件，由于數據庫是本地的，所以連用戶名和密碼都不用，不過在性能上好像會比mysql慢一點，不過這么方便，而且幾乎沒有依賴的數據庫還要什么自行車呢，對于自己做一些小玩具完全是夠用了。

spring.datasource.url=jdbc:sqlite:file:src/main/resources/database.db

數據處理

我們進行數據處理的時候主要是處理excel信息，這里會用到hutool工具包以及poi，需要引入如下依賴

        <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.0.0</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>5.0.0</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml-full</artifactId><version>5.0.0</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.15</version></dependency>

我們主要獲取以下幾個維度的數據

@Data
@AllArgsConstructor
@NoArgsConstructor
public class CSI300Entity {private Integer id;private String code;private String name;private String industry;private Double weight;
}

?我們把所有的數據處理都寫到一個類里，包括創建表，插入數據和查詢所有數據

@Slf4j
@Repository
public class SQLIteCSI300Dao implements CSI300Dao{private final String tableName = "csi_300";@Autowiredprivate JdbcTemplate jdbcTemplate;@Overridepublic void createTableIfNotExist() {Integer count = jdbcTemplate.queryForObject("SELECT COUNT(*) FROM sqlite_master WHERE type='table' AND name=?", Integer.class, tableName);if (count == 0) {String sql = "create table " + tableName + "(" +"id INTEGER PRIMARY KEY AUTOINCREMENT," +"code VARCHAR(20)," +"name VARCHAR(20)," +"industry VARCHAR(20)," +"weight float)";jdbcTemplate.execute(sql);log.info(tableName + "建表成功");} else {log.info(tableName + "表已經存在，無需創建");}}@Overridepublic int insertOneItem(CSI300Entity entity) {String sql = "INSERT INTO " + tableName +"(code, name, industry, weight) VALUES " +"(?, ?, ?, ?)";Object[] params = new Object[] {entity.getCode(),entity.getName(),entity.getIndustry(),entity.getWeight()};int num = jdbcTemplate.update(sql, params);StringBuilder sb = new StringBuilder();sb.append("執行" + sql);sb.append("=>[");for (int i=0; i<params.length; i++) {sb.append(params[i].toString());if (i != params.length-1) {sb.append(", ");}}sb.append("]");if(num == 0) {log.error(sb.toString() + "失敗");} else {log.info(sb.toString() + "成功");}return num;}@Overridepublic List<CSI300Entity> queryAllItems() {String sql = "SELECT * FROM " + tableName;List<CSI300Entity> csi300Entities = jdbcTemplate.query(sql, new Object[]{}, new BeanPropertyRowMapper<CSI300Entity>(CSI300Entity.class));return csi300Entities;}
}

然后是解析excel表格匯總數據

@Slf4j
@Service
public class CSI300Service {private final String FILE_PATH_WEIGHT = "E:/數據可視化工具/data_cat/數據/000300closeweight.xls";private final String FILE_PATH_INDUSTRY = "E:/數據可視化工具/data_cat/數據/行業分類.xlsx";private List<CSI300Entity> csi300EntityList;@Autowiredprivate SQLIteCSI300Dao sqlIteCSI300Dao;// 通過解析excel獲取信息public void parseExcel() {ExcelReader excelReader = ExcelUtil.getReader(FILE_PATH_WEIGHT);excelReader.addHeaderAlias("成份券代碼Constituent Code", "code");excelReader.addHeaderAlias("成份券名稱Constituent Name", "name");excelReader.addHeaderAlias("權重(%)weight", "weight");csi300EntityList = excelReader.readAll(CSI300Entity.class);log.info("成功解析出" + csi300EntityList.size() + "條數據");log.info("開始解析所屬行業");excelReader = ExcelUtil.getReader(FILE_PATH_INDUSTRY);excelReader.addHeaderAlias("證券代碼", "code");excelReader.addHeaderAlias("證監會行業門類簡稱", "industry");List<CSI300Entity> csi300Entities = excelReader.readAll(CSI300Entity.class);for(int i=0; i<csi300Entities.size(); i++) {for(int j=0; j<csi300EntityList.size(); j++) {if (csi300EntityList.get(j).getCode().equals(csi300Entities.get(i).getCode())) {csi300EntityList.get(j).setIndustry(csi300Entities.get(i).getIndustry());}}}for(int i=0; i<csi300EntityList.size(); i++) {log.info(csi300EntityList.get(i).toString());sqlIteCSI300Dao.insertOneItem(csi300EntityList.get(i));}}}

最后看一下控制層，在編寫控制層的時候加上@CrossOrigin表示這個類的所有接口都是允許跨域請求的

@Controller
@CrossOrigin
public class CSI300Controller {@Autowiredprivate SQLIteCSI300Dao sqlIteCSI300Dao;@Autowiredprivate CSI300Service csi300Service;@RequestMapping("/createTable")@ResponseBodypublic String createTable() {sqlIteCSI300Dao.createTableIfNotExist();return "success";}@RequestMapping("/parse")@ResponseBodypublic String parse() {csi300Service.parseExcel();return "success";}@RequestMapping("/queryAll")@ResponseBodypublic String queryAll() {List<CSI300Entity> csi300Entities = sqlIteCSI300Dao.queryAllItems();return JSON.toJSONString(csi300Entities);}
}

由于數據量不大，這里就將所有的數據展示出來，大家有需要可以自取

"1","000001","平安銀行","金融業","0.545"
"2","000002","萬科A","房地產業","0.452"
"3","000063","中興通訊","制造業","0.474"
"4","000069","華僑城A","房地產業","0.082"
"5","000100","TCL科技","制造業","0.365"
"6","000157","中聯重科","制造業","0.186"
"7","000166","申萬宏源","金融業","0.236"
"8","000301","東方盛虹","制造業","0.155"
"9","000333","美的集團","制造業","1.474"
"10","000338","濰柴動力","制造業","0.469"
"11","000408","藏格礦業","制造業","0.11"
"12","000425","徐工機械","制造業","0.152"
"13","000538","云南白藥","制造業","0.21"
"14","000568","瀘州老窖","制造業","0.886"
"15","000596","古井貢酒","制造業","0.245"
"16","000617","中油資本","金融業","0.084"
"17","000625","長安汽車","制造業","0.588"
"18","000651","格力電器","制造業","0.862"
"19","000661","長春高新","制造業","0.302"
"20","000708","中信特鋼","制造業","0.084"
"21","000723","美錦能源","制造業","0.109"
"22","000725","京東方A","制造業","0.842"
"23","000733","振華科技","制造業","0.145"
"24","000768","中航西飛","制造業","0.177"
"25","000776","廣發證券","金融業","0.248"
"26","000786","北新建材","制造業","0.137"
"27","000792","鹽湖股份","制造業","0.5"
"28","000800","一汽解放","制造業","0.053"
"29","000858","五 糧 液","制造業","1.68"
"30","000876","新 希 望","制造業","0.132"
"31","000877","天山股份","制造業","0.07"
"32","000895","雙匯發展","制造業","0.157"
"33","000938","紫光股份","制造業","0.268"
"34","000963","華東醫藥","批發和零售業","0.208"
"35","000977","浪潮信息","制造業","0.211"
"36","000983","山西焦煤","采礦業","0.128"
"37","001289","龍源電力","電力、熱力、燃氣及水的生產和供應業","0.017"
"38","001979","招商蛇口","房地產業","0.219"
"39","002001","新和成","制造業","0.183"
"40","002007","華蘭生物","制造業","0.154"
"41","002027","分眾傳媒","租賃和商務服務業","0.384"
"42","002049","紫光國微","制造業","0.286"
"43","002050","三花智控","制造業","0.362"
"44","002064","華峰化學","制造業","0.079"
"45","002074","國軒高科","制造業","0.137"
"46","002120","韻達股份","交通運輸、倉儲和郵政業","0.072"
"47","002129","TCL中環","制造業","0.313"
"48","002142","寧波銀行","金融業","0.527"
"49","002179","中航光電","制造業","0.293"
"50","002180","納思達","制造業","0.159"
"51","002202","金風科技","制造業","0.139"
"52","002230","科大訊飛","信息傳輸、軟件和信息技術服務業","0.481"
"53","002236","大華股份","制造業","0.187"
"54","002241","歌爾股份","制造業","0.25"
"55","002252","上海萊士","制造業","0.218"
"56","002271","東方雨虹","制造業","0.252"
"57","002304","洋河股份","制造業","0.408"
"58","002311","海大集團","制造業","0.213"
"59","002352","順豐控股","交通運輸、倉儲和郵政業","0.6"
"60","002371","北方華創","制造業","0.36"
"61","002410","廣聯達","信息傳輸、軟件和信息技術服務業","0.151"
"62","002414","高德紅外","制造業","0.077"
"63","002415","海康威視","制造業","0.945"
"64","002459","晶澳科技","制造業","0.191"
"65","002460","贛鋒鋰業","制造業","0.255"
"66","002466","天齊鋰業","制造業","0.301"
"67","002475","立訊精密","制造業","0.922"
"68","002493","榮盛石化","制造業","0.19"
"69","002555","三七互娛","信息傳輸、軟件和信息技術服務業","0.2"
"70","002594","比亞迪","制造業","1.048"
"71","002601","龍佰集團","制造業","0.144"
"72","002648","衛星化學","制造業","0.156"
"73","002709","天賜材料","制造業","0.162"
"74","002714","牧原股份","農、林、牧、漁業","0.62"
"75","002736","國信證券","金融業","0.159"
"76","002756","永興材料","制造業","0.083"
"77","002812","恩捷股份","制造業","0.2"
"78","002821","凱萊英","制造業","0.2"
"79","002841","視源股份","制造業","0.111"
"80","002916","深南電路","制造業","0.087"
"81","002920","德賽西威","制造業","0.209"
"82","002938","鵬鼎控股","制造業","0.087"
"83","003816","中國廣核","電力、熱力、燃氣及水的生產和供應業","0.138"
"84","300014","億緯鋰能","制造業","0.301"
"85","300015","愛爾眼科","衛生和社會工作業","0.462"
"86","300033","同花順","金融業","0.175"
"87","300059","東方財富","金融業","1.078"
"88","300122","智飛生物","制造業","0.454"
"89","300124","匯川技術","制造業","0.714"
"90","300142","沃森生物","制造業","0.231"
"91","300207","欣旺達","制造業","0.132"
"92","300223","北京君正","制造業","0.095"
"93","300274","陽光電源","制造業","0.502"
"94","300316","晶盛機電","制造業","0.164"
"95","300347","泰格醫藥","科學研究和技術服務業","0.189"
"96","300408","三環集團","制造業","0.228"
"97","300413","芒果超媒","文化、體育和娛樂業","0.112"
"98","300433","藍思科技","制造業","0.151"
"99","300450","先導智能","制造業","0.166"
"100","300454","深信服","信息傳輸、軟件和信息技術服務業","0.123"
"101","300496","中科創達","信息傳輸、軟件和信息技術服務業","0.149"
"102","300498","溫氏股份","農、林、牧、漁業","0.586"
"103","300601","康泰生物","制造業","0.125"
"104","300628","億聯網絡","制造業","0.094"
"105","300661","圣邦股份","制造業","0.17"
"106","300750","寧德時代","制造業","2.557"
"107","300751","邁為股份","制造業","0.087"
"108","300759","康龍化成","科學研究和技術服務業","0.173"
"109","300760","邁瑞醫療","制造業","0.819"
"110","300763","錦浪科技","制造業","0.077"
"111","300769","德方納米","制造業","0.084"
"112","300782","卓勝微","制造業","0.3"
"113","300896","愛美客","制造業","0.191"
"114","300919","中偉股份","制造業","0.077"
"115","300957","貝泰妮","制造業","0.053"
"116","300979","華利集團","制造業","0.042"
"117","300999","金龍魚","制造業","0.121"
"118","600000","浦發銀行","金融業","0.467"
"119","600009","上海機場","交通運輸、倉儲和郵政業","0.259"
"120","600010","包鋼股份","制造業","0.202"
"121","600011","華能國際","電力、熱力、燃氣及水的生產和供應業","0.197"
"122","600015","華夏銀行","金融業","0.214"
"123","600016","民生銀行","金融業","0.555"
"124","600018","上港集團","交通運輸、倉儲和郵政業","0.082"
"125","600019","寶鋼股份","制造業","0.321"
"126","600025","華能水電","電力、熱力、燃氣及水的生產和供應業","0.087"
"127","600028","中國石化","采礦業","0.604"
"128","600029","南方航空","交通運輸、倉儲和郵政業","0.192"
"129","600030","中信證券","金融業","1.215"
"130","600031","三一重工","制造業","0.471"
"131","600036","招商銀行","金融業","2.068"
"132","600039","四川路橋","建筑業","0.117"
"133","600048","保利發展","房地產業","0.428"
"134","600050","中國聯通","信息傳輸、軟件和信息技術服務業","0.486"
"135","600061","國投資本","金融業","0.103"
"136","600085","同仁堂","制造業","0.212"
"137","600089","特變電工","制造業","0.408"
"138","600104","上汽集團","制造業","0.404"
"139","600111","北方稀土","制造業","0.291"
"140","600115","中國東航","交通運輸、倉儲和郵政業","0.167"
"141","600132","重慶啤酒","制造業","0.1"
"142","600150","中國船舶","制造業","0.359"
"143","600176","中國巨石","制造業","0.154"
"144","600183","生益科技","制造業","0.116"
"145","600188","兗礦能源","采礦業","0.164"
"146","600196","復星醫藥","制造業","0.206"
"147","600219","南山鋁業","制造業","0.117"
"148","600233","圓通速遞","交通運輸、倉儲和郵政業","0.131"
"149","600276","恒瑞醫藥","制造業","1.245"
"150","600309","萬華化學","制造業","0.882"
"151","600332","白云山","制造業","0.123"
"152","600346","恒力石化","制造業","0.172"
"153","600362","江西銅業","制造業","0.107"
"154","600383","金地集團","房地產業","0.094"
"155","600406","國電南瑞","信息傳輸、軟件和信息技術服務業","0.513"
"156","600426","華魯恒升","制造業","0.258"
"157","600436","片仔癀","制造業","0.443"
"158","600438","通威股份","制造業","0.384"
"159","600460","士蘭微","制造業","0.119"
"160","600519","貴州茅臺","制造業","6.531"
"161","600547","山東黃金","采礦業","0.243"
"162","600570","恒生電子","信息傳輸、軟件和信息技術服務業","0.265"
"163","600584","長電科技","制造業","0.252"
"164","600585","海螺水泥","制造業","0.32"
"165","600588","用友網絡","信息傳輸、軟件和信息技術服務業","0.2"
"166","600600","青島啤酒","制造業","0.153"
"167","600606","綠地控股","建筑業","0.06"
"168","600660","福耀玻璃","制造業","0.35"
"169","600674","川投能源","電力、熱力、燃氣及水的生產和供應業","0.185"
"170","600690","海爾智家","制造業","0.486"
"171","600732","愛旭股份","制造業","0.103"
"172","600741","華域汽車","制造業","0.159"
"173","600745","聞泰科技","制造業","0.244"
"174","600754","錦江酒店","住宿和餐飲業","0.09"
"175","600760","中航沈飛","制造業","0.269"
"176","600763","通策醫療","衛生和社會工作業","0.107"
"177","600795","國電電力","電力、熱力、燃氣及水的生產和供應業","0.204"
"178","600803","新奧股份","電力、熱力、燃氣及水的生產和供應業","0.086"
"179","600809","山西汾酒","制造業","0.677"
"180","600837","海通證券","金融業","0.545"
"181","600845","寶信軟件","信息傳輸、軟件和信息技術服務業","0.175"
"182","600875","東方電氣","制造業","0.094"
"183","600884","杉杉股份","制造業","0.088"
"184","600886","國投電力","電力、熱力、燃氣及水的生產和供應業","0.215"
"185","600887","伊利股份","制造業","1.007"
"186","600893","航發動力","制造業","0.278"
"187","600900","長江電力","電力、熱力、燃氣及水的生產和供應業","1.297"
"188","600905","三峽能源","電力、熱力、燃氣及水的生產和供應業","0.382"
"189","600918","中泰證券","金融業","0.116"
"190","600919","江蘇銀行","金融業","0.553"
"191","600926","杭州銀行","金融業","0.171"
"192","600941","中國移動","信息傳輸、軟件和信息技術服務業","0.477"
"193","600958","東方證券","金融業","0.264"
"194","600989","寶豐能源","制造業","0.187"
"195","600999","招商證券","金融業","0.303"
"196","601006","大秦鐵路","交通運輸、倉儲和郵政業","0.251"
"197","601009","南京銀行","金融業","0.217"
"198","601012","隆基綠能","制造業","0.747"
"199","601021","春秋航空","交通運輸、倉儲和郵政業","0.121"
"200","601066","中信建投","金融業","0.194"
"201","601088","中國神華","采礦業","0.603"
"202","601100","恒立液壓","制造業","0.175"
"203","601111","中國國航","交通運輸、倉儲和郵政業","0.164"
"204","601117","中國化學","建筑業","0.141"
"205","601138","工業富聯","制造業","0.348"
"206","601155","新城控股","房地產業","0.067"
"207","601166","興業銀行","金融業","1.232"
"208","601169","北京銀行","金融業","0.389"
"209","601186","中國鐵建","建筑業","0.203"
"210","601211","國泰君安","金融業","0.395"
"211","601216","君正集團","制造業","0.076"
"212","601225","陜西煤業","采礦業","0.438"
"213","601229","上海銀行","金融業","0.34"
"214","601236","紅塔證券","金融業","0.043"
"215","601238","廣汽集團","制造業","0.128"
"216","601288","農業銀行","金融業","0.678"
"217","601318","中國平安","金融業","2.565"
"218","601319","中國人保","金融業","0.094"
"219","601328","交通銀行","金融業","0.931"
"220","601336","新華保險","金融業","0.151"
"221","601360","三六零","信息傳輸、軟件和信息技術服務業","0.18"
"222","601377","興業證券","金融業","0.244"
"223","601390","中國中鐵","建筑業","0.336"
"224","601398","工商銀行","金融業","0.979"
"225","601600","中國鋁業","制造業","0.255"
"226","601601","中國太保","金融業","0.479"
"227","601607","上海醫藥","批發和零售業","0.116"
"228","601615","明陽智能","制造業","0.124"
"229","601618","中國中冶","建筑業","0.128"
"230","601628","中國人壽","金融業","0.29"
"231","601633","長城汽車","制造業","0.193"
"232","601658","郵儲銀行","金融業","0.283"
"233","601668","中國建筑","建筑業","0.605"
"234","601669","中國電建","建筑業","0.2"
"235","601688","華泰證券","金融業","0.428"
"236","601689","拓普集團","制造業","0.189"
"237","601698","中國衛通","信息傳輸、軟件和信息技術服務業","0.045"
"238","601699","潞安環能","采礦業","0.152"
"239","601728","中國電信","信息傳輸、軟件和信息技術服務業","0.468"
"240","601766","中國中車","制造業","0.367"
"241","601788","光大證券","金融業","0.184"
"242","601799","星宇股份","制造業","0.12"
"243","601800","中國交建","建筑業","0.159"
"244","601808","中海油服","采礦業","0.051"
"245","601816","京滬高鐵","交通運輸、倉儲和郵政業","0.72"
"246","601818","光大銀行","金融業","0.311"
"247","601838","成都銀行","金融業","0.147"
"248","601857","中國石油","采礦業","0.472"
"249","601865","福萊特","制造業","0.084"
"250","601868","中國能建","建筑業","0.16"
"251","601872","招商輪船","交通運輸、倉儲和郵政業","0.113"
"252","601877","正泰電器","制造業","0.137"
"253","601878","浙商證券","金融業","0.118"
"254","601881","中國銀河","金融業","0.149"
"255","601888","中國中免","租賃和商務服務業","0.505"
"256","601898","中煤能源","采礦業","0.099"
"257","601899","紫金礦業","采礦業","1.165"
"258","601901","方正證券","金融業","0.207"
"259","601919","中遠海控","交通運輸、倉儲和郵政業","0.37"
"260","601939","建設銀行","金融業","0.249"
"261","601985","中國核電","電力、熱力、燃氣及水的生產和供應業","0.385"
"262","601988","中國銀行","金融業","0.488"
"263","601989","中國重工","制造業","0.263"
"264","601995","中金公司","金融業","0.207"
"265","601998","中信銀行","金融業","0.096"
"266","603019","中科曙光","制造業","0.252"
"267","603185","弘元綠能","制造業","0.055"
"268","603195","公牛集團","制造業","0.066"
"269","603259","藥明康德","科學研究和技術服務業","0.984"
"270","603260","合盛硅業","制造業","0.102"
"271","603288","海天味業","制造業","0.369"
"272","603290","斯達半導","制造業","0.093"
"273","603369","今世緣","制造業","0.196"
"274","603392","萬泰生物","制造業","0.108"
"275","603486","科沃斯","制造業","0.057"
"276","603501","韋爾股份","制造業","0.521"
"277","603659","璞泰來","制造業","0.114"
"278","603799","華友鈷業","制造業","0.253"
"279","603806","福斯特","制造業","0.101"
"280","603833","歐派家居","制造業","0.084"
"281","603899","晨光股份","制造業","0.085"
"282","603986","兆易創新","制造業","0.364"
"283","603993","洛陽鉬業","采礦業","0.214"
"284","605117","德業股份","制造業","0.063"
"285","605499","東鵬飲料","制造業","0.05"
"286","688005","容百科技","制造業","0.066"
"287","688008","瀾起科技","制造業","0.272"
"288","688012","中微公司","制造業","0.427"
"289","688036","傳音控股","制造業","0.207"
"290","688065","凱賽生物","制造業","0.055"
"291","688111","金山辦公","信息傳輸、軟件和信息技術服務業","0.323"
"292","688126","滬硅產業","制造業","0.14"
"293","688187","時代電氣","制造業","0.058"
"294","688223","晶科能源","制造業","0.103"
"295","688303","大全能源","制造業","0.115"
"296","688363","華熙生物","制造業","0.08"
"297","688396","華潤微","制造業","0.144"
"298","688561","奇安信","信息傳輸、軟件和信息技術服務業","0.072"
"299","688599","天合光能","制造業","0.17"
"300","688981","中芯國際","制造業","0.61"

最后是用vue+element-plus編寫一個簡單的前端頁面展示數據，頁面非常簡單，就是使用axios接收數據，然后渲染到表格中

<template><el-row><el-col :span="12"><el-card><el-table:data="table_data":show-header="true":max-height="635"stripe><el-table-column prop="id" label="序號"></el-table-column><el-table-column prop="code" label="股票代碼"></el-table-column><el-table-column prop="name" label="公司簡稱"></el-table-column><el-table-column prop="industry" label="所屬行業"></el-table-column><el-table-column prop="weight" label="權重占比"></el-table-column></el-table></el-card></el-col><el-col :span="12"> </el-col></el-row>
</template><script>
import axios from "axios";
export default {data() {return {table_data: [],};},mounted() {this.init();},methods: {init() {var url = "http://localhost:9001/queryAll";axios.get(url).then((response) => {this.table_data = response.data;console.log(response);}).catch(function (error) {console.log(error);});},},
};
</script><style scoped></style>

最后展示的效果就如文章開頭那樣。