springboot與vue實(shí)現(xiàn)簡(jiǎn)單的CURD過(guò)程詳析
更新時(shí)間：2022年01月26日 10:03:46 作者：捕風(fēng)捉影?
這篇文章主要介紹了springboot與vue實(shí)現(xiàn)簡(jiǎn)單的CURD過(guò)程詳析，圍繞springboot與vue的相關(guān)資料展開(kāi)實(shí)現(xiàn)CURD過(guò)程的過(guò)程介紹，需要的小伙伴可以參考一下
數(shù)據(jù)庫(kù)
后端項(xiàng)目搭建：
entity
dao層
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
? ? @Query(value = "select * from user where name like %?1%", nativeQuery = true)
? ? Page<User> findByNameLike(String name, Pageable pageRequest);
}service
@SpringBootApplication
public class Demo33Application {
? ? public static void main(String[] args) {
? ? ? ? SpringApplication.run(Demo33Application.class, args);
? ? }
}controller
@RestController
@RequestMapping("/user")
public class UserController {
? ? @Resource
? ? private UserService userService;
? ? // 新增用戶
? ? @PostMapping
? ? public Result add(@RequestBody User user) {
? ? ? ? userService.save(user);
? ? ? ? return Result.success();
? ? }
? ? // 修改用戶
? ? @PutMapping
? ? public Result update(@RequestBody User user) {
? ? ? ? userService.save(user);
? ? ? ? return Result.success();
? ? }
? ? // 刪除用戶
? ? @DeleteMapping("/{id}")
? ? public void delete(@PathVariable("id") Long id) {
? ? ? ? userService.delete(id);
? ? }
? ? // 根據(jù)id查詢用戶
? ? @GetMapping("/{id}")
? ? public Result<User> findById(@PathVariable Long id) {
? ? ? ? return Result.success(userService.findById(id));
? ? }
? ? // 查詢所有用戶
? ? @GetMapping
? ? public Result<List<User>> findAll() {
? ? ? ? return Result.success(userService.findAll());
? ? }
? ? // 分頁(yè)查詢用戶
? ? @GetMapping("/page")
? ? public Result<Page<User>> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@RequestParam(defaultValue = "10") Integer pageSize,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@RequestParam(required = false) String name) {
? ? ? ? return Result.success(userService.findPage(pageNum, pageSize, name));
? ? }
}結(jié)果封裝類
package com.example.common;
public class Result<T> {
? ? private String code;
? ? private String msg;
? ? private T data;
? ? public String getCode() {
? ? ? ? return code;
? ? }
? ? public void setCode(String code) {
? ? ? ? this.code = code;
? ? }
? ? public String getMsg() {
? ? ? ? return msg;
? ? }
? ? public void setMsg(String msg) {
? ? ? ? this.msg = msg;
? ? }
? ? public T getData() {
? ? ? ? return data;
? ? }
? ? public void setData(T data) {
? ? ? ? this.data = data;
? ? }
? ? public Result() {
? ? }
? ? public Result(T data) {
? ? ? ? this.data = data;
? ? }
? ? public static Result success() {
? ? ? ? Result result = new Result<>();
? ? ? ? result.setCode("0");
? ? ? ? result.setMsg("成功");
? ? ? ? return result;
? ? }
? ? public static <T> Result<T> success(T data) {
? ? ? ? Result<T> result = new Result<>(data);
? ? ? ? result.setCode("0");
? ? ? ? result.setMsg("成功");
? ? ? ? return result;
? ? }
? ? public static Result error(String code, String msg) {
? ? ? ? Result result = new Result();
? ? ? ? result.setCode(code);
? ? ? ? result.setMsg(msg);
? ? ? ? return result;
? ? }
}處理跨域
package com.example.common;
public class Result<T> {
? ? private String code;
? ? private String msg;
? ? private T data;
? ? public String getCode() {
? ? ? ? return code;
? ? }
? ? public void setCode(String code) {
? ? ? ? this.code = code;
? ? }
? ? public String getMsg() {
? ? ? ? return msg;
? ? }
? ? public void setMsg(String msg) {
? ? ? ? this.msg = msg;
? ? }
? ? public T getData() {
? ? ? ? return data;
? ? }
? ? public void setData(T data) {
? ? ? ? this.data = data;
? ? }
? ? public Result() {
? ? }
? ? public Result(T data) {
? ? ? ? this.data = data;
? ? }
? ? public static Result success() {
? ? ? ? Result result = new Result<>();
? ? ? ? result.setCode("0");
? ? ? ? result.setMsg("成功");
? ? ? ? return result;
? ? }
? ? public static <T> Result<T> success(T data) {
? ? ? ? Result<T> result = new Result<>(data);
? ? ? ? result.setCode("0");
? ? ? ? result.setMsg("成功");
? ? ? ? return result;
? ? }
? ? public static Result error(String code, String msg) {
? ? ? ? Result result = new Result();
? ? ? ? result.setCode(code);
? ? ? ? result.setMsg(msg);
? ? ? ? return result;
? ? }
}***yml
spring: ? datasource: ? ? driver-class-name: com.mysql.cj.jdbc.Driver ? ? username: root ? ? password: 123456 ? ? url: jdbc:mysql://localhost:3306/mytest?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8
vue 部分
只需要編寫index.html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>用戶信息</title>
? ? <!-- 引入樣式 -->
? ? <link rel="stylesheet" href="element.css" rel="external nofollow" >
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto">
? ? <h2>用戶信息表</h2>
? ? <el-row>
? ? ? ? <el-col :span="6" style="margin-bottom: 10px">
? ? ? ? ? ? <el-button type="primary" @click="add">新增</el-button>
? ? ? ? ? ? <el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
? ? ? ? </el-col>
? ? </el-row>
? ? <el-table
? ? ? ? ? ? :data="page.content"
? ? ? ? ? ? stripe
? ? ? ? ? ? border
? ? ? ? ? ? style="width: 100%">
? ? ? ? <el-table-column
? ? ? ? ? ? ? ? prop="name"
? ? ? ? ? ? ? ? label="用戶名"
? ? ? ? >
? ? ? ? </el-table-column>
? ? ? ? <el-table-column
? ? ? ? ? ? ? ? prop="age"
? ? ? ? ? ? ? ? label="年齡"
? ? ? ? ? ? ? ? width="180">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column
? ? ? ? ? ? ? ? prop="sex"
? ? ? ? ? ? ? ? label="性別">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column
? ? ? ? ? ? ? ? prop="address"
? ? ? ? ? ? ? ? label="地址">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column
? ? ? ? ? ? ? ? prop="phone"
? ? ? ? ? ? ? ? label="電話">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column
? ? ? ? ? ? ? ? fixed="right"
? ? ? ? ? ? ? ? label="操作"
? ? ? ? ? ? ? ? width="100">
? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? <el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
? ? ? ? ? ? ? ? <el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.id)"></el-button>
? ? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? </el-table>
? ? <el-row type="flex" justify="center" style="margin-top: 10px">
? ? ? ? <el-pagination
? ? ? ? ? ? ? ? layout="prev, pager, next"
? ? ? ? ? ? ? ? :page-size="pageSize"
? ? ? ? ? ? ? ? :current-page="pageNum"
? ? ? ? ? ? ? ? @prev-click="loadTable"
? ? ? ? ? ? ? ? @current-change="loadTable"
? ? ? ? ? ? ? ? @next-click="loadTable"
? ? ? ? ? ? ? ? :total="page.totalElements">
? ? ? ? </el-pagination>
? ? </el-row>
? ? <el-dialog
? ? ? ? ? ? title="用戶信息"
? ? ? ? ? ? :visible.sync="dialogVisible"
? ? ? ? ? ? width="30%">
? ? ? ? <el-form ref="form" :model="form" label-width="80px">
? ? ? ? ? ? <el-form-item label="用戶名">
? ? ? ? ? ? ? ? <el-input v-model="form.name"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="年齡">
? ? ? ? ? ? ? ? <el-input v-model="form.age"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="性別">
? ? ? ? ? ? ? ? <el-radio v-model="form.sex" label="男">男</el-radio>
? ? ? ? ? ? ? ? <el-radio v-model="form.sex" label="女">女</el-radio>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="地址">
? ? ? ? ? ? ? ? <el-input v-model="form.address"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item label="電話">
? ? ? ? ? ? ? ? <el-input v-model="form.phone"></el-input>
? ? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? ? ? <el-button @click="dialogVisible = false">取 消</el-button>
? ? ? ? ? ? <el-button type="primary" @click="save">確 定</el-button>
? ? ? ? </span>
? ? </el-dialog>
</div>
<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入組件庫(kù) -->
<script src="element.js"></script>
<script>
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? page: {},
? ? ? ? ? ? name: '',
? ? ? ? ? ? pageNum: 1,
? ? ? ? ? ? pageSize: 8,
? ? ? ? ? ? dialogVisible: false,
? ? ? ? ? ? form: {}
? ? ? ? },
? ? ? ? created() {
? ? ? ? ? ? this.loadTable(this.pageNum);
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? loadTable(num) {
? ? ? ? ? ? ? ? this.pageNum = num;
? ? ? ? ? ? ? ? $.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
? ? ? ? ? ? ? ? ? ? this.page = res.data;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? add() {
? ? ? ? ? ? ? ? this.dialogVisible = true;
? ? ? ? ? ? ? ? this.form = {};
? ? ? ? ? ? },
? ? ? ? ? ? edit(row) {
? ? ? ? ? ? ? ? this.form = row;
? ? ? ? ? ? ? ? this.dialogVisible = true;
? ? ? ? ? ? },
? ? ? ? ? ? save() {
? ? ? ? ? ? ? ? let data = JSON.stringify(this.form);
? ? ? ? ? ? ? ? if (this.form.id) {
? ? ? ? ? ? ? ? ? ? // 編輯
? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? url: '/user',
? ? ? ? ? ? ? ? ? ? ? ? type: 'put',
? ? ? ? ? ? ? ? ? ? ? ? contentType: 'application/json',
? ? ? ? ? ? ? ? ? ? ? ? data: data
? ? ? ? ? ? ? ? ? ? }).then(res => {
? ? ? ? ? ? ? ? ? ? ? ? this.dialogVisible = false;
? ? ? ? ? ? ? ? ? ? ? ? this.loadTable(1);
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 新增
? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? url: '/user',
? ? ? ? ? ? ? ? ? ? ? ? type: 'post',
? ? ? ? ? ? ? ? ? ? ? ? contentType: 'application/json',
? ? ? ? ? ? ? ? ? ? ? ? data: data
? ? ? ? ? ? ? ? ? ? }).then(res => {
? ? ? ? ? ? ? ? ? ? ? ? this.dialogVisible = false;
? ? ? ? ? ? ? ? ? ? ? ? this.loadTable(1);
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? del(id) {
? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? url: '/user/' + id,
? ? ? ? ? ? ? ? ? ? type: 'delete',
? ? ? ? ? ? ? ? ? ? contentType: 'application/json'
? ? ? ? ? ? ? ? }).then(res => {
? ? ? ? ? ? ? ? ? ? this.loadTable(1);
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</body>
</html>項(xiàng)目展示：
到此這篇關(guān)于springboot與vue實(shí)現(xiàn)簡(jiǎn)單的CURD過(guò)程詳析的文章就介紹到這了,更多相關(guān)springboot與vue實(shí)現(xiàn)簡(jiǎn)單的CURD內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Flyway將數(shù)據(jù)庫(kù)結(jié)構(gòu)的變更定義為一系列遷移腳本，通常是SQL腳本文件，當(dāng)應(yīng)用程序啟動(dòng)時(shí)，F(xiàn)lyway會(huì)自動(dòng)檢測(cè)并執(zhí)行未應(yīng)用的遷移腳本，將數(shù)據(jù)庫(kù)升級(jí)到最新版本，這篇文章主要介紹了深入理解Spring?Boot中的Flyway,需要的朋友可以參考下2024-01-01
今天小編就為大家分享一篇關(guān)于Java類加載初始化的過(guò)程及順序，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
這篇文章主要給大家介紹了關(guān)于Java面向?qū)ο蠛蛢?nèi)存分析的相關(guān)資料，文章可以讓初學(xué)者順利的分析內(nèi)存，更加容易的體會(huì)程序執(zhí)行過(guò)程中內(nèi)存的變化，需要的朋友可以參考下2021-05-05
java開(kāi)發(fā)SSM框架具有rest風(fēng)格的SpringMVC
這篇文章主要介紹了java開(kāi)發(fā)中如何使SSM框架具有rest風(fēng)格的SpringMVC實(shí)現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-10-10
springboot集成開(kāi)發(fā)實(shí)現(xiàn)商場(chǎng)秒殺功能
這篇文章主要介紹了springboot集成實(shí)現(xiàn)商品秒殺功能，秒殺系統(tǒng)業(yè)務(wù)流程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
tomcat部署java web項(xiàng)目遇到的問(wèn)題及解決方法
這篇文章主要介紹了tomcat部署java web項(xiàng)目遇到的問(wèn)題及解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
簡(jiǎn)單說(shuō)明Java的Struts框架中merge標(biāo)簽的使用方法
這篇文章主要簡(jiǎn)單介紹了Java的Struts框架中merge標(biāo)簽的使用方法,Struts是Java的SSH三大web開(kāi)發(fā)框架之一,需要的朋友可以參考下2015-12-12
Java基于final修飾數(shù)據(jù)過(guò)程解析
這篇文章主要介紹了Java基于final修飾數(shù)據(jù)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
spring-data-jpa實(shí)現(xiàn)增刪改查以及分頁(yè)操作方法
下面小編就為大家分享一篇spring-data-jpa實(shí)現(xiàn)增刪改查以及分頁(yè)操作方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于mybatis處理枚舉類的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用mybatis具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05