开发服务器设置

什么是服务器设置

服务器设置就是在移动端app上设置服务端的ip、端口和应用名称等参数。之所以开发这个功能，是由于移动端应用开发过程中，常需要将应用打包为app安装到手机上，在局域网内进行测试，而服务端的ip、端口和应用名称等参数常会变化，为了测试的方便，需要在手机端开发服务器设置功能，以便在测试时根据需要设置服务端参数。

服务器设置开发示例

准备工作

在《移动端多页面应用（MPA）的开发（一）》所述的基础上引入

开发封装访问服务器的js文件my-mobile.js，该文件代码请参阅，该js文件提供的方法如下：

/**
* 给Vue添加原型方法获取服务器配置
*/
$getServerConfig()

/**
* 给Vue添加原型方法设置服务器配置
*/
$setServerConfig()

/*
给Vue添加原型方法向服务器发出get请求，返回promise，
then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
*/
$myGet(url[,config])

/*
给Vue添加原型方法向服务器发出post请求，返回promise，
then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
*/
$myPost(url[,data[,config]])

/*
给Vue添加原型方法向服务器发出put请求，返回promise，
then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
*/
$myPut(url[,data[,config]])

/*
给Vue添加原型方法向服务器发出delete请求，返回promise，
then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
*/
$myDelete(url[,config])

服务器设置的代码实现

在登录页上增加一个服务器设置弹出层界面

js代码如下：

```const vm = new Vue({     el: '#app',     data: {         serverPopupVisible: false,//定义弹出层是否显示         serverConfig: {},//定义服务器参数     },     methods: {         setServerConfig() {//设置服务器参数             this.$setServerConfig(this.serverConfig);             this.serverPopupVisible = false;             this.$toast('服务器设置成功！');         },     },     mounted() {         this.serverConfig = this.$getServerConfig();     }});```

完整代码请参阅

登录代码实现

界面代码

js代码

const vm = new Vue({   el: '#app',   data: {      user:{}   },   methods: {             login() {           this.$myPost('/safty/login/user', this.user)               .then(result => {                   setTimeout(() => {                       window.location.href = "../../safty/home/index.html";                   }, 1000);               });       },   },   mounted() {        }});

完整代码请参阅

转载地址：http://cihdi.baihongyu.com/

你可能感兴趣的文章