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

校园管理系统（小程序+后台管理）——直击毕设_学校管理后台系统展示

作者：你好赵伟 | 2024-05-19 09:13:49

赞

踩

学校管理后台系统展示

项目展示：

小程序端大体展示

后台管理大体展示

 

 

 

项目需要前后端的配合

  1. 沟通与协作：良好的沟通和协作是前端和后端开发之间成功结合的关键。团队成员应该定期沟通，并确保共享相同的目标和理解。

  2. API 设计：定义清晰的 API 接口，确保前端和后端之间的数据交换和通信顺畅。API 应该简单明了，并符合业务需求和最佳实践。

  3. 技术栈的选择：选择合适的技术栈以支持前端和后端的开发。常见的前端技术包括 HTML、CSS、JavaScript、React、Angular 或 Vue.js，而后端技术可以包括 Node.js、Python、Ruby、Java 或 PHP 等。

  4. 数据交互：确保前端和后端能够有效地交换数据。常见的数据交互方式包括使用 RESTful API、GraphQL 或 WebSocket 等。

  5. 安全性：确保应用程序在前端和后端都具有必要的安全性。包括对数据传输进行加密，对用户输入进行验证和清理，以及使用安全的身份验证和授权机制等。

  6. 性能优化：在前端与后端开发中都要注意性能优化。前端需要优化页面加载速度和响应时间，后端需要优化数据处理和数据库查询等。

  7. 版本控制和部署：使用版本控制系统（如 Git）进行代码管理，并建立适当的部署流程以确保应用程序可以顺利部署到生产环境中。

  8. 测试：进行全面的单元测试、集成测试和端到端测试，以确保前端和后端代码的质量和稳定性。

  9. 监控与日志：建立监控系统和日志记录机制，以便及时发现并解决潜在的问题。

  10. 持续改进：不断收集用户反馈并进行改进。定期审查代码，并寻找优化前端和后端的机会。

呃....然而这些都由我一个人做了。

不是买实体服务器买不起，是云开发更有性价比（坏笑，嘿嘿~）

首先需要完成的是小程序的开发，小程序端我选择的是云开发，因为我想的是反正做一个只在学校用就那几w人也撑不爆云服务空间哇。

关于想成为云全栈开发的朋友们，可以按照我的学习路线走哈~

云开发的学习我这里推荐我自己的哔哩哔哩课程（所有全部免费开放，地址：卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频）

我的视频集里面包括（小程序原生、uniapp、unicloud、python等）记住哦，我的简介里面有加群方式：814571333（“爱编程互助基地”，最近有很多打广告的所以最近机一按先禁言）

里面有惊喜开源项目供大家参考哦~

关于此项目

其实关于此项目并不是我最近几天完成的，是个项目从一开始的小项目，走到这一步，其实它沉淀了很多的东西，它的开发经历20多次版本的更新。由于上半年开发完它之后就去打比赛了。所以一直把它放到了一边，直到前几天国庆节放假回老家，想着，闲着也是闲着，给我的“宝儿~”升升级。于是就有了此项目。

涉及到的技术栈

  1. vue.js
  2. node.js
  3. CloudBase
  4. WeChat Base

