4.年终小结

既然到了年底,那就写点东西记录一下。我的2018,半年本科,半年研究生。这个过渡的过程比自己想的更顺利。本科那段时间,不懂总结,不懂整体计划,所以我的2018是佛系的。


本科阶段半年

2018.1-3月:1月实习,2-3月份全都在家里玩,吃吃喝喝长膘。

2018.4-6月:毕业设计阶段。这个过程的收获:学会使用java的框架;ionic3做混合模式的安卓客户端;以及阅读开发文档;看了很多论文;使用后端管理模板metronic;接触了jQuery和ajax;查阅各种文献数据库;学了部分python基础;


暑假

2018.6-8月:暑假阶段,主要是在家玩。
为噪声项目做准备,学习并且收获的部分:vue基本语法(虽然已经记不住,但是和ionic有点像,类似angularjs);了解了openlayers,redis,shiro的一些使用;了解了nginx反向代理和主从分离的一部分内容;了解跨域的一些问题;准备了部分数学建模内容;了解了postgresql;


研究生半年

2018.9-12月:研究生初期阶段。
虽然说是初期,但是研究生真正上课阶段就已经过去一半了,感觉这半年没什么收获。
主要:噪声项目:因为写的是数据查询和权限菜单模块,比较简单,做的也没什么压力。轨迹项目:几乎没怎么有突破,看了很多论文。看了《数据库概念》,《SQL核心优化思想》.课程方面:没什么突破。


最大的收获

2018一整年,带给我最大的收获大概是看问题的角度和对自己未来工作的定义都有了很大的改变,一直记得以前一位老师的话,站的越高,看的越远。


不足

1.碰到问题没有及时记下来,导致经常一个坑踩两次。

2.对很多学习的知识点,只停留在使用层面,不会去深究原理。

3.学习缺乏耐心。



我的2019计划


1.学好数据库概念

2.基础扎实,找一个好的实习

3.提高算法编程能力

4.数学建模拿奖

5.在轨迹计算方面发一篇论文




6.减肥到95斤

7.学英语口语

希望我的2019能开挂!!!

3.shiro-Springboot-vue简单登录demo

1.components创建一个login.vue
2.搭建一个单页面组件的框架

1
2
3
<template></template> 写html代码,注意template标签内一定要有一个html标签包裹所写的内容,例如下面的例子就用<div id="login">包裹住
<script></script> 编写脚本
<style></style> 样式

用element-ui组件先编写一个基本的页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
label-width="0px"
class="card-box login-form">
<h3 class="title">后台管理系统</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user"/>
</span>
<el-input v-model="loginForm.username" autoComplete="on"/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
</el-form>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
export default {
name: 'login',
data() {
return {

}
},
methods:{

}
}

3.给form,两个input框绑定数据,给表单控件绑定用v-model

1
2
<el-input v-model="loginForm.username" name="username" placeholder="请输入用户名/手机号" auto-complete="on"></el-input>
<el-input v-model="loginForm.password" name="password" placeholder="请输入密码" auto-complete="on"></el-input>

在data里面,同样要创建数据模型

1
2
3
4
5
6
7
8
9
10
11
12
13
data() {
return {
loginForm: {
username: 'admin',
password: '123456'
},
loginRules: {
username: [{required: true, trigger: 'blur', message: "请输入用户名"}],
password: [{required: true, trigger: 'blur', message: "请输入密码"}]
},
loading: false
}
}

4.表单验证:使用loginRules,用于表单验证

1
2
3
4
loginRules: {
username: [{required: true, trigger: 'blur', message: "请输入用户名"}],
password: [{required: true, trigger: 'blur', message: "请输入密码"}]
}

与组件绑定

