n2

 "express-ws": "^3.0.0",

"devDependencies": {
    "socket.io": "^2.0.4"
  }

message.js

router.get('/current', function(req, res, next) {
    console.log("current:----------");
    var userid=req.session.loginUser.id;
    var usrname= req.session.loginUser.usrname;
    console.log("userid:"+userid+"，usrname:"+usrname);
    var sqlstr= "SELECT count(1) FROM message  where username ='" +usrname+"' and readed=0";
    console.log(sqlstr);
    var connection=myCreateCon();
    connection.connect();
    //原来就是select * from
    connection.query(sqlstr, function(err, rows, fields) {
        if (err) throw err;
        console.log('查询结果为: ', rows);
        //res.send(rows);
        res.json({ret_code: 0, data: rows});
    });
    connection.end();
});


router.get('/', function(req, res, next) {
	var userid=req.session.loginUser.id;
    var usrname= req.session.loginUser.usrname;
    console.log("userid:"+userid+"，usrname:"+usrname);
    var sqlstr= "SELECT c.* FROM message c where c.username ='" +usrname+"'";
  

 FindPerson.vue

<small v-html='room.roominfo'></small>

Messages.vue

 getRows(){
        var gvue=this;
        this.$ajax({
            method: 'get',
            url: 'api/message/?time='+new Date().getTime(),
         }).then(function (response) {
            console.log(response.data.rows);
          debugger;
            if(response.data.count>0){
              var messages = new Array(response.data.rows.length);
              //var messages = response.data.ret_msg;
              for (var x=0;x<response.data.rows.length;x++)
              {
                var msg={};
                msg.liid=response.data.rows[x].id;
                msg.posttime=response.data.rows[x].time;
                msg.areaname=response.data.rows[x].text;
                messages[x]=msg;

              }
              gvue.tableData=messages;
            }else

myMenu.vue

      msgcount:'',
        logined_prop:true
      };
    },
    mounted:function () {
          this.getLoginStatus();
          setInterval(this.getUsrCurMsgCount,50000)
         // this.getUsrCurMsgCount();
    },
    methods: {
      getUsrCurMsgCount(){
        var gvue=this;
        this.$ajax({
          method: 'get',
          url: 'api/message/current?time='+new Date().getTime(),
          /*
           data: {
           usrname: this.ruleForm2.usrname,
           pass: this.ruleForm2.pass
           }*/
        }).then(function (response) {
          //alert("11");
          //debugger;
          console.log(response);
          if(response.data.ret_code==0){
            console.log(response.data);
            //gvue.$store.state.logined=true;
            //gvue.$store.state.identification=response.data.ret_msg.identification;

            gvue.msgcount=response.data.data[0]['count(1)'];
          }
        })
          .catch(function (error) {
            console.log(error);
          });
      },

 Mapsearch.Vue

<template>
<el-row id="Homepan" :gutter="10">
  <el-col :xs="0" :sm="1" :md="2" :lg="2">.</el-col>
  <el-col :xs="24" :sm="22" :md="20" :lg="20">.

<el-row :gutter="10">
     <el-col :xs="0" :sm="1" :md="2" :lg="2">.
     </el-col>
     <el-col :xs="24" :sm="22" :md="20" :lg="20">



  <div class="am-list-news-bd">
  <ul class="am-list">
      <li v-for="room in rooms" class=" am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
        <el-row :gutter="10">
          <el-col :xs="17" :sm="17" :md="17" :lg="17" >
            <div class=" am-list-main" >
              <el-row :gutter="10">
                <el-col :xs="15" :sm="15" :md="14" :lg="12">
                  <h4 class="" style="margin-top: 1.1em;margin-bottom: 0.5em;"><router-link :to="'/findperson/'+room.id">
                    {{room.areaname}}--{{room.courtname}}<small></small> </router-link>
                  </h4>
                </el-col>
                <el-col :xs="9" :sm="9" :md="10" :lg="12">
                  <h5 style="margin-top: 1.5em;margin-bottom: 0.5em;">
                  </h5>
                </el-col>
              </el-row>
              <div class="am-list-item-text" style="margin-top: 0.3em;">
                <el-row :gutter="10">
                  <el-col :xs="17" :sm="17" :md="17" :lg="17" class="hidden-sm-and-down">
                    <small style="padding-top: 30px;" v-html="room.roominfo"></small>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 1.2em;margin-bottom: 0.3em;" :gutter="10">
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" class="hidden-sm-and-down">
                    <small> <small>{{room.posttime}}  wang</small></small>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" >
                    <i style="padding-right: 1em" class="el-icon-news">2</i>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" class="hidden-sm-and-down">
            .<img src='/api/150_dd.JPG'  style="margin-top: 5%;margin-bottom:5%;height: 80px;  "/>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
  </el-col>
  </el-row>
<div class="block">
  <span class="demonstration"></span>
  <!--
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
  -->
   <el-pagination style="text-align: center;"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size.sync="pagesize"
      layout="total, prev, pager, next"
      :total.sync="total">
    </el-pagination>
</div>
  </el-col>
  <el-col :xs="0" :sm="1" :md="2" :lg="2">.</el-col>
</el-row>
</template>
<style type="text/css">
 #Homepan  {
  text-align:left;
  /*float: left;*/
}
#Homepan img{
 auto;
 height:auto;
 max-90%;
 max-height:90%;
 margin-top: 8%;
 margin-bottom: 6%；
}

#Homepan .am-panel-default {
    border-color: #ddd;
}
#Homepan .am-panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
#Homepan .am-list-news-default {
    margin: 10px;
}
#Homepan .am-list{
  padding-left: 0.1em;
  padding-right: 0.1em;
}
#Homepan .am-list-news-hd {
    padding-top: 1.2rem;
    padding-bottom: .4rem;
}
#Homepan .am-list-news-default .am-list .am-list-item-desced .am-list-item-text {
    margin-top: .5rem;
    color: #757575;
}
#Homepan .am-list li {
    position: relative;
    display: block;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #dedede;
    border- 1px 0;
}
#Homepan .am-list-news-default .am-list .am-list-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1em;
    max-height: 2.6em;
}
#Homepan.am-list-item-text {
    line-height: 1.3;
    font-size: 1.1rem;
    color: #999;
    margin: 0;
}
#Homepan.am-list-news-default .am-list .am-list-item-thumb-left .am-list-thumb {
    padding-left: 0;
}
#Homepan.am-list .am-list-item-desced a, .am-list .am-list-item-thumbed a {
    padding-right: 0;
}
#Homepan a {
    color: #0e90d2;
}
#Homepan a, ins {
    text-decoration: none;
}
#Homepan a {
    background-color: transparent;
}
</style>
<script>

  export default {
    data() {
      return {
        value3: true,
        rooms:[  {
                    areaname:'雨花台',
                    courtname:'双龙嘉园',
                    acreage:'',
                    price:'',
                    decoration:'',
                    orientation:'',
                    identification:'',
                    rentmethod:'',
                    roomnum:'',
                    tingnum:'',
                    washroomnum:'',
                    surroundinginfo:'',
                    roominfo:''
                  }
              ],
              areaname: '*',
              currentPage1: 1,
              total:20,
              pagesize:10,
              my:1
      }
    },
    mounted:function () {
      this.handleChangeValue();
    },
    methods: {
      handleCurrentChange(val) {
        this.handleChangeValue();
      },
      handleChangeValue(){
         var url ="&areaname="+this.areaname+"&currentpage="+this.currentPage1+"&pagesize="+this.pagesize;
          this.getRooms(url);
      },
      formatTooltip(val) {
        return val ;
      },

      getRooms(url){
        Object.assign(this.$data.my, 100);
       this.my=99;
        var gvue=this;
        this.$ajax({
              method: 'get',
              url: 'api/roommate/all?time='+new Date().getTime(),
              changeOrigin:true,
            }).then(function (response) {
              console.log(response);
              var Things = response.data.rows;
              gvue.rooms=Things;
              gvue.total=response.data.count;
            })
            .catch(function (error) {
              console.log(error);
            });
      }
    }
  }

