經典php項目開發：php項目開發實例

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

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

例1：開發helloworld模塊

搭建好環境，新建項目以後，進入項目所在文件夾，依次進入src/components，這裡存放我們頁面模板，進入src/router，編輯index.js，找到path: ‘/’, 這裡是路徑也就是url訪問的顯示，當前默認的是根目錄，也就是首頁訪問才會出現helloworld模塊的內容，將path改為path: ‘/HelloWorld’,通過url訪問
http://www.xiangmu.com:8082/#/helloworld，出現了我們想要的結果。如圖1：

圖2 helloworld 效果圖

開發步驟：

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

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

2）註冊

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

注意首字母大寫，駝峰法命名；

例2：新聞列表

圖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
      })
  }

圖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放到了根目錄下，直接暴力解決了，沒有去修改路徑。再次訪問首頁，已經正常,頁面如下圖。

圖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；

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