个人博客网站
2018-12-12

环境搭建一。下载安装Debian。配置远程控制。

平时要用Windows来操作电脑。所以准备用另外一台电脑安装Linux系统,然后通过Windows远程控制。

考虑了一下,还是用Debian,虽然以前VPS都是用Centos。

1.下载。下载直接去官网下载,复制链接,然后迅雷下载,这样快。直接下载太慢。我下的是小版的。

2.安装。这里遇到第一堆坑,我下载后用UltraISO刻录U盘,然后在另外电脑Windows 7中直接安装,第一次装没接网线,是笔记本的无线网卡。但是装好后没网络,就自己设置,搞不定。重装。重装提示failed to load ldlinux.c32,搜索下用Win32DiskImager(Windows下)刻录U盘才行。下载安装重刻U盘,果然能用了。重装的时候先把网线连上,选择英文,因为上次安装提示中文安装包解释不全什么的,安装好后字是方块。安装的时候直接安装了桌面,SSH和Webserver。安装完成了。

3.远程连接,安装失败,感觉Debian用起来也没Centos方便。而且以后服务器还得用Centos,还不如直接换Centos。

2018-12-14

使用虚拟机Centos安装Node.js,NPM,Vue-CLI

准备装Centos的电脑太烂,装不上Centos,先用虚拟机。本来有装好了LNMP的Centos7的虚拟机,先用。

装NODE.JS,装NPM,更新,装VUE-CLI,不会的搜索。终于搞定了。但是主页还是LNMP的主页。研究下如何配置先。

2018-12-15

Vue.js调用后台数据库数据

Centos装好后,觉得还不如Windows下好用。还是Windows吧,不折腾了。

把Vue.js粗略的看一遍,以前就看过,看过就忘了,还是通过做应用来学习。现在做的网站,需要做一个分页。就做这个。

第一步,调用数据库数据。搜索了一下,说啥的都有,vue-resource,axios,fetch,websocket反正哪个都不懂,就学websocket吧。

2018-12-20

用Vue+axios写一个实时搜索

刚刚在学vue,试着写了一个实时搜索文件。

思路:1.input 通过v-model绑定。2.通过watch检测输入结果变化。3根据结果变化从api调用不同的数据。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title>
<script src="./vue.js"></script>
<script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
搜索:<input v-model='search'/> </br>
 {{result}}
</div><script>
var vm = new Vue({
    el:'#app',
    data:{
        search:'',
        result:''
    },
    watch: {
       search:function (val) {
         var _self=this;
         axios.get('http://localhost/d/apisearch.php?info='+val).then(function(response){
             // console.log(response);
             _self.result=response.data
         })
    }
  }
})
</script>
</body>
</html>

2018-12-30

最简单的实体手机测试移动端前端Vue Cli3搭建网站的方法

手机和PC同用一个路由的情况下,直接在手机的浏览器上输入Ip: 192.168.1.100:8080
就能看到了。
其中192.168.1.100是PC的IP。不同的自己改下就好。
就这么简单。啥都不用,不用USB,不用设置。直接IP就OK了。

2019-01-27

网站新建移动站,做了link rel="canonical" 等于主站URL后,全站被百度K了

移动站所有页面的权重都指向主站的首页,估计就是被K的原因。毕竟那么多网页一下权重那么多,当然被K了。不知道啥时候能好。

2019-02-15

用vue.js的v-for,v-if,computed写一个分页样式

在学Vue,总想写个分页,先写了一个样式。
主要看思路:
思路简单,得到总页数,判断总页数,循环。
先判断总页数是否需要分页,总页数==1页就不分了。
再判断总页数<11就不用……。
总页数>11,就要用到1…… 678 …… 末页
通过v-if 判断,通过v-for循环。
效果图:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title>
<script src="./vue.js"></script>
<script src="./axios.min.js"></script>
<style>
    #app{
        margin-top: 120px;
    }
    .pagenav{
        margin: 10px;
     padding: 5px;
        border: 1px solid #CCCCCC;
        font-size: 12px;
        width: 25px;
    }
    .selectedpage{
        background-color: #000000;
        color:#FFFFFF;
    }
</style>
</head>
<body>
<div id="app" v-if="pagenavshow"> //总页数等于1就不显示分页div了。
<p v-if="shownot">  //总页数小于11, 就不用显示……了。
<span class="pagenav" v-bind:class="{ 'selectedpage':  item==curpage  }" v-for=' item  in sum' v-on:click='pageclick(item)'>{{item}}</span>
</p>
<p v-else>
<span class="pagenav" v-bind:class="{ 'selectedpage':  item==curpage  }" v-for=' item in firstsum' v-on:click='pageclick(item)'>{{item}}</span>
<span>……</span>
<span class="pagenav" v-bind:class="{ 'selectedpage':  item==curpage  }" v-for=' item in middlesum' v-on:click='pageclick(item)'>{{item}}</span>
<span v-if="secondpot">……</span>  //当前页数小于6或者大于末页-4, 就不用显示第二个……了。
<span class="pagenav" v-bind:class="{ 'selectedpage':  item==curpage  }" v-for=' item in lastsum' v-on:click='pageclick(item)'>{{item}}</span>
</p>
</div>
<script>
 var app = new Vue({
     el:'#app',
     data:{
         sum:100,
         curpage:'1',
     },
     methods:{
         pageclick: function(item){
             this.curpage=item;
             console.log(this.curpage)
         }
     },
     computed:{
         pagenavshow: function(){
             if (this.sum==1){
             return false;
             }else{
             return true;
             }
         },
         
         shownot: function(){
             if (this.sum<12){
                return true;
             }else{
                return false
             }
         },
         firstsum:function(){
             if (this.curpage<6){
                 return [1,2,3,4,5,6,7];
         }else{
             return 1;
         }},
         middlesum:function(){
          var cpage=this.curpage;
                if (this.curpage<6 || this.curpage>this.sum-4){
                    return false;
            }else{
                return [cpage-2,cpage-1,cpage,cpage+1,cpage+2];
          }},
         lastsum:function(){
                if (this.curpage<this.sum-3){
                    return [this.sum];
             }else{
                 return [this.sum-5,this.sum-4,this.sum-3,this.sum-2,this.sum-1,this.sum]
             }
         },
         secondpot: function(){
             if(this.curpage<6 || this.curpage>this.sum-4){
            return false;}else{
                return true
            }
         }
     }
 })
</script>
</body>
</html>
粤ICP备14083553号