配合前端vue实现表格的增删改查

2021-10-13    前端达人

前言:

        这个章节内容是比较多的,分为前端部分和后端部分。

目录:

实现效果:增删改查

 一、后端部分:

(1)数据库:

        新建一张表user,设置几个字段,效果如下:

 (2)egg逻辑部分:

提供的接口:http://localhost:7001/setUserList

 (3)egg具体实现步骤:

1、router.js中添加:

2、新建:app / controller / new / user.js

(1)查,模糊查询 

(2)增

 (3)改

 (4)删

 user.js 源码:

3、引入mysql:点我

4、跨域问题解决:点我

 二、前端部分:

新建vue文件:testApi.vue

1、初始化查询列表数据:页面展示列表,列表数据mouted获取

2、页面点击新增:展示弹框,并将弹框内容去除掉,点击新增,将弹框内容发送给后端

 3、页面点击列表里面具体数据的编辑:弹框,并回填数据,修改将当前数据的id和表格数据传给后端

4、删除按钮,点击出现二次确认弹框,点击确认将当前数据的id给后端就行 

 testApi.vue 源码:


实现效果:增删改查

 一、后端部分:

(1)数据库:

        新建一张表user,设置几个字段,效果如下:

 (2)egg逻辑部分:

提供的接口:http://localhost:7001/setUserList

  1. get 请求,获取数据,支持模糊查询
  2. post 请求,新增数据
  3. put 请求,给后端当前数据id,修改内容
  4. delete 请求,根据数据id删除当前条数据

 (3)egg具体实现步骤:

1、router.js中添加:

 
  1. /**
  2. * 路由配置
  3. * @param app
  4. */
  5. module.exports = app => {
  6. const { router, controller } = app;
  7. //--------------------------------------------------
  8. // server接口
  9. //--------------------------------------------------
  10. app.get('/setUserList', controller.new.user.getUserList);
  11. app.post('/setUserList', controller.new.user.postUserList);
  12. app.put('/setUserList', controller.new.user.putUserList);
  13. app.delete('/setUserList', controller.new.user.deleteUserList);
  14. }

2、新建:app / controller / new / user.js

(1)查,模糊查询 

select * from user where name like ? % 内容 %

(2)增

this.app.mysql.insert('表名',内容)

 (3)改

UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2

 (4)删

