1）、进入到工程所在的文件夹，通过cmd指令，进入到window的dos界面
2）、输入：npm install axios --save-dev；来安装Axios
3）、router在项目创建阶段会直接询问是否安装，选择yes即可。
1）、专门写一个index接口js文件，例如：
import Axios from ‘axios‘ import qs from ‘qs‘ export const User = { login(username, password) { return Axios.post(‘/login/‘,{ username: username, password: password }) }, addSignUpUser(userInfo) { console.log(userInfo) return Axios.post(‘/addUser‘,userInfo); } }
2）、在其他vue控件中引入
import { User } from ‘../../api/index‘
methods: {
...mapMutations([‘SET_SIGN_UP_SETP‘]),
...mapActions([‘addSignUpUser‘]),
handleSubmit (name) {
const father = this;
this.$refs[name].validate((valid) => {
if (valid) {
const userinfo = {
username: this.formValidate.name,
password: this.formValidate.password,
mail: this.formValidate.mail,
phone: this.$route.query.phone
};
//this.addSignUpUser(userinfo);
User.addSignUpUser(userinfo)
.then(result =>{
if (result.status) {
this.$Message.success(‘注册成功‘);
father.SET_SIGN_UP_SETP(2);
this.$router.push({ path: ‘/SignUp/signUpDone‘ });
} else {
this.$Message.error(‘注册失败‘);
}
});
} else {
this.$Message.error(‘注册失败‘);
}
});
}
},
1）、这里以访问api/addUser为例，直接访问如下：
Axios.post("http://www.happymall.com/api/addUser") .then(res=>{ console.log(res) }) .catch(err=>{ console.log(err) })
Step1：配置BaseUrl
在main.js中，配置下我们访问的Url前缀：
import Vue from ‘vue‘ import App from ‘./App‘ import Axios from ‘axios‘ Vue.prototype.$axios = Axios Axios.defaults.baseURL = ‘/api‘ Axios.defaults.headers.post[‘Content-Type‘] = ‘application/json‘; Vue.config.productionTip = false new Vue({ el: ‘#app‘, components: { App }, template: ‘<App/>‘ })
关键代码是：Axios.defaults.baseURL = ‘/api‘，这样每次发送请求都会带一个/api的前缀。
Step2：配置代理
修改config文件夹下的index.js文件，在proxyTable中加上如下代码；示意图如下：
‘/api‘:{ target: "http://www.happymall.com", changeOrigin:true, pathRewrite:{ ‘^/api‘:‘‘ } }
Step3：修改请求Url
修改刚刚的axios请求，把url修改如下：
this.$axios.get("/addUser") .then(res=>{ console.log(res) }) .catch(err=>{ console.log(err) })
Step4：重启服务
重启服务后，此时已经能够访问了。
原理：
因为我们给url加上了前缀/api，我们访问/api/addUser就当于访问了：localhost:8080/api/addUser（其中localhost:8080是默认的IP和端口）。
在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容，因此实际访问Url是http://www.happymall/api/addUser。
1）、全局引入路由
/* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, store, components: { App }, template: ‘<App/>‘ });
2）、配置路由规则
import Vue from ‘vue‘; import Router from ‘vue-router‘; import Index from ‘@/components/Index‘; const Login = resolve => require([‘@/components/Login‘], resolve); const SignUp = resolve => require([‘@/components/SignUp‘], resolve); Vue.use(Router); export default new Router({ routes: [ { path: ‘/‘, // 首页 name: ‘Index‘, component: Index }, { path: ‘/Login‘, // 登录 name: ‘Login‘, component: Login }, { path: ‘/SignUp‘, // 注册 /*name: ‘SignUp‘,*/ component: SignUp, children: [ { path: ‘/‘, name: ‘index‘, component: CheckPhone }, { path: ‘checkPhone‘, name: ‘CheckPhone‘, component: CheckPhone }, { path: ‘inputInfo‘, name: ‘InputInfo‘, component: InputInfo }, { path: ‘signUpDone‘, name: ‘SignUpDone‘, component: SignUpDone } ] }, ] });
3）、使用路由
User.addSignUpUser(userinfo) .then(result =>{ if (result.status) { this.$Message.success(‘注册成功‘); father.SET_SIGN_UP_SETP(2); this.$router.push({ path: ‘/SignUp/signUpDone‘ }); } else { this.$Message.error(‘注册失败‘); } });
在Nigix通过配置服务器，将前端请求通过路由机制并结合SpringCloud实现负载均衡；服务器配置如下：
server { listen 80; server_name www.happymall.com; location /{ root happymall; index index.html; } location /api { proxy_pass http://127.0.0.1:9005/zuul-user/user/manage; add_header ‘Access-Control-Allow-Credentials‘ ‘true‘; add_header ‘Access-Control-Allow-Origin‘ ‘*‘; } }
http://api.douban.com/api/addUser发送的请求，通过路由机制可以将该请求发送到Zull客户端；实现负载均衡。
http://127.0.0.1:9005/zuul-user/user/manage;
配置文件如下：
server.port=8761 #eureka config spring.application.name=eureka-server eureka.instance.hostname=localhost eureka.client.registerWithEureka=true eureka.client.fetchRegistry=true eureka.instance.preferIpAddress=true eureka.server.enable-self-preservation=false
配置文件如下：
eureka.client.serviceUrl.defaultZone=http://localhost:8761/eureka/ server.port=9005 spring.application.name=serviceZuul zuul.routes.zuul-user.path=/zuul-user/** zuul.routes.zuul-user.serviceId=userservice zuul.sensitive-headers=
先建立一个父工程，里面只保留一个pom.xml文件，用来提供继承服务，使其他微服务都继承该父工程；统一spring包的版本。
继承父工程，并用于提供公用的pojo，vo和utils工具类；
该工程用来提供数据库连接池
以用户管理模块为例，将该模块建立一个微服务；总体项目架构如下所示：
根据MVC模型，编写Controller、Modle和View层代码，其中controller层的代码示例如下
package cn.tedu.user.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import cn.tedu.common.pojo.User; import cn.tedu.common.vo.SysResult; import cn.tedu.user.service.UserService; @RestController @RequestMapping("/user/manage") public class UserController { @Autowired private UserService userService; @RequestMapping("/checkUserName") public SysResult checkUserName(String userName) { Integer exist = userService.checkUsername(userName); //根据exist判断返回结果 if(exist == 0) { return SysResult.ok(); } else { return SysResult.build(201, "已存在", null); } } @RequestMapping("/addUser") public SysResult userSave(@RequestBody User user) { try { userService.userSave(user); return SysResult.ok(); } catch (Exception e) { e.printStackTrace(); return SysResult.build(201, e.getMessage(), null); } } }
因为前端传递的格式是Json字符串格式，因此在后端中接受对象时，要加上@RequestBody；表示该请求参数是一个对象。
Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题
原文：https://www.cnblogs.com/chhyan-dream/p/11222762.html