<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • php項目開發實例(經典php項目開發)


    很多時候搭建好了環境,但是不知道怎么入手去開發。

    下面我們通過簡單案例說明如何快速入門開發模塊:

    例1:開發helloworld模塊

    搭建好環境,新建項目以后,進入項目所在文件夾,依次進入src/components,這里存放我們頁面模板,進入src/router,編輯index.js,找到path: ‘/’, 這里是路徑也就是url訪問的顯示,當前默認的是根目錄,也就是首頁訪問才會出現helloworld模塊的內容,將path改為path: ‘/HelloWorld’,通過url訪問
    http://www.xiangmu.com:8082/#/helloworld,出現了我們想要的結果。如圖1:php手把手教你做網站(二十)vue+tp6簡單案例(demo)

    圖2 helloworld 效果圖

    開發步驟:

    1. 在src/components新建頁面模板;
    2. 編輯src/router內index.js ,

    1)導入 import HelloWorld from ‘@/components/HelloWorld’

    2)注冊

        {
          path: '/HelloWorld',
          name: 'HelloWorld',
          component: HelloWorld
        }

    注意首字母大寫,駝峰法命名;

    例2:新聞列表php手把手教你做網站(二十)vue+tp6簡單案例(demo)

    圖2 文章列表效果圖

    News.vue代碼:

    <template>
      <div class="main">
        <h1>{{msg}}</h1>
        <div >
          <ul>
           <li v-for="(item,index) in list" :key="index"><router-link :to="{path: 'newsdetail', query: {id: item.id}}"> {{item.news_name}}</router-link></li>
         </ul>
       </div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
      name: 'news',
      data () {
        return {
          artid: 19,
          msg: '這是新聞列表',
          list: [
            {'news_name': '新聞標題1', id: 1},
            {'news_name': '新聞標題2', id: 2},
            {'news_name': '新聞標題3', id: 3}
          ]
        }
      },
      mounted () {
        var that = this
        axios
          .post('/api/newslist', {
            parid: that.artid
          })
          .then(function (response) {
            that.list = response.data.list
          })
      }
    }
    </script>

    編輯src/router/index.js

    第一步:導入 News
    import News from '@/components/News'
    
    第二步:注冊   注意:path  就是我們網址訪問的地址
        {
          path: '/news',
          name: 'news',
          component: News
        }

    path和name是否首字母大寫沒有關系,完全可以直接復制粘貼News,這樣就不必改變首字母大寫了。

    在文章列表點擊需要傳遞ID編號到詳情頁,

    router-link用法:

     <li v-for="(item,index) in list" :key="index">
     <router-link :to="{path: 'newsdetail', query: {id: item.id}}">
     {{item.news_name}}</router-link>
    </li>

    如何傳遞多個參數呢?

    query: {id: item.id, catid: cat}

    詳情頁獲取參數:this.$route.query.id

      mounted () {
        var id = this.$route.query.id
        var that = this
        that.artid = id
        axios
          .post('/api/newsdetail', {
            parid: that.artid
          })
          .then(function (response) {
            that.content = response.data.content
          })
      }

    php手把手教你做網站(二十)vue+tp6簡單案例(demo)

    圖3 文章詳情頁效果圖

    如何去掉router-link下劃線:

    直接設置a css樣式 a{text-decoration:none}

    如何使用公共的頭部和底部文件:

    打開src下app.vue

    <template>
      <div id="app">
        <Header></Header>
        <router-view></router-view>
        <Footer></Footer>
      </div>
    </template>
    
    <script>
    import Header from '@/components/Header'
    import Footer from '@/components/Footer'
    export default {
      name: 'App',
      components: {
        Header, Footer
      }
    }
    </script>

    template內添加 <Footer></Footer><Header></Header>,然后下邊import導入,components注冊,components文件夾內新建header.vue,footer.vue。

    頭部代碼:

    <template>
      <div class='header'>
       <div class='logo'><img :src="logo"></div>
       <div class='dh'>
         <dl>
           <dd><router-link to="/">首頁</router-link></dd>
           <dd><router-link to="/news">新聞中心</router-link></dd>
           <dd><router-link to="/about">公司簡介</router-link></dd>
           <dd><router-link to="/contact">聯系我們</router-link></dd>
         </dl>
       </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'header',
      data: () => ({
        logo: '/static/img/logo.png'
      })
    }
    </script>

    打包導出:

    使用npm run build命令打包,打開項目文件夾發現多了dist文件夾,復制該文件夾到我們的tp6網站根目錄下(dist名稱可以任意修改,比如手機網站是m或者mobile等),這個時候如果網址直接訪問該文件夾,頁面是空白的。

    首頁空白的解決方法:

    編輯index.html發現css和js的路徑是指向根目錄的,我是把static放到了根目錄下,直接暴力解決了,沒有去修改路徑。再次訪問首頁,已經正常,頁面如下圖。php手把手教你做網站(二十)vue+tp6簡單案例(demo)

    圖4 demo首頁

    tp6用來寫接口(用于和html頁面的交互):

    返回文章列表示例:

        public function newslist()
        {
    		$list=Db::name("web_news")->field('id,news_name')->select()->toArray();
    	    exit(json_encode(array('list'=>$list),JSON_UNESCAPED_UNICODE));
        }

    使用域名重定向:

    打開項目內config>index.js。vue默認的網址是localhost,端口是8080,我們可以改變為自己好記的網址,例如:www.xiangmu.com,打開C:WindowsSystem32driversetchosts,結尾處添加127.0.0.1 www.xiangmu.com,這樣我們就可以使用網址加端口訪問我們的vue網站,端口號在我們運行項目的時候會提示項目的訪問網址。

    這里說一個小技巧:直接打開項目所在文件夾,在地址欄點擊直接輸入cmd,相比運行,打開cmd,然后cd進入目錄會方便點。

    基本的規范

    很多的警告,并不影響我們使用,但是也不建議忽視,只有嚴格按照要求來寫代碼,才能使我們的程序更加規范。

    1. 變量為字符串需要使用單引號,提示錯誤:Strings must use singlequote;
    2. 變量值和前邊冒號之間應該有一個空格,提示:Missing space before value for key;
    3. 換行的時候,不能出現2個或者更多空白行,提示:More than 1 blank line not allowed;
    4. 空格數錯誤,提示:Expected indentation of 7 spaces but found 8;
    5. 文件名不要使用下劃線,例如news_detail,提示:Identifier ‘News_Detail’ is not in camel case;
    6. 如果在index.js或者main.js導入axios, 會提示:’axios’ is defined but never used,我們直接在用到的頁面導入就可以了,而不要在index 或者main.js導入;
    7. components內.vue文件寫法應該是<template><div class=’header’>并列的div</div></template>,如果沒有總得div包含會提示:Component template should contain exactly one root element;
    8. 表達式兩邊要留出空格,例如:that.newslist = response.data.newslist,如果不留出來會提示:Infix operators must be spaced;

    很多的時候都是出現了應該有空格,我們沒有加上,按照提示加上空格就可以,越是按照要求寫代碼,我們的代碼就會越規范。

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费