我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

如何利用Vue+Element做个小页面

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

如何利用Vue+Element做个小页面

前言

直接看效果，干啥慢慢猜~

image.png

项目结构

image.png

这个的话可以看到分了一些组件嘛。然后总体还是vue+elementui 后面活下来了再用uniapp做移动端嘛。

MarkDown编辑器

这个是咱们比较主要的功能嘛。

也是用了meavon这个开源的Markdown组件嘛。

image.png

然后是文章上传嘛，这里有个弹窗嘛。

image.png

代码如下

<template>
  <div id="main">
    <div>
      <div>
        <input type="text" v-model="form.title" placeholder="请输入文章标题" required>
        <el-button @click="submit" type="primary">发布文章</el-button>

      </div>

      <mavon-editor
        v-model="form.value"
        ref="md"
        @change="change"
        style="min-height: 800px;width: 100%"
      />
    </div>

    <el-dialog
      style="width:80%;margin: 0 auto"
      title="文章提交"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">

        <el-form-item label="文章封面URL" >
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>

        <el-form-item label="选择社区" prop="community">
          <el-select v-model="ruleForm.community" placeholder="请选择发布社区">
            <el-option label="社区一" value="A"></el-option>
            <el-option label="社区二" value="B"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择专栏" prop="community">
          <el-select v-model="ruleForm.column" placeholder="请选择发布专栏">
            <el-option label="java" value="java"></el-option>
            <el-option label="python" value="python"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择权限" prop="level">
          <el-select v-model="ruleForm.level" placeholder="请选择文章权限">
            <el-option label="私密" value="0"></el-option>
            <el-option label="公开阅览" value="1"></el-option>
            <el-option label="公开读写权限" value="2"></el-option>
            <el-option label="完全公开(所有人持有)" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="文章类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="原创" value="0"></el-radio>
            <el-radio label="转载" value="1"></el-radio>
            <el-radio label="翻译" value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文章描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>

      <div  style="margin: 0 auto" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'     //引入mavon-editor组件
import 'mavon-editor/dist/css/index.css'       //引入组件的样式
export default {
  // 注册
  name: "writeblog",
  components: {
    mavonEditor,
  },

  data() {
    return {
      dialogFormVisible: false,
      form: {
        value:'', // 输入的markdown
        html:'',    // 及时转的html
        ruleForm:this.ruleForm,
        title: '',
      },
      ruleForm: {
        url: '',
        community:"",
        column: '',
        level:'',
        desc: '',
        type:'',
      },

      rules: {
        desc: [
          { required: true, message: '请输入文章描述', trigger: 'blur' },
          { min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur' }
        ],

        community: [
          { required: true, message: '请选择发布社区', trigger: 'blur' },
        ],

        level:[
          { required: true, message: '请选择文章权限', trigger: 'blur' },
        ],

        type: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ],

      }
    }
  },

  methods: {
    // 所有操作都会被解析重新渲染
    change(value, render){        //value为编辑器中的实际内容，即markdown的内容，render为被解析成的html的内容
      this.form.html = render;
    },
    // 提交
    submit(){
      //点击提交后既可以获取html内容，又可以获得markdown的内容，之后存入到服务端就可以了
      console.log(this.form.value);
      console.log(this.form.html);
      this.dialogFormVisible=true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.title===""){
            alert("标题不能为空")
            return
          }
          alert('submit!');
          this.dialogFormVisible = false;
          console.log(this.ruleForm)
        } else {

          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  mounted() {

  }
}
</script>
<style scoped>
#center {
  margin-top: 5%;
  width: 96%;
  height: 96%;
  border: 1px;
}

img {
  margin: auto;
  margin-left: 30%;
  height: 40%;
  width: 40%;
  position: relative;
  top: 10%;
}

input {
  width: 85%;
  height: 30px;
  border-width: 2px;
  border-radius: 5px;
  border-color: #00c4ff;
  border-bottom-color: #2C7EEA;
  color: #586e75;
  font-size: 15px;

}
</style>

这次的前端代码其实是完全重构，原来上个学期期末写的玩意咋说呢，还不如我以前直接用Django做的Dome。做着做着变成了个人博客，然后又重新改回多人社区，赶鸭子上架连文档都没有搞好，所有后面我直接摆烂了，本来寒假要动工的，但是学习任务拉满，唉。

消息模块

这个也是一个比较重要的模块，因为这个消息可以把几个模块联合起来。

image.png

先来说说那个标号

image.png

是咋来的，这个其实就是elementui里面的这个

image.png

然后是咱页面

image.png

后面的几个其实是类似的

image.png

这个你们直接看着写

消息导航

首先是咱的消息导航代码