delete from user where id = 1

 user.js 源码:

 
  1. /**
  2. * 用户信息路由
  3. * @param app
  4. * @returns {HomeController}
  5. */
  6. const Controller = require('egg').Controller;
  7. class NewsController extends Controller {
  8. async getUserList() {
  9. //查询库里的user表
  10. let params = this.ctx.query //获取路径后面的参数
  11. console.log('用户的参数:');
  12. console.log(params);
  13. let sql = 'select * from user'
  14. let initSql = sql
  15. let content = [];//参数
  16. let isMore = false;//是否有多个查询参数
  17. /**
  18. * @模糊查询-量大的时候效率低
  19. * select * from user where name like ? % 内容 %
  20. * 在user表中全局查找name值 == 内容的
  21. * % 内容 % 全局查找内容
  22. * 内容 % 查找以 内容 开头的数据
  23. * */
  24. if(params.name){
  25. sql += " where name like ?";
  26. content.push( "%"+params.name+"%" );
  27. isMore = true;
  28. }
  29. if(params.age){
  30. if(isMore){//true代表有多个参数
  31. sql += "and age LIKE ?";//and是两个条件都必须满足,or是或的关系
  32. }else{
  33. sql += " WHERE age LIKE ?";
  34. }
  35. content.push( "%"+params.age+"%" )
  36. isMore = true;
  37. }
  38. if(params.address){
  39. if(isMore){//true代表有多个参数
  40. sql += "and address LIKE ?";//and是两个条件都必须满足,or是或的关系
  41. }else{
  42. sql += " WHERE address LIKE ?";
  43. }
  44. content.push( "%"+params.address+"%" )
  45. isMore = true;
  46. }
  47. if(params.phone){
  48. if(isMore){//true代表有多个参数
  49. sql += "and phone LIKE ?";//and是两个条件都必须满足,or是或的关系
  50. }else{
  51. sql += " WHERE phone LIKE ?";
  52. }
  53. content.push( "%"+params.phone+"%" )
  54. }
  55. //开启分页
  56. if(params.page || params.pageSize){
  57. let current = params.page;//当前页码
  58. let pageSize = params.pageSize;//一页展示多少条数据
  59. sql += " limit ?,?";
  60. content.push((current-1)*pageSize,parseInt(pageSize));
  61. }
  62. let allList = await this.app.mysql.query(initSql);
  63. let userList= await this.app.mysql.query(
  64. sql,content
  65. );
  66. this.ctx.body = {
  67. code:200,
  68. masg:'success',
  69. data: {
  70. list:userList,
  71. total:allList.length
  72. }
  73. };
  74. }
  75. /**
  76. * 新增用户信息
  77. * INSERT INTO loginlist (aaa,bbb,ccc) VALUES ('"'+111+'","'+222+'","'+333+'"')
  78. * this.app.mysql.insert('表名',内容)
  79. * this.app.mysql.insert('表名',{
  80. * name:123,
  81. * age:1,
  82. * address:西安
  83. * })
  84. */
  85. //
  86. async postUserList() {
  87. console.log(this.ctx.request.body);
  88. //新增数据-user表
  89. let data = this.ctx.request.body
  90. data.id = parseInt(Math.random()*100000)
  91. let insertResult = await this.app.mysql.insert(
  92. 'user', data
  93. );
  94. this.ctx.body = {
  95. code:200,
  96. masg:'success',
  97. data:insertResult
  98. };
  99. }
  100. /**
  101. * 修改用户信息
  102. * UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2(唯一值),修改一个
  103. * UPDATE loginlist SET username = 'admins', `password` = 'Ad123456' WHERE id = 2,修改多个
  104. */
  105. async putUserList(){
  106. //新增数据-user表
  107. let id = this.ctx.query.id //获取路径后面的参数
  108. let data = this.ctx.request.body
  109. let sql = 'update user set '
  110. let isMore = false;//是否有多个查询参数
  111. if(!id){
  112. this.ctx.body = {
  113. code:200,
  114. masg:'warning',
  115. data:'id没有传'
  116. };
  117. return
  118. }
  119. //姓名
  120. if(data.name){
  121. sql += 'name = "'+data.name+'"'
  122. isMore = true
  123. }
  124. //年龄
  125. if(data.age){
  126. if(isMore){
  127. sql += ',age = "'+data.age+'"'
  128. }else{
  129. sql += 'age = "'+data.age+'"'
  130. }
  131. isMore = true
  132. }
  133. //地址
  134. if(data.address){
  135. if(isMore){
  136. sql += ',address = "'+data.address+'"'
  137. }else{
  138. sql += 'address = "'+data.address+'"'
  139. }
  140. isMore = true
  141. }
  142. //手机号
  143. if(data.phone){
  144. if(isMore){
  145. sql += ',phone = "'+data.phone+'"'
  146. }else{
  147. sql += 'phone = "'+data.phone+'"'
  148. }
  149. isMore = true
  150. }
  151. //邮箱地址
  152. if(data.email){
  153. if(isMore){
  154. sql += ',email = "'+data.email+'"'
  155. }else{
  156. sql += 'email = "'+data.email+'"'
  157. }
  158. }
  159. sql += ' where id = ' + id
  160. let insertResult = await this.app.mysql.query(sql)
  161. this.ctx.body = {
  162. code:200,
  163. masg:'success',
  164. data:insertResult
  165. };
  166. }
  167. /**
  168. * 注销用户接口
  169. * DELETE FROM loginlist WHERE username = 'superman'
  170. */
  171. async deleteUserList(){
  172. //查询库里的user表
  173. let params = this.ctx.query //获取路径后面的参数
  174. console.log('用户的参数:');
  175. console.log(params);
  176. let sql = 'delete from user where id = '+ params.id
  177. let res = await this.app.mysql.query(
  178. sql
  179. );
  180. this.ctx.body = {
  181. code:200,
  182. masg:'success',
  183. data:res
  184. };
  185. }
  186. /**
  187. * 模糊查询封装方法
  188. * @params = auth
  189. * */
  190. async query( auth ) {
  191. const TABLE_NAME = 'user';
  192. const QUERY_STR = 'id, name, age, phone, address';
  193. let sql = `select ${QUERY_STR} from ${TABLE_NAME} where authName like "%${auth.authName}%"`;
  194. const row = await this.app.mysql.query(sql);
  195. return row;
  196. }
  197. }
  198. module.exports = NewsController;

3、引入mysql:点我

4、跨域问题解决:点我

 二、前端部分:

新建vue文件:testApi.vue

