实习模块vue+java小型全栈开发(三)

实习模块vue+java小型全栈开发(三)

--dx

背景

首先,先给自己一个答案:这篇博客我定义为(三),因为之前的两个模块页面,内容都是一样的,但是被改了几次需求,就一直拖着没有上传。

今天是真正意义上的全栈开发,用的都是当前市面上的最新的框架前端是vuejs,后端springBoot全家桶,知识点很全,而我正好勉强的把前端知识赶完,然后进行的这次模块开发,并且这次模块开发给了我很大的惊喜。

全栈果然很神奇。

模块简介:点击考勤之后,调到一个页面,完成这个页面的所用功能。

完成之后的页面:我将页面分成了两部分(头部分和panel部分,使用了vux插件)

心得与总结

1.项目配置文件:第一次开发的时候开两个服务端口,一个8081,一个8085,前端8085端口向后端Java8081端口请求数据。当然,配置文件被封装过,我只需要拿封装过的js进行配置调用。这是我开发路的一个里程碑,实现了1的突破。

2.vux插件的使用:上一次的去哪儿文件里面写了一个swiper的插件的使用,轮播图。当时写得时候跟着视频觉得插件好简单用啊,今天却是栽了一个大跟头。插件看来看去,就是不知道怎么用,摸索了半天终于悟了。插件最关键的一点就是父组件给子组件传递数据,这些数据决定了插件的使用程度。就比如这个panel插件

官方文档给了四个属性,三个绑定方法:

这属于参数比较少的类型了,我运用了三个属性,一个事件,进行了列表的循环展示和获取更多的这两项功能,最后感慨一下,一定要学好原生js和vue原理啊,期待自己写组件的一天。

3.代码格式化的问题:这个代码格式化的问题,说起来真的是心酸,上次自己写得去哪儿项目,弄了半天,才把格式化弄好,今天的这个项目,顶着104的代码格式错误写,还好最后问老师把格式化的问题解决了,也学会了怎么配置eslint的使用已经npm run lint这个命令的使用,吃一堑长一智。

额...好像没了,后台没什么好说的了(会在编号为一,二的模块开发中写自己感悟),毕竟写了那么久了,Controller+Service+Repository+model,四个类就搞定了,还只有一个api.

好了,分享结束,好像也只有我一个人能够看懂,,。

原文地址:https://www.cnblogs.com/xzmxddx/p/9126381.html

时间: 2024-08-11 18:37:43

实习模块vue+java小型全栈开发(三)的相关文章

Python 全栈开发三 python基础 条件与循环

一. 条件语句 python条件语句是根据一条或多条语句的执行结果的真假(True Or False)来决定代码块的执行. 而执行内容可以多行,以缩进来区分表示同一范围. 1.Python判断条件真假的形式: 真 :  True, 非零,非空(即列表非空),非假等等 假:False, 0,空列表,空字典,空集合,非真等等 2.常见的判断条件: if 语句的判断条件可以用>(大于).<(小于).==(等于).>=(大于等于).<=(小于等于)来表示其关系. 当判断条件为多个值时,可以

Python 全栈开发【第一篇】:目录

Python 全栈开发[第0篇]:目录 第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基础语法入门 Python 全栈开发[第三篇]:数据类型.字符编码.文件操作 第二阶段:函数编程&常用标准库 Python 全栈开发[第四篇]:函数.递归.生成器.迭代器 Pyhton 全栈开发[第五篇]:常用模块学习 第三阶段:面向对象编程&网络编程基础 Python 全栈开发[第六篇]:面向对象

spring boot + vue + element-ui全栈开发入门——开篇

最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程度体现了做项目时的生产力.生产力低了,项目的开发成本就高.反之,生产力高,则成本低.笔者写本系列的目的是让使用“前后端不分离”的老技术的开发者做一个入门级的过度.因为目前流行的“前后端分离”技术足够简单,足够方便,足够易学,也足够完善. 项目所使用的前端技术是:element-ui,文档地址是:ht

spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

 前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来.这两个项目在2014春季开源. 目前它已成为开源开发者.初创企业和老牌公司常用的开发工具. 看看谁在使用Electron

Vue+Node+MongoDB高级全栈开发

第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用 Git 仓库直接往线上服务器部署以及 Nginx 端口映射解析特定域名的实现流程,最终准备好本地线上和外部业务环境为开发...1-1 导学1-2 课程简介1-3 申请认证公众服务号与小程序1-4 选购域名与备案解析域名1-5 选购配置服务器1-

2018最新Vue全家桶+SSR+Koa2全栈开发美团网

第1章 课程导学这门课主讲以Vue SSR+Koa2全栈技术为目标,最终实现美团网项目.本章节旨在告诉大家我们会用到哪些技能.教学方法.课程内容分布.学习方法等.备注:我们会涉及Vue2.5.Nuxt.Koa2.element-ui.Mongodb等1-1 课程导学 第2章 Vue基础知识整个SSR部分都是用的Vue框架,需要给初级用户讲解Vue的基础语法,不会让他们在学习实战的时候感到迷茫,这个章节会通过vue-cli搭建一个简单的demo,让大家快速的掌握Vue的基础应用,即使他没有学习过.

Flask Vue.js全栈开发

Flask Vue.js全栈开发 1. Flask Vue.js全栈开发教程系列 Flask Vue.js全栈开发|第1章:创建第一个Flask RESTful API Flask Vue.js全栈开发|第2章:Vue.js通过axios访问Flask RESTful API Flask Vue.js全栈开发|第3章:Flask设计User用户相关API Flask Vue.js全栈开发|第4章:Vue.js调用API实现用户注册/登录/退出 Flask Vue.js全栈开发|第5章:个人主页与

前端工程师晋升课程 Vue全家桶+SSR+Koa2全栈开发美团网

第1章 课程导学这门课主讲以Vue SSR+Koa2全栈技术为目标,最终实现美团网项目.本章节旨在告诉大家我们会用到哪些技能.教学方法.课程内容分布.学习方法等.备注:我们会涉及Vue2.5.Nuxt.Koa2.element-ui.Mongodb等 1-1 课程导学第2章 Vue基础知识整个SSR部分都是用的Vue框架,需要给初级用户讲解Vue的基础语法,不会让他们在学习实战的时候感到迷茫,这个章节会通过vue-cli搭建一个简单的demo,让大家快速的掌握Vue的基础应用,即使他没有学习过.

Vue全家桶+SSR+Koa2全栈开发美团网

第1章 课程导学这门课主讲以Vue SSR+Koa2全栈技术为目标,最终实现美团网项目.本章节旨在告诉大家我们会用到哪些技能.教学方法.课程内容分布.学习方法等.备注:我们会涉及Vue2.5.Nuxt.Koa2.element-ui.Mongodb等 第2章 Vue基础知识整个SSR部分都是用的Vue框架,需要给初级用户讲解Vue的基础语法,不会让他们在学习实战的时候感到迷茫,这个章节会通过vue-cli搭建一个简单的demo,让大家快速的掌握Vue的基础应用,即使他没有学习过. 第3章 Koa