创新实训 day09

成员工作

    • 齐世毅
    • 登录界面设置
    • 杨昊
    • 郭培垣

齐世毅

登录界面设置

今天我们本来是打算把登录和注册功能先完成的,但是不在一起真的挺难对接的,因为搞登录界面的同学把他的代码发给我之后出了很多的bug,我就不得不狠下心来把界面重新设计了,然后我把登录的逻辑写完了,就弄到了晚上十点多,主要是我对vue并不是很熟悉,所以在做前端接口的时候就出现了很多的问题,尤其是不同的组件之间的数据共享问题,这就困扰了我一晚上,直到十点多才弄出来,然后又有vuex数据丢失问题,我又弄了很久才解决,虽然今天看起来做的东西很少,但是我对vue的理解更加深入了,在后面的更新中应该会做的更快更好,毕竟第一次用vue写代码,bug简直多的出奇,一个个的bug改,从csdn上看博客看到很晚,才解决,但是明天的话我预计很快就能把注册的功能写完,毕竟登录和注册的功能还是很接近的,估计两个小时之内就能解决了。
对于登录界面我想说的是elementui虽然为我们提供了很多的组件,很方便,但是在另一方面也给我带来了很多麻烦,因为他的一些组件都是写死的,我要是用css单纯去改的话根本行不通,只有两个办法:第一个办法就是用官方提供的接口去改,但是官方很难找,我都是从csdn上找的有经验的人写的,第二个方法就是直接找到element的源码,然后暴力修改源码就可以了,但是这个不好的就是修改了之后所有的相同组件都会被修改掉,这就有点得不偿失了。反正我经过今天修改界面的经历我觉得还是应该学好css,毕竟根源的东西是不能变的,而且用好了css做出的界面绝对不会比别人提供的差。那就展示一下我做了将近一下午的登录界面吧。
创新实训 day09_第1张图片
这是我照着Oracle的官网做的,感觉还是挺有美感的,暂时就弄成这样吧,等后面做完功能可以再改。
vuex
我就不过多的介绍什么是vuex了,其实vuex很像是一个管理全局变量的插件,用起来其实很方便,但是我不知道它到底是太高深了呢,还是vue的作者写vuex的时候太随意了,我在做的时候遇到了无数的bug,其实就是vuex害得我一晚上才做出来登录界面的,但是好在我基本上掌握了怎么用vuex,还是不错的,其实要不是我遇到太多的问题的话这个是真的好用,有了vuex父子组件的通信其实就不用学了,vuex都能做了,只不过不推荐都用vuex而已。我就写一下vuex的基本写法吧。
const store=new Vuex.Store({
state:{
islog:JSON.parse(sessionStorage.getItem(‘islog’))||false,//显示登录状态,是否登录
accout:JSON.parse(sessionStorage.getItem(‘islog’))||’’,//账号
pass:’’,//密码。暂时不用
logsuccess:false//暂时没用
},
mutations:{
//使登陆状态变为登录,即为true
logstatechange(state){
state.islog=true;
sessionStorage.setItem(‘islog’,JSON.stringify(state.islog))

},
//记录账号
logaccout(state,acc){
  state.accout=acc;
  sessionStorage.setItem('account',JSON.stringify(state.accout))
},
//暂时不用
logsucces(state){
  state.logsuccess=true
},

},
//这里面的方法暂时不用
getters:{
logsuccessget(state){
return this.logsuccess;
}
}
})
但是我觉得vuex还是太高深了,我也就是学会了它的基本用法,剩下的话还得花费时间去研究。
但是应该注意的是,应该在写vuex的文件中导入vue
import Vue from “vue”
import Vuex from “vuex”
Vue.use(Vuex)
这三步还是得有的,然后需要在main.js中注册一下就可以了。
import store from “./store”;
这样的话还是差最后一步:
new Vue({
el: ‘#app’,
router:router,
store,
render: h => h(App)
})
把store添加进去就可以在app.vue中使用了。具体怎么使用我就不说了,东西太多了。
vuex的重大漏洞
我在刚才说过了vuex是用来存储全局变量的,但是在我写完vue的时候却发现了一个致命的问题,vuex是不能缓存数据的,也就是说我要是刷新页面或者是跳转的话,vuex自己就初始化了,我就是在测试我的登录界面的时候发现了这个问题,然后我就去网上搜,发现其实很多人也碰到了这样的问题,而且也有大佬给出了解决方案。我就用了其中的一种
islog:JSON.parse(sessionStorage.getItem(‘islog’))||false,//显示登录状态,是否登录
accout:JSON.parse(sessionStorage.getItem(‘islog’))||’’,//账号
pass:’’,//密码。暂时不用
logsuccess:false//暂时没用
},
mutations:{
//使登陆状态变为登录,即为true
logstatechange(state){
state.islog=true;
sessionStorage.setItem(‘islog’,JSON.stringify(state.islog))

},
//记录账号
logaccout(state,acc){
  state.accout=acc;
  sessionStorage.setItem('account',JSON.stringify(state.accout))
},
其实就是在我改变vuex中定义的变量时,将他存到内存里,如果vuex数据刷新没了之后还可从内存中拿回来继续用,我测试的话这个方法是真实可行的,我打算后面就用这个方法了,但是有什么缺点我就不知道额了。要是不行我后面再换。

杨昊

数据
使用数据:(日期,时间,开盘价,最高价,最低价,收盘价,成交量,成交额)
创新实训 day09_第2张图片
读取csv文件

在这里插入图片描述
创新实训 day09_第3张图片
切分数据
创新实训 day09_第4张图片
创新实训 day09_第5张图片

郭培垣

通过Springboot+jpa+mysql+thymeleaf实现登录注册,先创建一个项目,组件选择jpa、mysql、thjson使用ymeleaf、jdbc和web,数据库中存放了id、username和userpassword。配置pom,连接数据库,按照数据库数据编写是实体类,编写控制器,result类返回json使用,service服务层接口,编写实现类。

你可能感兴趣的:(vue,java,mvvm)