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&>  &<p class="main"&>    &<h1&>{{msg}}&</h1&>    &<p &>      &<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&>   &</p&>  &</p&>&</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

第一步：导入 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.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&>  &<p id="app"&>    &<Header&>&</Header&>    &<router-view&>&</router-view&>    &<Footer&>&</Footer&>  &</p&>&</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&>  &<p class='header'&>   &<p class='logo'&>&<img :src="logo"&>&</p&>   &<p 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&>   &</p&>  &</p&>&</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&>&<p class=&’header&’&>并列的p&</p&>&</template&>，如果没有总得p包含会提示：Component template should contain exactly one root element；表达式两边要留出空格，例如：that.newslist = response.data.newslist，如果不留出来会提示：Infix operators must be spaced；

很多的时候都是出现了应该有空格，我们没有加上，按照提示加上空格就可以，越是按照要求写代码，我们的代码就会越规范。