1、前后端搭建
2020-09-21 本文已影响0人
wqjcarnation
预备知识(备查)：
1）vue+servlet
2 ) axios
目标
本章制作前后端分离的项目，前后端实现跨域访问
第一步：新建工程web-vue，并导入常用的包
1.1 d:\vue进入命令行状态,输入以下命令
vue init webpack element
注意：中间有一项eslint选n
1.2 进入d:\vue\element目录，输入以入命令
cnpm install
cnpm install vue-router vue-resource --save
cnpm install axios --save
cnpm install --save vue-axios
cnpm install qs
cnpm install font-awesome
1.3 确认是否安装成功(axios同理)
查看配置文件package.json，是否有上述插件 ：
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.5",
"vue-resource": "^1.5.1",
"vue-router": "^3.4.3"
},
第二步 编码
引入qs备用
import qs from 'qs';
Vue.prototype.$qs = qs;
引图标
在main.js里面添加
import 'font-awesome/css/font-awesome.css'
axios 引入略，直接上main.js完整代码
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 router from './router'
//引入qs
import qs from 'qs';
Vue.prototype.$qs = qs;
//引入axios
//以下4行引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.withCredentials = true //这个默认即为false，如果改为true，可以传递session信息，后端要做相应修改来放行，
Vue.prototype.$axios = axios //在vue中使用axios
//引图标
import 'font-awesome/css/font-awesome.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
测试
进入命令行状态运行
npm run dev
浏览器输入http://localhost:8080/#/，出现如下页面即为成功
image.png
后端搭建
目标
- 后端项目搭建
- 前后端跨域
- mysql驱动引入
- jdbc常用的包和工具类的引入
- json转换工具的引入
- 编码过滤器的引入
后端web项目搭建
项目名称：webelement
注意勾选generate web.xml
前后端跨域
建包：com.neuedu.utils
1）src的com.neuedu.utils包下新建一个过滤器，增加跨域权限配置CorsFilter.java内容如下
package com.neuedu.utils;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet Filter implementation class CorsFilter
*/
@WebFilter("/*")
public class CorsFilter implements Filter {
private final int time = 20 * 24 * 60 * 60;
/**
* Default constructor.
*/
public CorsFilter() {
// TODO Auto-generated constructor stub
}
/**
* @see Filter#destroy()
*/
public void destroy() {
// TODO Auto-generated method stub
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
*/
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
// place your code here
// 允许跨域的主机地址，允许任意domain访问
//坑：前台axios设置withCredentials: true后，Access-Control-Allow-Origin的值不可以为*
HttpServletResponse resp = (HttpServletResponse) response;
resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");//第二个参数为前端启动的地址
/* 允许跨域的请求头 */
resp.setHeader("Access-Control-Allow-Headers", "*");
/* 允许跨域的请求方法GET, POST, HEAD 等 */
resp.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
/* 重新预检验跨域的缓存时间 (s) */
resp.setHeader("Access-Control-Max-Age", time + "");
/* 是否携带cookie,session支持 */
resp.setHeader("Access-Control-Allow-Credentials", "true");
// pass the request along the filter chain
chain.doFilter(request, response);
}
/**
* @see Filter#init(FilterConfig)
*/
public void init(FilterConfig fConfig) throws ServletException {
// TODO Auto-generated method stub
}
}
mysql驱动引入
json转换工具包的引入
把jackson相关的三个包和mysql相关的一个包共四个包放到web-inf/lib下
jdbc常用的包和工具类的引入
com.neuedu.utils.DBUtil
package com.neuedu.utils;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DBUtil {
static {
try {
Class.forName("com.mysql.jdbc.Driver");//指定方言，加载驱动
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* 建立连接
* @return
* @throws SQLException
*/
public static Connection getConnection() throws SQLException{
String url = "jdbc:mysql://localhost:3306/java11?characterEncoding=UTF-8&useUnicode=true";
String user = "root";
String password = "root";
// 3）建立连接
Connection conn = DriverManager.getConnection(url, user, password);
return conn;
}
/**
* 关闭连接
* @param rs
* @param ps
* @param conn
* @throws SQLException
*/
public static void closeConnection(ResultSet rs,Statement ps,Connection conn) throws SQLException{
if(rs!=null){
rs.close();
}
if(ps!=null){
ps.close();
}
if(conn!=null){
conn.close();
}
}
}
编码过滤器的引入（解决中文问题）
上午写的EncodeFilter
package com.neuedu.utils;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.annotation.WebInitParam;
/**
* Servlet Filter implementation class EncodeFilter
*/
@WebFilter(filterName="MyFilter",urlPatterns={"/*"},initParams={@WebInitParam(name="myencode",value="utf-8")})
public class EncodeFilter implements Filter {
String encode="";
/**
* Default constructor.
*/
public EncodeFilter() {
// TODO Auto-generated constructor stub
}
/**
* @see Filter#init(FilterConfig)
* 初始化方法，可以做一些准备工作
*/
public void init(FilterConfig fConfig) throws ServletException {
// 在这里给encode赋初值，这个值从fConfig里获取
encode=fConfig.getInitParameter("myencode");
System.out.println("获取到的编码方式："+encode);
}
/**
* @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
* 中间过滤的方法，做具体的过滤业务的
* doFilter 方法是放行可不放行
*/
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
// TODO Auto-generated method stub
// place your code here
//请求里的中文编码问题
request.setCharacterEncoding(encode);
//响应里的中文编码问题
response.setCharacterEncoding(encode);
response.setContentType("text/html;charset=utf-8");
// pass the request along the filter chain
chain.doFilter(request, response);
}
/**
* @see Filter#destroy()
* 销毁的方法，可以做一些清理工作
*/
public void destroy() {
// 所encode清理一下
encode="";
}
}