展示部分前端小程序代码

  1. // pages/shouye/shouye.js
  2.  
  3. // const { update } = require("XrFrame/kanata/lib/index")
  4.  
  5. const app = getApp()
  6. const defaultAvatarUrl = '../../images/Default_avatar.png'
  7. Page({
  8.  
  9.   data: {
  10.     // 轮播图开始
  11.     imgUrls: [
  12.       'XXXX-1312670923/yian_tupian/two.jpg',
  13.       'XXXX-1312670923/yian_tupian/two.jpg',
  14.     ],
  15.     circular: true,
  16.     // indicatorDots: true,  
  17.     autoplay: true, 
  18.     interval: 2000, 
  19.     duration: 300, 
  20.     inputShowed: false,
  21.     touxiang: '../../images/Default_avatar.png',
  22.     moren_xinxi: '尚未登陆',
  23.     show_login: false,
  24.     avatarUrl: defaultAvatarUrl,
  25.     name: '请输入昵称',
  26.     xuehao:'请输入学号',
  27.     xingming:'请输入姓名',
  28.     Public_announcement: true,
  29.     Public_announcement_1: false,
  30.     My_mail: true,
  31.     My_mail_1: false
  32.   },
  33.   close_login_case() {
  34.     this.setData({
  35.       show_login: false
  36.     })
  37.   },
  38.   show_login_case() {
  39.     this.setData({
  40.       show_login: true
  41.     })
  42.  
  43.   },
  44.   WD_ZH_1() {
  45.     let that = this
  46.     wx.cloud.callFunction({
  47.       name: 'getusers',
  48.       data: {},
  49.     }).then(res => {
  50.       that.setData({
  51.         user_openid: res.result.openid
  52.       })
  53.       wx.cloud.database().collection('users').where({
  54.           _openid: res.result.openid
  55.         })
  56.         .remove({
  57.           success(res) {
  58.             that.setData({
  59.               moren_xinxi: '尚未登陆',
  60.               touxiang: '../../images/Default_avatar.png'
  61.             })
  62.             wx.showToast({
  63.               title: '谢谢使用!',
  64.               icon: 'none'
  65.             })
  66.             that.onShow()
  67.           }
  68.         })
  69.     })
  70.   },
  71.   onChooseAvatar(e) {
  72.     let avatarUrl = e.detail.avatarUrl
  73.     this.setData({
  74.       avatarUrl,
  75.     })
  76.   },
  77.   input_nickname(e) {
  78.     let nickname = e.detail.value
  79.     this.setData({
  80.       nickname
  81.     })
  82.   },
  83.   input_xuehao(e){
  84.     let xuehao = e.detail.value
  85.     this.setData({
  86.       xuehao
  87.     })
  88.   },
  89.   input_xingming(e){
  90.     let xingming = e.detail.value
  91.     this.setData({
  92.       xingming
  93.     })
  94.   },
  95.   denglu() {
  96.     let that = this
  97.     if (that.data.avatarUrl == defaultAvatarUrl || that.data.nickname == '请输入昵称' || that.data.xuehao == '请输入学号' || that.data.xingming == '请输入姓名') {
  98.       wx.showToast({
  99.         title: '请填写正确信息',
  100.         icon: 'none'
  101.       })
  102.     } else {
  103.       wx.cloud.callFunction({
  104.         name: 'getusers',
  105.         data: {},
  106.       }).then(res => {
  107.         that.setData({
  108.           _openid: res.result.openid
  109.         })
  110.         wx.cloud.database().collection('users').where({
  111.           _openid: res.result.openid
  112.         }).get({
  113.           success(res) {
  114.             wx.cloud.database().collection('users').add({
  115.               data: {
  116.                 nickname: that.data.nickname,
  117.                 touxiangUrl: that.data.avatarUrl,
  118.                 openid: that.data._openid,
  119.                 xuehao:that.data.xuehao,
  120.                 xingming:that.data.xingming,
  121.                 user:1
  122.               },
  123.               success(res) {
  124.                 that.setData({
  125.                   show_login: false
  126.                 })
  127.                 wx.showToast({
  128.                   title: '登录成功！',
  129.                 })
  130.                 wx.cloud.callFunction({
  131.                   name:'getusers',
  132.                   data:{}
  133.                 }).then(res=>{
  134.                   wx.cloud.database().collection('xinxiaoxi_users').where({
  135.                     _openid:res.result.openid
  136.                   }).get({
  137.                     success(res){
  138.                       console.log(res.data.length,'useruser');
  139.                       if(res.data.length < 1){
  140.                         wx.cloud.database().collection('xinxiaoxi_users').add({
  141.                           data: {
  142.                             user:1,
  143.                             gonggao: [],
  144.                             youjian: [],
  145.                           }
  146.                         })
  147.                       }else{
  148.                         console.log('user已经添加过了');
  149.                       }
  150.                     }
  151.                   })
  152.                   wx.cloud.database().collection('Two_dimensional_code').where({
  153.                     _openid:res.result.openid
  154.                   }).get({
  155.                     success(res){
  156.                       console.log(res.data.length,'useruser');
  157.                       if(res.data.length < 1){
  158.                         wx.cloud.database().collection('Two_dimensional_code').add({
  159.                           data: {
  160.                             user:1,
  161.                             Two_dimensional_code: [],
  162.                           }
  163.                         })
  164.                       }else{
  165.                         console.log('二维码已经添加过了');
  166.                       }
  167.                     }
  168.                   })
  169.                 })
  170.                 that.onShow()
  171.                 this.duqu_users()
  172.               }
  173.             })
  174.           }
  175.         })
  176.       })
  177.     }
  178.   },
  179.   shuaxin() {
  180.     let that = this
  181.     wx.cloud.callFunction({
  182.       name: 'getusers',
  183.       data: {},
  184.     }).then(res => {
  185.       that.setData({
  186.         _openid: res.result.openid
  187.       })
  188.       wx.cloud.database().collection('users').where({
  189.         _openid: res.result.openid
  190.       }).get({
  191.         success(res) {
  192.           that.setData({
  193.             moren_xinxi: res.data[0].nickname,
  194.             touxiang: res.data[0].touxiangUrl,
  195.           })
  196.         }
  197.       })
  198.     })
  199.   },
  200.   Write_letters() {
  201.     let that = this
  202.     if (that.data.touxiang == "../../images/Default_avatar.png" || that.data.moren_xinxi == "尚未登陆") {
  203.       wx.showToast({
  204.         title: '您还未登录!',
  205.         icon: 'none'
  206.       })
  207.     } else {
  208.       wx.navigateTo({
  209.         url: '../Write_letters/Write_letters',
  210.       })
  211.     }
  212.   },
  213.   My_mail() {
  214.     let that = this
  215.     if (that.data.touxiang == "../../images/Default_avatar.png" || that.data.moren_xinxi == "尚未登陆") {
  216.       wx.showToast({
  217.         title: '您还未登录!',
  218.         icon: 'none'
  219.       })
  220.     } else {
  221.       wx.navigateTo({
  222.         url: '../My_mail/My_mail',
  223.       })
  224.     }
  225.   },
  226.   My_wenjain() {
  227.     let that = this
  228.     if (that.data.touxiang == "../../images/Default_avatar.png" || that.data.moren_xinxi == "尚未登陆") {
  229.       wx.showToast({
  230.         title: '您还未登录!',
  231.         icon: 'none'
  232.       })
  233.     } else {
  234.       wx.navigateTo({
  235.         url: '../My_wenjain/My_wenjain',
  236.       })
  237.     }
  238.   },
  239.   Formula_announcement() {
  240.     let that = this
  241.     if (that.data.touxiang == "../../images/Default_avatar.png" || that.data.moren_xinxi == "尚未登陆") {
  242.       wx.showToast({
  243.         title: '您还未登录!',
  244.         icon: 'none'
  245.       })
  246.     } else {
  247.       wx.navigateTo({
  248.         url: '../Formula_announcement/Formula_announcement',
  249.       })
  250.     }
  251.   },
  252.   W_zonghe() {
  253.     let that = this
  254.     wx.cloud.database().collection('content').get({
  255.       success(res) {
  256.         console.log(res);
  257.         let W_zonghe = res.data.length
  258.         that.setData({
  259.           W_zonghe: W_zonghe
  260.         })
  261.       }
  262.     })
  263.   },
  264.   W_zixun() {
  265.     let that = this
  266.     wx.cloud.database().collection('content').where({
  267.       newsid: '0'
  268.     }).get({
  269.       success(res) {
  270.         let W_zixun
  271.         W_zixun = res.data.length
  272.         that.setData({
  273.           W_zixun: W_zixun
  274.         })
  275.         if (W_zixun >= 1) {
  276.           that.setData({
  277.             W_zixun1: true,
  278.             W_zixun2: false,
  279.             W_zixun: W_zixun
  280.           })
  281.         } else {
  282.           that.setData({
  283.             W_zixun1: false,
  284.             W_zixun2: true,
  285.           })
  286.         }
  287.       }
  288.     })
  289.   },
  290.   W_yijian() {
  291.     let that = this
  292.     wx.cloud.database().collection('content').where({
  293.       newsid: '1'
  294.     }).get({
  295.       success(res) {
  296.         let W_yijian
  297.         W_yijian = res.data.length
  298.         that.setData({
  299.           W_yijian: W_yijian
  300.         })
  301.         if (W_yijian >= 1) {
  302.           that.setData({
  303.             W_yijian1: true,
  304.             W_yijian2: false,
  305.             W_yijian: W_yijian
  306.           })
  307.         } else {
  308.           that.setData({
  309.             W_yijian1: false,
  310.             W_yijian2: true,
  311.           })
  312.         }
  313.       }
  314.     })
  315.   },
  316.   W_qiuzhu() {
  317.     let that = this
  318.     wx.cloud.database().collection('content').where({
  319.       newsid: '2'
  320.     }).get({
  321.       success(res) {
  322.         let W_qiuzhu
  323.         W_qiuzhu = res.data.length
  324.         that.setData({
  325.           W_qiuzhu: W_qiuzhu
  326.         })
  327.         if (W_qiuzhu >= 1) {
  328.           that.setData({
  329.             W_qiuzhu1: true,
  330.             W_qiuzhu2: false,
  331.             W_qiuzhu: W_qiuzhu
  332.           })
  333.         } else {
  334.           that.setData({
  335.             W_qiuzhu1: false,
  336.             W_qiuzhu2: true,
  337.           })
  338.         }
  339.  
  340.       }
  341.     })
  342.   },
  343.   W_jubao() {
  344.     let that = this
  345.     wx.cloud.database().collection('content').where({
  346.       newsid: '3'
  347.     }).get({
  348.       success(res) {
  349.         let W_jubao
  350.         W_jubao = res.data.length
  351.         that.setData({
  352.           W_jubao: W_jubao
  353.         })
  354.         if (W_jubao >= 1) {
  355.           that.setData({
  356.             W_jubao1: true,
  357.             W_jubao2: false,
  358.             W_jubao: W_jubao
  359.           })
  360.         } else {
  361.           that.setData({
  362.             W_jubao1: false,
  363.             W_jubao2: true,
  364.           })
  365.         }
  366.  
  367.       }
  368.     })
  369.   },
  370.   W_tousu() {
  371.     let that = this
  372.     wx.cloud.database().collection('content').where({
  373.       newsid: '4'
  374.     }).get({
  375.       success(res) {
  376.         let W_tousu
  377.         W_tousu = res.data.length
  378.         that.setData({
  379.           W_tousu: W_tousu
  380.         })
  381.         if (W_tousu >= 1) {
  382.           that.setData({
  383.             W_tousu1: true,
  384.             W_tousu2: false,
  385.             W_tousu: W_tousu
  386.           })
  387.         } else {
  388.           that.setData({
  389.             W_tousu1: false,
  390.             W_tousu2: true,
  391.           })
  392.         }
  393.       }
  394.     })
  395.   },
  396.   W_baoxiu() {
  397.     let that = this
  398.     wx.cloud.database().collection('content').where({
  399.       newsid: '5'
  400.     }).get({
  401.       success(res) {
  402.         let W_baoxiu
  403.         W_baoxiu = res.data.length
  404.         that.setData({
  405.           W_baoxiu: W_baoxiu
  406.         })
  407.         if (W_baoxiu >= 1) {
  408.           that.setData({
  409.             W_baoxiu1: true,
  410.             W_baoxiu2: false,
  411.             W_baoxiu: W_baoxiu
  412.           })
  413.         } else {
  414.           that.setData({
  415.             W_baoxiu1: false,
  416.             W_baoxiu2: true,
  417.           })
  418.         }
  419.       }
  420.     })
  421.   },
  422.   Y_zonghe() {
  423.     let that = this
  424.     wx.cloud.database().collection('yiyuedu').get({
  425.       success(res) {
  426.         console.log(res);
  427.         let Y_zonghe = res.data.length
  428.         that.setData({
  429.           Y_zonghe: Y_zonghe
  430.         })
  431.       }
  432.     })
  433.   },
  434.  
  435.   Y_zixun() {
  436.     let that = this
  437.     wx.cloud.database().collection('yiyuedu').where({
  438.       newsid: '0'
  439.     }).get({
  440.       success(res) {
  441.         let Y_zixun
  442.         Y_zixun = res.data.length
  443.         that.setData({
  444.           Y_zixun: Y_zixun
  445.         })
  446.         if (Y_zixun >= 1) {
  447.           that.setData({
  448.             Y_zixun1: true,
  449.             Y_zixun2: false,
  450.             Y_zixun: Y_zixun
  451.           })
  452.         } else {
  453.           that.setData({
  454.             Y_zixun1: false,
  455.             Y_zixun2: true,
  456.           })
  457.         }
  458.       }
  459.     })
  460.   },
  461.   Y_yijian() {
  462.     let that = this
  463.     wx.cloud.database().collection('yiyuedu').where({
  464.       newsid: '1'
  465.     }).get({
  466.       success(res) {
  467.         let Y_yijian
  468.         Y_yijian = res.data.length
  469.         that.setData({
  470.           Y_yijian: Y_yijian
  471.         })
  472.         if (Y_yijian >= 1) {
  473.           that.setData({
  474.             Y_yijian1: true,
  475.             Y_yijian2: false,
  476.             Y_yijian: Y_yijian
  477.           })
  478.         } else {
  479.           that.setData({
  480.             Y_yijian1: false,
  481.             Y_yijian2: true,
  482.           })
  483.         }
  484.       }
  485.     })
  486.   },
  487.   Y_qiuzhu() {
  488.     let that = this
  489.     wx.cloud.database().collection('yiyuedu').where({
  490.       newsid: '2'
  491.     }).get({
  492.       success(res) {
  493.         let Y_qiuzhu
  494.         Y_qiuzhu = res.data.length
  495.         that.setData({
  496.           Y_qiuzhu: Y_qiuzhu
  497.         })
  498.         if (Y_qiuzhu >= 1) {
  499.           that.setData({
  500.             Y_qiuzhu1: true,
  501.             Y_qiuzhu2: false,
  502.             Y_qiuzhu: Y_qiuzhu
  503.           })
  504.         } else {
  505.           that.setData({
  506.             Y_qiuzhu1: false,
  507.             Y_qiuzhu2: true,
  508.           })
  509.         }
  510.  
  511.       }
  512.     })
  513.   },
  514.   Y_jubao() {
  515.     let that = this
  516.     wx.cloud.database().collection('yiyuedu').where({
  517.       newsid: '3'
  518.     }).get({
  519.       success(res) {
  520.         let Y_jubao
  521.         Y_jubao = res.data.length
  522.         that.setData({
  523.           Y_jubao: Y_jubao
  524.         })
  525.         if (Y_jubao >= 1) {
  526.           that.setData({
  527.             Y_jubao1: true,
  528.             Y_jubao2: false,
  529.             Y_jubao: Y_jubao
  530.           })
  531.         } else {
  532.           that.setData({
  533.             Y_jubao1: false,
  534.             Y_jubao2: true,
  535.           })
  536.         }
  537.  
  538.       }
  539.     })
  540.   },
  541.   Y_tousu() {
  542.     let that = this
  543.     wx.cloud.database().collection('yiyuedu').where({
  544.       newsid: '4'
  545.     }).get({
  546.       success(res) {
  547.         let Y_tousu
  548.         Y_tousu = res.data.length
  549.         that.setData({
  550.           Y_tousu: Y_tousu
  551.         })
  552.         if (Y_tousu >= 1) {
  553.           that.setData({
  554.             Y_tousu1: true,
  555.             Y_tousu2: false,
  556.             Y_tousu: Y_tousu
  557.           })
  558.         } else {
  559.           that.setData({
  560.             Y_tousu1: false,
  561.             Y_tousu2: true,
  562.           })
  563.         }
  564.       }
  565.     })
  566.   },
  567.   Y_baoxiu() {
  568.     let that = this
  569.     wx.cloud.database().collection('yiyuedu').where({
  570.       newsid: '5'
  571.     }).get({
  572.       success(res) {
  573.         let Y_baoxiu
  574.         Y_baoxiu = res.data.length
  575.         that.setData({
  576.           Y_baoxiu: Y_baoxiu
  577.         })
  578.         if (Y_baoxiu >= 1) {
  579.           that.setData({
  580.             Y_baoxiu1: true,
  581.             Y_baoxiu2: false,
  582.             Y_baoxiu: Y_baoxiu
  583.           })
  584.         } else {
  585.           that.setData({
  586.             Y_baoxiu1: false,
  587.             Y_baoxiu2: true,
  588.           })
  589.         }
  590.  
  591.       }
  592.     })
  593.   },
  594.   administrator() {
  595.     let that = this
  596.     if (that.data.touxiang == "../../images/Default_avatar.png" || that.data.moren_xinxi == "尚未登陆") {
  597.       wx.showToast({
  598.         title: '登录后，可登录管理员后台',
  599.         icon: 'none'
  600.       })
  601.     } else {
  602.       wx.navigateTo({
  603.         url: '../administrator_DL/administrator_DL',
  604.       })
  605.     }
  606.   },
  607.   Rili() {
  608.     wx.navigateTo({
  609.       url: '../Rili/Rili',
  610.     })
  611.   },
  612.   onLoad(options) {
  613.     if (options.wenjian == 'yonghu') {
  614.       wx.navigateTo({
  615.         url: '../My_wenjain/My_wenjain',
  616.       })
  617.     }
  618.   },
  619.   onReady() {
  620.  
  621.   },
  622.   gonggao_xin(){
  623.     let that = this
  624.     wx.cloud.callFunction({
  625.       name:'getusers',
  626.       data:{}
  627.     }).then(res=>{
  628.       wx.cloud.database().collection('xinxiaoxi_users').where({
  629.         _openid:res.result.openid
  630.       }).get({
  631.         success(res){
  632.           console.log(res.data[0].gonggao.length,'qqqqqqqqqqqqqqqqqqqqqqqqqqqq');
  633.           if(res.data[0].gonggao.length > 0){
  634.             that.setData({
  635.               Public_announcement: false,
  636.               Public_announcement_1: true,
  637.             })
  638.           }
  639.         }
  640.       })
  641.     })
  642.   },
  643.   Formula_announcement_1(){
  644.     let that = this
  645.     that.Formula_announcement()
  646.     that.setData({
  647.       Public_announcement: true,
  648.       Public_announcement_1: false,
  649.     })
  650.     wx.cloud.callFunction({
  651.       name:'getusers',
  652.       data:{}
  653.     }).then(res=>{
  654.       console.log(res.result.openid,'ooooooooooooooooooooooooppppppppppppp');
  655.       wx.cloud.database().collection('xinxiaoxi_users').where({
  656.         _openid:res.result.openid
  657.       }).update({
  658.         data:{
  659.           gonggao:[]
  660.         }
  661.       })
  662.     })
  663.   },
  664.   My_mail_xin(){
  665.     let that = this
  666.     wx.cloud.callFunction({
  667.       name:'getusers',
  668.       data:{}
  669.     }).then(res=>{
  670.       wx.cloud.database().collection('xinxiaoxi_users').where({
  671.         _openid:res.result.openid
  672.       }).get({
  673.         success(res){
  674.           console.log(res.data[0].youjian.length,'qqqqqqqqqqqqqqqqqqqqqqqqqqqq');
  675.           if(res.data[0].youjian.length > 0){
  676.             that.setData({
  677.               My_mail: false,
  678.               My_mail_1: true,
  679.             })
  680.           }
  681.         }
  682.       })
  683.     })
  684.   },
  685.   My_mail_1(){
  686.     let that = this
  687.     that.My_mail()
  688.     that.setData({
  689.       My_mail: true,
  690.       My_mail_1: false,
  691.     })
  692.     wx.cloud.callFunction({
  693.       name:'getusers',
  694.       data:{}
  695.     }).then(res=>{
  696.       console.log(res.result.openid,'ooooooooooooooooooooooooppppppppppppp');
  697.       wx.cloud.database().collection('xinxiaoxi_users').where({
  698.         _openid:res.result.openid
  699.       }).update({
  700.         data:{
  701.           youjian:[]
  702.         }
  703.       })
  704.     })
  705.   },
  706.   onShow() {
  707.     this.gonggao_xin()
  708.     this.My_mail_xin()
  709.     this.shuaxin()
  710.     this.W_zonghe()
  711.     this.W_zixun()
  712.     this.W_yijian()
  713.     this.W_qiuzhu()
  714.     this.W_jubao()
  715.     this.W_tousu()
  716.     this.W_baoxiu()
  717.  
  718.     this.Y_zonghe()
  719.     this.Y_zixun()
  720.     this.Y_yijian()
  721.     this.Y_qiuzhu()
  722.     this.Y_jubao()
  723.     this.Y_tousu()
  724.     this.Y_baoxiu()
  725.   },
  726.   onHide() {
  727.   },
  728.   onUnload() {},
  729.   onPullDownRefresh() {},
  730.   onReachBottom() {
  731.   },
  732.   onShareAppMessage() {
  733.   }
  734. })

