快捷導(dǎo)航

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

更新時(shí)間：2017年05月26日 10:42:06 作者：慕夢(mèng)辰

這篇文章主要介紹了Spring boot + mybatis + Vue.js + ElementUI 實(shí)現(xiàn)數(shù)據(jù)的增刪改查實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

環(huán)境搭建

spring boot的簡(jiǎn)介

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

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

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

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

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

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

mybatis

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

Vue.js

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

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

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

ElementUI

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

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

選擇New Project

填寫基本信息

選擇需要的模塊

完成創(chuàng)建

配置application.yml，刪除初始化時(shí)候生成的properties文件，新建一個(gè)application.yml文件，在這里不推薦使用properties文件進(jìn)行配置

加入如下配置：

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

新建一個(gè)Controller類：

@RestController
public class UserController {

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

之后我們啟動(dòng)springboot項(xiàng)目，即運(yùn)行DemoApplication.java，默認(rèn)端口為8080，我們打開瀏覽器進(jìn)行訪問：

推薦專題閱讀：

spring boot開發(fā)教程：http://chabaoo.cn/Special/943.htm

mybatis教程：http://chabaoo.cn/Special/774.htm

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

您可能感興趣的文章: