Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题

2022-08-17 11:41:12

一、Axios、Router的安装和使用

1、如何安装Axios和Router

1）、进入到工程所在的文件夹，通过cmd指令，进入到window的dos界面

2）、输入：npm install axios --save-dev；来安装Axios

3）、router在项目创建阶段会直接询问是否安装，选择yes即可。

2、如何使用Axios

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(‘注册失败‘);
        }
      });
    }
  },

3、Axios跨域问题如何解决？

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。

4、路由如何使用

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路由地址问题

在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;

三、Zull客户端和Euraka服务器的配置

1、建立Euraka服务器

配置文件如下：

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

2、建立Zull客户端

配置文件如下：

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=

3、访问Euraka服务器查看微服务

四、springcloud微服务搭建

1、先建立一个父工程

先建立一个父工程，里面只保留一个pom.xml文件，用来提供继承服务，使其他微服务都继承该父工程；统一spring包的版本。

2、建立一个公共资源工程

继承父工程，并用于提供公用的pojo，vo和utils工具类；

3、建立一个respositry公共工程

该工程用来提供数据库连接池

4、将项目进行纵向切分，分成不同的微服务，并分别建立Maven工程

以用户管理模块为例，将该模块建立一个微服务；总体项目架构如下所示：

5、编写user微服务的代码

根据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；表示该请求参数是一个对象。

五、postman测试效果如下图所示：