精华内容
下载资源
问答
  • 主要介绍了vue从零实现一个消息通知组件的方法,结合实例形式分析了vue实现消息通知组件的具体原理、实现步骤、与相关操作技巧,需要的朋友可以参考下
  • 主要介绍了基于vue框架手写一个notify插件实现通知功能的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 通知(小吃栏)Vue组件。 与Vue 2.x兼容 演示版 要在线观看演示: : 安装 npm install @mathieustan/vue-notification --save 或者 yarn add @mathieustan/vue-notification import VueNotification from '@...
  • 简单的系统通知页面写法 消息通知页面: 通过定时器定时请求,拿到数据然后加到一个数组内,页面上循环数组渲染, 这样定时请求到新数据就放进数组页面也多一个通知,加个判断看数组内是否有一样的, 如果有就不添加...

    简单的系统通知页面写法

    消息通知页面:
    通过定时器定时请求,拿到数据然后加到一个数组内,页面上循环数组渲染,
    这样定时请求到新数据就放进数组页面也多一个通知,加个判断看数组内是否有一样的,
    如果有就不添加了,没有就添加。如果用户点击删除就发请求删除数据库里对应的消息,
    下次请求渲染这条就没了,如果用户不删除,一直放着,就用 created 每次进入页面的时候请求后台,
    拿数据放到数组内循环渲染一次页面,就可以一直保持住这些消息让用户看到。
    如果需要添加点击跳转单独详情页,那传参(比如index或者一些不会重复的id)过去详情页发请求拿到数据渲染。
    如果需要有未读的小红点提示功能,添加的新的消息时小提示+1,从新渲染的不算。点击小铃铛进来后未读归0,红点隐藏
    

    类似这样的页面,可以接受系统定时发送的消息,已经一些系统提示之类的,简单写法,更多功能可以扩展。

    展开全文
  • 最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个...
  • 近期根据工作需求做了一个系统公告页面,这里我们通过springboot+vue实现这个系统公告页面,主要设计的功能有 公告录入 这一块就是一个数据新增页面,前端获取的数据通过后端存储到数据库 公告发布 公告录入...

    前言

                    近期根据工作需求做了一个系统公告页面,这里我们通过springboot+vue实现这个系统公告页面,主要设计的功能有

    1. 公告录入

      这一块就是一个数据新增页面,前端获取的数据通过后端存储到数据库

    2. 公告发布

      公告录入时默认状态为未发布,即通过状态码实现公告的发布和实现 0:未发布,1:发布,2:撤销,页面上添加一个发布按钮,根据公告发布状态的值选择是否显示这个按钮,发布即执行数据更新操作,即将状态码更新为1

       

       

       

       

       

       

    3. 公告查询

      根据公告数据状态查询已发布数据,按时间排序,页面实现查询和分页

    4. 详情公告页

      这页面是通过通用详情页模板,传递参数实现公告详情展示

      前端vue代码


      <template>
        <a-card :bordered="false">
      
            <div class="page-recerive">
      
                <div  class="common_nav" >
                  <h1  class="nav_title" >通知公告</h1>
      
                </div>
                <div class="content" >
                    <div class="title"><h2 >通知公告浏览</h2></div>
                  <!--查询-->
                    <div data-v-47fc369c="" class="tool" style="margin-left: 25px;">
                      <div  class="search" style="position: relative;float: left;">
                        <input data-v-47fc369c="" type="text" v-bind:value="title" placeholder="请输入标题" @change="TitleInput" style="height: 36px;color: black;font-weight: bolder;">
      
                      </div>
      
                      <div  class="el-select " style="float: left;line-height: 34px;margin-left: 15px;  display: inline-block;position: relative;">
                        <a-date-picker  @change="DateInput" v-bind:value="time" style="color: black;font-weight: bolder;"/>
                      </div>
                      <div style="float: left;line-height: 34px;margin-left: 25px;    display: inline-block;position: relative;">
                        <a-button  style="background-color: #1a3c8e;border-color: #1a3c8e;" type="primary" @click="searchQuery" icon="search">查询</a-button>
                        <a-button style="background-color: #1a3c8e; margin-left: 15px;border-color: #1a3c8e;" type="primary" @click="searchReset" icon="reload" >重置</a-button>
                      </div>
                    </div>
                  <!--数据-->
                  <div class="result" >
                    <table>
                      <thead class="row-title" >
                      <td style="width: 40%">公告标题</td>
                      <td style="width: 20%">发布部门</td>
                      <td style="width: 10%">发布时间</td>
                      </thead>
                      <tbody v-for="item in dataList">
                      <tr class="row-body" >
                        <td ><router-link  style="color:black" target="_blank" :to="{path:'../CtNoticeDetail',query:{id:item.id,company:item.company_dictText}}"><span class="box">♦</span>{{item.title}}</router-link></td>
                        <td><p class="company" >{{item.company_dictText}}</p></td>
                        <td><p class="senddate" >{{item.senddate}}</p></td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <!--数据分页-->
                  <div class="page-bar" style="margin:40px auto;margin-top: 50px;">
                    <ul>
                      <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
                      <li v-if="cur==1"><a class="banclick">上一页</a></li>
                      <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
                        <a v-on:click="btnClick(index)">{{ index }}</a>
                      </li>
                      <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
                      <li v-if="cur == all"><a class="banclick">下一页</a></li>
                      <li><a>共<i>{{all}}</i>页</a></li>
                    </ul>
                  </div>
      
            </div>
          </div>
        </a-card>
      </template>
      
      <script>
      
        import '@/assets/less/TableExpand.less'
        import { mixinDevice } from '@/utils/mixin'
        import { JeecgListMixin } from '@/mixins/JeecgListMixin'
        import CtNoticeModal from './modules/CtNoticeModal'
        import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
        import {doRelease, doReovke} from '@/api/api'     //.set('@api', resolve('src/api')) 表示@api指的是“src/api”
        import {getAction} from "@/api/manage";
      
        export default {
          name: 'CtNoticeList',
          mixins:[JeecgListMixin, mixinDevice],
          components: {
            CtNoticeModal
          },
          data () {
            return {
              title:'',
              time:'',
              params:{
                pageNo: 1,
                pageSize: 10,
                title:"",
                senddate:"",
              },
              description: '公告查询页面',
              release_url:"/ctms/ctNotice/ReleaveData"  ,//公告地址
              dataList:"",
              all:"",  //总页数
              cur:"",  //当前页数
              totalpage:"" ,//当前条数
              url: {
                list: "/ctms/ctNotice/ReleaveData"
              },
              dictOptions:{},
              superFieldList:[],
            }
          },
      
          methods: {
      
            //请求数据
      
                loadData(){
                  getAction(this.release_url,this.params).then((res)=>{
                    this.dataList=[];
                    for(let i=0;i<res.result.records.length;i++){
                      this.dataList.push(res.result.records[i])
                    }
                    this.all = res.result.pages;
                    this.cur = res.result.current;
                    this.totalpage = res.result.total;
      
                  })
                  },
            
            searchReset(){
      
                this.params.senddate='';
                this.params.title = '';
                this.params.pageNo = 1;
                this.params.pageSize = 10;
                this.title = '';
                this.time = '';
      
              getAction(this.release_url,this.params).then((res)=>{
                this.dataList=[];
                for(let i=0;i<res.result.records.length;i++){
                  this.dataList.push(res.result.records[i])
                }
                this.all = res.result.pages;
                this.cur = res.result.current;
                this.totalpage = res.result.total;
      
              })
      
            },
            //查询值
            TitleInput(value){
              this.params.title = value.target.value;
              this.title = value.target.value;
      
            },
      
            //查询值
            DateInput(date, dateString){
              this.params.senddate = dateString;
              this.time = dateString;
      
            },
      
            //分页
            btnClick: function(data){//页码点击事件
              if(data != this.cur){
                this.cur = data
              }
            //根据点击页数请求数据
              this.params.pageNo = this.cur
              this.loadData();
            },
      
            pageClick: function(){
            //根据点击页数请求数据
              this.params.pageNo = this.cur
              this.loadData();
            }
      
      
          },
      
          computed: {
      //分页
            indexs: function(){
              var left = 1;
              var right = this.all;
              var ar = [];
              if(this.all>= 5){
                if(this.cur > 3 && this.cur < this.all-2){
                  left = this.cur - 2
                  right = this.cur + 2
                }else{
                  if(this.cur<=3){
                    left = 1
                    right = 5
                  }else{
                    right = this.all
                    left = this.all -4
                  }
                }
              }
              while (left <= right){
                ar.push(left)
                left ++
              }
              return ar
            }
          },
          created() {
            //调用方法
            this.loadData();
          },
      
        }
      </script>
      <style scoped>
        @import '~@assets/less/common.less';
      
      
        /*公告浏览页面*/
        .page-recerive{
      
          width: 80%;
          height:650px;
          margin-left:10%;
          box-sizing: border-box;
          background: #fff;
          box-shadow: 0 0 20px;
      
        }
      
        /*右侧*/
        .common_nav{
      
          width: 165px;
          height: 100%;
          float: left;
          background: #393b5d;
      
        }
      
        .nav_title{
          padding: 30px 0 24px 24px;
          font-size: 20px;
          font-weight: 400;
          color: #fff;
          border: 0;
          background: #4b4d6e;
          outline: none;
        }
        .content{
          padding-bottom: 30px;
          margin-left: 170px;
          padding: 10px;
          height: 98%;
          position: relative;
      
        }
        .content .title h2{
          font-size: 16px;
          margin-top: 20px;
          font-weight: bold;
        }
        .content .result{
          height: calc(100% - 170px);
          margin-top: 5%;
        }
        .content .result .row-title{
          font-size: 18px;
          font-weight: bold;
          color: #1a3c8e;
          text-align: left;
          padding: 0 10px;
          line-height: 40px;
          border-bottom: 0.5px solid #1a3c8e;
        }
      
        .content .result .row-body{
          margin-left: 30px;
          color: black;
          font-size: 16px;
          border-bottom: 0.5px solid #ececec;
          align-items: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background: #f3f6f9;
          margin-bottom: 6px;
          font-style: normal;
        }
      
        .content .result .row-body .box{
          color: #fff;
          display: inline-block;
          background: #5487c7;
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          margin-right: 6px;
        }
      
      
        /*分页*/
        .page-bar{
          margin:40px auto;
          margin-top: 150px;
      
      
        }
        ul,li{
          margin: 0px;
          padding: 0px;
        }
        li{
          list-style: none
        }
        .page-bar li:first-child>a {
          margin-left: 0px
        }
        .page-bar a{
          border: 1px solid #ddd;
          text-decoration: none;
          position: relative;
          float: left;
          padding: 6px 12px;
          margin-left: -1px;
          line-height: 1.42857143;
          color: #5D6062;
          cursor: pointer;
          margin-right: 20px;
        }
        .page-bar a:hover{
          background-color: #eee;
        }
        .page-bar a.banclick{
          cursor:not-allowed;
        }
        .page-bar .active a{
          color: #fff;
          cursor: default;
          background-color: #1a3c8e;
          border-color: #1a3c8e;
        }
        .page-bar i{
          font-style:normal;
          color: #1a3c8e;
          margin: 0px 4px;
          font-size: 12px;
        }
      </style>

       java后端代码


      Controller的发布和查询部分
      /**
      	  *	 更新发布操作
      	  * @param id
      	  * @return
      	  */
      	 @RequestMapping(value = "/doRelease", method = RequestMethod.GET)
      	 public Result<CtNotice> doRelease(@RequestParam(name="id",required=true) String id, HttpServletRequest request) {
      		 Result<CtNotice> result = new Result<CtNotice>();
      		 CtNotice ctNotice = ctNoticeService.getById(id);
      		 if (ctNotice == null) {
      			 result.error500("未找到对应实体");
      		 } else {
      			 ctNotice.setSendStatus(CommonSendStatus.PUBLISHED_STATUS_1);//发布中
      			 ctNotice.setSenddate(new Date());
      			 String currentUserName = JwtUtil.getUserNameByToken(request);
      			 ctNotice.setCreateBy(currentUserName);
      			 boolean ok = ctNoticeService.updateById(ctNotice);
      			 if (ok) {
      				 result.success("公告发布成功");
      			 }
      		 }
      		 return result;
      
      	 }
      	 /**
      	  *	 更新撤销操作
      	  * @param id
      	  * @return
      	  */
      	 @RequestMapping(value = "/doReovke", method = RequestMethod.GET)
      	 public Result<CtNotice> doReovke(@RequestParam(name="id",required=true) String id, HttpServletRequest request) {
      		 Result<CtNotice> result = new Result<CtNotice>();
      		 CtNotice ctNotice = ctNoticeService.getById(id);
      		 if(ctNotice==null) {
      			 result.error500("未找到对应实体");
      		 }else {
      			 ctNotice.setSendStatus(CommonSendStatus.REVOKE_STATUS_2);//撤销发布
      //			 ctNotice.setCancelTime(new Date());
      			 boolean ok = ctNoticeService.updateById(ctNotice);
      			 if(ok) {
      				 result.success("公告撤销成功");
      			 }
      		 }
      
      		 return result;
      	 }
      
      //	 //获取已发布数据
      	 @RequestMapping(value = "/ReleaveData",method = RequestMethod.GET)
      	 public Result<?> testData(CtNotice ctNotice,
      			 @RequestParam(name="pageNo", defaultValue="1") Integer pageNo,
      			 @RequestParam(name="pageSize", defaultValue="10") Integer pageSize,
      			 HttpServletRequest req) {
      //		 QueryWrapper<CtNotice> queryWrapper = new QueryWrapper<>();
      		 QueryWrapper<CtNotice> queryWrapper = QueryGenerator.initQueryWrapper(ctNotice, req.getParameterMap());
      		 queryWrapper.eq("send_status","1");
      		 queryWrapper.orderByDesc("senddate");
      		 Page<CtNotice> page = new Page<CtNotice>(pageNo, pageSize);
      		 IPage<CtNotice> pageList = ctNoticeService.page(page, queryWrapper);
      		 System.out.println(pageList);
      		 return Result.OK(pageList);
      
      	 }
    展开全文
  • 主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建,本文给大家分享实例代码,需要的朋友可以参考下
  • Vue - 实现消息通知组件及插件

    万次阅读 2019-01-14 15:04:41
    实现的基本原理主要是两个: 使用point-event点透,防止遮罩层挡住页面 使用一个全局数组(栈)记录当前在dom中的message组件 插件源码 import MessageVue from '../../components/Message/Message'...

    效果图

    在这里插入图片描述

    功能分解

    • 动画
    • 计算高度

    组件源码

    <template>
        <div class="ys-message-wrapper animated fadeInDown">
          <div class="ys-message-toast">
            <img :src="currentType" alt="">
            <p>{{text}}</p>
          </div>
        </div>
    </template>
    
    <script>
    export default {
      name: 'Message',
      props: {
        text: {
          type: String,
          default: '提示信息'
        },
        type: {
          type: String,
          default: 'info'
        }
      },
      data () {
        return {
          src: [require('../../assets/icon/info.svg'), require('../../assets/icon/warn.svg'), require('../../assets/icon/error.svg'), require('../../assets/icon/success.svg')]
        }
      },
      computed: {
        currentType () {
          let i
          switch (this.type) {
            case 'info':
              i = 0
              break
            case 'warn':
              i = 1
              break
            case 'error':
              i = 2
              break
            case 'success':
              i = 3
              break
            default:
              i = 0
          }
          return this.src[i]
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
      .ys-message-wrapper{
        width: 80%;
        min-height: 30px;
    
        position: absolute;
        left: 50%;
    
        animation-duration: 0.5s;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.5s;
    
        .ys-message-toast{
          max-width: 100%;
          pointer-events: none;
          padding: 8px 12px;
          border-radius: 4px;
          box-shadow: 0 1px 6px rgba(0,0,0,.2);
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
    
          img{
            width: 15px;
            height: 15px;
            object-fit: contain;
            margin: 0 8px 0 0;
          }
          p{
            max-width: 100%;
            font-size: 14px;
            word-break: keep-all;
            word-wrap: break-word;
          }
        }
      }
    
      .fadeInDown{
        animation-name: fadeInDown
      }
      @keyframes fadeInDown {
        from {
          opacity: 0;
          transform: translate3d(-50%, -100%, 0);
        }
    
        to {
          opacity: 1;
          transform: translate3d(-50%, 0, 0);
        }
      }
    
    </style>
    
    

    重头戏在这呢

    实现的基本原理主要是两个:

    1. 使用point-event点透,防止遮罩层挡住页面
    2. 使用一个全局数组(栈)记录当前在dom中的message组件

    插件源码

    import MessageVue from '../../components/Message/Message'
    
    const MessageBox = {}
    
    MessageBox.install = (Vue, options) => {
      const MessageBoxInstance = Vue.extend(MessageVue)
      let currentMsg
      let msgBoxElList = []
      const initInstance = () => {
        if (document.querySelector('#message-container')) {
        } else {
          let template = '<div id="message-container" style="position: fixed;top: 15px;z-index:100;pointer-events:none;width: 100%;height: 100%;">' +
            '<div id="message-wrapper" style="position: relative;width: 100%;height: 100%;"></div>' +
            '</div>'
          let T = Vue.extend({template: template})
          let container = new T().$mount().$el
          document.body.appendChild(container)
        }
        currentMsg = new MessageBoxInstance()
      }
      const mount = () => {
        let msgBoxEl = currentMsg.$mount().$el
        let list = document.querySelectorAll('.ys-message-wrapper')
        if (list.length) {
          msgBoxEl.style.top = parseInt(list[list.length - 1].style.top) + list[list.length - 1].clientHeight + 15 + 'px'
        } else {
          msgBoxEl.style.top = 15 + 'px'
        }
        document.querySelector('#message-wrapper').appendChild(msgBoxEl)
        msgBoxElList.unshift(msgBoxEl)
      }
    
      Vue.prototype.$message = opt => {
        initInstance()
        if (typeof opt === 'string') {
          currentMsg.text = opt
        } else if (typeof opt === 'object') {
          Object.assign(currentMsg, opt)
        }
        mount()
    
        setTimeout(() => {
          let el = msgBoxElList.pop()
          el.style.top = 0
          setTimeout(() => {
            document.querySelector('#message-wrapper').removeChild(el)
          }, 500) // transition时间是0.5s
          // 当message都自动销毁以后,不需要销毁container了...缓存在这里
        }, 1500)
      }
    }
    export default MessageBox
    
    
    展开全文
  • 项目介绍学之思在线考试系统是一款 java + vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。目前支持web端和微信小程序,能覆盖到pc机和手机...

    项目介绍

    学之思在线考试系统是一款 java + vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。目前支持web端和微信小程序,能覆盖到pc机和手机等设备。

    开源版使用须知

    • 仅用个人学习,商用请购买授权

    • 禁止将本项目的代码和资源进行任何形式的出售,产生的一切任何后果责任由侵权者自负

    学生系统功能

    • 登录、注册:注册时要选年级,过滤不同年级的试卷, 账号为student/123456

    • 首页:任务中心、固定试卷、时段试卷、可以能做的一部分试卷

    • 试卷中心:包含了所有能做的试卷,按学科来过滤和分页

    • 考试记录:所有的试卷考试记录在此处分页,可以查看试卷结果、用时、得分、自行批改等

    • 错题本:所有做错的题目,可以看到做题的结果、分数、难度、解析、正确答案等

    • 个人中心:个人日志记录

    • 消息:消息通知

    • 试卷答题和试卷查看:展示出题目的基本信息和需要填写的内容

    管理系统功能

    • 登录:账号为:admin/123456

    • 主页:包含了试卷、题目、做卷数、做题数、用户活跃度的统计功能,活跃度和做题数是按月统计

    • 用户管理:对不同角色 学生、管理员 的增删改查管理功能

    • 卷题管理:

    1. 试卷列表:试卷的增删改查,新增包含选择学科、试卷类型、试卷名称、考试时间,试卷内容包含添加大标题,然后添加题目到此试卷中,组成一套完整的试卷

    2. 题目列表:题目的增删改查,目前题型包含单选题、多选题、判断题、填空题、简单题,支持图片、公式等。

    • 任务管理:对任务进行修改

    • 教育管理:对不同年级的学科进行增删改查

    • 答卷管理:查看学生成绩

    • 消息中心:可以对多个用户进行消息发送

    • 日志中心:用户的基本操作进行日志记录,了解用户使用过情况

    • 小程序功能

      • 用户登录登出功能,登录会自动绑定微信账号,登出会解绑

      • 首页包含任务中心、固定试卷、时段试卷、推送试卷模块,和web端保持一致

      • 试卷模块,固定试卷和时段试卷的分页查询,下拉加载更多,上拉刷新当前数据

      • 记录模块,考试结果的分页,包含了试卷基本信息

      • 我的模块,包含个人资料的修改,个人动态,消息中心模块

      技术栈列表

      后台系统:

      • spring-boot 2.1.6.RELEASE

      • spring-boot-security 用户登录验证

      • undertow web容器

      • postgresql/mysql 优秀的开源数据库

      • redis 缓存,提升系统性能

      • mybatis 数据库中间件

      • hikari 速度最快的数据库连接池

      • 七牛云存储 目前10G内免费

      前台系统:

      • Vue.js 采用新版,使用了vue-cli3搭建的系统,减少大量配置文件

      • element-ui 最流行的vue组件,采用的最新版

      • vue-element-admin 最新版,对该系统做了大量精简,只保留了部分样式和控件

      • echarts 图表统计

      • ueditor 填空题扩展插件

      微信小程序:

      • iView 主题样式

      使用教程

      1. redis 安装

      2. 进群获取到数据库脚本,创建表初始化数据

      3. /uexam/source/xzs为后台代码,建议使用IntelliJ IDEA打开,在application-dev.yml文件中,配置好postgesql/mysql、redis的服务地址,打开XzsApplication文件编译运行,默认端口为8000。

      4. 学生系统地址:http://localhost:8000/student

      5. 管理端地址:http://localhost:8000/admin

      软件架构图

      系统展示

      • 学生考试系统



      • 小程序考试系统

      • 后台管理系统



      获取源代码

      点击下方卡片,关注并回复 “在线考试” 领取吧

      往期推荐

      为什么阿里不允许用Executors创建线程池,而是通过ThreadPoolExecutor的方式?

      为什么培训班出来的程序员总遭人嫌弃?

      996、过劳死都见过了!“被猝死”还是头一回......

      别再抱怨缺乏算法实践场景,不妨来挑战这场百万奖池的比赛!

      坑你没商量!盘点Java中最常见的事故现场,你都中过哪些招?

      喜欢的这里报道

      ↘↘↘

    展开全文
  • 点击关注下方公众号,Java学习资料 都在这里正文如下:# 项目介绍学之思在线考试系统是一款 java + vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码...
  • MeetingRoom:基于Vue + Spring Boot开发的会议室管理系统
  • 利用vue从零实现一个消息通知组件

    千次阅读 2020-03-03 13:51:51
    利用vue从零实现一个消息通知组件 平时,我们肯定用过类似element-ui,antd等一些UI框架,感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大,用起来,就会觉得特别别扭,这时候,就有必要自己...
  • 用户管理模块非常适合新手入门Vue学习的练手项目 项目是基于对用户信息的展示,以及增删该查,进行实现 一、项目主要技术 首先要搭建本地数据接口(就是为了模拟用户信息的数据)jsonserver ①新建文件夹...
  • 实现Vue手机端推送时收集了许多资料,最后得出结论,其实手机端和PC端是同一段代码,由于浏览器兼容的原因在电脑上能弹出通知的在手机上不一定能弹出,在手机端要使用Vue推送通知必须使用特定的浏览器,手机版安卓...
  • 我们认为,发展必须是一种令人愉快的,富有创造力的经历,才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务,从而减轻了开发过程中的痛苦,例如: 。 。 用于和存储的多个后端。 富有表现力,直观的 ...
  • # 项目介绍学之思在线考试系统是一款 java + vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。目前支持web端和微信小程序,能覆盖到pc机和...
  • Vue后台管理系统简单实现

    千次阅读 2020-08-03 16:29:44
    后台管理系统的布局一直中规中矩,对于一个后端工程师,对前端知识也需要有一定的了解。下面介绍一下自己用vue做的一个后台模板,主要是方便自己以后的使用。 先对页面的结果做一下分析,首先可以看到上边是公司的...
  • 前言 由于业务需求,需要使用一个消息的全局通知组件,项目原来是使用Element上的通知组件,但是到了后面发现Element的通知组件无法满足消息通知的时间性...这个是通知组件设计时的vue上的目录结构 通知组件的...
  • // 浏览器通知--window.Notification if (Notification.permission == "granted") { console.log("允许通知") }else if( Notification.permission != "denied"){ console.log("需要通知权限") .
  • vue实现原理

    万次阅读 多人点赞 2018-06-29 12:10:31
    转载:https://blog.csdn.net/lishanleilixin/article/details/79360244一 理解vue的核心理念使用vue会让人感到...倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:Vue.js(读音 /vjuː/,类似于 vie...
  • 由于electron的通知使用操作系统原生。 (非常好看.jpg) 先上效果图 准备全局一下。 以下代码均在vue项目中。 首先新建js文件,引入electron。 const electron = window.require('electron') 函数导出 export const...
  • mybatis 数据库中间件 hikari 速度最快的数据库连接池 七牛云存储 目前10G内免费 前台系统Vue.js 采用新版,使用了vue-cli3搭建的系统,减少大量配置文件 element-ui 最流行的vue组件,采用的最新版 vue-element-...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
  • 1.3系统设计的思想 本次华信学院社团管理系统的设计与实现,秉承设计功能强大、操作通俗简单、界面友好舒适的原则,首先在开发之前对所涉及到的理论知识进行全面的学习和回顾,采用问卷调查的方式,做好调查研究,...
  • 效果图 上代码 ...留一个循环就行。...-- 消息通知 --> <el-menu-item index="2" class="navbar_popover"> <el-badge :value="10" class="item"> <el-popover placement="bottom" width="3
  • 介绍 Finer进销存是一款面向中小企业的供销链管理系统,基于J2EE快速开发平台Jeecg-Boot开发,采用前后端分离架构:SpringBoot2.x,Ant Design&...
  • 2、本系统是采用token认证方式,登录成功后后端生成token传到前端然后保存到cookie中,同一个浏览器不管n个窗口打开都是用的同一个token(即一个窗口是登录状态,其他n个窗口保持一致)后端socket接连者用全局变量...
  • 系统通知功能实现

    千次阅读 2019-07-14 10:12:51
    转载地址:...msgcontent表用来保存每一条系统通知,sysmsg表则用来记录每一个用户和每一条通知的关系,比如该用户是否阅读了该条通知。 系统通知的整个处理流程是这样的...
  • 其实Electron的系统通知比较简单,是用HTML5的Notification实现的,但是在这儿需要注意的是,windows平台发送通知是需要为程序设置appId(下一篇文章我们讲解下Electron怎么打包,怎么设置应用程序图标)。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,785
精华内容 3,914
关键字:

vue实现系统通知

vue 订阅