前提

1、下载开发版本的vue.js，这样可以看到报什么错误，生产版本是不报错误的

2、ajax作为第三方接口，可以返回后台的数据

要点

vue只要在script里面实例化一次就可以了

以下是本人开发项目实践成功的代码

js部分讲解

实例化vue,

var ap=new Vue({
  el: '#allpost',
  data: {
      sites:[]
  },
  });


以上知识点讲解

1、el:"#allpost"对应html页面的id="post"

2、sites是集合
3、怎么把ajax返回的json集合给vue的sites

   ap.sites=ret；就可以了

4、ret如果是集合的形式，console.log(ret)

5、打印字符串形式的ret ,并且利用https://www.json.cn/查看格式

目的在于，在前台以{{s.post_kinds}}的格式取数据有没有问题

js(完整的代码如下)

//ajax连接第三方的地址
var purl='http://47.93.217.112:8080/jiekou';
var pp='http://192.168.0.107:8080/jiekou';
//ajax连接第三方的地址
//实例化vue
var ap=new Vue({
  el: '#allpost',
  data: {
      sites:[]
  },
  methods: {
       show_onepost(id) {
           // 显示具体的帖子
              Topage(id);
           //显示具体的帖子
       }
   },
  });
//实例化vue
//初始化
apiready = function() {
  var kinds = '';
  querylist(kinds);
}
//初始化
function querylist(kk){
api.ajax({
   url: pp+'/query_kinds.action',
   method: 'post',
   data: {
       values: {
               post_kinds:kk
       }
   }
},function(ret, err){
   if (ret) {
     ap.sites = ret;
    // console.log(JSON.stringify( ap.sites ));
   }
});
 //默认出来所有的帖子，点击蔬菜水果，才会传值过去

}
//点击就可以进入详情的帖子页面
function Topage(id){
api.openFrame({
  name: 'singlebbs',
  url: './singlebbs.html',
  pageParam: {
      post_id: id
  },
});
}
//点击就可以进入详情的帖子页面

//只有登录的用户才可以发布帖子
function islogin() {
var name = $api.getStorage('username');
if (name != null) {
    api.openFrame({
        name: 'sendpost',
        url: './sendpost.html',
    });

} else {
    api.toast({
        msg: '您还没登录，登录之后可以享受更多的权益',
        duration: 2000,
        location: 'bottom'
    });

}
}
//只有登录的用户才可以发布帖子

Html的完整代码如下

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>共享农场-论坛</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../css/bbs.css" />
    </head>
    <style>
		.table tr td {
		border:1px solid white;
		}
	</style>
    <body>
      <!-- 分类导航 -->
       <ul class="nav nav-tabs">
      	<li class="active" onclick="querylist('蔬菜')"><a href="#">蔬菜</a></li>
      	<li><a href="#" onclick="querylist('水果')">水果</a></li>
      	<li><a href="#" onclick="querylist('土地')">土地</a></li>
      	<li><a href="#" onclick="querylist('食品安全')">食品安全</a></li>
            <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      其他
      </a>
      <ul class="dropdown-menu">
        <li onclick="querylist('认养体验')"><a href="#">认养体验</a></li>
        <li onclick="querylist('城乡合作')"><a href="#">城乡合作</a></li>
        <li onclick="querylist('供应信息')"><a href="#">供应信息</a></li>
          <li onclick="querylist('农业快讯')"><a href="#">农业快讯</a></li>
      </ul>
    </li>
  </ul>
        <!-- 分类导航 -->
        <!-- 一个图片 -->
<div class="alert alert-danger text-right" onclick="islogin()">发布帖子</div>
        <!-- 一个图片 -->
        <!-- 详情  左图+右标题+时间+回帖数目+账户名 -->
<div id="allpost" >
  <div class="container" >
          <div class="row" v-for="s in sites" @click="show_onepost(s.post_id)">
            <template>
           <div class="col-xs-6">
              <img :src="s.post_img" class="post_img"/>
           </div>
            <div class="col-xs-6">
            <div class="row dt">{{s.post_title}}</div>
              <div class="row">
                <div class="col-xs-6 h6">{{s.post_byname}}</div>
              <div class="col-xs-6 h6">{{s.answer_num}} </div>
            </div>
            <div class="row h6">{{s.post_time}}</div>
          </div>
        </template>
          </div>
        </div>
</div>
<!--  -->
</body>
<script src="../script/jquery-1.10.2.js"></script>
<script src="../script/bootstrap.js"></script>
<script src="../script/vue.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/bbs.js"></script>

</html>

 

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 3 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区