1、初始化查询列表数据:页面展示列表,列表数据mouted获取

 
  1. <el-table
  2. :data="tableInfo.list"
  3. style="width: 100%">
  4. <el-table-column
  5. type="index"
  6. label="序号"
  7. align="center">
  8. </el-table-column>
  9. <el-table-column
  10. prop="name"
  11. label="姓名"
  12. align="center">
  13. </el-table-column>
  14. <el-table-column
  15. prop="age"
  16. label="年龄"
  17. align="center">
  18. </el-table-column>
  19. <el-table-column
  20. prop="address"
  21. label="地址">
  22. </el-table-column>
  23. <el-table-column
  24. prop="phone"
  25. label="手机号">
  26. </el-table-column>
  27. <el-table-column
  28. prop="email"
  29. label="邮箱">
  30. </el-table-column>
  31. <el-table-column
  32. label="操作"
  33. width="100">
  34. <template slot-scope="scope">
  35. <el-button type="text" size="small" @click="editFun(scope.row)">编辑</el-button>
  36. <el-button type="text" size="small" @click="deleteFun(scope.row)">删除</el-button>
  37. </template>
  38. </el-table-column>
  39. </el-table>
 
  1. mounted(){
  2. this.initPage()
  3. },
  4. methods: {
  5. /***
  6. * 获取列表数据
  7. */
  8. initPage() {
  9. let params = {
  10. page: this.tableInfo.page, //当前页
  11. pageSize: this.tableInfo.pageSize //一页展示多少条
  12. }
  13. this.$axios.get('http://localhost:7001/setUserList',{
  14. params
  15. }).then(res => {
  16. this.tableInfo.list = res.data.data.list
  17. this.tableInfo.total = res.data.data.total
  18. }).catch(error => {
  19. this.$message(error.data.message)
  20. })
  21. },
  22. }

2、页面点击新增:展示弹框,并将弹框内容去除掉,点击新增,将弹框内容发送给后端

 3、页面点击列表里面具体数据的编辑:弹框,并回填数据,修改将当前数据的id和表格数据传给后端

 

 

