新闻管理发布系统（简易的全栈开发）（文章末尾附有源码供大家参考）

 仅供大家参考谢谢

框架为：Vue2+springBoot

大致思路为先使用vue框架建立前端页面，然后通过在写后端代码的时候进行前后端数据的交汇相通。其中在管理新闻的时候通过点击不同的新闻发布按钮，实现不同格式的新闻输出，实现简单的搜索，增加，删除，修改,分页和模糊查询,删除使用逻辑删除，通过使用到富文本编辑器添加修改数据，存储标签形式到数据库中，返回页面将标签读取出来返回文本形式，通过springBoot和vue框架实现出来。

首页展示

实现新闻的分页展示，并返回总条数。

前端和分页相关代码大致为这样：

<!--分页工具条-->
       <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>

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();
               },

上述axios发送get请求到后端代码上，同时url将需要的信息传送到后端，同时确保URL中的currentPage和pageSize参数是后端期望接收的查询参数。

下面代码定义了currentPage和pageSize

/**
     * 分页查询
     * @param begin  起始索引
     * @param size   每页显示条数
     * @return  查询到的所有数据
     */
    @Select("select * from information where is_delete=0 order by id desc limit #{begin},#{size}")
     List<information> selectByPage(@Param("begin") int begin, @Param("size") int size);

    /**
     * 查询记录总数
     * @return
     */
    @Select("select count(*) from information where is_delete=0")
    int selectTotalCount();

@GetMapping("/page")
    @ResponseBody
    public PageBean<InformationVo> getPage(@RequestParam("currentPage") int currentPage,
                                           @RequestParam("pageSize") int pageSize){
        return informationService.selectByPage(currentPage, pageSize);
    }

pageSize每页查询多少条数据

模糊查询

<el-col :span="5">
               <!-- 搜索 -->
               <el-input v-model="search" size="big" placeholder="请输入内容"></el-input>
           </el-col>

 模糊查询代码，同时也要返回模糊查询到的新闻条数。

/**
     * 定义模糊查询
     * @param search
     * @param begin
     * @param size
     * @return
     */
    @Select("select * from information where title like CONCAT('%', #{search}, '%') and is_delete=0 order by id desc limit #{begin},#{size}")
    List<information> getPageBySearch(String search, int begin, int size);
    /**
     * 查询记录总数通过关键字
     * @return
     */
    @Select("select count(*) from information where title like CONCAT('%', #{search}, '%') and is_delete=0")
    int selectTotalCountBySearch(String search);

/**
     * 分页模糊查询
     * @param search
     * @return
     */
    @GetMapping("/search")
    @ResponseBody
    public PageBean<information> getPageBySearch(@RequestParam("search") String search,
                                    @RequestParam("currentPage") int currentPage,
                                    @RequestParam("pageSize") int pageSize){
        return informationService.getPageBySearch(search,currentPage,pageSize);
    }
    /**
     * 分页查询
     * @param currentPage
     * @param pageSize
     * @return
     */
    @GetMapping("/page")
    @ResponseBody
    public PageBean<InformationVo> getPage(@RequestParam("currentPage") int currentPage,
                                           @RequestParam("pageSize") int pageSize){
        return informationService.selectByPage(currentPage, pageSize);
    }

添加功能

添加功能主要实现，通过添加数据时和数据库进行比对禁止重复添加相同的数据，同时在提示添加成功时进行跳转延迟，以便弹框实现。

/**
    * 
    * @param information
    * @return
    */
   public boolean add(information information);

 

@Override
    public boolean add(information information) {
        int compare = mapper.compare(information);
        if (compare>0){
            return false;
        }
        //设置时间
        information.setDate(java.sql.Date.valueOf(LocalDate.now()));
        //调用mapper
       int rows=mapper.add(information);
       return rows>0?true:false;
    }

添加的时候通过调用compare来禁止重复添加相同的数据，同时更新最新的时间。

修改功能

当点击修改按钮，在加载页面的时候获取ID，将对应id信息显示到修改页面上来，通过axios和springBoot实现此功能。

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

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

跳转页面首先进行数据的回显

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

