第一个合作小项目——新闻模板转换器

最新推荐文章于 2024-07-13 19:55:20 发布

北极以北的雪

最新推荐文章于 2024-07-13 19:55:20 发布

阅读量881

点赞数 21

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79714460/article/details/140179893

版权

简介：

此项目是完全有本人和两个学长学姐一起完成。这个项目是主要有springboot+vue2以及一些element的组件和axios数据传递组成。项目主要的功能是新闻模板转换器，可以根据相同的新闻信息要素，不同的新闻模板来展示不同新闻页面。

此项目创建课gitee仓库管理，如果想要可以访问-->林玉冰/project001 (gitee.com)

此外以下展示几个核心技术：Element UI的几个插件，axios，富文本编辑器

分页组件：

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
</el-pagination>
<script>
    new Vue({
     el: '#app',
     data: function() {
       return {
//当前所在页码
currentPage:1,
//每页显示的条数
pageSize: 5,
//总记录数
totalCount:100,
//新闻列表
news:[],
//模糊查询内容

异步执行，axios，通过url执行页面跳转同时可以传参，

resp通过数据传回，是一个对象，可以在后端进行数据分装，比如，在此有一个list，和一个totalpage页面，可以将total和list共同封装成一个对象，然后在传递到前端进行数据调用封装。

methods:{
    //分页查询数据
    page(){
        const that = this;
        axios({
            method:"get",
            url:"/page?currentPage="+that.currentPage+"&pageSize="+that.pageSize
        }).then(function(resp){
            //分页数据封装
            that.news=resp.data.rows;
            that.totalCount=resp.data.totalCount;
        })
    }, //当页码发生改变时调用
       handleCurrentChange(val) {
         //重新设置当前页码
           this.currentPage=val;
           //重新查询
           this.page();
       },
       //当每页显示大小发生改变时调用
       handleSizeChange(val) {
           //重新设置当前页码
           this.pageSize=val;
           //重新查询
           this.page();
       },
   },
     mounted(){
         this.page();
     }
})

mounted 是组件的一个生命周期钩子，它在组件的 DOM 被挂载到页面上后立即调用。这里，this.page(); 就可以在页面加载的时候调用钩子开始去后端读取数据。

如图：

搜索组件：

<el-col :span="5">
    <!-- 搜索 -->
    <el-input v-model="search" size="big" placeholder="请输入内容"></el-input>
</el-col>
<el-col :span="2">
    <el-button type="primary" icon="el-icon-search" @click="selectByCondition()">搜索</el-button>
</el-col>
//点击搜索，button按键会调用selectByCondition（）；

selectByCondition(){
    const that = this;
    axios({
        method:"get",
        url:"/search?search="+this.search+"&currentPage="+that.currentPage+"&pageSize="+that.pageSize
    }).then(function (resp) {
        //分页数据封装
        that.news=resp.data.rows;
        that.totalCount=resp.data.totalCount;
    })
},

搜索后异步请求，但要注意返回时要进行分页操作。

如图：

页面跳转并传参：

<el-button type="primary" size="mini" @click="update(scope.row)">
    修改
</el-button>

scope.row的用法分析：

scope.row在Vue.js模板中通常用于访问当前行的数据。在使用Element UI的表格组件<el-table>时，scope是一个特殊的变量，它代表当前迭代的数据范围，而scope.row则指向当前行的整个数据对象。因此，在@click事件处理器中使用scope.row可以获取到被点击行的详细数据，并据此执行相应的操作，例如在您提供的代码片段中，点击按钮会调用update函数并传递当前行的数据作为参数。这种做法常见于需要根据行数据进行特定操作的场景，如编辑、删除等

//存储id并进行页面跳转

update(row){
    //存储在浏览器的本地存储
    window.localStorage.setItem("id",row.id);
    window.location.href = "./update.html";
},

将选中的数据项的id属性保存到浏览器的本地存储（localStorage）中，并随后将页面重定向到另一个HTML页面（update.html），以便在该页面上根据这个id进行数据的更新操作。

在update.html 的页面中：

mounted(){
  //获取存储的id
    this.id=window.localStorage.getItem("id");
   //调用数据回显函数
    this.getById();
}

获得Id，从上一个页面传过来的数据。然后再调getById（）方法，然后去后端查询数据再返回前端，显示到页面上。

如图：

update页面的细节处理：

rules: {
  title: [
    { required: true, message: '请输入标题名称', trigger: 'blur' },
    { min: 3, max: 50, message: '长度在 3 到 50个字符', trigger: 'blur' }
   ],
  }
设置标题名称的长度。

}).then(function(resp){
    if(resp.data==='success'){
        //弹出成功信息框
        that.$message({
            message: '添加成功',
            type: 'success'
        });
        setTimeout(() => {
            window.location.href = "./index.html";
        }, 1000);  // 1秒延迟

    }else{
        //弹出失败信息框
        that.$message({
            message: '数据重复添加',
            type: 'error'
        });
    }
})

