vue+iview+axios+spring前后端分离项目登录实例idea创建

最新推荐文章于 2022-10-31 20:54:34 发布

赵云0726

最新推荐文章于 2022-10-31 20:54:34 发布

阅读量432

点赞数 1

原文链接：https://blog.csdn.net/qiaoqi11/article/details/100020881

版权

最近开始学习vue,从网络上看到很多贴子讲解如何创建，现将过程总结如下，欢迎学习交流。过程中用到网友图或者内容请原谅，再此对各位表示感谢！！

1.项目涉及工具及环境

jdk1.8
maven
spring-boot
idea
node.js
npm
vue
iview
axios

2.前端创建

2.1 node.js安装

下载地址：https://nodejs.org/en/download/

下载完成后安装（直接按默认方式安装就行）,如何想选择自己安装位置，可以选择具体安装路径，本文是安装在E:\workdearly\nodejs

打开cmd 输入下面的命令查看是否成功安装

node –v

npm -v

2.2 node.js prefix(全局)和cache(缓存)设置

运行 npm config set cache "E:\workdearly\nodejs\node_cache" 设置缓存文件夹；

运行npm config set prefix "E:\workdearly\nodejs"设置全局模块存放路径；

修改E:\workdearly\nodejs\node_modules\npm\npmrc文件，将默认值改为：

prefix=E:\workdearly\nodejs，如果不做这个修改，则npm在运行 npm ls -g 的时候，仍然以默认的路径来查找已安装的全局模块；

2.3 vue安装

输入npm i -g cnpm --registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了，如果权限不够，请使用管理员运行命令提示符

安装vue-cli 脚手架构建工具（必须在全局中进行安装）

在命令行中运行命令 cnpm install -g vue-cli ，然后等待安装完成。

是否安装成功：vue -V

在命令行中运行命令 cnpm install -g webpack ，然后等待安装完成。

在命令行中运行命令 cnpm install -g webpack -cli，然后等待安装完成。

webpack的版本查询：webpack -v

2.4 使用脚手架安装项目

vue init webpack first_vue

提示目录已存在，是否继续：Y

Project name（工程名）:回车

Project description（工程介绍）：回车

Author：作者名

Vue build（是否安装编译器）:回车

Install vue-router（是否安装Vue路由）：回车

Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n

Set up unit tests（安装测试工具）：n

Setup e2e tests with Nightwatch（测试相关）：n

Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself

进入项目目录

cd firstVue

初始化项目

cnpm i

运行测试 npm run dev

2.5 iview 安装

安装：npm install --save iview

在idea中打开项目，按照图示进行设置：

在main.js中加入iview

import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)

使用iview

首先，我们在工程目录componets下新建一个Login.vue文件。并且登录iview的官网找到Form表单组件。复制代码到Login.vue中

<template>

<div id="app">

<Login></Login>

</div>

</template>

<script>

import Login from '@/components/Login'

export default {

name: 'App',

components: {

'Login': Login

},

data() {

return {}

}

}

</script>

<style>

#app {

text-align: center;

margin-top:400px ;

}

</style>

好了，到此为止，vue的登录页面算是完成了。运行来看看效果。

2.5 修改Login.vue代码并且安装和使用axios

在Login.vue组件中，有一个提交的方法，当校验通过时，会提示“Success!”，失败时会提示“Fail!”,所以我们可以在校验通过的时候提交表单到后台。

handleSubmit(name) {

this.$refs[name].validate((valid) => {

if (valid) {

this.$Message.success('Success!');

} else {

this.$Message.error('Fail!');

}

})

}

vue.js官方推荐我们使用axios来发送异步请求。所以我们就使用axios来发送异步请求。

首先我们引入axios，并且使用axios。
安装axios
在命令行内输入
npm install axios -S
进行安装。
安装完成后在main.js中使用axios，在main.js中加入以下代码
import axios from 'axios'
Vue.prototype.$axios = axios
这样就可以在全局中使用axios做请求了。
我们在表单校验通过的时候使用axios来请求后台。代码如下