</script>

AddPerson.vue

<template>
    <el-row  id="AddRoom">
        <el-col :span="5">.</el-col>
            <el-col :span="14">
                <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                              <el-breadcrumb-item :to="{ path: '/' }">找室友信息</el-breadcrumb-item>
                              <el-breadcrumb-item>{{action}}</el-breadcrumb-item>
                        </el-breadcrumb>

                      </div>
                        <div class="text item">
                          <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                            <el-form-item label="位置"  required>
                              <el-col :span="10">
                              <el-form-item prop="areaname">
                              <el-select v-model="form.areaname" placeholder="所在区(如朝阳)" >
                                <el-option label="建邺" value="建邺"></el-option>
                                <el-option label="玄武" value="玄武"></el-option>
                                <el-option label="江宁" value="江宁"></el-option>
                              </el-select>
                              </el-form-item>
                             </el-col>
                              <el-col :span="4"><el-form-item label="位置" required></el-form-item></el-col>
                              <el-col :span="10">
                              <el-form-item prop="courtname">
                              <el-input v-model="form.courtname" placeholder="输入期待租房位置(如万达附近)" ></el-input>
                              </el-form-item>
                              </el-col>
                            </el-form-item>

                            <el-form-item label="标签"  required>
                            <el-col :span="7">
                              <el-form-item prop="tag1">
                              <el-input v-model="form.tag1"   placeholder="可输年龄信息(如80后、90后)"></el-input>
                              </el-form-item>
                            </el-col>

                              <el-col :span="1">.</el-col>
                              <el-col :span="7">
                              <el-form-item prop="tag2">
                              <el-input v-model="form.tag2"  placeholder="可输职业信息(如it、金融等)"></el-input>
                              </el-form-item>
                              </el-col>
                              <el-col :span="1">.</el-col>
                              <el-col :span="8">
                              <el-form-item prop="tag3">
                              <el-input v-model="form.tag3"  placeholder="其他标签"></el-input>
                              </el-form-item>
                              </el-col>
                            </el-form-item>


                            </el-form-item>

                            <el-form-item label="小区周边" require prop="surroundinginfo">
                             <el-radio-group v-model="form.identification">
                                <el-radio  label="0">无房共同找</el-radio>
                                <el-radio  label="1">有房求室友</el-radio>
                             </el-radio-group>
                            </el-form-item>
                            <el-form-item label="首段" require prop="roominfo">
                              <el-input type="textarea" placeholder="介绍一下自己和期待租房的价位、位置、装修、室友要求等..." v-model="form.roominfo"></el-input>

        <!--                      <button v-on:click="getContent">查看内容</button> -->

                            </el-form-item>
                              <el-form-item label="正文" require prop="roominfo">
                                <div id="editorElem" style="text-align:left"></div>
                              <el-button type="primary" @click="submitForm('form')">{{gonext}}</el-button>
                              <el-button @click="resetForm('form')">重置</el-button>
                            </el-form-item>
                          </el-form>

                      </div>
                </el-card>
            </el-col>
        <el-col :span="5">.</el-col>
    </el-row>