4、删除按钮,点击出现二次确认弹框,点击确认将当前数据的id给后端就行 

 testApi.vue 源码:

 
  1. <template>
  2. <div class="pro_body">
  3. <el-button type='success' @click="addModal">新增</el-button>
  4. <el-table
  5. :data="tableInfo.list"
  6. style="width: 100%">
  7. <el-table-column
  8. type="index"
  9. label="序号"
  10. align="center">
  11. </el-table-column>
  12. <el-table-column
  13. prop="name"
  14. label="姓名"
  15. align="center">
  16. </el-table-column>
  17. <el-table-column
  18. prop="age"
  19. label="年龄"
  20. align="center">
  21. </el-table-column>
  22. <el-table-column
  23. prop="address"
  24. label="地址">
  25. </el-table-column>
  26. <el-table-column
  27. prop="phone"
  28. label="手机号">
  29. </el-table-column>
  30. <el-table-column
  31. prop="email"
  32. label="邮箱">
  33. </el-table-column>
  34. <el-table-column
  35. label="操作"
  36. width="100">
  37. <template slot-scope="scope">
  38. <el-button type="text" size="small" @click="editFun(scope.row)">编辑</el-button>
  39. <el-button type="text" size="small" @click="deleteFun(scope.row)">删除</el-button>
  40. </template>
  41. </el-table-column>
  42. </el-table>
  43. <el-pagination
  44. class="work_pagination"
  45. background
  46. :layout="'total,prev, pager, next,sizes'"
  47. :total="tableInfo.total"
  48. :hide-on-single-page="false"
  49. :current-page="tableInfo.page"
  50. :page-size="tableInfo.pageSize"
  51. @current-change="pageChange"
  52. @size-change="pageSizeChange"
  53. >
  54. </el-pagination>
  55. <!--弹框部分-->
  56. <el-dialog
  57. custom-class="modalName"
  58. :visible.sync="modal.show"
  59. :width="modal.type === 'delete'? '470px' : '800px'">
  60. <h3 v-if="modal.type === 'add'" slot="title">新增</h3>
  61. <h3 v-if="modal.type === 'edit'" slot="title">修改</h3>
  62. <h3 v-if="modal.type === 'delete'" slot="title">提示</h3>
  63. <div v-if="modal.type !== 'delete'" class="editNameBody">
  64. <el-form class="editNameFrom" :model="modalFrom" label-width="120px" label-position="right">
  65. <el-form-item label="姓名:">
  66. <el-input v-model="modalFrom.name"></el-input>
  67. </el-form-item>
  68. <el-form-item label="年纪:">
  69. <el-input v-model="modalFrom.age"></el-input>
  70. </el-form-item>
  71. <el-form-item label="手机号:">
  72. <el-input v-model="modalFrom.phone"></el-input>
  73. </el-form-item>
  74. <el-form-item label="邮箱:">
  75. <el-input v-model="modalFrom.email"></el-input>
  76. </el-form-item>
  77. <el-form-item label="地址:">
  78. <el-input v-model="modalFrom.address" type="textarea"></el-input>
  79. </el-form-item>
  80. </el-form>
  81. </div>
  82. <div v-if="modal.type === 'delete'">
  83. <i class="el-icon-warning" style="margin-right:7px;color:#FFAA00;font-size: 16px;"></i>请确认是否删除
  84. </div>
  85. <div slot="footer" class="dialog-footer">
  86. <el-button @click="modal.show = false">取 消</el-button>
  87. <el-button v-if="modal.type === 'add'" type="primary" @click="addUserList">新增</el-button>
  88. <el-button v-if="modal.type === 'edit'" type="primary" @click="editUserList">修改</el-button>
  89. <el-button v-if="modal.type === 'delete'" type="primary" @click="deleteUserList">确 认</el-button>
  90. </div>
  91. </el-dialog>
  92. </div>
  93. </template>
  94. <script>
  95. export default {
  96. data() {
  97. return {
  98. tableInfo:{
  99. columns:[
  100. {
  101. title: '序号',
  102. type: 'index',
  103. },{
  104. title: '姓名',
  105. prop: 'name',
  106. align: 'center'
  107. },
  108. {
  109. title: '年龄',
  110. prop: 'age',
  111. align: 'center'
  112. },{
  113. title: '地址',
  114. prop: 'address',
  115. align: 'center'
  116. },{
  117. title: '邮箱',
  118. prop: 'email',
  119. align: 'center'
  120. },{
  121. title: '手机号',
  122. prop: 'phone',
  123. align: 'center'
  124. },
  125. {//内容slot
  126. slot: 'operateT'
  127. }
  128. ],
  129. list:[],
  130. page:1,
  131. pageSize:10,
  132. total:0,
  133. },
  134. modal:{
  135. show:false,
  136. type:'add'
  137. },
  138. modalFrom:{
  139. name:'',
  140. age:'',
  141. phone:'',
  142. address:'',
  143. email:''
  144. }
  145. };
  146. },
  147. mounted(){
  148. this.initPage()
  149. },
  150. methods: {
  151. /***
  152. * 获取列表数据
  153. */
  154. initPage() {
  155. let params = {
  156. page: this.tableInfo.page, //当前页
  157. pageSize: this.tableInfo.pageSize //一页展示多少条
  158. }
  159. this.$axios.get('http://localhost:7001/setUserList',{
  160. params
  161. }).then(res => {
  162. this.tableInfo.list = res.data.data.list
  163. this.tableInfo.total = res.data.data.total
  164. }).catch(error => {
  165. this.$message(error.data.message)
  166. })
  167. },
  168. /**
  169. * 当前页发生改变
  170. * */
  171. pageChange(page) {
  172. this.tableInfo.page = page
  173. this.initPage() //刷新列表数据
  174. },
  175. /**
  176. * 当前第几页发生改变
  177. * */
  178. pageSizeChange(pageSize) {
  179. this.tableInfo.page = 1
  180. this.tableInfo.pageSize = pageSize
  181. this.initPage() //刷新列表数据
  182. },
  183. //新增弹框
  184. addModal(){
  185. this.modalFrom ={
  186. name:'',
  187. age:'',
  188. phone:'',
  189. address:'',
  190. email:''
  191. }
  192. this.modal.show = true
  193. this.modal.type = 'add'
  194. },
  195. //修改弹框
  196. editFun(row){
  197. this.modalFrom = row
  198. this.modal.show = true
  199. this.modal.type = 'edit'
  200. },
  201. //删除弹框
  202. deleteFun(row){
  203. this.modalFrom = row
  204. this.modal.show = true
  205. this.modal.type = 'delete'
  206. },
  207. addUserList(){
  208. this.$axios({
  209. method:'post',
  210. url:'http://localhost:7001/setUserList',
  211. data:this.modalFrom
  212. }).then(res => {
  213. this.$message.success('新增成功')
  214. this.initPage() //刷新数据
  215. this.modal.show = false
  216. })
  217. },
  218. editUserList(){
  219. this.$axios({
  220. method:'put',
  221. url:'http://localhost:7001/setUserList',
  222. params:{
  223. id:this.modalFrom.id
  224. },
  225. data:this.modalFrom
  226. }).then(res => {
  227. this.$message.success('修改成功')
  228. this.initPage() //刷新数据
  229. this.modal.show = false
  230. })
  231. },
  232. deleteUserList(){
  233. this.$axios({
  234. method:'delete',
  235. url:'http://localhost:7001/setUserList',
  236. params:{
  237. id:this.modalFrom.id
  238. }
  239. }).then(res => {
  240. this.$message.success('删除成功')
  241. this.initPage() //刷新数据
  242. this.modal.show = false
  243. })
  244. }
  245. }
  246. }
  247. </script>
  248. <style lang='scss'>
  249. .modalName{
  250. h3{
  251. padding:10px;
  252. }
  253. }
  254. </style>


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档