handleSubmit(name) {

this.$refs[name].validate((valid) => {

if (valid) {

this.$axios({

url: '',//请求的地址

method: 'post',//请求的方式

data: this.formInline//请求的表单数据

}).then(res => {

console.info('后台返回的数据', res.data);

}).catch(err => {

console.info('报错的信息', err.response.message);

});

} else {

this.$Message.error('表单校验失败!');

}

})

}

到此为止，前端的搭建算是完成了，我们来搭建springboot作为后端，来实现一个简单的登录请求

3. 后端（springboot）

3.1 新建一个新的spring initializr工程，这里我们使用默认的项目名demo。在第三步的时候选择web

3.2 新建LoginController.java 和User.java

LoginController.java代码如下

package com.example.demo;
import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RestController;

/**

* Created by 不爱编程的程序猿

* 2018/11/8

*/

@RestController

@RequestMapping("/rest")

public class LoginController {
@RequestMapping(value = "/login", method = RequestMethod.POST)

public Boolean Login(@RequestBody User user) {

System.out.printf("用户名" + user.getUserName());

System.out.printf("用户密码" + user.getPassword());

return Boolean.TRUE;

}
}

User.java代码如下

package com.example.demo;

import javax.persistence.Entity;

/**

* Created by 不爱编程的程序猿

* 2018/11/8

*/

@Entity
public class User {


//用户名
private String user;

//密码
private String password;

public String getUserName() {
return user;
}

public void setUserName(String userName) {
this.userName = user;
}

public String getPassword() 
return password;
}

public void setPassword(String password) {
this.password = password;
}

}

由于springboot默认的端口是8080，但是被前端的项目占用了，所以我们需要修改端口，打开application.properties文件加入 server.port=8081即可修改端口号为8081，修改后启动项目。后端项目已经启动，现在我们去前端来请求后端的系统。我们重新回到Login.vue文件，修改url为localhost:8081/rest/login

handleSubmit(name) {

this.$refs[name].validate((valid) => {

if (valid) {

this.$axios({

url: 'localhost:8081/rest/login',//请求的地址

method: 'post',//请求的方式

data: this.formInline//请求的表单数据

}).then(res => {

console.info('后台返回的数据', res.data);

}).catch(err => {

console.info('报错的信息', err.response.message);

});

} else {

this.$Message.error('表单校验失败!');

}

})

}

打开登录页面输入用户密码以后,发现浏览器的console控制台报错了，查找发现是跨域问题。

具体什么是跨域问题，这里不做讲解，可以自行百度。
既然出现了跨域问题，自然得想办法解决。我们打开
config下的index.js 打开后可以看到

将proxyTable修改为

proxyTable: {

'/rest': {

target: 'http://localhost:8081',//设置你调用的接口域名和端口号 别忘了加http

changeOrigin: true,

pathRewrite: {

'^/rest': '/rest'
}
}
}

并且重新修改提交表单的请求方法为

handleSubmit(name) {

this.$refs[name].validate((valid) => {

if (valid) {

this.$axios({

url: '/rest/login',//请求的地址

method: 'post',//请求的方式

data: this.formInline//请求的表单数据

}).then(res => {

console.info('后台返回的数据', res.data);

}).catch(err => {

console.info('报错的信息', err.response.message);

});

} else {

this.$Message.error('表单校验失败!');

}

})

}

在登录页面输入账号和密码

4.总结

过程中遇到好多问题，webpack 安装过程就出现问题，这个需要在百度下就可以解决
axios发送请求过程中出问题，在引入时要注意，一定要保证成功，否则是发不错任何请求
在请求发送成功后，后端程序获取用户名为空，json传输字段名称不统一，且注意。
本文中用到一些网友的图片及内容，在此表示感谢！

赵云0726

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue+iview+axios+spring前后端分离项目登录实例idea创建

最近开始学习vue,从网络上看到很多贴子讲解如何创建，现将过程总结如下，欢迎学习交流。过程中用到网友图或者内容请原谅，再此对各位表示感谢！！1.项目涉及工具及环境jdk1.8 maven spring-boot idea node.js npm vue iview axios2.前端创建2.1 node.js安装下载地址：https://nodejs.org/en/download/下载完成后安装（直接按默认方式安装就行）,如何想选择自己安装位置，可以选择具体.
复制链接

扫一扫