</template>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card{
    margin-top:30px;
  }

  #AddRoom {
    text-align: left;
  }

</style>

<script>
  import E from 'wangeditor'
  var editor = new E('#editorElem')
export default {
    data() {
      return {
        editorContent: '',
        radio: '1',
        action:"添加",
        gonext:"立即创建",
        form: {
          areaname:'',
          courtname:'',
          tag1:'',
          tag2:'',
          tag3:'',
          identification:'0',
          surroundinginfo:'',
        },
        rules: {
          courtname: [
            { required: true, message: '请输入位置', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],
          areaname: [
            { required: true, message: '请选择所在区', trigger: 'change' }
          ],
          tag1: [
            {  required: true, message: '请输入标签', trigger: 'change' }
          ],
          tag2: [
            {  required: true, message: '请输入标签', trigger: 'change' }
          ],
          tag3: [
            {  required: true, message: '请输入标签', trigger: 'change' }
          ],
          identification: [
            {  required: true, message: '请选择', trigger: 'change' }
          ],
          roominfo: [
            { required: true, message: '请输入正文', trigger: 'blur' }
          ]
        }
      }
    },
    mounted:function () {
      editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
      editor.create()
      if(this.$route.params.id)
          this.getRoom();
      },
    methods: {
      getContent: function () {
        alert(this.editorContent)
      },
      cancelForm(){
        this.$router.push("/postrooms");
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getRoom(){
            var id=this.$route.params.id;
            //alert(id);
            //alert(this.dynamicSegment);
           this.editorContent='111';
            var gvue=this;
            this.$ajax({
                  method: 'get',
                  url: 'api/room/'+id+'?time='+new Date().getTime(),
                  changeOrigin:true,
                }).then(function (response) {
                  console.log(response.data);
                  gvue.form=response.data[0];
                  gvue.form.identification=response.data[0].identification+'';
                  gvue.action="编辑 (房间号:"+id+")";
                  gvue.gonext="立即修改";
                  gvue.editorContent=response.data[0].roominfo;
              editor.txt.html(response.data[0].roominfo);
                })
                .catch(function (error) {
                  console.log(error);
                });
          },
      submitForm(form) {//2表示是求组
        console.log('submit!');
        this.$refs[form].validate((valid) => {
          if (valid) {
              //alert('submit!');
              var url = 'api/roommate/add?time='+new Date().getTime();
              if(this.$route.params.id)
                 url = 'api/room/edit?time='+new Date().getTime();
              var gvue=this;
             this.form.roominfo=this.editorContent;
              this.$ajax({
                  method: 'post',
                  url:url ,
                  changeOrigin:true,
                  data: this.form//"courtname="+this.form.courtname+"&areaname="+this.form.areaname
               }).then(function (response) {
                  console.log(response);
                  if(response.data.ret_code===0){
                      gvue.$message({
                        showClose: true,
                        message: response.data.ret_msg+'，操作成功1',
                        type: 'success'
                      });
                      //gvue.$router.push("/addroom2/"+response.data.ret_roomid);
                      gvue.$router.push("/postrooms");
                  }

                })
                .catch(function (error) {
                  console.log(error);
                });


          } else {
                  console.log('error submit!!');
                  return false;
          }
        });
      }
    }
  }
</script>