5.创建api.js,用于处理在apis下创建login.js,是定义登录所需的请求服务器的接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import axios from 'axios'
import {Message, MessageBox} from 'element-ui'
import {getToken} from '@/utils/auth'
import store from '../store'
// 创建axios实例--封装了axios,结合业务封装了axios
const service = axios.create({
baseURL: process.env.BASE_URL, // api的base_url
timeout: 15000 // 请求超时时间2
})
// request拦截器
service.interceptors.request.use(config => {
/*if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}*/
return config
}, error => {
// Do something with request error
console.error(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
//通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
//* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
const res = response.data;
if (res.returnCode == '1000') {
return res;
}
if (res.returnCode == '100') {
return res.returnData;
} else if (res.returnCode == "20011") {
Message({
showClose: true,
message: res.returnMsg,
type: 'error',
duration: 500,
onClose: () => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
}
});
return Promise.reject("未登录")
} else {
Message({
message: res.returnMsg,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(res)
}
},
error => {
console.error('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default service

6.login.js调用api.js,token是包含用户名和密码的对象

1
2
3
4
5
6
7
8
9
import api from '@/utils/api'

export function getInfo(token) {
return api({
url: '/login/testGetInfo',
method: 'get',
params: {token}
})
}

7.创建好之后,在login.vue调用此login.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
methods: {
handleLogin() {
this.$refs.loginForm.validate(valid => {//账号密码的输入验证
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(data => {//登录操作,判断密码是否正确
this.loading = false
if ("success" === data.result) {
this.$router.push({path: '/'})//密码正常,进入首页
} else {
this.$message.error("账号/密码错误");
}
}).catch(() => {
this.loading = false
})
} else {
return false
}
})
}
}

8.关于跨域处理问题,可见上一篇博客。即在config/index.js中修改api值。

1
2
3
4
5
6
7
8
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/'
}
}
}

2.关于vue-cli使用本地API代理解决跨域问题

什么是跨域就不废话了,之前使用access-control-allow-origin方式解决跨域,这个方法很好用,只需要在后端添加一个filter即可。具体操作百度即可。
下面是一个后端解决跨域的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@ServletComponentScan
@WebFilter(urlPatterns = "/*",filterName = "corsFilter")
public class CorsFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "*");
System.out.println("*********************************过滤器被使用**************************");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}

#####
但是最大的问题的ie内核的浏览器都不支持,所以像360浏览器这类都不能成功,但是如果是自己做课程设计之类的话可以用Chrome浏览器进行调试。

下面要讲的是在vue项目中使用本地的api代理来解决跨域问题。项目需要使用vue-cli脚手架搭建。

一、新建vue项目

1.安装vue-cli

cnpm intall vue-cli -g

vue -V 查看vue版本号

2.创建webpack项目

vue init webpack cdTest cdTest即为创建的项目名

3.给项目安装库
npm install

4.测试运行

npm run dev 一般默认端口为8080

image

二、安装需要的插件

1.发送xmlHTTPrequest请求需要用到的插件

1
2
npm install --save vue-resource
npm install --save axios

2.使用webstorm或其他软件打开这个项目

(1)在main.js中引入插件,以及声明使用
image

注意:axios不是使用Vue.use()方式声明使用的,而是通过

1
Vue.prototype.$axios=axios;

在其他vue组件中就可以this.$axios调用使用,之前使用Vue.use(axios),然后在组件中使用axios.get()函数的时候,会出现 get() undefined 的错误.

(2)要使用代理,必须到config目录下设置,在config目录下新建proxyConfig.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
proxy: {
'/apis': { //将http://127.0.0.1:9090印射为/apis
target: 'http://127.0.0.1:9090', // 接口域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
}

(3)config/index.js中添加

1
var proxyConfig = require('./proxyConfig')

在dev中的ProxyTable:

1
proxyTable: proxyConfig.proxy,

(4)本地配置http://127.0.0.1:9090/Test/loadById/11
image

(5)界面调用函数:前端运行的8080端口调用后端的9090端口的数据
image

(6)结果
image

(7)经测试,带IE内核的浏览器均可以获得数据。
https://www.jb51.net/article/130509.htm