目录
1.添加element-ui模块
npm install element-ui -S
注：npm install -g/-S/-D的区别
-g 将依赖下载到node_global
-s 将依赖下载到当前项目中,并且在后续前端项目打包的时候,npm build的时候会一并打包到项目中
-d 将依赖下载到当前项目中,并且在后续前端项目打包的时候,npm build的时候不会打包到项目中
执行成功后，在package.json中,可以看到添加element-ui
2.配置项目
1.main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2.测试
可以在App.vue中使用官网中的任意一个组件测试，这里以button组件为例：
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
出现按钮即为成功
3.使用Axios的前后端交互
1.Login.vue
在src的目录下,添加views目录,新建Login.vue
<template>
<div class="login-wrap">
<el-form class="login-container">
<h1 class="title">用户登录</h1>
<el-form-item label="">
<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
</el-form-item>
<el-row style="text-align: center;margin-top:-10px">
<el-link type="primary">忘记密码</el-link>
<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
2.配置路由
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入Login登录组件
import Login from '@/views/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', //设置默认显示路由
name: 'Login',
component: Login
},
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
}
]
})
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4. 数据交互
1.搭建后端
2.安装axios
axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。
npm i axios -S
3.Axios get请求
修改Login.vue中的js代码
<script>
import axios from 'axios'
export default {
name: "Login",
data: function() {
return {
username: "admin",
password: "123"
}
},
methods: {
doSubmit: function() {
let params = {
username: this.username,
password: this.password
};
console.log(params);
var url = "http://localhost:8080/ssm/user/userLogin";
axios.get(url, { //注意数据是保存到json对象的params属性
params: params
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
}
}
}
</script>
4.Axios post请求
1.引入qs
npm install qs -S
2.将请求参数保存到json对象中
<script>
import axios from 'axios'
import qs from 'qs'
export default {
name: 'Login',
data: function() {
return {
username: "admin",
password: "123"
}
},
methods: {
doSubmit: function() {
let params = {
username: this.username,
password: this.password
};
console.log(params);
var url = "http://localhost:8080/ssm/user/userLogin";
//通过qs中的stringify方法进行格式转换
let str=qs.stringify(params);
//注意数据是保存到json对象的params属性
axios.post(url, str).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
}
}
}
</script>
5.vue-axios
Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
vue-axios是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios。
通过vue-axios实现对axios的轻量封装：
1.下载安装vue-axios
npm i vue-axios -S
2.导入api模块，添加axios的全局配置
将api模块导入到SPA项目的src目录下，其中api模块包含了action.js（针对后台请求接口的封装定义）和http.js（针对axios的全局配置）两个文件。
action.js
/**
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
'SERVER': 'http://localhost:8080/ssm', //服务器
'SYSTEM_USER_DOLOGIN': '/user/userLogin', //用户登陆
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
http.js
/**
* vue项目对axios的全局配置
*/
import axios from 'axios'
import qs from 'qs'
//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/ssm'; // 默认地址
axios.defaults.baseURL = action.SERVER;
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
data = qs.stringify(data);
return data;
};
// 请求拦截器
axios.interceptors.request.use(function(config) {
// var jwt = window.vm.$store.getters.getJwt;
// config.headers['jwt'] = jwt;
return config;
}, function(error) {
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function(response) {
// debugger;
// var jwt = response.headers['jwt'];
// if(jwt){
// window.vm.$store.commit('setJwt',{jwt:jwt});
// }
return response;
}, function(error) {
return Promise.reject(error);
});
// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// config => {
// //config.data = JSON.stringify(config.data);
// //config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// //config.headers['Token'] = 'abcxyz';
// //判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// // if (cookie.get("token")) {
// // //用户每次操作，都将cookie设置成2小时
// // cookie.set("token", cookie.get("token"), 1 / 12)
// // cookie.set("name", cookie.get("name"), 1 / 12)
// // config.headers.token = cookie.get("token");
// // config.headers.name = cookie.get("name");
// // }
// return config;
// },
// error => {
// return Promise.reject(error.response);
// });
// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// response => {
// if (response.data.resultCode == "404") {
// console.log("response.data.resultCode是404")
// // 返回 错误代码-1 清除ticket信息并跳转到登录页面
// // cookie.del("ticket")
// // window.location.href='http://login.com'
// return
// } else {
// return response;
// }
// },
// error => {
// return Promise.reject(error.response) // 返回接口返回的错误信息
// });
export default axios;
3.在main.js文件中引入api模块和vue-axios模块
- import axios from '@/api/http'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
4.从Login.vue组件中移除导入的axios和qs模块
#import axios from 'axios'
#import qs from 'qs'
5.使用全局的axios发送请求
let url=this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url,params).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
5.跨域问题
1.什么是跨域
前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口
2.解决
在web.xml配置CrosFilter跨域过滤即可
<!--CrosFilter跨域过滤器-->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.zking.ssm.util.CorsFilter2</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
1189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
