做的是一个小demo
大致内容如下:
1.Vue框架写的前端
2.axios调用接口
3.通过接口对json进行写入
4.能够在局域网内所有电脑进行访问
首先需要install一些东西
前端是
npm install axios
后端安装express框架
npm install express --save
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
前端页面:
write() {
this.axios
.get(`http:// 自己的ip地址 :8081/?name=${this.name}&score=${this.score}`)
.then(res => {
console.log("res --->", res);
})
.catch(err => {
console.log("err --->", err);
});
}
内容比较简单,就写一个write方法
通过axios调用接口并传参
填自己的IP地址是因为要在局域网内访问,相当于本机是一个服务器,局域网内其他人填写的name和score都会到访问到本机的8081端口并写入本机的JSON文件
Api.js
var fun = require('./fun')
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.all("*", function (req, res, next) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", "*");
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
})
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use('/public', express.static('public'));
app.get('/', function (req, res) {
fun.writeJson(req.query)
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("<---------- 服务已启动 ---------->")
console.log("<--------- 服务端口:8081 --------->")
})
fun是另一个提供JSON写入的函数,这个Api主要功能是设置跨域并调用接口,可以看到app.get调用了fun.writeJson方法
fun.js
var fs = require('fs');
//在真实的开发中id肯定是随机生成的而且不会重复的,下一篇写如何生成随机切不会重复的随机数,现在就模拟一下假数据
//写入json文件选项
function writeJson(params) {
//现将json文件读出来
fs.readFile('../src/assets/score.json', function (err, data) {
if (err) {
return console.error(err);
}
var person = data.toString();//将二进制的数据转换为字符串
person = JSON.parse(person);//将字符串转换为json对象
person.data.push(params);//将传来的对象push进数组对象中
person.total = person.data.length;//定义一下总条数,为以后的分页打基础
var str = JSON.stringify(person);//因为nodejs的写入文件只认识字符串或者二进制数,所以把json对象转换成字符串重新写入json文件中
fs.writeFile('../src/assets/score.json', str, function (err) {
if (err) {
console.error(err);
}
console.log('----------新增成功-------------');
})
})
}
module.exports = {
writeJson
}
这就是写入JSON文件的方法
想要在局域网内的电脑都可以访问的话
需要把node的服务起了,我的是
node Api.js
在前段需要修改一下Vue项目的config/index.js
将host的localhost改为自己的IP地址
然后npm run dev
就可以通过访问IP地址在局域网内访问页面
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。