devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

SSM+VUE+Element——CRUD快速上手模板_ssm+vue+element 增删改查

作者：花生_TL007 | 2024-05-14 11:34:25

赞

踩

ssm+vue+element 增删改查

前言：

SSM环境下的基本的增删改查，快速上手模板！这篇主要是补充前端代码部分。后端在SSM+redis快速搭建那篇已经详细介绍了！以书籍为案例！

目录

一、后端

1、搭建后台

2、数据库

二、前端

1、创建项目

2、项目结构

 3、书籍首页

4、路由

5、请求封装

6、main.js

三、结束

一、后端

1、搭建后台

https://blog.csdn.net/weixin_49789131/article/details/122025036

2、数据库

表：

 

二、前端

1、创建项目

https://blog.csdn.net/weixin_49789131/article/details/122480464

2、项目结构

 3、书籍首页

BookList.vue。业务界面都一般放在view文件夹中

  1. <template>
  2. 	<div>
  3. 		<div>
  4. 			<el-form :inline="true" :model="formSearch" class="demo-form-inline">
  5. 				<el-form-item label="书籍名称">
  6. 					<el-input v-model="formSearch.bookname" placeholder="书籍名称"></el-input>
  7. 				</el-form-item>
  8. 				<el-form-item>
  9. 					<el-button type="primary" @click="onSubmit">查询</el-button>
  10. 				</el-form-item>
  11. 			</el-form>
  12. 			<button @click="dialogAdd">增加书籍</button>
  13. 		</div>
  14. 		<el-table :data="books" border style="width: 60%;margin-left: 300px;">
  15. 			<el-table-column prop="id" label="ID" width="120">
  16. 			</el-table-column>
  17. 			<el-table-column prop="bookname" label="书籍名" width="200">
  18. 			</el-table-column>
  19. 			<el-table-column prop="price" label="价格" width="150">
  20. 			</el-table-column>
  21. 			<el-table-column prop="booktype" label="类型" width="200">
  22. 			</el-table-column>
  23. 			<el-table-column label="操作" width="">
  24. 				<template slot-scope="scope">
  25. 					<el-button @click="dialogUpd(scope.row)" type="text" size="small">修改</el-button>
  26. 					<el-button @click="bookDel(scope.row)" type="text" size="small">删除</el-button>
  27. 				</template>
  28. 			</el-table-column>
  29. 		</el-table>
  30.  
  31.  
  32. 		<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  33. 			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
  34. 				<input :value="form.id" hidden="true" />
  35. 				<el-form-item label="书籍名称" prop="bookname">
  36. 					<el-input v-model="form.bookname"></el-input>
  37. 				</el-form-item>
  38. 				<el-form-item label="书籍价格" prop="price">
  39. 					<el-input v-model="form.price"></el-input>
  40. 				</el-form-item>
  41. 				<el-form-item label="书籍类型" prop="booktype">
  42. 					<el-input v-model="form.booktype"></el-input>
  43. 				</el-form-item>
  44. 				<el-form-item>
  45. 					<el-button type="primary" @click="submitForm('form')">提交</el-button>
  46. 					<el-button @click="clear()">重置</el-button>
  47. 				</el-form-item>
  48. 			</el-form>
  49. 		</el-dialog>
  50. 	</div>
  51. </template>
  52.  
  53. <script>
  54. 	export default {
  55. 		data: function() {
  56. 			return {
  57. 				/** 查询表单 **/
  58. 				formSearch: {
  59. 					bookName: ''
  60. 				},
  61. 				/** 增加、修改表单 **/
  62. 				form: {
  63. 					id: 0,
  64. 					bookname: '',
  65. 					price: null,
  66. 					booktype: ''
  67. 				},
  68. 				/** 增加提交表单验证 **/
  69. 				rules: {
  70. 					bookname: [{
  71. 						required: true,
  72. 						message: '请输入书籍名称',
  73. 						trigger: 'blur'
  74. 					}],
  75. 					price: [{
  76. 						required: true,
  77. 						message: '请输入书籍价格',
  78. 						trigger: 'blur'
  79. 					}],
  80. 					booktype: [{
  81. 						required: true,
  82. 						message: '请输入书籍类型',
  83. 						trigger: 'blur'
  84. 					}]
  85. 				},
  86. 				/** 书籍集合 **/
  87. 				books: [],
  88. 				/** 对话框开关 **/
  89. 				dialogVisible: false,
  90. 				/** 对话框标题 **/
  91. 				title: ''
  92. 			};
  93. 		},
  94. 		methods: {
  95. 			/* 查询按钮提交 */
  96. 			onSubmit() {
  97. 				this.bookList();
  98. 			},
  99. 			/* 修改对话框处理 */
  100. 			dialogUpd(row) {
  101. 				this.title = '修改';
  102. 				this.dialogVisible = true;
  103. 				this.setFiled(this.form, row);
  104. 			},
  105. 			/* 增加对话框处理 */
  106. 			dialogAdd(row) {
  107. 				this.title = '增加';
  108. 				this.dialogVisible = true;
  109. 			},
  110. 			/* 根据书籍id删除书籍 */
  111. 			bookDel(row) {
  112. 				let url = this.axios.urls.BOOKDEL;
  113. 				this.axios.post(url, {
  114. 					id: row.id
  115. 				}).then(res => {
  116. 					if (res.data.code == 200) {
  117. 						this.$message({
  118. 							message: res.data.message,
  119. 							type: 'success'
  120. 						});
  121. 					}
  122. 					this.clear();
  123. 					this.bookList();
  124. 				})
  125. 			},
  126. 			/* 
  127. 			 *对话框表单提交
  128. 			 * url:访问路径（增加？修改？）
  129. 			 */
  130. 			bookChange(url) {
  131. 				this.axios.post(url, this.form).then(res => {
  132. 					if (res.data.code == 200) {
  133. 						this.$message({
  134. 							message: res.data.message,
  135. 							type: 'success'
  136. 						});
  137. 					}
  138. 					this.clear();
  139. 					this.bookList();
  140. 					this.dialogVisible = false;
  141. 				})
  142. 			},
  143. 			/* 对话框表单提交 , 根据form.id 来判断是增加还是修改*/
  144. 			submitForm(formName) {
  145. 				this.$refs[formName].validate((valid) => {
  146. 					if (valid) {
  147. 						let url = '';
  148. 						if(this.form.id == 0 || this.form.id == null){
  149. 							 url = this.axios.urls.BOOKADD;
  150. 						}else{
  151. 							 url =  this.axios.urls.BOOKUPD
  152. 						}
  153. 						this.bookChange(url);
  154. 					} else {
  155. 						console.log('error submit!!');
  156. 						return false;
  157. 					}
  158. 				});
  159. 			},
  160. 			/* 清空form对象属性 */
  161. 			clear() {
  162. 				Object.keys(this.form).forEach(f => {
  163. 					this.form[f] = null;
  164. 				})
  165. 			},
  166. 			/* 对话框关闭 */
  167. 			handleClose(done) {
  168. 				this.$confirm('确认关闭？')
  169. 					.then(_ => {
  170. 						done();
  171. 						this.clear();
  172. 					})
  173. 					.catch(_ => {});
  174. 			},
  175. 			/* 书籍模糊查询 */
  176. 			bookList() {
  177. 				let url = this.axios.urls.BOOKLIST;
  178. 				this.axios.get(url, {
  179. 					params: {
  180. 						bookName: this.formSearch.bookname
  181. 					}
  182. 				}).then(res => {
  183. 					this.books = res.data.data
  184. 				})
  185. 			},
  186. 			/* 
  187. 			 * row赋值给form操作 
  188. 			 * 
  189. 			 * 说明：
  190. 			 * 通过测试可知，获取表格当前行row传过来的是当前行对象引用，
  191. 			 * 在修改回显直接 this.form = row 赋值，其实是修改了当前行对象引用指向
  192. 			 * 对话框的重置功能不仅会将对话框数据清空也会将表格当前行数据情况！
  193. 			 * bug!!!关闭对象框会发现当前行数据都消失了！
  194. 			 */
  195. 			setFiled(oldObj, newObj) {
  196. 				Object.keys(newObj).forEach(f => {
  197. 					oldObj[f] = newObj[f];
  198. 				})
  199. 			}
  200. 		},
  201. 		created() {
  202. 			this.bookList();
  203. 		}
  204. 	}
  205. </script>
  206.  
  207. <style>
  208. </style>

