写在前面的话:
在完成现代web开发时,一个公司中,前后端同时进行开发,前端开发页面逻辑,后端处理业务逻辑。在后端还没有开发好,即没有提供数据是,则提前写好前后端的数据接口,前端人员利用json-server模拟出数据,前端利用fetch(或ajax)从json-server上请求到数据,进行动态数据的展示。等到后端人员把业务逻辑写好后。再把请求地址换成后端的即可。
正式开始:
前端利用vue脚手架,或者自行搭建好vue项目后,把json-server也结合到项目中,这样前端就可以开始自己的页面逻辑开发了。
下面就说一下,如何把json-server融合到vue脚手架项目中,如果不会vue脚手架搭建项目(搭建很简单)的话,请先看一下这篇文章:vue脚手架(vue-cli)如何搭建项目。
1、前提已经用vue搭建好了项目
2、建立模拟数据:在build目录下创建文件:db.json。在文件里写上如下代码:
- {
- "books":[
- {"id":"878911","name":"三国","author":"罗贯中"},
- {"id":"878912","name":"水浒","author":"吴承恩"}
- ],
- "readers":[
- {"id":"007","name":"张三疯","age":35},
- {"id":"008","name":"张四疯","age":32}
- ]
- }
以上代码表示你有两类数据,分别是书籍(books)和读者(readers),相当于数据库中表,mongod中叫集合。
你可以根据你的项目实际情况,写出你的数据
3、搭建json-server服务器
1)、安装json-server模块,npm i json-server -D
2)、在build目录下创建jserver.js(这是nodejs做的简易服务器)。写上如下代码:
- const path = require("path");
- //引入:json-server模块
- const jsonserver = require("json-server");
- //用jsonserver创建服务对象
- const jserver = jsonserver.create();
- //创建路由
- const jrouter = jsonserver.router(path.join(__dirname,"db.json"));
- //定义中间件
- const middlewares = jsonserver.defaults();
- //nodejs的思路,每次请求服务器是,都会执行middlewares中间件
- jserver.use(middlewares);
- //路由,会根据请求,找对应的数据,如:books或者readers
- jserver.use(jrouter);
- //启动服务器
- jserver.listen(8081,()=>{
- console.log("json-server running in 8081");
- });
3)、如果想测试json-server服务器配置是否成功,按照如下步骤:
(1)、在build目录下执行命令:node jserver.js,如果出现了提示json-server running in 8081,说明启动成
(2)、在浏览器中输入:http://localhost:8081/books。如果在浏览器里看到了如下内容,说明成功了。
[ { "id": "878911", "name": "三国", "author": "罗贯中" }, { "id": "878912", "name": "水浒", "author": "吴承恩" } ]
(3)、在浏览器中输入:http://localhost:8081/books?id=878912,你会发现可以取到id为878912的书籍信息:
[
{
"id": "878912",
"name": "水浒",
"author": "吴承恩"
}
]
当然你也可以看看readers的数据(在浏览器输入:http://localhost:8081/readers)
当然你也可以看看readers的数据(在浏览器输入:http://localhost:8081/readers)
4)、配置服务代理
此步骤的意思是以后,访问vue脚手架中启动的服务时,会引入到json-server服务下,什么意思呢,下面详细解释,先写代码。
打开项目目录下的config下的index.js文件。找到 dev:属性,该属性一般默认会有 proxyTable: {}。如果没有自己写上就行, 在花括号里写如下代码:
- module.exports = {
- dev: {
- // Paths
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
- <span style="color:#ff0000;">proxyTable: {
- '/api':{
- target: 'http://localhost:8081',
- pathRewrite: {'^/api' : ''}, //api 做为标识,到最后是要被替换掉的。
- changeOrigin: true
- }
- }</span>,………………………………
此代码的意思是:如何访问的是/api路径,那么就转到http://localhost:8081下。
5)、启动测试:
(1)、启动json-server服务器(即数据来源的服务器):
在build目录下执行命令:node jserver.js,如果出现了提示json-server running in 8081,说明成功
(2)、启动vue脚手架项目服务器:
在vue脚手架项目下执行命令:npm run dev,如果出现了提示“Your application is running here: http://localhost:706”,说明成功。
(3)、在浏览器中测试:
在地址栏中输入:http://localhost:706/api/books,在浏览器中看到了:
- [
- {
- "id": "878911",
- "name": "三国",
- "author": "罗贯中"
- },
- {
- "id": "878912",
- "name": "水浒",
- "author": "吴承恩"
- }
- ]
说明一切ok。
6)、使用fetch,请求地址http://localhost:706/api/books,就可以拿到书籍信息了。
<template>
<div class="goodslistcss">
<ul>
<li v-for="item in goodslist">
<p @click="goGoodsdetail(item.goodsid)">商品编号:{{item.goodsid}}</p>
<p class="title">商品名称:{{item.goodsname}}</p>
<p>商品价格:{{item.goodsprice}}</p>
</li>
</ul>
</div>
</template>
<script>
import common from "../assets/common.css"
export default {
name: 'goodslist',
methods:{
goGoodsdetail:function(goodsid){
//保存商品编号
this.$store.state.id=goodsid;
//跳转
this.$router.push({ path: '/goodsdetail/:id',name:"goodsdetail",params: { goodsid:goodsid}});
},
getGoodsList:function(){
fetch('api/goodslists',{
method:"GET",
headers: new Headers({
'Accept': 'application/json' // 通过头指定,获取的数据类型是JSON
})
}) // 返回一个Promise对象,
.then((res)=>{
return res.json() // res.json()是一个Promise对象
})
.then((res)=>{
console.log(res) // res是最终的结果
this.goodslist = res;
})
}
},
mounted:function(){
this.getGoodsList();
},
data () {
return {
goodslist: []
}
}
}
</script>
<style scoped>
.goodslistcss{
width:1000px;
height:400px;
background-color:gray;
}
</style>
加油,加油,加油!