<script>
    new Vue({
      el: '#app',
      data: function() {
        return {
            id: 0,
            search:'',//搜索
            // dialogVisible: false,
            ruleForm: {
                title: '',
                author:'',
                text: ''
            },
            rules: {
              title: [
                { required: true, message: '请输入标题名称', trigger: 'blur' },
                { min: 3, max: 50, message: '长度在 3 到 50个字符', trigger: 'blur' }
               ],
              }
        }
      },
        methods:{
            getById(){
                const that = this;
                axios({
                    method:"get",
                    url:"/getById?id="+this.id
                }).then(function(resp){
                    that.ruleForm=resp.data;
                    //将查询出来的text设置到富文本编辑器中
                    $(".editor").trumbowyg('html',that.ruleForm.text);
                })
            },
            //修改函数
            update(){
                const that=this;
                //获取富文本编辑的html内容赋值给添加表单中的text
                var text = $(".editor").trumbowyg('html');
                this.ruleForm.text=text;
                //表单提交
                axios({
                    method:"put",
                    url:"/update",
                    data:that.ruleForm
                }).then(function(resp){
                    if(resp.data==='success'){
                        //弹出成功信息框
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        //页面跳转到首页
                        window.location.href = "./index.html";
                    }else{
                        alert("修改失败");
                    }
                })
            },

后端代码我这里做的和添加代码差不多相同，大家可以去浏览源码看一下。

删除功能

通过定义字段实现逻辑删除。

<el-button slot="reference" type="danger" size="mini" @click="handleDelete(scope.row)">
                        删除
                    </el-button>

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'
                           });
                       }
                   })
               },

逻辑删除的sql语句

/**
     * 根据id删除数据
     * @param id
     * @return
     */
    @Update("update information set is_delete=1 where id=#{id}")
    int deleteById(int id);

/**
     * 根据id删除数据
     * @param id
     * @return
     */
    @GetMapping("deleteById")
    @ResponseBody
    public String deleteById(@RequestParam("id")int id){
        int rows=information.deleteById(id);
        if(rows>0){
            return "success";
        }else return "fail";
    }

不同的页面

通过点击查看不同的新闻页面跳转到不同的页面，分别用盒子定义不同的模板让其显示出的数据模板不相同。

 <div id="app">
         <div class="containers">
             <h1 align="center">{{ruleForm.title}}</h1>
             <h4>{{ruleForm.date}}|网易新闻</h4>
             <h4 align="center">作者：{{ruleForm.author}}</h4>
             <hr>

         </div>
     </div>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                id: 0,
                ruleForm: {
                    title: '',
                    date: '',
                    author:'',
                    text: ''
                },
            }
        },
        methods: {
            //定义一个根据id查询数据的函数
            getById() {
                const that = this;
                axios({
                    method: "get",
                    url: "/getById?id=" + this.id
                }).then(function (resp) {
                    that.ruleForm = resp.data;
                    console.log(that.ruleForm);
                    // 假设这是通过axios请求获取到的字符串
                    //const htmlString = '<div>Python大数据的基础 <b>linyubing</b> </div>';
                    // 选择要插入内容的目标元素
                    const targetElement = document.querySelector('#app .containers');

                    // 创建一个新的div元素，用于包裹插入的HTML字符串
                    const newDiv = document.createElement('div');

                    // 使用innerHTML属性将字符串内容插入到新创建的div元素中
                    newDiv.innerHTML = that.ruleForm.text;

                    // 找到要插入位置的下一个兄弟节点，这里假设是<br>标签
                    const nextSibling = targetElement.lastElementChild;
                    // 在<br>标签后面插入新的内容
                    targetElement.insertBefore(newDiv, nextSibling.nextElementSibling || null);
                })
            }
        },
        mounted() { //获取存储的id
            this.id = window.localStorage.getItem("id");
            this.getById();
        }
    })
</script>

总结

这也时自己尝试的一个小小的项目，通过写出前后端代码，更加清晰感觉到了前后端的交互作用，也是自己的一个小小的进步啦

林玉冰/project001 (gitee.com)