php手把手教你做网站(二十)vue tp6简单案例(demo)
很多时候搭建好了环境,但是不知道怎么入手去开发。
下面我们通过简单案例说明如何快速入门开发模块:
例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)注册
1 2 3 4 |
{<span id="2f20987b-42d9-4c1b-a4a4-7f50c3766182" style="font-size:18px;margin:20px 0px;text-align:left;">path</span>:<span id="b6faa737-664a-4c57-b109-f499f657abf4" style="font-size:18px;margin:20px 0px;text-align:left;">"/HelloWorld"</span>, name:<span id="4ab8701f-4253-465a-9e28-fa2c3e4c7d53" style="font-size:18px;margin:20px 0px;text-align:left;">"HelloWorld"</span>, component: HelloWorld } |
注意首字母大写,驼峰法命名;
例2:新闻列表
图2 文章列表效果图
News.vue代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span id="1ff316a7-2666-474f-b348-53bf81274d85" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="9c9321dd-8736-47aa-afbb-ad2e73234252" style="font-size:18px;margin:20px 0px;text-align:left;">template</span>></span><span id="4fb6bffe-9308-49bb-b197-53b4a2826f70" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="2bbcb482-ae93-4fde-92bc-50c51d593ee6" style="font-size:18px;margin:20px 0px;text-align:left;">div</span><span id="7ba84c65-514b-4a5a-a14c-12c258d5e97e" style="font-size:18px;margin:20px 0px;text-align:left;">class</span>=<span id="fadfe26b-414a-4573-becf-b63fa02a8996" style="font-size:18px;margin:20px 0px;text-align:left;">"main"</span>></span><span id="64969e59-7f88-421a-b909-9e229b5dc81b" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="efc1cfa4-7b7f-4147-9bbe-56d23d627d13" style="font-size:18px;margin:20px 0px;text-align:left;">h1</span>></span>{{msg}}<span id="4d74eba9-0f58-4328-9901-8c16aa240c53" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="0086b299-8b71-4feb-978c-84db8e78c734" style="font-size:18px;margin:20px 0px;text-align:left;">h1</span>></span><span id="8cc6c746-7ff3-4f9e-aa7e-d73f1d8041aa" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="ab37e750-7ded-4e26-94ce-2fded3f02f61" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="babf4299-10ca-43c0-b9ee-39948c8e3ce0" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="09e5f65d-0941-4b74-9b57-6e127245d2ce" style="font-size:18px;margin:20px 0px;text-align:left;">ul</span>></span><span id="a312b041-dd24-44df-bb81-00a63bbeb0ad" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="6ce1a838-ea4e-403b-93d7-6e6e967cb192" style="font-size:18px;margin:20px 0px;text-align:left;">li</span><span id="be65d177-8a4f-43af-a14e-7dc3db6d98f4" style="font-size:18px;margin:20px 0px;text-align:left;">v-for</span>=<span id="501ccaf4-7fcd-4c5a-be93-d036c87671cb" style="font-size:18px;margin:20px 0px;text-align:left;">"(item,index) in list"</span><span id="4934ccda-7b14-401f-aaea-4db41d754286" style="font-size:18px;margin:20px 0px;text-align:left;">:key</span>=<span id="5c16768c-e8e6-485d-b3e1-954439da4c15" style="font-size:18px;margin:20px 0px;text-align:left;">"index"</span>></span><span id="6d6d3f20-ff69-432d-a6ae-c02382d60289" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="e2b7cce3-549d-4ff6-86b1-d2d41361c7d2" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span><span id="f9a1f3c3-5e1a-4908-b7ca-89bd9cb224f6" style="font-size:18px;margin:20px 0px;text-align:left;">:to</span>=<span id="da6e0adb-269e-40fc-82c7-d146aee17931" style="font-size:18px;margin:20px 0px;text-align:left;">"{path: "newsdetail", query: {id: item.id}}"</span>></span>{{item.news_name}}<span id="3f77de73-b1ba-4ae9-9aa0-2dcfa59a038b" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="6439ace0-c9e7-49a8-9eb8-26ed5b06f77c" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span>></span><span id="b9aee2f0-5a91-4c9b-aea4-afdc595c5cea" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="30ae6c3d-3f03-47fd-9c0f-76472f788df3" style="font-size:18px;margin:20px 0px;text-align:left;">li</span>></span><span id="79243194-b3d2-4569-a7fe-3b23fc3aa0d8" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="7838940d-fe74-4b69-aa11-645d3427af48" style="font-size:18px;margin:20px 0px;text-align:left;">ul</span>></span><span id="9c3f945f-6f59-4614-ba0d-f74c80559a04" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="0f0bbb67-6c54-4b35-b0d0-334459003e47" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="e859e224-eceb-43de-bc8f-6ca8a7665500" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="74678ecc-34b5-4c8b-920d-36cd57ea81aa" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="f9d539b6-90d8-41fc-aa6f-2ee98e15a298" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="e04b8c7e-9dbd-4e79-9b68-eac2fe911bef" style="font-size:18px;margin:20px 0px;text-align:left;">template</span>></span><span id="23322640-8f24-40ca-8fae-fe7d995a3634" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="4da0ca34-5bbf-460a-91ab-c2dd3b70e8c6" style="font-size:18px;margin:20px 0px;text-align:left;">script</span>></span><span id="a0dffb00-6c84-4852-8974-9e4477f4b216" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="5fcdb4b3-b10a-47ae-a66e-471dbdf1828d" style="font-size:18px;margin:20px 0px;text-align:left;">import</span>axios<span id="1c0efb79-907e-432a-9556-9e5cb62b7689" style="font-size:18px;margin:20px 0px;text-align:left;">from</span><span id="f57667f8-3dbb-4be7-b07c-39a3359fd18a" style="font-size:18px;margin:20px 0px;text-align:left;">"axios"</span><span id="ad525645-1d09-4d16-86ef-907c030579cf" style="font-size:18px;margin:20px 0px;text-align:left;">export</span><span id="7c362afc-0f9f-454e-9b94-6c99f8d631a3" style="font-size:18px;margin:20px 0px;text-align:left;">default</span>{<span id="41ff4c96-449d-46ec-ba0b-aecf89b2f9cc" style="font-size:18px;margin:20px 0px;text-align:left;">name</span>:<span id="4a1718bd-603d-4b58-9c24-f1222b6aed71" style="font-size:18px;margin:20px 0px;text-align:left;">"news"</span>, data () {<span id="ab543bf6-0069-4a13-a9fc-d22940a78217" style="font-size:18px;margin:20px 0px;text-align:left;">return</span>{<span id="69be2f6a-d8f6-48af-9c8a-1c6d9cca91de" style="font-size:18px;margin:20px 0px;text-align:left;">artid</span>:<span id="b1ab39a6-c8e4-411b-9e38-86798069c385" style="font-size:18px;margin:20px 0px;text-align:left;">19</span>,<span id="d40a3ff8-4e05-4fe9-870e-71f12c8df027" style="font-size:18px;margin:20px 0px;text-align:left;">msg</span>:<span id="12d95e75-61b8-41f5-a895-26239d83a5e9" style="font-size:18px;margin:20px 0px;text-align:left;">"这是新闻列表"</span>,<span id="2e66eced-8da3-421e-b0dc-6371a407e4ae" style="font-size:18px;margin:20px 0px;text-align:left;">list</span>: [ {<span id="1666bd3a-8734-42bd-a8eb-c370b35965af" style="font-size:18px;margin:20px 0px;text-align:left;">"news_name"</span>:<span id="21ace017-750a-4a71-89d7-15f93d0d74db" style="font-size:18px;margin:20px 0px;text-align:left;">"新闻标题1"</span>,<span id="1cac55b0-95f6-4374-a36a-c16757a568e9" style="font-size:18px;margin:20px 0px;text-align:left;">id</span>:<span id="78520322-291c-4e4b-ae63-976abfc6fa9d" style="font-size:18px;margin:20px 0px;text-align:left;">1</span>}, {<span id="38af13bb-8319-4e97-acfd-b33c0f9ecf84" style="font-size:18px;margin:20px 0px;text-align:left;">"news_name"</span>:<span id="9911752e-f4fd-4344-bbc0-b74ac69cd21d" style="font-size:18px;margin:20px 0px;text-align:left;">"新闻标题2"</span>,<span id="1074d7fd-c80b-42f2-9ad6-b6b28c00b0b0" style="font-size:18px;margin:20px 0px;text-align:left;">id</span>:<span id="50b83272-be09-4c32-b1dc-b61338a3b0c2" style="font-size:18px;margin:20px 0px;text-align:left;">2</span>}, {<span id="3972bac7-22e0-4298-9992-732d9ced87ff" style="font-size:18px;margin:20px 0px;text-align:left;">"news_name"</span>:<span id="140fcbf4-8e98-4689-876d-c6f488ade3a7" style="font-size:18px;margin:20px 0px;text-align:left;">"新闻标题3"</span>,<span id="bfa73a04-e637-4e0d-8ddb-57ade5e01f2e" style="font-size:18px;margin:20px 0px;text-align:left;">id</span>:<span id="a36cc208-fce4-4191-9b63-ad65ac08bf16" style="font-size:18px;margin:20px 0px;text-align:left;">3</span>} ] } }, mounted () {<span id="1b3c06e1-aa0d-475a-81fa-69f274d6612e" style="font-size:18px;margin:20px 0px;text-align:left;">var</span>that =<span id="d83bf3a2-d93b-4058-b3a1-d84544afc1b8" style="font-size:18px;margin:20px 0px;text-align:left;">this</span>axios .post(<span id="fe7cb0d8-759c-4cf9-83cf-d0a3b9f98b70" style="font-size:18px;margin:20px 0px;text-align:left;">"/api/newslist"</span>, {<span id="f18a88d6-8eeb-44cb-a458-b9551b77c7d9" style="font-size:18px;margin:20px 0px;text-align:left;">parid</span>: that.artid }) .then(<span id="a2cf76f9-d712-413a-95f1-25302b7da982" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="56d1d76e-27cf-43e8-88b3-f5e5ed22defe" style="font-size:18px;margin:20px 0px;text-align:left;">function</span>(<span id="765c1c60-04fc-442d-8422-701cabe78994" style="font-size:18px;margin:20px 0px;text-align:left;">response</span>)</span>{ that.list = response.data.list }) } }</span><span id="92ba7f54-a8f0-4b83-a216-57222b26bf7e" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="4d245f87-9809-40bd-b668-9630264aa092" style="font-size:18px;margin:20px 0px;text-align:left;">script</span>></span> |
编辑src/router/index.js
1 2 3 4 5 6 |
第一步:导入 News<span id="d9c3b5d7-9054-4845-9e59-12605c01c288" style="font-size:18px;margin:20px 0px;text-align:left;">import</span>News<span id="b68fa87a-b044-49bf-a119-7283cc69b82e" style="font-size:18px;margin:20px 0px;text-align:left;">from</span><span id="8ae85ab8-98f8-4085-9242-588395fd74d8" style="font-size:18px;margin:20px 0px;text-align:left;">"@/components/News"</span>第二步:注册 注意:path 就是我们网址访问的地址 { path:<span id="0ae23aeb-34c8-450a-b01e-54f25b8dbebd" style="font-size:18px;margin:20px 0px;text-align:left;">"/news"</span>, name:<span id="6ce9c424-6a29-4233-afc9-960a1c418d95" style="font-size:18px;margin:20px 0px;text-align:left;">"news"</span>, component: News } |
path和name是否首字母大写没有关系,完全可以直接复制粘贴News,这样就不必改变首字母大写了。
在文章列表点击需要传递ID编号到详情页,
router-link用法:
1 |
<span id="5c985f97-6b72-4ccc-b8c3-1f39cd64e366" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="1e451418-4bfe-4f32-83f4-5d926f0cb8ba" style="font-size:18px;margin:20px 0px;text-align:left;">li</span><span id="90aa1042-68d1-4c57-b526-424976fa7f60" style="font-size:18px;margin:20px 0px;text-align:left;">v-for</span>=<span id="d3076975-6df9-42a2-85b8-c46986c2c87c" style="font-size:18px;margin:20px 0px;text-align:left;">"(item,index) in list"</span><span id="f1526846-27fd-42c3-9880-3f6bb341a594" style="font-size:18px;margin:20px 0px;text-align:left;">:key</span>=<span id="e977486e-7d15-41a2-b178-bca0e8ea090c" style="font-size:18px;margin:20px 0px;text-align:left;">"index"</span>></span><span id="14d1ae11-b8cc-40c9-82ce-da56a7c26f70" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="1fcdb434-8c0b-42b8-b79d-b1b65635e3e9" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span><span id="864a6e51-0e8f-4547-ab7e-688fb5f6d147" style="font-size:18px;margin:20px 0px;text-align:left;">:to</span>=<span id="548df101-a458-4e7c-a526-47b60cc4cf8a" style="font-size:18px;margin:20px 0px;text-align:left;">"{path: "newsdetail", query: {id: item.id}}"</span>></span>{{item.news_name}}<span id="bb0b4845-ba61-4939-92ba-74bb33799199" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="ba5afa35-03e9-408c-ab64-ee6c0622675f" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span>></span><span id="a4583f17-58b2-4c5b-ac85-d9749c8b01d3" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="66e33717-78df-4185-9736-150daefb9760" style="font-size:18px;margin:20px 0px;text-align:left;">li</span>></span> |
如何传递多个参数呢?
query: {id: item.id, catid: cat}
详情页获取参数:this.$route.query.id
1 2 3 4 5 6 7 8 |
mounted () {<span id="0a93e3b8-4a32-4490-91e5-9fd164f1356f" style="font-size:18px;margin:20px 0px;text-align:left;">var</span>id =<span id="424c5b24-0ae4-4052-b6d6-22753cb13205" style="font-size:18px;margin:20px 0px;text-align:left;">this</span>.$route.query.id<span id="e5266b13-c8f9-4f0c-8a24-0f758ed4ddf2" style="font-size:18px;margin:20px 0px;text-align:left;">var</span>that =<span id="864ace94-db4b-4cc4-ade6-942ca928da69" style="font-size:18px;margin:20px 0px;text-align:left;">this</span>that.artid = id axios .post(<span id="b89f4811-c6bc-4fde-b299-370cb87a252c" style="font-size:18px;margin:20px 0px;text-align:left;">"/api/newsdetail"</span>, {<span id="5955d857-926b-42b3-8603-b61d8bbabc8b" style="font-size:18px;margin:20px 0px;text-align:left;">parid</span>: that.artid }) .then(<span id="a5f378a2-8a16-4ea9-a22d-2ce3e65caab5" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="15c613c7-f912-4107-8297-335e8234888e" style="font-size:18px;margin:20px 0px;text-align:left;">function</span>(<span id="dd08a0dc-343d-4c1f-944a-6f42856b5b71" style="font-size:18px;margin:20px 0px;text-align:left;">response</span>)</span>{ that.content = response.data.content }) } |
图3 文章详情页效果图
如何去掉router-link下划线:
直接设置a css样式 a{text-decoration:none}
如何使用公共的头部和底部文件:
打开src下app.vue
1 2 3 4 |
<span id="a49c885a-c101-4989-85ff-1d864bd85810" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="260e0c80-ce74-4890-a4eb-2337e3cbf722" style="font-size:18px;margin:20px 0px;text-align:left;">template</span>></span><span id="5a2ebe0f-6f5d-493c-84bd-4ead0ff8e601" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="94a35a5c-1776-42bf-adff-996b46ed90c4" style="font-size:18px;margin:20px 0px;text-align:left;">div</span><span id="b3931a8e-8dd3-4f2b-8194-d1d7e75f9802" style="font-size:18px;margin:20px 0px;text-align:left;">id</span>=<span id="7f4cbfb5-ef75-49bc-bb80-09aa09bbf936" style="font-size:18px;margin:20px 0px;text-align:left;">"app"</span>></span><span id="62368920-3448-494d-86e1-527da13a469b" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="23c8616b-e807-406c-b29b-d7bc762f0fd2" style="font-size:18px;margin:20px 0px;text-align:left;">Header</span>></span><span id="a8ba87a3-a2e8-4036-b3e8-7a3d4619a4d0" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="22b48a02-0e03-4f6c-b17d-60347128c5a4" style="font-size:18px;margin:20px 0px;text-align:left;">Header</span>></span><span id="fbeb9cac-0545-49ba-a54d-8fe5a3b2b72c" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="e5841135-f4ec-44c5-89e5-3fd75de5e415" style="font-size:18px;margin:20px 0px;text-align:left;">router-view</span>></span><span id="1403974f-0e4b-4bd0-89c0-d8a3cf48c02b" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="c716f666-48d9-4d00-847e-e9c9672ab2c0" style="font-size:18px;margin:20px 0px;text-align:left;">router-view</span>></span><span id="32728a71-f278-4b2c-afef-ddacbc1a3ad8" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="b9aad84a-0277-4778-9411-4df67ac1d726" style="font-size:18px;margin:20px 0px;text-align:left;">Footer</span>></span><span id="a663ceea-9779-4ca1-959b-d2799f7e365c" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="60d0c631-e992-485d-ad99-a4a9db743c41" style="font-size:18px;margin:20px 0px;text-align:left;">Footer</span>></span><span id="637edb71-9413-49e7-8b6f-47442026473c" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="cf9b03ad-7e64-49b1-aa30-a0bdbd183eb2" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="54e2bd5c-cca8-492e-8ed5-e8fda82f9722" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="c94e1da7-9811-4711-b573-dca5de6863fd" style="font-size:18px;margin:20px 0px;text-align:left;">template</span>></span><span id="3aaed276-e3da-4c05-84d5-40c94c891441" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="89500454-bbb8-4bf2-bcb3-e81075dbb54b" style="font-size:18px;margin:20px 0px;text-align:left;">script</span>></span><span id="1a465eed-06f6-4d21-b886-8c8b7c602745" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="1102fe50-a43d-4660-91f7-980e29fa394f" style="font-size:18px;margin:20px 0px;text-align:left;">import</span>Header<span id="a779770e-eeb3-4818-98da-2ff6e49b5989" style="font-size:18px;margin:20px 0px;text-align:left;">from</span><span id="41dee499-7449-4a4e-adc9-c087a36d0109" style="font-size:18px;margin:20px 0px;text-align:left;">"@/components/Header"</span><span id="c428a422-04ff-4d9e-b251-f6eab9bf3517" style="font-size:18px;margin:20px 0px;text-align:left;">import</span>Footer<span id="d7af743e-91b8-439a-9130-1d92cd74abcb" style="font-size:18px;margin:20px 0px;text-align:left;">from</span><span id="ed8a4191-1741-4c8e-8619-a8b0656dd9b9" style="font-size:18px;margin:20px 0px;text-align:left;">"@/components/Footer"</span><span id="17012ced-ceb3-4ed0-a32f-f7750bad36ae" style="font-size:18px;margin:20px 0px;text-align:left;">export</span><span id="0498e8ae-ed1d-431b-9001-8c0f001d2369" style="font-size:18px;margin:20px 0px;text-align:left;">default</span>{<span id="acb60c6d-a26d-40b1-b1b3-96ee6376d51d" style="font-size:18px;margin:20px 0px;text-align:left;">name</span>:<span id="da199dd6-60cc-49e9-b1d7-f8fd038565c8" style="font-size:18px;margin:20px 0px;text-align:left;">"App"</span>,<span id="4e1ea0c7-a9ac-46c7-8358-3f912d7ec6f5" style="font-size:18px;margin:20px 0px;text-align:left;">components</span>: { Header, Footer } }</span><span id="f879430a-03a2-4183-9206-561876508b2f" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="e413b846-5d69-4271-bcbd-b964160b3203" style="font-size:18px;margin:20px 0px;text-align:left;">script</span>></span> |
template内添加
头部代码:
1 2 |
<span id="e4c4d3c4-6695-4ca9-a819-1a20a87e5630" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="be6f895a-5e1e-4e0e-aa5d-3af0c20259c4" style="font-size:18px;margin:20px 0px;text-align:left;">template</span>></span><span id="01150977-42dd-449d-affc-500a605ebb27" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="65d71969-1d32-4f1f-a764-8b5e29af828b" style="font-size:18px;margin:20px 0px;text-align:left;">div</span><span id="904f180a-4fb4-49c1-9a2a-a2185284e3a9" style="font-size:18px;margin:20px 0px;text-align:left;">class</span>=<span id="e106bace-34a7-45d3-8bbf-b3a1e4e8d0f4" style="font-size:18px;margin:20px 0px;text-align:left;">"header"</span>></span><span id="3aaccc93-8b18-4135-b83a-21a93a758225" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="54670e5e-0bd7-47c4-96cd-f8a51cfdccf3" style="font-size:18px;margin:20px 0px;text-align:left;">div</span><span id="3bcf8bcb-e729-417e-be4e-eb9e10b95958" style="font-size:18px;margin:20px 0px;text-align:left;">class</span>=<span id="6d727312-7b05-43a8-9933-4befc96c5877" style="font-size:18px;margin:20px 0px;text-align:left;">"logo"</span>></span><span id="2dcfad3a-6eaa-41c8-b610-2901e1cf9390" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="79b95148-fb58-4cdf-b575-b29f03aacae3" style="font-size:18px;margin:20px 0px;text-align:left;">img</span><span id="10540073-90c3-4630-adca-ff6a639c416b" style="font-size:18px;margin:20px 0px;text-align:left;">:src</span>=<span id="b85178c2-7add-4672-83cf-d88499358811" style="font-size:18px;margin:20px 0px;text-align:left;">"logo"</span>></span><span id="4743baf4-6c9d-462d-8ae9-267a9dd63a0f" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="3a9ed822-a60f-4db6-b923-40251ba5386a" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="595f4014-26bd-4c0c-b4c6-c11e70dd7f2f" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="613c9ee4-3419-4189-a25e-218f8b7fd076" style="font-size:18px;margin:20px 0px;text-align:left;">div</span><span id="9f39cae8-7fa8-4947-93ff-e3094b0a7e50" style="font-size:18px;margin:20px 0px;text-align:left;">class</span>=<span id="995695ad-58f7-4a3f-bf5d-f2a2f00bdf9a" style="font-size:18px;margin:20px 0px;text-align:left;">"dh"</span>></span><span id="199bc614-6500-4242-a2ea-875a05b81b5e" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="edc338a8-6c51-487e-b64a-e6f815baada5" style="font-size:18px;margin:20px 0px;text-align:left;">dl</span>></span><span id="4514034f-b454-4ff1-9498-4e0e735cc741" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="574d6202-9422-484f-9529-bee7e9097ea1" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="f45cc8a0-1746-4ede-b196-bf75616b5155" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="60d9cfa1-ba3f-4d9f-a39f-073ca04a4a5b" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span><span id="e1fcb39f-7656-4d59-9277-82ba69d6c81a" style="font-size:18px;margin:20px 0px;text-align:left;">to</span>=<span id="413e0029-ca07-4815-b136-41d048de8134" style="font-size:18px;margin:20px 0px;text-align:left;">"/"</span>></span>首页<span id="a67b26f4-ecf0-4873-bf52-5e7be77fc59e" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="ab8b3c3a-4456-46e0-9712-e3d84bf636ea" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span>></span><span id="d02e5699-1a7a-4408-82b8-5b5f64143f44" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="8465def0-6620-4e82-8f44-80c1cf2a589f" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="c6403d95-4a0b-4cf5-88aa-c3524b6e6aeb" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="1866b248-20ea-4f6f-83dd-7fcc461d061f" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="eed8390e-de88-47c0-be99-12dd1d4add74" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="67d85b4d-3488-46a8-8bda-4c8455e29d0f" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span><span id="4d6c60c4-a35a-492b-aede-aa6baaca76a8" style="font-size:18px;margin:20px 0px;text-align:left;">to</span>=<span id="d9990247-c680-4072-bc1f-d29eef5675a7" style="font-size:18px;margin:20px 0px;text-align:left;">"/news"</span>></span>新闻中心<span id="efe83160-0eb0-4aeb-9d33-e9530b60ed7f" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="dad8cd88-551f-42d4-ad61-8ae129c7f29c" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span>></span><span id="9cc0073c-29b1-4419-9ae3-9b90372356a7" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="b40ed7fc-7753-42f7-9489-7a67d943c792" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="8dce1c34-67a8-460f-b304-7fac7d3ea836" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="b455d28b-60a4-45d8-868b-e43a4740cea9" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="7e38fcb2-2405-4718-8f84-91afadfb7f1a" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="a6da6ef2-194a-4d78-bd69-476bea97b4d6" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span><span id="6567d3e0-b41b-4473-ae5b-8fce59553041" style="font-size:18px;margin:20px 0px;text-align:left;">to</span>=<span id="87d6f053-f3e4-4a2c-b640-8a7c88f33e3f" style="font-size:18px;margin:20px 0px;text-align:left;">"/about"</span>></span>公司简介<span id="30faa625-1c48-4cdd-9c80-333f81ab7320" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="57e9b4e6-c835-440f-98be-895d7d9d317d" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span>></span><span id="49fea783-e36a-4687-8c86-ed8eb4eafdff" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="a9365e2f-4a23-4dcb-99cf-c32610c999bc" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="f59e704a-e652-4627-9bd7-e2b794f5bc3d" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="addf5f02-8678-4863-a037-04792b516e15" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="fac296f7-0685-4ee2-97f7-a7f09b1bf2da" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="18469bcd-e637-4f7d-ad0a-315bf181303f" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span><span id="9ef3ab30-4159-4d90-95a2-5f053f34993d" style="font-size:18px;margin:20px 0px;text-align:left;">to</span>=<span id="4827e19f-d125-4253-83ea-56f22f233312" style="font-size:18px;margin:20px 0px;text-align:left;">"/contact"</span>></span>联系我们<span id="69bc7b5c-c1b6-4f28-8c63-1565fc5e3ef8" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="7755ba51-181c-49a7-82d2-2fc85f0d2a43" style="font-size:18px;margin:20px 0px;text-align:left;">router-link</span>></span><span id="ee7e1dcb-611e-41de-901b-6201f260ff68" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="1e9b6938-4e87-43ab-a24c-37dcbe74ec0d" style="font-size:18px;margin:20px 0px;text-align:left;">dd</span>></span><span id="548c8ef1-ae25-4c6e-b18b-e2c8125092b3" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="14540cd5-4cc5-443b-90be-b4ef8c5548f9" style="font-size:18px;margin:20px 0px;text-align:left;">dl</span>></span><span id="81b2978b-84a5-4cb6-bf1b-7eed767773fe" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="b64f55aa-419e-4390-9791-48b7b6bb753d" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="81a0327f-5f81-4f8e-a041-ecabefa9bc09" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="ab06a390-b143-4281-92d7-e0fa8a308071" style="font-size:18px;margin:20px 0px;text-align:left;">div</span>></span><span id="d2cbc2a4-e0d2-4b15-80cd-6f200b063f19" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="e4875761-41a5-419f-b9f1-0d7a4a24915f" style="font-size:18px;margin:20px 0px;text-align:left;">template</span>></span><span id="d3b1c089-a492-43d3-9c51-cd94c618ca7e" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="48750e88-c676-4e13-aa46-8d9718293f35" style="font-size:18px;margin:20px 0px;text-align:left;">script</span>></span><span id="ba88cf23-57aa-4e7b-af4e-c15d7867d242" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="15f510a7-666b-4c97-acd4-351ddaf68a79" style="font-size:18px;margin:20px 0px;text-align:left;">export</span><span id="c0a04b1c-a389-4504-add6-e10cbaa38508" style="font-size:18px;margin:20px 0px;text-align:left;">default</span>{<span id="e988ec3c-6fc4-4591-b395-959345a76dd8" style="font-size:18px;margin:20px 0px;text-align:left;">name</span>:<span id="786c7071-283e-412a-b45c-72463063c179" style="font-size:18px;margin:20px 0px;text-align:left;">"header"</span>,<span id="6294925e-2f49-4f58-8569-bf9053495f6b" style="font-size:18px;margin:20px 0px;text-align:left;">data</span>:<span id="ba87a134-0c47-42e0-a02a-d068cf24b81d" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="2565377d-ef80-46cf-b922-a63390119dc3" style="font-size:18px;margin:20px 0px;text-align:left;">()</span>=></span>({<span id="965f4c53-61bd-49fb-b029-c17a03c74a82" style="font-size:18px;margin:20px 0px;text-align:left;">logo</span>:<span id="b6800894-572f-4fce-b162-7cd6ec1312ee" style="font-size:18px;margin:20px 0px;text-align:left;">"/static/img/logo.png"</span>}) }</span><span id="6265c743-c1cb-47be-9b50-4c4b7d1aab92" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="9daeefe6-e4ba-416e-ab88-a51e05453214" style="font-size:18px;margin:20px 0px;text-align:left;">script</span>></span> |
打包导出:
使用npm run build命令打包,打开项目文件夹发现多了dist文件夹,复制该文件夹到我们的tp6网站根目录下(dist名称可以任意修改,比如手机网站是m或者mobile等),这个时候如果网址直接访问该文件夹,页面是空白的。
首页空白的解决方法:
编辑index.html发现css和js的路径是指向根目录的,我是把static放到了根目录下,直接暴力解决了,没有去修改路径。再次访问首页,已经正常,页面如下图。
图4 demo首页
tp6用来写接口(用于和html页面的交互):
返回文章列表示例:
1 2 3 |
<span id="4aaf9a71-e7c1-44ee-8dcc-a7a1bcf76248" style="font-size:18px;margin:20px 0px;text-align:left;">public</span><span id="661ddd2d-c80f-4c26-8c20-61d2c5ecd60f" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="6209effb-ccf6-444c-8c6e-224a21ba61b5" style="font-size:18px;margin:20px 0px;text-align:left;">function</span><span id="e7354a98-b038-46da-8407-841c7be8f0a3" style="font-size:18px;margin:20px 0px;text-align:left;">newslist</span><span id="d81a7581-1cd8-4e54-812d-dd714f8da062" style="font-size:18px;margin:20px 0px;text-align:left;">()</span></span>{ $list=Db::name(<span id="2b28109b-df27-4511-a1b4-302fa036ef8f" style="font-size:18px;margin:20px 0px;text-align:left;">"web_news"</span>)->field(<span id="9f4b56f5-2666-43f8-bdfb-621f06c2f318" style="font-size:18px;margin:20px 0px;text-align:left;">"id,news_name"</span>)->select()->toArray();<span id="e395a07e-4357-4b10-987c-e56e83e91339" style="font-size:18px;margin:20px 0px;text-align:left;">exit</span>(json_encode(<span id="30188d49-8dfe-4abe-9111-b866f425fcfa" style="font-size:18px;margin:20px 0px;text-align:left;">array</span>(<span id="a629b84e-cf31-4bc8-b4c2-59de9d235e2f" style="font-size:18px;margin:20px 0px;text-align:left;">"list"</span>=>$list),JSON_UNESCAPED_UNICODE)); } |
使用域名重定向:
打开项目内config>index.js。vue默认的网址是localhost,端口是8080,我们可以改变为自己好记的网址,例如:www.xiangmu.com,打开C:\Windows\System32\drivers\etc\hosts,结尾处添加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文件写法应该是
并列的div,如果没有总得div包含会提示:Component template should contain exactly one root element;
- 表达式两边要留出空格,例如:that.newslist = response.data.newslist,如果不留出来会提示:Infix operators must be spaced;
很多的时候都是出现了应该有空格,我们没有加上,按照提示加上空格就可以,越是按照要求写代码,我们的代码就会越规范。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » php手把手教你做网站(二十)vue tp6简单案例(demo)