查询方法为get提交请求，一般后台仅需要基本类型的参数，如果用post方式提交会出现后台接收

不到参数的情况！！

get -->基本类型参数传输

post-->对象传输

post写法如下：

this.axios.post(url,this.form}.then(res => {})

post直接传入参数，不需要定义param

4、路由

 index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import BookList from '@/views/BookList'
  4.  
  5. Vue.use(Router)
  6.  
  7. export default new Router({
  8.   routes: [
  9.     {
  10.       path: '/',
  11.       name: 'BookList',
  12.       component: BookList
  13.     }
  14.   ]
  15. })

5、请求封装

action.js

  1. /**
  2.  * 对后台请求的地址的封装，URL格式如下：
  3.  * 模块名_实体名_操作
  4.  */
  5. export default {
  6. 	//服务器
  7. 	'SERVER': 'http://localhost:8080/ssm', 
  8. 	'BOOKLIST': '/bookList',
  9. 	'BOOKDEL': '/bookDel' ,
  10. 	'BOOKUPD': '/bookUpd',
  11. 	'BOOKADD': '/bookAdd',
  12. 	//获得请求的完整地址，用于mockjs测试时使用
  13. 	'getFullPath': k => {
  14. 		return this.SERVER + this[k];
  15. 	}
  16. }

