1. 首頁 > 生活 > >

php開發實例大全 php開發項目實戰

小知識



文章插圖
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 效果圖
開發步驟：
在src/components新建頁面模板；編輯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 = thisaxios.post('/api/newslist', {parid: that.artid}).then(function (response) {that.list = response.data.list})}}</script>編輯src/router/index.js
【php開發實例大全 php開發項目實戰】第一步：導入 Newsimport 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.idvar that = thisthat.artid = idaxios.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="http://img.hubeilong.com/220622/2122513504-1.jpg"></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進入目錄會方便點 。
基本的規范
很多的警告，并不影響我們使用，但是也不建議忽視，只有嚴格按照要求來寫代碼，才能使我們的程序更加規范 。
變量為字符串需要使用單引號，提示錯誤：Strings must use singlequote；變量值和前邊冒號之間應該有一個空格，提示：Missing space before value for key；換行的時候，不能出現2個或者更多空白行，提示：More than 1 blank line not allowed；空格數錯誤，提示：Expected indentation of 7 spaces but found 8；文件名不要使用下劃線，例如news_detail，提示：Identifier ‘News_Detail’ is not in camel case；如果在index.js或者main.js導入axios，會提示：’axios’ is defined but never used，我們直接在用到的頁面導入就可以了，而不要在index 或者main.js導入；components內.vue文件寫法應該是<template><div class=’header’>并列的div</div></template>，如果沒有總得div包含會提示：Component template should contain exactly one root element；表達式兩邊要留出空格，例如：that.newslist = response.data.newslist，如果不留出來會提示：Infix operators must be spaced；
很多的時候都是出現了應該有空格，我們沒有加上，按照提示加上空格就可以，越是按照要求寫代碼，我們的代碼就會越規范 。