SPA项目开发
登录注册
vue+elementUI完成注册及登陆
先创建一个新项目
vue init webpack javaxl_spa
C d javaxl_spa
npm install
npm install element-ui -S
config --> index.js 8088
npm run dev
npm install axios -S
npm install qs -S
npm install vue-axios -S
1. vue怎么引入和配置使用element-ui框架
-
1.1 使用vue-cli脚手架工具创建一个vue项目
vue init webpack pro01 -
1.2 npm安装elementUI
cd pro01 进入新建项目的根目录
npm install element-ui -S 安装element-ui模块重要的事情说三遍: 在指定位置 ! ! ! 在指定位置 ! ! ! 在指定位置 ! ! ! ~ ~ ~ 添加三行代码 ! ! !
-
1.3 在项目中src目录下找到main.js,并在指定位置添加三行代码
(main.js是入口文件,所以在这里引入就行,页面就不用引入了)import Vue from 'vue' import ElementUI from 'element-ui' //新添加1 import 'element-ui/lib/theme-chalk/index.css' //新添加2,避免后期打包样式不同,要放在import App from './App';之前 import App from './App' import router from './router' Vue.use(ElementUI) //新添加3 Vue.config.productionTip = false
-
1.4 测试
修改HelloWorld.vue添加elementUI组件查看效果
2. Vue+ElementUI设计登陆页面
注意:
相关样式见资料“css.txt”;
< style scoped>在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的;
auto-complete=“off” , autocomplete 属性是 HTML5 中的新属性,off-----禁用自动完成
3. 后台交互(axios/qs/vue-axios)
-
3.1 axios
axios是vue2提倡使用的轻量版的ajax。
是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests,与Vue配合使用非常好。1.题外话:
vue.js 有著名的全家桶系列:vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
其中 vue-resource 是Vue.js的一款插件,它可以通过 XMLHttpRequest 或 JSONP 发起请求并处理响应,但在vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios 。2.GET提交
axios.get('/user', {//注意数据是保存到json对象的params属性 params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
3.POST提交
axios.post('/user', {//注意数据是直接保存到json对象 firstName: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });
注意:
axios跨域问题
什么是跨域?
url = 协议(http)+ host(192.168.122.123)+ port (8088)+ 项目跨域情况: http://localhost:8088/p1 https://localhost:8088/p1 http://192.168.122.123:8088/p1 http://192.168.122.124:8088/p1 http://192.168.122.123:8088/p1 http://192.168.122.123:8099/p1 http://192.168.122.123:8088/p1 http://192.168.122.123:8088/p2
会一直报错:“http://127.0.0.1:8848’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header”
因为使用了前后端分离开发,跨域访问了,解决方案:需要配置tomcat允许跨域访问 ,
tomcat跨域配置方法很多,但最简单的方式是自己写一个过滤器CorsFilter实现,添加一个响应头
Access-Control-Allow-Origin 即可httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名 httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80"); Access-Control-Allow-Origin:* 则允许所有域名的脚本访问该资源。 Access-Control-Allow-Origin:https://www.fujieace.com 允许特定的域名访问
axios.get提交没有问题
axios.post提交后台接收不到数据
因为POST提交的参数的格式是 Request Payload ,这样后台取不到数据的
(详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”),
解决方案:使用qs.js库,将{a:‘b’,c:‘d’}转换成’a=b&c=d’简化axios使用
使用axios全局配置及拦截器
详情见资料“api/http.js”axios.defaults.baseURL = 'https://api.example.com'; //axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头,添加认证令牌 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
为方便开发,建议对请求地址进行封装
详情见资料“api/action.js”为进一步简化开发,将action.js的URL地址封装到axios.urls属性上
This 指针带来的变量污染,需要利用箭头函数来解决;
-
3.2 qs
qs.js它是一个url参数转化的js库。用法就两个:var obj = qs.parse('a=b&c=d'); //将URL解析成对象的形式:{a:'b',c:'d'} var str = qs.stringify(obj); //将对象 序列化成URL的形式,以&进行拼接:a=b&c=d'
-
3.3 vue-axios
vue-axios是在axios基础上扩展的插件,在Vue.prototype原型上扩展了$http等属性,可以更加方便的使用axios -
3.4 axios/qs/vue-axios安装及使用步骤
1.安装npm install axios -S npm install qs -S npm install vue-axios -S
2.修改main.js文件
import axios from 'axios' import qs from 'qs' import axios from '@/api/http' vue项目对axios的全局配置 import VueAxios from 'vue-axios' Vue.use(VueAxios,axios)
3.直接在Vue组件文件的methods里使用
this.axios.get(url,{params:{id:1,name:'zs'}}).then((response)=>{ this.newsList=response.data.data; }).catch((response)=>{ console.log(response); });
数据库
后台代码
注意:有些基本的代码我就不在此重复了,只讲主要的!!!
可以参照我的另一篇文章:SSH整合
结构图解:
prox.xml 配置
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.dj</groupId>
<artifactId>dj_ssh</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>dj_ssh Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<hibernate.version>5.2.12.Final</hibernate.version>
<mysql.version>5.1.44</mysql.version>
<spring.version>5.0.1.RELEASE</spring.version>
<struts.version>2.5.13</struts.version>
<slf4j.version>1.7.7</slf4j.version>
<log4j.version>2.9.1</log4j.version>
<disruptor.version>3.2.0</disruptor.version>
<junit.version>4.12</junit.version>
<servlet.version>4.0.0</servlet.version>
<jstl.version>1.2</jstl.version>
<standard.version>1.1.2</standard.version>
<tomcat-jsp.version>8.0.47</tomcat-jsp.version>
<axis2.version>1.7.6</axis2.version>
<xmlbeans.version>2.6.0</xmlbeans.version>
<jackson.version>2.9.3</jackson.version>
</properties>
<dependencies>
<!-- hibernate依赖 -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>${hibernate.version}</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-c3p0</artifactId>
<version>${hibernate.version}</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-ehcache</artifactId>
<version>${hibernate.version}</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- spring依赖 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- struts依赖 -->
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-core</artifactId>
<version>${struts.version}</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-spring-plugin</artifactId>
<version>${struts.version}</version>
</dependency>
<!-- 日志依赖 -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</artifactId>
<version>${slf4j.version}</version>
<scope>runtime</scope>
</dependency>
<!--用于与slf4j保持桥接 -->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-slf4j-impl</artifactId>
<version>${log4j.version}</version>
</dependency>
<!--核心log4j2jar包 -->
<dependency>
<groupId>org.apache.logging.log4j</groupId>
<artifactId>log4j-api</artifactId>
<version>${log4j.version}</version>
</dependency>
<dependency>
<groupId