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進行訪問調試