http.js

  1. /**
  2.  * vue项目对axios的全局配置
  3.  */
  4. import axios from 'axios'
  5. import qs from 'qs'
  6.  
  7. //引入action模块，并添加至axios的类属性urls上
  8. import action from '@/api/action'
  9. axios.urls = action
  10.  
  11. // axios默认配置
  12. axios.defaults.timeout = 10000; // 超时时间
  13. // axios.defaults.baseURL = 'http://localhost:8080/crm'; // 默认地址
  14. axios.defaults.baseURL = action.SERVER;
  15.  
  16. //整理数据
  17. // 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
  18. axios.defaults.transformRequest = function(data) {
  19. 	data = qs.stringify(data);
  20. 	return data;
  21. };
  22.  
  23.  
  24. // 请求拦截器
  25. axios.interceptors.request.use(function(config) {
  26. 	// let jwt = sessionStorage.getItem('jwt');
  27. 	// if (jwt) {
  28. 	// 	config.headers['jwt'] = jwt;
  29. 	// }
  30. 	return config;
  31. }, function(error) {
  32. 	return Promise.reject(error);
  33. });
  34.  
  35. // 响应拦截器
  36. axios.interceptors.response.use(function(response) {
  37. 	// let jwt = response.headers['jwt'];
  38. 	// if (jwt) {
  39. 	// 	sessionStorage.setItem('jwt', jwt);
  40. 	// }
  41. 	return response;
  42. }, function(error) {
  43. 	return Promise.reject(error);
  44. });
  45.  
  46. // // 路由请求拦截
  47. // // http request 拦截器
  48. // axios.interceptors.request.use(
  49. // 	config => {
  50. // 		//config.data = JSON.stringify(config.data);  
  51. // 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
  52. // 		//config.headers['Token'] = 'abcxyz';
  53. // 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
  54. // 		// if (cookie.get("token")) {
  55. // 		// 	//用户每次操作，都将cookie设置成2小时
  56. // 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
  57. // 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
  58. // 		// 	config.headers.token = cookie.get("token");
  59. // 		// 	config.headers.name = cookie.get("name");
  60. // 		// }
  61. // 		return config;
  62. // 	},
  63. // 	error => {
  64. // 		return Promise.reject(error.response);
  65. // 	});
  66.  
  67. // // 路由响应拦截
  68. // // http response 拦截器
  69. // axios.interceptors.response.use(
  70. // 	response => {
  71. // 		if (response.data.resultCode == "404") {
  72. // 			console.log("response.data.resultCode是404")
  73. // 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
  74. // 			//      cookie.del("ticket")
  75. // 			//      window.location.href='http://login.com'
  76. // 			return
  77. // 		} else {
  78. // 			return response;
  79. // 		}
  80. // 	},
  81. // 	error => {
  82. // 		return Promise.reject(error.response) // 返回接口返回的错误信息
  83. // 	});
  84.  
  85.  
  86.  
  87. export default axios;

6、main.js

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import ElementUI from 'element-ui' //新添加1
  5. import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前
  6.  
  7. import axios from '@/api/http'             //vue项目对axios的全局配置
  8.  
  9. import App from './App'
  10. import router from './router'
  11.  
  12. import VueAxios from 'vue-axios' 
  13. Vue.use(VueAxios,axios)
  14.  
  15. Vue.use(ElementUI)   //新添加3
  16. Vue.config.productionTip = false
  17.  
  18. /* eslint-disable no-new */
  19. new Vue({
  20.   el: '#app',
  21.   router,
  22.   components: { App },
  23.   template: '<App/>'
  24. })

三、结束

该篇主要为快速上手模板，为有一定基础人提供参考！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/568516
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号