php项目开发实例 经典php项目开发
很多时候，环境设置好了，却不知道如何开发。这里有一个简单的案例来说明如何快速开始学习开发模块:示例:开发helloworld模块搭建好环境，新建项目以后，进入项目所在文件夹，依次进入
很多时候，环境设置好了，却不知道如何开发。
这里有一个简单的案例来说明如何快速开始学习开发模块:
示例:开发helloworld模块
搭建好环境，新建项目以后，进入项目所在文件夹，依次进入src/components，这里存放我们页面模板，进入src/router，编辑index.js，找到path: ‘/’, 这里是路径也就是url访问的显示，当前默认的是根目录，也就是首页访问才会出现helloworld模块的内容，将path改为path: ‘/HelloWorld’,通过url访问
http://www.xiangmu.com:8082/#/helloworld，出现了我们想要的结果。如图1：
建立一个良好的环境。创建新项目后，进入项目所在的文件夹，然后进入src/components，我们的页面模板就存储在这里。输入src/router，编辑index.js，找到路径:‘/’，这里显示的是路径，也就是url访问。目前默认是根目录，即访问主页时会出现helloworld模块的内容。将路径更改为路径:‘/hello world ’，通过url访问了
http://www . Xiang mu . com:8082/#/hello world，出现了想要的结果。如图1所示:
图2 helloworld效果图
开发步骤:
在src/components新建页面模板；编辑src/router内index.js ，
1)从‘导入HelloWorld@/components/hello world ’
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/路由器/index.js
第一步：导入 Newsimport News from '@/components/News'第二步：注册 注意：path 就是我们网址访问的地址 { path: '/news', name: 'news', component: News }
与路径名是否大写无关。可以直接复制粘贴新闻，不用改首字母大写。
在文章列表中点击要发送到详情页ID号，
路由器链接使用:
<li v-for="(item,index) in list" :key="index"> <router-link :to="{path: 'newsdetail', query: {id: item.id}}"> {{item.news_name}}</router-link></li>
如何传递多个参数？
查询:{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文章详情页面的效果
如何去除路由器链接下划线:
直接设置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> <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等。).这时如果URL直接访问这个文件夹，页面就会空白。
Home 空白色解决方案:
编辑index.html发现css和js的路径是指向根目录的，我是把static放到了根目录下，直接暴力解决了，没有去修改路径。再次访问首页，已经正常,页面如下图。
编辑index.html发现css和js的路径指向根目录。我把static放在根目录下，直接暴力解决，不修改路径。再次访问首页，正常。页面如下图所示。
图4演示主页
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的默认URL是localhost，端口是8080。我们可以把它改成自己好记的网址，比如:www.xiangmu.com，打开C:Windows System 32 drivers etc hosts，最后加上127 . 0 . 0 . 1 www.xiangmu.com，这样就可以用这个网址和端口访问我们的vue网站了。当我们运行项目时，端口号将提示项目的访问URL。
这里有个小技巧:直接打开项目所在的文件夹，点击地址栏直接进入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；
很多时候应该有空单元格，但是我们没有添加。按照提示添加空单元格即可。我们按照需求写的代码越多，我们的代码就越规范。
