Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题
一、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 ;
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测试效果如下图所示:
Vue+Axios+Nigix+SpringCloud前端和后端搭建及其碰到的问题的更多相关文章
- vue axios 发送post请求,后端接收参数为null
1首先检查自己的传参方式是否正确,我是传一个对象,没有问题,接口也触发了 2查了下资料说是 Content-Type的问题,设置为 'application/x-www-form-urlencod ...
- vue axios的跨域前后端解决方案
原因出于安全考虑,浏览器有一个同源策略.浏览器中,异步请求的地址与目标地址的协议.域名和端口号三者与当前有不同,就属于跨域请求. 限制跨域访问是浏览器的一个安全策略,因为如果没有这个策略,那么就有被跨 ...
- vue+axios完美实现前端路由拦截
一.路由拦截 1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录.如果已经登陆则进入该路由,反之则进入登录页面. 如图是路由配置: ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...
- SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
uni-app自带uni.request用于网络请求,因为我们需要自定义拦截器等功能,也是为了和我们后台管理保持统一,这里我们使用比较流行且功能更强大的axios来实现网络请求. Axios ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
随机推荐
- FineReport帆软报表需求:根据url传递过来的参数值决定显示隐藏列
需求:角色id传递到报表页面中,然后根据角色id,决定隐藏第1列,显示第2-4列,还是隐藏第2-4列,显示第1列. 解决方法:
- Linux命令:ping命令
ping命令:类似于windows的ping命令,用于测试网络主机ICMP请求回应的 ping选项 ping -c # # 执行次数 -w # #测试 ...
- Linux命令:netstat命令
netstat功能:显示网络连接情况 netstat功能选项 -t:tcp协议的连接 -u:udp协议的链接 -l:监听状态的连接 -a:所有状态的连接 -p:连接相关的进程 -n:数字格式显示 -r ...
- Linux命令:vi | vim命令
vim - vi 增强版.文本编辑器 格式:vim [options] [file ..] 说明:如果file存在,文件被打开并显示内容,如果文件不存在,当编辑后第一次存盘时创建它 [options] ...
- Hive的存储和MapReduce处理——数据清洗(Part3)
日期:2019.11.17 博客期:118 星期日 这几天在写程序的时候虚拟机崩了,无语~所以重新从最初的状态开始配环境,重新整理之前的所有代码程序.
- python3连接mysql--增删改查
ps:MYSQLdb只适用于python2.x python3不支持MYSQLdb,取而代之的是pymysql 运行会报:ImportError:No module named 'MYSQLdb' i ...
- DateTime.Now.ToFileTime
var s = System.DateTime.Now.ToFileTime().ToString(); DateTime.Now.ToFileTime() 可以获得当前时间的长整型数字,这个数字应该 ...
- iOS开发的调试技巧
关于本文: 1.模拟器的快捷键 2.覆盖安装注意事项 3.给模拟器相册增加照片 4.模拟器中程序的数据 5.安装旧版本的模拟器 6.模拟慢网速 7.异常断点与符号断点 1.模拟器的快捷键 常用的模拟器 ...
- Python学习笔记之面向对象
下面是初步总结的Python的面向对象的参数定义,后面会逐渐完善面向对象的相关知识.
- python导入第三方库
2.Python的库一般包含两个方面:第三方库和标准库 3.Python的time标准库主要包含三个方面的内容:(1)时间处理函数(2)时间格式化(3)程序计时 4.turtle画笔运动函数的功能是进 ...