<template>
<div>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: white">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>问答消息</template>
          <el-menu-item-group>
            <router-link class="alink" to="/notices/aComment">
              <el-menu-item index="1-1">
                <el-badge :value="5" :max="99" class="item">
                  评论消息
                </el-badge>
              </el-menu-item>
            </router-link>
            <router-link class="alink" to="/notices/thumbNews">
              <el-menu-item index="1-2">
                点赞消息
              </el-menu-item>
            </router-link>
            <router-link to="/notices/replyMessage" class="alink">
              <el-menu-item index="1-3">
                回答消息
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>


        <el-submenu index="2">
          <template slot="title"><i class="el-icon-message"></i>文章消息</template>
          <el-menu-item-group>
            <router-link to="/notices/articleComment" class="alink">
              <el-menu-item index="2-1">
                文章评论
              </el-menu-item>
            </router-link>

            <router-link class="alink" to="/notices/thumbArticles">
              <el-menu-item index="2-2">
                文章点赞
              </el-menu-item>
            </router-link>

            <router-link class="alink" to="/notices/articlePush">
              <el-menu-item index="2-3">
                文章push
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title"><i class="el-icon-message-solid"></i>系统通知</template>
          <el-menu-item-group>
            <router-link class="alink" to="/notices/auditInformation">
              <el-menu-item index="3-1">
                审核消息
              </el-menu-item>
            </router-link>
            <router-link class="alink" to="/notices/activeMessage">
              <el-menu-item index="3-2">
                活动消息
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title"><i class="el-icon-s-custom"></i>好友</template>
          <el-menu-item-group>
            <router-link class="alink" to="/notices/friendVerification">
              <el-menu-item index="4-1">
                好友验证
              </el-menu-item>
            </router-link>
            <router-link class="alink" to="/notices/friendsMessage">
              <el-menu-item index="4-2">
                好友消息
              </el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title"><i class="el-icon-setting"></i>设置</template>
          <router-link class="alink" to="/notices/noticesettings">
            <el-menu-item-group>
              <el-menu-item index="5-1">消息设置</el-menu-item>
            </el-menu-item-group>
          </router-link>
        </el-submenu>

      </el-menu>
    </el-aside>
      <el-container
        style="background-image: url(/static/logo/noticesbg.jpg);
        background-repeat: no-repeat;
        background-size:100% 100%;
        "
      >
        <el-main>
          <div style="width: 80%;margin: 0 auto">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
  </el-container>
</div>
</template>

<script>
export default {
  name: "notices",
  data() {

    return {

    }
  },
}
</script>

<style scoped>
.el-header {
  background-color: #e5efe2;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.router-link-active {
  text-decoration: none;
}

.alink{

  text-decoration: none;
}
</style>

内容代码（消息）

<template>
<div style="background-color: rgba(239,250,246,0.53)">
  <br>
  <div class="head" style="width: 90%;margin: 0 auto">
    <el-button style="margin-left:80%" type="primary" plain>清空所有</el-button>
  </div>
  <br>
  <div style="width: 80%;margin-left: 1%" class="main">
    <el-card shadow="hover" v-for="(message,index) in Messages" :key="index">

      <div style="height:100px">
        <div  style="width:14%;height: 100%;border-radius: 100px;display:inline-block;">
        <img
          style="width:100%;height: 100%;border-radius: 100px"
          class="lazy" data-src="/static/temporary/headpic.jpg"
          class="image"
        >
        </div>
        <div style="display:inline-block;margin-left: 5%">
          <p class="message">{{message.from}} 评论了你 &nbsp;&nbsp;<i class="el-icon-info"></i></p>
          <p style="font-weight:bold"
          >
            {{message.info}}</p>
          <p class="message">
            来自问答：{{message.quiz}}

          </p>
        </div>

        <div style="display:inline-block;margin-left: 20%">
          <p>
            <el-button  icon="el-icon-delete" ></el-button>
          </p>
          <p>
            {{message.data}}
          </p>
        </div>

      </div>
    <br>
    </el-card>
  </div>
  <br>
  <div class="footer" style="margin: 0 auto;width: 100%;">
    <div class="block" >
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</div>

</template>

<script>
export default {
  name: "aComment",
  data(){
    return{
      total: 999,
      Messages:[
        {"info":"Huterox is best 并且非常地帅气","from":"Futerox","quiz":"小姐姐老是不回你信息怎么办","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帅气","from":"Futerox","quiz":"小姐姐老是不回你信息怎么办","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帅气","from":"Futerox","quiz":"小姐姐老是不回你信息怎么办","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帅气","from":"Futerox","quiz":"小姐姐老是不回你信息怎么办","data":"2022-3-27"},
        {"info":"Huterox is best 并且非常地帅气","from":"Futerox","quiz":"小姐姐老是不回你信息怎么办","data":"2022-3-27"},

      ]
    }
  },
}
</script>

