vue + node implement CRUD gateway configuration page

vue write page:

1, using components iview Form, Form-item added to the label property, given: [Vue warn]: Error in render: "TypeError: Can not read property '_t' of undefined"

The reason is: Use iview.js version is too low, replace it iview.js 2.0

2, add less dependent, less can be used to edit the style

package.json in 

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

3, the use of very shallow iview frame assembly --Card reasons: the outermost index.html should set a font-size (typically set to 100px)

Because the width of the border-style assembly are provided 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, some iview components bind click event is invalid. Solution: @ click.native = "clickFun"

.native- native event listener components of the root element, mainly to custom components to add native events

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

 

5, form validation:

(1) Form label to add binding elements: model

(2) Form-item tag set properties prop, and set the property 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'
　　}
}

 Submit (3) js the button event, for entire form validation, parameter is returned boolean value that represents the success or failure

If the form is circulating a list form, this. $ Refs.addForm need [index]

the this . $ refs.addForm.validate (Valid => {
        IF (Valid) {
           // handle event 
       } 
});

write node interfaces:

Ideas: Write interception interface: using post or get request interface, use the node in the json file fs for read or write operations, and finally interface agent to the project, access interfaces using ajax

1, node's http service Reference: 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, using the express written Interface Reference address: https: //blog.csdn.net/qq_43697072/article/details/86160770 https://www.jianshu.com/p/1d92463ebb69

When a route has many sub-routing, use app.use (path, router) // When the url address to jump to the path, it is intercepted. router routing object are matched to the routing path back route

var Express = the require ( 'Express' );
 var App = Express (); 
const config = the require ( '../ Router / config' ) 

app.use ( '/ getConfig', config) // Router routing routing object are matched / routing back getConfig

 3, using a router middleware and interface functions written reference address: https: //blog.csdn.net/haochangdi123/article/details/81480212

　　router and the routing object middleware isolated instances 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, manipulate files using fs reference node address of: http: //nodejs.cn/api/fs.html#fs_fs_readfile_path_options_callback

(1) read the contents of the file 

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

fs.readFile (path.join (__ + dirname config), 'UTF8', function (ERR, Data) {
     IF (ERR) {
           return   res.send (ERR) 
    } 
    // set the http response status, and sends the browser data 
    res.status (200 is ) .send (data); 
})

(2) writing data to a file

    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 request to obtain the parameters in the requested content, but requires the use of req.body body-parser module associated reference documents: https: //www.jianshu.com/p/2cb44dbe5de8

req.query: Url parsed in QueryString, such as ?name=haha, req.query a value of {name: 'haha'}
req.params: parsing url placeholder, such as /:nameaccess /haha, req.params value {name: 'haha'}
req.body: parses the request body, related modules need to use, such as body-parser, is a request body {"name": "haha"}, as the 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. Check the interface get local access to post interfaces need access to postman debugging