经典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代码：

{{msg}} {{item.news_name}}
 
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})}}

编辑src/router/index.js

第一步：导入 Newsimport News from '@/components/News'第二步：注册 注意：path就是我们网址访问的地址{path: '/news',name: 'news',component: News}

path和name是否首字母大写没有关系，完全可以直接复制粘贴News ，这样就不必改变首字母大写了。
在文章列表点击需要传递ID编号到详情页，
router-link用法：
{{item.news_name}}如何传递多个参数呢？
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

import Header from '@/components/Header'import Footer from '@/components/Footer'export default {name: 'App',components: {Header, Footer}}

template内添加，然后下边import导入，components注册，components文件夹内新建header.vue，footer.vue 。
头部代码：

 

 首页 新闻中心 公司简介 联系我们export default {name: 'header',data: () => ({logo: '/static/img/logo.wf'})}

打包导出：
使用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进入目录会方便点。
基本的规范
很多的警告，并不影响我们使用，但是也不建议忽视，只有严格按照要求来写代码，才能使我们的程序更加规范。