<style scoped>
.message{
  width: 20em;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>

设置模块

这个不一样的是咱的设置模块

image.png

<template>
<div style="width: 70%;">
  <el-card shadow="hover">
    <div style="display:inline-block;margin-left: 5%">
      <p>
          问答评论消息提醒
      </p>
    </div>
      <div style="display:inline-block;margin-left: 60%">
        <p>
          <el-switch
            v-model="askcommentvalue"
            active-text="开启"
          >
          </el-switch>
        </p>
      </div>
  </el-card>

  <el-card shadow="hover">
    <div style="display:inline-block;margin-left: 5%">
      <p>
        问答回答消息提醒
      </p>
    </div>
    <div style="display:inline-block;margin-left: 60%">
      <p>
        <el-switch
          v-model="askanswervalue"
          active-text="开启"
        >
        </el-switch>
      </p>
    </div>
  </el-card>


  <el-card shadow="hover">
    <div style="display:inline-block;margin-left: 5%">
      <p>
        文章评论消息提醒
      </p>
    </div>
    <div style="display:inline-block;margin-left: 60%">
      <p>
        <el-switch
          v-model="articlecomment"
          active-text="开启"
        >
        </el-switch>
      </p>
    </div>
  </el-card>

  <el-card shadow="hover">
    <div style="display:inline-block;margin-left: 5%">
      <p>
        文章点赞消息提醒
      </p>
    </div>
    <div style="display:inline-block;margin-left: 60%">
      <p>
        <el-switch
          v-model="articlethumb"
          active-text="开启"
        >
        </el-switch>
      </p>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
  name: "noticesettings",
  data() {
    return {
      askcommentvalue: true,
      askanswervalue: true,
      articlecomment: true,
      articlethumb: true,

    }
  },
}
</script>
<style scoped>
</style>

总结

之所以要写这个其实也是为了我后面直接嫖组件，因为等整个项目搞好了，我会发现这个前端代码不好直接嫖到别当项目里面，所以顺便记录一下。毕竟前端这种东西，完全看感觉，后面调不回来了，这里还能找那种感觉，有样图嘛，然后这个项目后面也是要开源的。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

如何利用Vue+Element做个小页面

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

如何利用Vue+Element做个小页面

2024-04-02

怎么用Vue+Element做个小页面

这篇文章主要介绍怎么用Vue+Element做个小页面，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前言效果项目结构这个的话可以看到分了一些组件嘛。然后总体还是vue+elementui 后面活下来了再用uniapp
2023-06-29

如何使用Vue+Element做个个人中心

2024-04-02

如何利用layui弹出层做编辑页面

2024-04-02

如何利用vue+element ui实现好看的登录界面

2024-04-02

如何使用node搭建一个小页面

这篇文章主要介绍“如何使用node搭建一个小页面”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用node搭建一个小页面”文章能帮助大家解决问题。完成展示首页详情页面前置知识首先我们需要了解一些
2023-07-04

如何使用Python面向对象做个小游戏

这篇文章主要讲解了“如何使用Python面向对象做个小游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用Python面向对象做个小游戏”吧！我们今天同样实现一个小游戏，这个小游戏非常
2023-06-15

用vue做的网页如何打开

用Vue做的网页如何打开Vue是一款流行的JavaScript框架，用于构建现代的web应用程序。Vue的主要优点是它简单易用，同时还提供了许多强大的功能，如组件化，响应式数据绑定和虚拟DOM。在Vue中开发的web应用程序可以在任何支持现代web浏览器的设备上运行。这包括在笔记本电脑、台式电脑、平板电脑、智能手机和其他设备上运行。所以，如何在您的浏览器中打开Vue应用程序呢？
2023-05-14

vue写的页面如何弄成小程序

这篇“vue写的页面如何弄成小程序”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue写的页面如何弄成小程序”文章吧。1.借
2023-07-04

vue中怎么利用SPA实现一个单页面应用

2024-04-02

vue利用vue meta info设置每个页面的title与meta信息

2024-04-02

vue-cli中怎么利用webpack 构建一个多页面应用

2024-04-02

HTML页面中如何使用Vue

本文小编为大家详细介绍“HTML页面中如何使用Vue”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML页面中如何使用Vue”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。Vue是用于构建用户界面的渐进式Jav
2023-07-05

vue如何利用better-scroll实现轮播图与页面滚动

2024-04-02

vue如何构建单页面应用

2024-04-02

小程序个人中心页面如何制作

本文小编为大家详细介绍“小程序个人中心页面如何制作”，内容详细，步骤清晰，细节处理妥当，希望这篇“小程序个人中心页面如何制作”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。个人中心制作1. mine.js// pa
2023-06-26

Vue+Element UI+Lumen如何实现通用表格分页功能

2024-04-02

小程序如何获取页面上多个input值

2024-04-02

微信小程序如何设置基本的页面样式，做出用户界面UI

这篇文章主要介绍了微信小程序如何设置基本的页面样式，做出用户界面UI。如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。
2022-12-03

微信小程序如何切换下一个页面

2024-04-02

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