• 【Vue.js】使用ElementUI实现增删改查(CRUD)及表单验证

    前言：

    本文根据上篇实现数据表格(查所有)完善增删改功能，数据表格===》查看数据表格的实现链接

    一，增删改查

    ①后端Controller(增删改查方法)：

    1. package com.zking.ssm.controller;
    2.  
    3. import com.zking.ssm.model.Book;
    4. import com.zking.ssm.service.IBookService;
    5. import com.zking.ssm.util.JsonResponseBody;
    6. import com.zking.ssm.util.PageBean;
    7. import com.zking.ssm.vo.BookFileVo;
    8. import org.apache.commons.io.IOUtils;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Controller;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13. import org.springframework.web.multipart.MultipartFile;
    14.  
    15. import javax.servlet.http.HttpServletRequest;
    16. import javax.servlet.http.HttpServletResponse;
    17. import java.io.File;
    18. import java.io.FileInputStream;
    19. import java.io.InputStream;
    20. import java.io.OutputStream;
    21. import java.net.URLEncoder;
    22. import java.util.List;
    23. import java.util.Map;
    24.  
    25. @Controller
    26. @RequestMapping("/book")
    27. public class BookController {
    28.  
    29.     @Autowired
    30.     private IBookService bookService;
    31.  
    32.     @RequestMapping("/addBook")
    33.     @ResponseBody
    34.     public JsonResponseBody addBook(Book book){
    35.         try {
    36.             bookService.insert(book);
    37.             return new JsonResponseBody<>("新增书本成功",true,0,null);
    38.         } catch (Exception e) {
    39.             e.printStackTrace();
    40.             return new JsonResponseBody<>("新增书本失败",false,0,null);
    41.         }
    42.     }
    43.  
    44.     @RequestMapping("/editBook")
    45.     @ResponseBody
    46.     public JsonResponseBody editBook(Book book){
    47.         try {
    48.             bookService.updateByPrimaryKey(book);
    49.             return new JsonResponseBody<>("编辑书本成功",true,0,null);
    50.         } catch (Exception e) {
    51.             e.printStackTrace();
    52.             return new JsonResponseBody<>("编辑书本失败",false,0,null);
    53.         }
    54.     }
    55.  
    56.     @RequestMapping("/delBook")
    57.     @ResponseBody
    58.     public JsonResponseBody delBook(Book book){
    59.         try {
    60.             bookService.deleteByPrimaryKey(book.getId());
    61.             return new JsonResponseBody<>("删除书本成功",true,0,null);
    62.         } catch (Exception e) {
    63.             e.printStackTrace();
    64.             return new JsonResponseBody<>("删除书本失败",false,0,null);
    65.         }
    66.     }
    67.  
    68.     @RequestMapping("/queryBookPager")
    69.     @ResponseBody
    70.     public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
    71.         try {
    72.             PageBean pageBean=new PageBean();
    73.             pageBean.setRequest(req);
    74.             List books = bookService.queryBookPager(book, pageBean);
    75.             return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    76.         } catch (Exception e) {
    77.             e.printStackTrace();
    78.             return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    79.         }
    80.     }
    81.  
    82.     @RequestMapping("/queryBookCharts")
    83.     @ResponseBody
    84.     public JsonResponseBody queryBookCharts(){
    85.         try{
    86.             Map charts = bookService.queryBookCharts();
    87.             return new JsonResponseBody<>("OK",true,0,charts);
    88.         }catch (Exception e){
    89.             e.printStackTrace();
    90.             return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);
    91.         }
    92.     }
    93.  
    94.     @RequestMapping("/upload")
    95.     @ResponseBody
    96.     public JsonResponseBody upload(BookFileVo bookFileVo){
    97.         try {
    98.             MultipartFile bookFile = bookFileVo.getBookFile();
    99.             System.out.println(bookFileVo);
    100.             System.out.println(bookFile.getContentType());
    101.             System.out.println(bookFile.getOriginalFilename());
    102.             return new JsonResponseBody<>("上传成功",true,0,null);
    103.         } catch (Exception e) {
    104.             e.printStackTrace();
    105.             return new JsonResponseBody<>("上传失败",false,0,null);
    106.         }
    107.     }
    108.  
    109.     @RequestMapping("/download")
    110.     public void download(HttpServletRequest request, HttpServletResponse response){
    111.         try {
    112.             String relativePath = "uploads/1.jpg";
    113.             String absolutePath = request.getRealPath(relativePath);
    114.             InputStream is = new FileInputStream(new File(absolutePath));
    115.             OutputStream out = response.getOutputStream();
    116.             response.setContentType("application/octet-stream");
    117.             response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
    118.             byte[] by = new byte[1024];
    119.             int len = -1;
    120.             while (-1 != (len = is.read(by))) {
    121.                 out.write(by);
    122.             }
    123.             is.close();
    124.             out.close();
    125.         } catch (Exception e) {
    126.             e.printStackTrace();
    127.         }
    128.     }
    129.  
    130.     @RequestMapping("/downloadUrl")
    131.     public void downloadUrl(HttpServletRequest request, HttpServletResponse response){
    132.         String relativePath = "uploads/1.jpg";
    133.         String absolutePath = request.getRealPath(relativePath);
    134.         InputStream is = null;
    135.         OutputStream out = null;
    136.  
    137.         try {
    138.             is = new FileInputStream(new File(absolutePath));
    139.             // 设置Content-Disposition
    140.             response.setHeader("Content-Disposition",
    141.                     "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
    142.             out = response.getOutputStream();
    143.             IOUtils.copy(is, out);
    144.             response.flushBuffer();
    145.             System.out.println("完成");
    146.         } catch (Exception e) {
    147.             e.printStackTrace();
    148.         } finally {
    149.             IOUtils.closeQuietly(is);
    150.             IOUtils.closeQuietly(out);
    151.         }
    152.     }
    153. }
    154.  
    155.  
    156.  
    157.  
    158.  
    159.  
    160.  
    161.  
    162.  
    163.  
    164.  
    165.  
    166.

    ②配置action.js

    1. 	'Book_LIST': '/book/queryBookPager', //书籍列表 
    2. 	'Book_ADD': '/book/addBook', //增加 
    3. 	'Book_UPD': '/book/editBook', //修改 
    4. 	'Book_DEL': '/book/delBook', // 删除

    ③定义弹窗

    1. 	
    2. 		<el-dialog title="title" :visible.sync="dialogFormVisible" @close="clear()">
    3. 			<el-form :model="book" :rules="rules" ref="book">
    4. 				<el-form-item label="书籍编号" :label-width="formLabelWidth">
    5. 					<el-input v-model="book.id" autocomplete="off">el-input>
    6. 				el-form-item>
    7. 				<el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
    8. 					<el-input v-model="book.bookname" autocomplete="off">el-input>
    9. 				el-form-item>
    10. 				<el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
    11. 					<el-input v-model="book.price" autocomplete="off">el-input>
    12. 				el-form-item>
    13.  
    14. 				<el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
    15. 					<el-select v-model="book.booktype" placeholder="请选择活动区域">
    16. 						<el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key'+t.id">el-option>
    17. 					el-select>
    18. 				el-form-item>
    19. 			el-form>
    20. 			<div slot="footer" class="dialog-footer">
    21. 				<el-button @click="dialogFormVisible = false">取 消el-button>
    22. 				<el-button type="primary" @click="dosub">确 定el-button>
    23. 			div>
    24. 		el-dialog>

    ④ 定义变量

    1. 	data() {
    2. 			return {
    3. 				bookname: '',
    4. 				tableData: [],
    5. 				rows: 10,
    6. 				page: 1,
    7. 				total: 0,
    8. 				title: '新增窗体',
    9. 				dialogFormVisible: false,
    10. 				formLabelWidth: '100px',
    11. 				types: [],
    12. 				book: {
    13. 					id: '',
    14. 					bookname: '',
    15. 					price: '',
    16. 					booktype: ''
    17. 				},
    18. }
    19. }

    ⑤ 定义方法

    1. 		methods: {
    2. 			del(idx, row) {
    3. 				this.$confirm('此操作将永久删除id为' + row.id + '的数据,是否继续?', '提示', {
    4. 					confirmButtonText: '确定',
    5. 					cancelButtonText: '取消',
    6. 					type: 'warning'
    7. 				}).then(() => {
    8. 					let url = this.axios.urls.Book_DEL;
    9. 					this.axios.post(url, {
    10. 						id: row.id
    11. 					}).then(r => {
    12. 						this.clear();
    13. 						this.query({})
    14. 						this.$message({
    15. 							type: 'success',
    16. 							message: '删除成功!'
    17. 						});
    18. 						this.query({});
    19. 					}).catch(e => {
    20.  
    21. 					})
    22.  
    23. 				}).catch(() => {
    24. 					this.$message({
    25. 						type: 'info',
    26. 						message: '已取消删除'
    27. 					});
    28. 				});
    29. 			},
    30. 			dosub() {
    31. 				this.$refs['book'].validate((valid) => {
    32. 					if (valid) {
    33.  
    34. 						let url = this.axios.urls.Book_ADD;
    35. 						if (this.title == '编辑窗体') {
    36. 							url = this.axios.urls.Book_UPD;
    37. 						}
    38. 						let params = {
    39. 							id: this.book.id,
    40. 							bookname: this.book.bookname,
    41. 							price: this.book.price,
    42. 							booktype: this.book.booktype
    43. 						};
    44. 						console.log(params);
    45. 						this.axios.post(url, params).then(r => {
    46. 							this.clear();
    47. 							this.query({})
    48. 						}).catch(e => {
    49.  
    50. 						})
    51.  
    52. 					} else {
    53. 						console.log('error submit!!');
    54. 						return false;
    55. 					}
    56. 				});
    57.  
    58.  
    59. 			},
    60. 			//初始化对话框，重置对话框
    61. 			clear() {
    62. 				this.dialogFormVisible = false;
    63. 				this.title = '新增窗体';
    64. 				this.book = {
    65. 					id: '',
    66. 					bookname: '',
    67. 					price: '',
    68. 					booktype: ''
    69. 				}
    70. 			},
    71. 			open(idx, row) {
    72. 				//打开对话框
    73. 				this.dialogFormVisible = true;
    74. 				if (row) {
    75. 					this.title = '编辑窗体';
    76. 					this.book.id = row.id;
    77. 					this.book.bookname = row.bookname;
    78. 					this.book.price = row.price;
    79. 					this.book.booktype = row.booktype;
    80. 				}
    81. 			},
    82. 			query(params) {
    83. 				let url = this.axios.urls.Book_LIST;
    84. 				this.axios.get(url, {
    85. 					params: params
    86. 				}).then(r => {
    87. 					console.log(r);
    88. 					this.tableData = r.data.rows;
    89. 					this.total = r.data.total;
    90. 				}).catch(e => {})
    91. 			},
    92. 			onSubmit() {
    93. 				let params = {
    94. 					bookname: this.bookname
    95. 				}
    96. 				this.query(params);
    97. 			},
    98.  
    99. 			//当页大小发生变化
    100. 			handleSizeChange(r) {
    101. 				let params = {
    102. 					bookname: this.bookname,
    103. 					rows: r,
    104. 					page: this.page
    105. 				}
    106. 				this.query(params)
    107. 			},
    108. 			//当前页码发生变化
    109. 			handleCurrentChange(p) {
    110. 				let params = {
    111. 					bookname: this.bookname,
    112. 					rows: this.rows,
    113. 					page: p
    114. 				}
    115. 				this.query(params);
    116. 			}
    117. 		},
    118. 		created() {
    119. 			this.query({});
    120. 			this.types = [{
    121. 				id: 1,
    122. 				name: '恐怖'
    123. 			}, {
    124. 				id: 2,
    125. 				name: '惊悚'
    126. 			}, {
    127. 				id: 3,
    128. 				name: '动画片'
    129. 			}, {
    130. 				id: 4,
    131. 				name: '爱情'
    132. 			}];
    133. 		}

    ⑥ 完整代码

    2.  
    3.  
    4. <script>
    5. 	export default {
    6. 		data() {
    7. 			return {
    8. 				bookname: '',
    9. 				tableData: [],
    10. 				rows: 10,
    11. 				page: 1,
    12. 				total: 0,
    13. 				title: '新增窗体',
    14. 				dialogFormVisible: false,
    15. 				formLabelWidth: '100px',
    16. 				types: [],
    17. 				book: {
    18. 					id: '',
    19. 					bookname: '',
    20. 					price: '',
    21. 					booktype: ''
    22. 				},
    23.  
    24. 			
    25. 			}
    26. 		},
    27. 		methods: {
    28. 			del(idx, row) {
    29. 				this.$confirm('此操作将永久删除id为' + row.id + '的数据,是否继续?', '提示', {
    30. 					confirmButtonText: '确定',
    31. 					cancelButtonText: '取消',
    32. 					type: 'warning'
    33. 				}).then(() => {
    34. 					let url = this.axios.urls.Book_DEL;
    35. 					this.axios.post(url, {
    36. 						id: row.id
    37. 					}).then(r => {
    38. 						this.clear();
    39. 						this.query({})
    40. 						this.$message({
    41. 							type: 'success',
    42. 							message: '删除成功!'
    43. 						});
    44. 						this.query({});
    45. 					}).catch(e => {
    46.  
    47. 					})
    48.  
    49. 				}).catch(() => {
    50. 					this.$message({
    51. 						type: 'info',
    52. 						message: '已取消删除'
    53. 					});
    54. 				});
    55. 			},
    56. 			dosub() {
    57. 				this.$refs['book'].validate((valid) => {
    58. 					if (valid) {
    59.  
    60. 						let url = this.axios.urls.Book_ADD;
    61. 						if (this.title == '编辑窗体') {
    62. 							url = this.axios.urls.Book_UPD;
    63. 						}
    64. 						let params = {
    65. 							id: this.book.id,
    66. 							bookname: this.book.bookname,
    67. 							price: this.book.price,
    68. 							booktype: this.book.booktype
    69. 						};
    70. 						console.log(params);
    71. 						this.axios.post(url, params).then(r => {
    72. 							this.clear();
    73. 							this.query({})
    74. 						}).catch(e => {
    75.  
    76. 						})
    77.  
    78. 					} else {
    79. 						console.log('error submit!!');
    80. 						return false;
    81. 					}
    82. 				});
    83.  
    84.  
    85. 			},
    86. 			//初始化对话框，重置对话框
    87. 			clear() {
    88. 				this.dialogFormVisible = false;
    89. 				this.title = '新增窗体';
    90. 				this.book = {
    91. 					id: '',
    92. 					bookname: '',
    93. 					price: '',
    94. 					booktype: ''
    95. 				}
    96. 			},
    97. 			open(idx, row) {
    98. 				//打开对话框
    99. 				this.dialogFormVisible = true;
    100. 				if (row) {
    101. 					this.title = '编辑窗体';
    102. 					this.book.id = row.id;
    103. 					this.book.bookname = row.bookname;
    104. 					this.book.price = row.price;
    105. 					this.book.booktype = row.booktype;
    106. 				}
    107. 			},
    108. 			query(params) {
    109. 				let url = this.axios.urls.Book_LIST;
    110. 				this.axios.get(url, {
    111. 					params: params
    112. 				}).then(r => {
    113. 					console.log(r);
    114. 					this.tableData = r.data.rows;
    115. 					this.total = r.data.total;
    116. 				}).catch(e => {})
    117. 			},
    118. 			onSubmit() {
    119. 				let params = {
    120. 					bookname: this.bookname
    121. 				}
    122. 				this.query(params);
    123. 			},
    124.  
    125. 			//当页大小发生变化
    126. 			handleSizeChange(r) {
    127. 				let params = {
    128. 					bookname: this.bookname,
    129. 					rows: r,
    130. 					page: this.page
    131. 				}
    132. 				this.query(params)
    133. 			},
    134. 			//当前页码发生变化
    135. 			handleCurrentChange(p) {
    136. 				let params = {
    137. 					bookname: this.bookname,
    138. 					rows: this.rows,
    139. 					page: p
    140. 				}
    141. 				this.query(params);
    142. 			}
    143. 		},
    144. 		created() {
    145. 			this.query({});
    146. 			this.types = [{
    147. 				id: 1,
    148. 				name: '恐怖'
    149. 			}, {
    150. 				id: 2,
    151. 				name: '惊悚'
    152. 			}, {
    153. 				id: 3,
    154. 				name: '动画片'
    155. 			}, {
    156. 				id: 4,
    157. 				name: '爱情'
    158. 			}];
    159. 		}
    160.  
    161. 	}
    162. script>
    163.  
    164. <style>
    165. style>

    ⑦ 效果演示

    二、表单验证 

    2.1 添加规则

    需要在里面的form表单里面添加:model="book" :rules="rules" ref="book"，:model和ref必须是一样的

          "book" :rules="rules" ref="book">

    在里面添加prop属性

    注意：该prop属性值要与实体表字段名一致

    2.2 定义规则

    1.  rules: {
    2.         //定义验证格式
    3.         bookname: [
    4.           {required: true, message: '请输入书籍名称', trigger: 'blur'},
    5.           {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
    6.         ],
    7.         price: [
    8.           {required: true, message: '请输入书籍价格', trigger: 'change'},
    9.           {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
    10.         ],
    11.         booktype: [
    12.           {required: true, message: '请输入书籍类型', trigger: 'blur'}
    13.         ]
    14.       },

    2.3 提交事件

    在提交的事件里面添加。

    1.  
    2.  this.$refs[formName].validate((valid) => {
    3.           if (valid) {
    4.             alert('submit!');
    5.           } else {
    6.             console.log('error submit!!');
    7.             return false;
    8.           }
    9.         });

    ormName：form里面:model="book" 或者ref="book"  的名字

    比例我的提交事件为确定按钮，那我是在确定按钮的事件中添加。比如：

    1. 		dosub() {
    2. 				this.$refs['book'].validate((valid) => {
    3. 					if (valid) {
    4.  
    5. 						let url = this.axios.urls.Book_ADD;
    6. 						if (this.title == '编辑窗体') {
    7. 							url = this.axios.urls.Book_UPD;
    8. 						}
    9. 						let params = {
    10. 							id: this.book.id,
    11. 							bookname: this.book.bookname,
    12. 							price: this.book.price,
    13. 							booktype: this.book.booktype
    14. 						};
    15. 						console.log(params);
    16. 						this.axios.post(url, params).then(r => {
    17. 							this.clear();
    18. 							this.query({})
    19. 						}).catch(e => {
    20.  
    21. 						})
    22.  
    23. 					} else {
    24. 						console.log('error submit!!');
    25. 						return false;
    26. 					}
    27. 				});
    28.  
    29.  
    30. 			},

    当你的规则必配了就执行你的增加修改的方法，或者其他的方法

    2.4 前端完整代码​​​​​​​

    2.  
    3.  
    4. <script>
    5. 	export default {
    6. 		data() {
    7. 			return {
    8. 				bookname: '',
    9. 				tableData: [],
    10. 				rows: 10,
    11. 				page: 1,
    12. 				total: 0,
    13. 				title: '新增窗体',
    14. 				dialogFormVisible: false,
    15. 				formLabelWidth: '100px',
    16. 				types: [],
    17. 				book: {
    18. 					id: '',
    19. 					bookname: '',
    20. 					price: '',
    21. 					booktype: ''
    22. 				},
    23.  
    24. 				rules: {
    25. 					bookname: [{
    26. 							required: true,
    27. 							message: '请输入书籍名称',
    28. 							trigger: 'blur'
    29. 						},
    30. 						{
    31. 							min: 2,
    32. 							max: 7,
    33. 							message: '长度在 2 到 7 个字符',
    34. 							trigger: 'blur'
    35.  
    36. 						}
    37. 					],
    38. 					price: [{
    39. 						required: true,
    40. 						message: '请输入书籍价格',
    41. 						trigger: 'blur'
    42. 					}],
    43. 					booktype: [{
    44. 						required: true,
    45. 						message: '请输入书籍类别',
    46. 						trigger: 'blur'
    47. 					}]
    48. 				}
    49. 			}
    50. 		},
    51. 		methods: {
    52. 			del(idx, row) {
    53. 				this.$confirm('此操作将永久删除id为' + row.id + '的数据,是否继续?', '提示', {
    54. 					confirmButtonText: '确定',
    55. 					cancelButtonText: '取消',
    56. 					type: 'warning'
    57. 				}).then(() => {
    58. 					let url = this.axios.urls.Book_DEL;
    59. 					this.axios.post(url, {
    60. 						id: row.id
    61. 					}).then(r => {
    62. 						this.clear();
    63. 						this.query({})
    64. 						this.$message({
    65. 							type: 'success',
    66. 							message: '删除成功!'
    67. 						});
    68. 						this.query({});
    69. 					}).catch(e => {
    70.  
    71. 					})
    72.  
    73. 				}).catch(() => {
    74. 					this.$message({
    75. 						type: 'info',
    76. 						message: '已取消删除'
    77. 					});
    78. 				});
    79. 			},
    80. 			dosub() {
    81. 				this.$refs['book'].validate((valid) => {
    82. 					if (valid) {
    83.  
    84. 						let url = this.axios.urls.Book_ADD;
    85. 						if (this.title == '编辑窗体') {
    86. 							url = this.axios.urls.Book_UPD;
    87. 						}
    88. 						let params = {
    89. 							id: this.book.id,
    90. 							bookname: this.book.bookname,
    91. 							price: this.book.price,
    92. 							booktype: this.book.booktype
    93. 						};
    94. 						console.log(params);
    95. 						this.axios.post(url, params).then(r => {
    96. 							this.clear();
    97. 							this.query({})
    98. 						}).catch(e => {
    99.  
    100. 						})
    101.  
    102. 					} else {
    103. 						console.log('error submit!!');
    104. 						return false;
    105. 					}
    106. 				});
    107.  
    108.  
    109. 			},
    110. 			//初始化对话框，重置对话框
    111. 			clear() {
    112. 				this.dialogFormVisible = false;
    113. 				this.title = '新增窗体';
    114. 				this.book = {
    115. 					id: '',
    116. 					bookname: '',
    117. 					price: '',
    118. 					booktype: ''
    119. 				}
    120. 			},
    121. 			open(idx, row) {
    122. 				//打开对话框
    123. 				this.dialogFormVisible = true;
    124. 				if (row) {
    125. 					this.title = '编辑窗体';
    126. 					this.book.id = row.id;
    127. 					this.book.bookname = row.bookname;
    128. 					this.book.price = row.price;
    129. 					this.book.booktype = row.booktype;
    130. 				}
    131. 			},
    132. 			query(params) {
    133. 				let url = this.axios.urls.Book_LIST;
    134. 				this.axios.get(url, {
    135. 					params: params
    136. 				}).then(r => {
    137. 					console.log(r);
    138. 					this.tableData = r.data.rows;
    139. 					this.total = r.data.total;
    140. 				}).catch(e => {})
    141. 			},
    142. 			onSubmit() {
    143. 				let params = {
    144. 					bookname: this.bookname
    145. 				}
    146. 				this.query(params);
    147. 			},
    148.  
    149. 			//当页大小发生变化
    150. 			handleSizeChange(r) {
    151. 				let params = {
    152. 					bookname: this.bookname,
    153. 					rows: r,
    154. 					page: this.page
    155. 				}
    156. 				this.query(params)
    157. 			},
    158. 			//当前页码发生变化
    159. 			handleCurrentChange(p) {
    160. 				let params = {
    161. 					bookname: this.bookname,
    162. 					rows: this.rows,
    163. 					page: p
    164. 				}
    165. 				this.query(params);
    166. 			}
    167. 		},
    168. 		created() {
    169. 			this.query({});
    170. 			this.types = [{
    171. 				id: 1,
    172. 				name: '恐怖'
    173. 			}, {
    174. 				id: 2,
    175. 				name: '惊悚'
    176. 			}, {
    177. 				id: 3,
    178. 				name: '动画片'
    179. 			}, {
    180. 				id: 4,
    181. 				name: '爱情'
    182. 			}];
    183. 		}
    184.  
    185. 	}
    186. script>
    187.  
    188. <style>
    189. style>

    2.5 效果

  • 相关阅读:
    在选购腾讯云服务器时需要注意哪些参数？
    【学习笔记】子集和问题
    LGBM 模型结果 图形展示
    RK3588平台开发系列讲解（项目篇）视频监控之RTMP推流
    贪心算法（算法竞赛、蓝桥杯）--修理牛棚
    遍历堆 PAT甲级 1155 堆路径
    【无标题】
    渲染路径RenderingPath
    技巧分享：wps文件怎么转换成word格式？
    计算机网络第3章（数据链路层）-----总结1
  • 原文地址：https://blog.csdn.net/m0_73192864/article/details/133343700