展示部分前端后台PC端代码

  1. <template>
  2.     <div id="app">
  3.         <el-button style="margin: 10px 0 0 200px;" @click="weidu" type="primary">未阅读</el-button>
  4.         <el-button style="margin: 10px 100px 0 0;" @click="YiYueDu" type="success">已阅读</el-button>
  5.         <el-dropdown @command="handleClick_fenlei">
  6.             <el-button type="primary">
  7.                 邮件分类<i class="el-icon-arrow-down el-icon--right"></i>
  8.             </el-button>
  9.             <el-dropdown-menu slot="dropdown">
  10.                 <el-dropdown-item command="咨询类">咨询类</el-dropdown-item>
  11.                 <el-dropdown-item command="意见类">意见类</el-dropdown-item>
  12.                 <el-dropdown-item command="求助类">求助类</el-dropdown-item>
  13.                 <el-dropdown-item command="举报类">举报类</el-dropdown-item>
  14.                 <el-dropdown-item command="投诉类">投诉类</el-dropdown-item>
  15.                 <el-dropdown-item command="报修类">报修类</el-dropdown-item>
  16.             </el-dropdown-menu>
  17.         </el-dropdown>
  18.         <div
  19.             style="display: flex;flex-direction: row;justify-content: space-around;padding: 20px 100px 30px 200px;height: 73%;">
  20.             <el-table :data="tableData" border style="width: 45%;">
  21.                 <el-table-column fixed label="邮件图片" width="175">
  22.                     <template slot-scope="scope">
  23.                         <img style="width: 150px;height: 100px;display: flex;flex-direction: row;justify-content: space-around;align-content: center;"
  24.                             :src="scope.row.img_URL" alt="无图片">
  25.                     </template>
  26.                 </el-table-column>
  27.                 <el-table-column prop="title" label="邮件主题" width="300">
  28.                 </el-table-column>
  29.                 <el-table-column prop="content" label="邮件内容" width="300">
  30.                 </el-table-column>
  31.                 <el-table-column prop="cTime" label="上传时间" width="300">
  32.                 </el-table-column>
  33.                 <el-table-column fixed="right" label="操作" width="220">
  34.                     <template slot-scope="scope">
  35.                         <el-button @click="handleClick(scope.row), drawer = true" type="primary" size="small">查看</el-button>
  36.                         <el-button v-if="handleClick_YiYue_panduan" @click="handleClick_YiYue(scope.row)" type="success"
  37.                             size="small">已阅</el-button>
  38.                         <!-- 未读邮件删除 -->
  39.                         <el-button v-if="handleClick_weidu_panduan" @click="delClick(scope.row)" type="danger"
  40.                             size="small">删除</el-button>
  41.                         <!-- 已读邮件删除 -->
  42.                         <el-button v-if="handleClick_yidu_panduan" @click="delClick_1(scope.row)" type="danger"
  43.                             size="small">删除</el-button>
  44.                     </template>
  45.                 </el-table-column>
  46.             </el-table>
  47.         </div>
  48.         <!-- 未读分页 -->
  49.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  50.             @current-change="handleCurrentChange_weidu" v-if="paginationType === 'weidu'"></el-pagination>
  51.         <!-- 已读分页 -->
  52.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  53.             @current-change="handleCurrentChange_yidu" v-if="paginationType === 'yidu'"></el-pagination>
  54.         <!-- 咨询类分页 -->
  55.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  56.             @current-change="handleCurrentChange_newids0" v-if="paginationType === 'newids0'"></el-pagination>
  57.         <!-- 意见类分页 -->
  58.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  59.             @current-change="handleCurrentChange_newids1" v-if="paginationType === 'newids1'"></el-pagination>
  60.         <!-- 求助类分页 -->
  61.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  62.             @current-change="handleCurrentChange_newids2" v-if="paginationType === 'newids2'"></el-pagination>
  63.         <!-- 举报类分页 -->
  64.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  65.             @current-change="handleCurrentChange_newids3" v-if="paginationType === 'newids3'"></el-pagination>
  66.         <!-- 投诉类分页 -->
  67.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  68.             @current-change="handleCurrentChange_newids4" v-if="paginationType === 'newids4'"></el-pagination>
  69.         <!-- 报修类分页 -->
  70.         <el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
  71.             @current-change="handleCurrentChange_newids5" v-if="paginationType === 'newids5'"></el-pagination>
  72.  
  73.         <el-drawer :title="this.row_title" :visible.sync="drawer" :with-header="false">
  74.             <div style="display: flex;flex-direction: column;">
  75.                 <div style="display: flex;flex-direction: row;justify-content: space-around;">
  76.                     <img style="width: 350px;height: 200px;border-radius: 20px;margin-top: 20px;" :src="this.row_img" />
  77.                 </div>
  78.                 <div style="margin-left: 20px;display: flex;flex-direction: column;">
  79.                     <span style="font-size: 22px;font-weight: bolder;margin-top: 20px;margin-bottom: 10px;">标题</span>
  80.                     <span>{{ this.row_title }}</span>
  81.                     <span style="font-size: 22px;font-weight: bolder;margin-top: 20px;margin-bottom: 10px;">内容</span>
  82.                     <span>{{ this.row_content }}</span>
  83.                     <span style="font-size: 22px;font-weight: bolder;margin-top: 20px;margin-bottom: 10px;">时间</span>
  84.                     <span>{{ this.row_cTime }}</span>
  85.                 </div>
  86.             </div>
  87.         </el-drawer>
  88.     </div>
  89. </template>
  90.   
  91. <script>
  92. import YouJianGuanLi from '../YouJian/YouJianGuanLi.vue'
  93. export default {
  94.     name: 'App',
  95.     components: {
  96.         YouJianGuanLi
  97.     },
  98.     data() {
  99.         return {
  100.             // 未读状态分页
  101.             currentPage: 1,
  102.             pageSize: 5,
  103.             total: 0,
  104.             paginationType: '',
  105.  
  106.             fileList: [],
  107.             imgUrl: '',
  108.             form: {
  109.                 name: '',
  110.                 content: ''
  111.             },
  112.             formRules: {
  113.                 name: [{
  114.                     required: true,
  115.                     message: '请输入公告主题',
  116.                     trigger: 'change'
  117.                 }],
  118.                 content: [{
  119.                     required: true,
  120.                     message: '请输入公告内容',
  121.                     trigger: 'change'
  122.                 }]
  123.             },
  124.             tableData: [],
  125.  
  126.             selectedFile: null,
  127.             previewImage: null,
  128.             previewImages: [],
  129.  
  130.             cloud_img_url: [],
  131.             http_img_url: [],
  132.             drawer: false,
  133.             row_title: '',
  134.             row_content: '',
  135.             row_img: '',
  136.             row_cTime: '',
  137.  
  138.             handleClick_YiYue_panduan: true,
  139.             handleClick_weidu_panduan: true,
  140.             handleClick_yidu_panduan: false
  141.  
  142.  
  143.         }
  144.     },
  145.     created() {
  146.         this.YouJian_GuanLi()
  147.     },
  148.     methods: {
  149.         async wxXCX() {
  150.             var c1 = new this.cloud.Cloud({
  151.                 identityless: true,
  152.                 resourceAppid: 'XXX',
  153.                 resourceEnv: 'XXX',
  154.             })
  155.             await c1.init()
  156.             return c1;
  157.  
  158.         },
  159.         async YouJian_GuanLi() {
  160.             const c1 = await this.wxXCX();
  161.             c1.callFunction({
  162.                 name: 'pc_houtai',
  163.                 data: {
  164.                     pc_YouJian: 1,
  165.                     currentPage: this.currentPage
  166.                 },  
  167.                 success: res => {
  168.                     console.log(res.result.data)
  169.                     this.tableData = res.result.data
  170.                     this.total = res.result.pageCount * this.pageSize
  171.                     this.handleClick_YiYue_panduan = true
  172.                     this.paginationType = 'weidu'
  173.                 }
  174.             })
  175.             console.log(111);
  176.         },
  177.         handleCurrentChange_weidu(val) {
  178.             this.currentPage = val
  179.             this.weidu()
  180.         },
  181.         handleClick(row) {
  182.             console.log(row);
  183.             this.row_title = row.title
  184.             this.row_content = row.content
  185.             this.row_img = row.img_URL
  186.             this.row_cTime = row.cTime
  187.         },
  188.         async handleClick_YiYue(row) {
  189.             const c1 = await this.wxXCX();
  190.             c1.callFunction({
  191.                 name: 'pc_houtai',
  192.                 data: {
  193.                     yiyue_pc_YouJian_GuanLi: 1,
  194.                     _id: row._id
  195.                 },  
  196.                 success: res => {
  197.                     this.YouJian_GuanLi()
  198.                 }
  199.             })
  200.         },
  201.         async delClick(row) {
  202.             const c1 = await this.wxXCX();
  203.             c1.callFunction({
  204.                 name: 'pc_houtai',
  205.                 data: {
  206.                     del_pc_YouJian_GuanLi: 1,
  207.                     _id: row._id
  208.                 }, 
  209.                 success: res => {
  210.                     this.YouJian_GuanLi()
  211.                 }
  212.             })
  213.         },
  214.         async YiYueDu() {
  215.             const c1 = await this.wxXCX();
  216.             this.currentPage = 1,
  217.                 this.pageSize = 5,
  218.                 this.total = 0,
  219.                 c1.callFunction({
  220.                     name: 'pc_houtai',
  221.                     data: {
  222.                         YiYueDu_pc_YouJian: 1,
  223.                         currentPage: this.currentPage
  224.                     },  
  225.                     success: res => {
  226.                         console.log(res.result.data)
  227.                         this.tableData = res.result.data
  228.                         this.total = res.result.pageCount * this.pageSize
  229.                         this.handleClick_YiYue_panduan = false,
  230.                             this.handleClick_weidu_panduan = false
  231.                         this.handleClick_yidu_panduan = true,
  232.                             this.paginationType = 'yidu'
  233.                     }
  234.                 })
  235.         },
  236.         handleCurrentChange_yidu(val) {
  237.             this.currentPage = val
  238.             this.YiYueDu_list()
  239.         },
  240.         async YiYueDu_list() {
  241.             const c1 = await this.wxXCX();
  242.             c1.callFunction({
  243.                 name: 'pc_houtai',
  244.                 data: {
  245.                     YiYueDu_pc_YouJian: 1,
  246.                     currentPage: this.currentPage
  247.                 },  
  248.                 success: res => {
  249.                     console.log(res.result.data)
  250.                     this.tableData = res.result.data
  251.                     this.total = res.result.pageCount * this.pageSize
  252.                     this.handleClick_YiYue_panduan = false,
  253.                         this.handleClick_weidu_panduan = false
  254.                     this.handleClick_yidu_panduan = true,
  255.                         this.paginationType = 'yidu'
  256.                 }
  257.             })
  258.         },
  259.         weidu() {
  260.             this.YouJian_GuanLi(),
  261.                 this.handleClick_weidu_panduan = true
  262.             this.handleClick_yidu_panduan = false
  263.         },
  264.         async delClick_1(row) {
  265.             const c1 = await this.wxXCX();
  266.             c1.callFunction({
  267.                 name: 'pc_houtai',
  268.                 data: {
  269.                     del_yidu_pc_YouJian_GuanLi: 1,
  270.                     _id: row._id
  271.                 }, 
  272.                 success: res => {
  273.                     this.YiYueDu()
  274.                 }
  275.             })
  276.         },
  277.         handleCurrentChange_newids0(val) {
  278.             this.currentPage = val
  279.             this.handleCurrentChange_newids0_list()
  280.         },
  281.         async handleCurrentChange_newids0_list() {
  282.             const c1 = await this.wxXCX();
  283.             c1.callFunction({
  284.                 name: 'pc_houtai',
  285.                 data: {
  286.                     fenlei_pc_YouJian: 1,
  287.                     newsid: "0",
  288.                     currentPage: this.currentPage
  289.                 }, 
  290.                 success: res => {
  291.                     console.log(res.result.data)
  292.                     this.tableData = res.result.data
  293.                     this.total = res.result.pageCount * this.pageSize
  294.                     this.handleClick_YiYue_panduan = true,
  295.                         this.paginationType = 'newids0'
  296.                 }
  297.             })
  298.         },
  299.         handleCurrentChange_newids1(val) {
  300.             this.currentPage = val
  301.             this.handleCurrentChange_newids1_list()
  302.         },
  303.         async handleCurrentChange_newids1_list() {
  304.             const c1 = await this.wxXCX();
  305.             c1.callFunction({
  306.                 name: 'pc_houtai',
  307.                 data: {
  308.                     fenlei_pc_YouJian: 1,
  309.                     newsid: "1",
  310.                     currentPage: this.currentPage
  311.                 },  
  312.                 success: res => {
  313.                     console.log(res.result.data)
  314.                     this.tableData = res.result.data
  315.                     this.total = res.result.pageCount * this.pageSize
  316.                     this.handleClick_YiYue_panduan = true,
  317.                         this.paginationType = 'newids1'
  318.                 }
  319.             })
  320.         },
  321.         handleCurrentChange_newids2(val) {
  322.             this.currentPage = val
  323.             this.handleCurrentChange_newids2_list()
  324.         },
  325.         async handleCurrentChange_newids2_list() {
  326.             const c1 = await this.wxXCX();
  327.             c1.callFunction({
  328.                 name: 'pc_houtai',
  329.                 data: {
  330.                     fenlei_pc_YouJian: 1,
  331.                     newsid: "2",
  332.                     currentPage: this.currentPage
  333.                 }, 
  334.                 success: res => {
  335.                     console.log(res.result.data)
  336.                     this.tableData = res.result.data
  337.                     this.total = res.result.pageCount * this.pageSize
  338.                     this.handleClick_YiYue_panduan = true,
  339.                         this.paginationType = 'newids2'
  340.                 }
  341.             })
  342.         },
  343.         handleCurrentChange_newids3(val) {
  344.             this.currentPage = val
  345.             this.handleCurrentChange_newids3_list()
  346.         },
  347.         async handleCurrentChange_newids3_list() {
  348.             const c1 = await this.wxXCX();
  349.             c1.callFunction({
  350.                 name: 'pc_houtai',
  351.                 data: {
  352.                     fenlei_pc_YouJian: 1,
  353.                     newsid: "3",
  354.                     currentPage: this.currentPage
  355.                 },  //调用的云函数名字
  356.                 success: res => {
  357.                     console.log(res.result.data)
  358.                     this.tableData = res.result.data
  359.                     this.total = res.result.pageCount * this.pageSize
  360.                     this.handleClick_YiYue_panduan = true,
  361.                         this.paginationType = 'newids3'
  362.                 }
  363.             })
  364.         },
  365.         handleCurrentChange_newids4(val) {
  366.             this.currentPage = val
  367.             this.handleCurrentChange_newids4_list()
  368.         },
  369.         async handleCurrentChange_newids4_list() {
  370.             const c1 = await this.wxXCX();
  371.             c1.callFunction({
  372.                 name: 'pc_houtai',
  373.                 data: {
  374.                     fenlei_pc_YouJian: 1,
  375.                     newsid: "4",
  376.                     currentPage: this.currentPage
  377.                 }, 
  378.                 success: res => {
  379.                     console.log(res.result.data)
  380.                     this.tableData = res.result.data
  381.                     this.total = res.result.pageCount * this.pageSize
  382.                     this.handleClick_YiYue_panduan = true,
  383.                         this.paginationType = 'newids4'
  384.                 }
  385.             })
  386.         },
  387.         handleCurrentChange_newids5(val) {
  388.             this.currentPage = val
  389.             this.handleCurrentChange_newids5_list('报修类')
  390.         },
  391.         async handleCurrentChange_newids5_list() {
  392.             const c1 = await this.wxXCX();
  393.             c1.callFunction({
  394.                 name: 'pc_houtai',
  395.                 data: {
  396.                     fenlei_pc_YouJian: 1,
  397.                     newsid: "5",
  398.                     currentPage: this.currentPage
  399.                 }, 
  400.                 success: res => {
  401.                     console.log(res.result.data)
  402.                     this.tableData = res.result.data
  403.                     this.total = res.result.pageCount * this.pageSize
  404.                     this.handleClick_YiYue_panduan = true,
  405.                         this.paginationType = 'newids5'
  406.                 }
  407.             })
  408.         },
  409.         async handleClick_fenlei(command) {
  410.             const c1 = await this.wxXCX();
  411.             this.$message('正在查看' + '----' + command);
  412.             // this.command = command
  413.             if (command == '咨询类') {
  414.                 this.currentPage = 1,
  415.                     this.pageSize = 5,
  416.                     this.total = 0,
  417.                     c1.callFunction({
  418.                         name: 'pc_houtai',
  419.                         data: {
  420.                             fenlei_pc_YouJian: 1,
  421.                             newsid: "0",
  422.                             currentPage: this.currentPage
  423.                         },  
  424.                         success: res => {
  425.                             console.log(res.result.data)
  426.                             this.tableData = res.result.data
  427.                             this.total = res.result.pageCount * this.pageSize
  428.                             this.handleClick_YiYue_panduan = true,
  429.                                 this.paginationType = 'newids0'
  430.                         }
  431.                     })
  432.             } else if (command == '意见类') {
  433.                 this.currentPage = 1,
  434.                     this.pageSize = 5,
  435.                     this.total = 0,
  436.                     c1.callFunction({
  437.                         name: 'pc_houtai',
  438.                         data: {
  439.                             fenlei_pc_YouJian: 1,
  440.                             newsid: "1",
  441.                             currentPage: this.currentPage
  442.                         },  
  443.                         success: res => {
  444.                             console.log(res.result.data)
  445.                             this.tableData = res.result.data
  446.                             this.total = res.result.pageCount * this.pageSize
  447.                             this.handleClick_YiYue_panduan = true,
  448.                                 this.paginationType = 'newids1'
  449.                         }
  450.                     })
  451.             } else if (command == '求助类') {
  452.                 this.currentPage = 1,
  453.                     this.pageSize = 5,
  454.                     this.total = 0,
  455.                     c1.callFunction({
  456.                         name: 'pc_houtai',
  457.                         data: {
  458.                             fenlei_pc_YouJian: 1,
  459.                             newsid: "2",
  460.                             currentPage: this.currentPage
  461.                         },  
  462.                         success: res => {
  463.                             console.log(res.result.data)
  464.                             this.tableData = res.result.data
  465.                             this.total = res.result.pageCount * this.pageSize
  466.                             this.handleClick_YiYue_panduan = true,
  467.                                 this.paginationType = 'newids2'
  468.                         }
  469.                     })
  470.             } else if (command == '举报类') {
  471.                 this.currentPage = 1,
  472.                     this.pageSize = 5,
  473.                     this.total = 0,
  474.                     c1.callFunction({
  475.                         name: 'pc_houtai',
  476.                         data: {
  477.                             fenlei_pc_YouJian: 1,
  478.                             newsid: "3",
  479.                             currentPage: this.currentPage
  480.                         },  
  481.                         success: res => {
  482.                             console.log(res.result.data)
  483.                             this.tableData = res.result.data
  484.                             this.total = res.result.pageCount * this.pageSize
  485.                             this.handleClick_YiYue_panduan = true
  486.                             this.paginationType = 'newids3'
  487.                         }
  488.                     })
  489.             } else if (command == '投诉类') {
  490.                 this.currentPage = 1,
  491.                     this.pageSize = 5,
  492.                     this.total = 0,
  493.                     c1.callFunction({
  494.                         name: 'pc_houtai',
  495.                         data: {
  496.                             fenlei_pc_YouJian: 1,
  497.                             newsid: "4",
  498.                             currentPage: this.currentPage
  499.                         }, 
  500.                         success: res => {
  501.                             console.log(res.result.data)
  502.                             this.tableData = res.result.data
  503.                             this.total = res.result.pageCount * this.pageSize
  504.                             this.handleClick_YiYue_panduan = true,
  505.                                 this.paginationType = 'newids4'
  506.                         }
  507.                     })
  508.             } else if (command == '报修类') {
  509.                 this.currentPage = 1,
  510.                     this.pageSize = 5,
  511.                     this.total = 0,
  512.                     c1.callFunction({
  513.                         name: 'pc_houtai',
  514.                         data: {
  515.                             fenlei_pc_YouJian: 1,
  516.                             newsid: "5",
  517.                             currentPage: this.currentPage
  518.                         },  
  519.                         success: res => {
  520.                             console.log(res.result.data)
  521.                             this.tableData = res.result.data
  522.                             this.total = res.result.pageCount * this.pageSize
  523.                             this.handleClick_YiYue_panduan = true,
  524.                                 this.paginationType = 'newids5'
  525.                         }
  526.                     })
  527.             }
  528.         }
  529.     },
  530. }
  531. </script>
  532.   
  533. <style scoped>
  534. .box {
  535.     box-shadow:
  536.         inset 0 0 10px rgba(255, 255, 255, 0.5),
  537.         inset 0 0 20px rgba(255, 255, 255, 0.3),
  538.         0 0 10px rgba(0, 0, 0, 0.5);
  539.     border-radius: 5px;
  540.     width: 1500px;
  541. }
  542.  
  543. .mask {
  544.     position: fixed;
  545.     top: 0;
  546.     left: 0;
  547.     width: 100%;
  548.     height: 100%;
  549.     background-color: rgba(0, 0, 0, 0.7);
  550.     z-index: 999;
  551. }
  552.  
  553. .custom-file-upload {
  554.     display: inline-block;
  555.     padding: 10px 20px;
  556.     background-color: #f0f0f0;
  557.     color: #333;
  558.     border: 2px solid #ccc;
  559.     border-radius: 5px;
  560.     cursor: pointer;
  561.     height: 20px;
  562. }
  563.  
  564. .custom-file-upload:hover {
  565.     background-color: #e0e0e0;
  566. }
  567.  
  568. .custom-file-upload input[type="file"] {
  569.     display: none;
  570. }
  571. </style>

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

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

  

闽ICP备14008679号