修改数据后会去后端检查数据是否重复，如果数据重复，会提示：数据重复添加。

否则，数据添加成功会有一秒的页面延迟，让update页面可以来弹出修改成功。

注：修改和添加的两个页面功能相近，都是要判断数据库有无重复数据，添加后需要延时跳转index.html页面。

删除功能的实现：

handleDelete(row) {
                   this.$confirm('您确定要删除这条记录吗？', '提示', {
                       confirmButtonText: '确定',
                       cancelButtonText: '取消',
                       type: 'warning'
                   }).then(() => {  //用户点击确定删除按钮
                       // 这里调用删除接口的逻辑
                       this.deleteRow(row.id);
                   }).catch(() => {  //用户取消删除
                       this.$message({
                           message: '用户取消删除',
                           type: 'info'
                       });
                   });
               },
               //逻辑删除数据
               deleteRow(id) {
                   const that=this;
                   axios({
                       method:"get",
                       url:"/deleteById?id="+id
                   }).then(function (resp) {
                       if(resp.data==='success'){
                           that.page();
                           this.$message({
                               message: '删除成功',
                               type: 'success'
                           });
                       }else if(resp.data==='fail'){
                           this.$message({
                               message: '删除失败',
                               type: 'error'
                           });
                       }
                   })
               },

删除功能一般都是逻辑删除，逻辑删除就是在后端将is_delete的值修改，

这样的思想不会造成数据库中重复删除同一条数据而导致第二次删除之后找不到数据的情况。

富文本编辑器：

//添加函数
add(){
    const that=this;
    //获取富文本编辑的html内容赋值给添加表单中的text
    var text = $(".editor").trumbowyg('html');
    this.ruleForm.text=text;
    //表单提交
    axios({
        method:"post",
        url:"/add",
        data:that.ruleForm

 update(){
                const that=this;
                //获取富文本编辑的html内容赋值给添加表单中的text
                var text = $(".editor").trumbowyg('html');
                this.ruleForm.text=text;
                //表单提交

以下是一些流行的Vue富文本编辑器组件：

TinyMCE for Vue: TinyMCE是一个功能丰富的所见即所得富文本编辑器，官方提供了Vue集成版本，便于在Vue项目中使用1。
Vue Quill Editor: Quill是一个现代化的WYSIWYG编辑器，适用于Vue的版本被称为vue-quill-editor，它支持服务端渲染和单页应用，并且广泛应用于大型企业1。
Vue3 + WangEditor: WangEditor是一个轻量级的Web富文本编辑器，@wangeditor/editor-for-vue是其Vue3版本的封装，适用于Vue3项目，并提供了丰富的配置选项和自定义能力2。
VueUp Vue Quill: 针对Vue 3的Quill编辑器组件，@vueup/vue-quill提供了对Vue 3的支持，并且包括了相应的CSS样式文件4。

这些编辑器组件通常提供了丰富的功能，如文本格式化、图片上传、链接插入等，并且大多数都支持自定义工具栏和配置。您可以根据项目需求和个人喜好选择合适的富文本编辑器组件。

项目总结：

这是本人的第一个与团队一起做的第一个项目，之前，写的一般都是用thymeleaf+springboot然后再分页，传参方面都不是特别方便，如今作为一个写后端的大二新生，接触了vue+element UI+springboot 来写项目，发现稍微简单一点，像这种的项目后端的思路和代码实现简直不要太简单，当然，这也可能因为第一次自己从零基础就上手根据vue写的前端页面来写项目，然后在vue的传参跳页面上不会运用，然后找寻资料的时候又磕磕绊绊，才导致写的如此艰难。。

北极以北的雪

关注

21
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
第一个合作小项目——新闻模板转换器

这是本人的第一个与团队一起做的第一个项目，之前，写的一般都是用thymeleaf+springboot然后再分页，传参方面都不是特别方便，如今作为一个写后端的大二新生，接触了vue+element UI+springboot 来写项目，发现稍微简单一点，像这种的项目后端的思路和代码实现简直不要太简单，当然，这也可能因为第一次自己从零基础就上手根据vue写的前端页面来写项目，然后在vue的传参跳页面上不会运用，然后找寻资料的时候又磕磕绊绊，才导致写的如此艰难。。
复制链接

扫一扫