最近公司有项目要更，所以博客项目暂停更新了几周，现在继续

最新推荐文章于 2025-03-31 17:42:03 发布

ouheiyou

最新推荐文章于 2025-03-31 17:42:03 发布

阅读量242

点赞数 1

分类专栏：项目练习文章标签：博客 html javascript

本文链接：https://blog.csdn.net/weixin_37607751/article/details/78599100

版权

项目练习专栏收录该内容

12 篇文章

订阅专栏

今天要更新的俩个前端框架渲染方式。

在此之前我渲染数据，采用的是原生的js方法，类似如下

var html='';
var html+='<input type="text" name="s"/>' 
$("#a").append(html);

将上述代码放入到ajax请求返回的结果遍历中，这样做，缺点就是代码要写太多，而且比较乱。

所以我采用的是vue.js的渲染方式，vue.js作为当前一个很流行的框架，相比较好用了很多。代码如下

先引入

 <script src="js/vue.js"></script>

然后js，ajax请求，初始化vue,将结果装到 listss 中

 $.ajax({
        type:"POST",
        url:httpurl+"/blog/list",
        dataType:"json",
        success:function (data) {
            var vm=new Vue({
                el:'#example',
                data:{
                    listss:data.list
                }
            })
            var last = JSON.stringify(data);

        }
    })

html代码，先绑定要渲染的局部页面的id,之后使用v-for语句，list in listss相当于遍历listss放在了list中

<div id="example" >
                    <div v-for="list in listss" class="list list-group-item">

在html中，使用{{list.字段名}}，就可以获得遍历的数据了

<a v-bind:href="['single.html?titleId='+list.bid+'n'+list.clickNum]" >{{list.title}}</a>

<span class="post-category"><a href="#">{{list.classificationName}}</a></span>

另外 v-bind方法，可以绑定参数，或者绑定class，如上图所示。

另一种框架，就是bootstrap的表格框架
表格的html代码如下

<table class="table table-hover" id="talll"
       data-pagination="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-showColumns="true"
       data-click-to-select="true"
       data-single-select="true">
  <thead>
     <tr>
       <th  data-field="classificationName" style="width: 50%">类别</th>
       <th  data-field="classificationId" style="width: 10%">文章</th>
       <th  class="col-xs-2" data-field="action" data-formatter="actionFormatter" data-events="actionEvents" style="width: 20%">操作</th>
      </tr>
  </thead>
 </table>

js代码如下

function initTable() {
    //先销毁表格
   // $("#talll").bootstrapTable('destroy');
    //初始化表格,动态从服务器加载数据
    $("#talll").bootstrapTable({
        method: "get",  //使用get请求到服务器获取数据
        url: httpurl+"/classific/list", //获取数据的Servlet地址
        striped: false,  //表格显示条纹
        pagination: false, //启动分页
        pageSize: 1,  //每页显示的记录数
        pageNumber:1, //当前第几页
        pageList: [5, 10, 15, 20, 25],  //记录数可选列表
        search: false,  //是否启用查询
        showColumns: true,  //显示下拉框勾选要显示的列
        showRefresh: true,  //显示刷新按钮
        sidePagination: "server", //表示服务端请求
        queryParamsType : "undefined",
    });

}

因为平时只是写后端代码，所以前端是在工作接触之后才开始学习的，当然目前基本的一些js代码已经比较熟练，其他的框架，都是需要用到了才去现学先查，所以我会在这里，更新我平时用到的一些前端框架。