溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)

發(fā)布時間:2020-08-22 09:43:09 來源:腳本之家 閱讀:462 作者:慕夢辰 欄目:編程語言

環(huán)境搭建

spring boot的簡介

以往我們開發(fā)時用到spring總是避免不了繁瑣的配置,例如我們要配置一個數(shù)據(jù)庫連接,可能需要以下幾步:

1、編寫jdbc.properties配置文件;

2、創(chuàng)建spring的配置文件,加入spring配置文件前綴、配置數(shù)據(jù)庫連接信息以及sqlsessionFactory等等;

3、還要在web.xml文件中加入spring的監(jiān)聽。

springboot的出現(xiàn)大大簡化了項目的搭建過程(spring配置以及maven配置),讓我們專注于應(yīng)用功能的開發(fā),而不是把時間浪費在配置文件、亦或?qū)ζ渑挪殄e誤,大大提高開發(fā)效率。

springboot創(chuàng)建了獨立的spring應(yīng)用,使用內(nèi)嵌的tomcat,打包之后以jar文件格式運行,并且在運行時可以指定一些參數(shù),這個在稍后的手記中會提到。

mybatis

mybatis在這里就不多做闡述了。有想了解的朋友可以自行搜索其教程

Vue.js

Vue.js(讀音 /vjuː/, 類似于 view) 是一套構(gòu)建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層,并且非常容易學(xué)習(xí),非常容易與其它庫或已有項目整合。另一方面,Vue 完全有能力驅(qū)動采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

以上內(nèi)容摘自Vue官網(wǎng)

ElementUI

這是一款餓了么提供的一套前端UI,擁有豐富的組件。詳情

接下來介紹Idea新建springboot項目,搭建開發(fā)環(huán)境

選擇New Project

Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)

填寫基本信息

Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)

選擇需要的模塊

Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)

完成創(chuàng)建

配置application.yml,刪除初始化時候生成的properties文件,新建一個application.yml文件,在這里不推薦使用properties文件進行配置

Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)

加入如下配置:

spring:
 profiles:
 active: develop
 datasource:
 driver-class-name: com.mysql.jdbc.Driver
 url: jdbc:mysql://localhost:3306/dh
 username: root
 password: 123456

新建一個Controller類:

@RestController
public class UserController {

 @GetMapping(value = "getUsername")
 public String getUsername(String callback) {
 return "admin";
 }
}

 之后我們啟動springboot項目,即運行DemoApplication.java,默認(rèn)端口為8080,我們打開瀏覽器進行訪問:

Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼(一)

推薦專題閱讀:

spring boot開發(fā)教程:https://www.jb51.net/Special/943.htm

mybatis教程:https://www.jb51.net/Special/774.htm

以上所述是小編給大家介紹的Spring boot + mybatis + Vue.js + ElementUI 實現(xiàn)數(shù)據(jù)的增刪改查實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI