vue+node 实现网关配置页面的增删改查

起源：主管让我做一个关于网关配置功能，具体描述：现在公司有很多项目，每个项目连接的服务地址不同，我们需要使用一个服务地址，根据不同的路径，访问不同的项目。

例如，使用同一个地址：127.0.0.1，其中：127.0.0.1/ic代表小区服务，打开这个地址自动跳转小区项目。

vue写页面：

1、使用iview组件Form ，给Form-item 添加label 属性，报错：[Vue warn]: Error in render: “TypeError: Cannot read property ‘_t’ of undefined”

原因是：使用iview.js的版本太低，替换iview.js 2.0就可以了

2、添加less依赖，可以使用less编辑样式

package.json 中 

devDependencies:{
　　'less':'^2.7.2', 'less-loader':'^4.1.0' }

3、使用iview组件——Card 边框很浅，原因：最外层的index.html 应有个font-size设置（一般设置为100px）

因为，组件边框的宽的样式的设置是rem

(function(){
   var availWidth = window.screen.width;
   if(!availWidth){
       return 0;          
    }  
   availWidth =  availWidth <1920?1920:availWidth;//最小宽度1920
   var fontSize = parseFloat(100/1920*availWidth,10).toFixed(2);
   var root = document.documentElement || document.body;
   root.style.fontSize = fontSize+"px";
   return fontSize;  
})()

4、某些iview组件绑定click事件无效。解决办法：@click.native="clickFun"

.native—监听组件根元素的原生事件，主要是给自定义的组件添加原生事件

<Card @click.native="addFun">
    <Icon type='plus-round" size="50">
</Card>

 

5、表单校验：

(1)Form标签添加绑定元素：model

(2)Form-item标签设置属性prop，并设置属性rules

<Form ref="addForm" :model="card">
    <Form-item label="服务器名称" prop="name" :rules="validation.name">
        <Input v-model="card.name">
    </Form-item>
</Form>
validation:{
　　name:{
　　　　type:'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'数量应为正浮点数且不超过9999.99', trigger:'blur'
　　}
}

 (3)js中提交按钮事件，对整个表单进行校验，返回的参数为boolean值，代表成功或者失败

如果表单为循环列表中的表单，需要   this.$refs.addForm[index]

this.$refs.addForm.validate(valid => {
       if (valid) {
          //处理事件
       }
}); 

node编写接口：

思路：

1将各个项目的服务地址及项目简称，从页面输入进来，保存到接口中，涉及到写接口使用express，并将接口中获取到的内容保存到一个文件里。

2拦截接口的编写：使用post或get请求接口，使用node中fs对json文件读或写操作，最后将接口代理到项目中，使用ajax进行访问接口

-------------------------------------------------------------------------------------------------------

1、node的http服务 参考：https://www.cnblogs.com/xzsz/p/9066305.html

var conf = require("../conf_files")
var app = require(conf.app);
var http = require("http");//引入http模块

var server = http.createServer(app);//创建http服务
server.listen(port);
server.on('error',onError);
server.on('listening',onListening);

2、使用express编写接口  参考地址：https://blog.csdn.net/qq_43697072/article/details/86160770             https://www.jianshu.com/p/1d92463ebb69

当一个路由有很多子路由时，使用app.use(path,router) //当url地址跳转到path时，被拦截。router路由对象中的路由都会匹配到path路由后面

var express = require('express');
var app = express();
const config = require('../router/config')

app.use('/getConfig',config)   //router路由对象中的路由都会匹配到/getConfig路由后面

 3、使用router写中间件及接口功能    参考地址：https://blog.csdn.net/haochangdi123/article/details/81480212

　　router目的是中间件和路由分离的实例  config.js

var express=require("express");
var fs = require("fs");
var path = require("path");
var router = express.Router();
var config = './../conf_files/config.json';//注意“./”

router.post('/add',function(req,res,next){
    //操作文件
})

4、操作文件 使用node中的fs    参考地址：http://nodejs.cn/api/fs.html#fs_fs_readfile_path_options_callback

(1)读取文件内容 

fs.readFile(path[, options], callback)

fs.readFile(path.join(__dirname + config),'utf8',function(err,data){
    if(err) {
          return  res.send(err)
    }
    //设置响应的http状态，并向浏览器发送数据
    res.status(200).send(data);
})

(2)将数据写入到文件中

    fs.writeFile(file, data[, options], callback)

fs.readFile(path.join(__dirname + config),data,function(err){
    if(err) {
          return  res.send(err)
    }
   console.log("文件已保存！")
})

 

5、post请求，获取请求内容中的参数，使用req.body 但需要使用相关模块body-parser    参考文档：https://www.jianshu.com/p/2cb44dbe5de8

req.query: 解析后的 url 中的querystring，如?name=haha，req.query 的值为{name: 'haha'}
req.params: 解析 url 中的占位符，如/:name，访问/haha，req.params 的值为{name: 'haha'}
req.body: 解析后请求体，需使用相关的模块，如 body-parser，请求体为{"name": "haha"}，则 req.body 为 {name: 'haha'}

app.js
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extend:false}))

config.js
var express=require("express");
var fs = require("fs");
var path = require("path");
var router = express.Router();
var config = './../conf_files/config.json';//注意“./”

router.post('/add',function(req,res,next){
    let param = req.body;//请求体    
})

 6、查看接口  get本地可以访问  post接口 需要使用postman进行访问调试