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

时间  2019-11-26
标签 vue+axios+nigix+springcloud vue axios nigix springcloud 前端 后端 搭建 及其 碰到 问题 繁體版
原文   原文链接

1、Axios、Router的安装和使用

    一、如何安装Axios和Router

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

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

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

    二、如何使用Axios

     1）、专门写一个index接口js文件，例如：ios

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控件中引入web

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

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

   

  1）、这里以访问api/addUser为例，直接访问以下：spring

  

Axios.post("http://www.happymall.com/api/addUser")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

  Step1：配置BaseUrlvue-router

   在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的前缀。npm

Step2：配置代理json

修改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('注册失败');
              }
            });

2、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;

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

 一、创建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

二、创建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=

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

 

4、springcloud微服务搭建

 一、先创建一个父工程

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

 二、创建一个公共资源工程

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

三、创建一个respositry公共工程

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

四、将项目进行纵向切分，分红不一样的微服务，并分别创建Maven工程

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

五、编写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；表示该请求参数是一个对象。

5、postman测试效果以下图所示：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程