• 您的位置:
  • 主页 > 工程案例 >
  • 脚手架的实训总结报告

    2020-09-08 22:44

      项目立项(可行性分析)--- 需求收集 --- 原型设计 --- 后端架构 --- 开发人员开发 迭(迭代、敏捷开发)--- 流程设计、表设计 --- 功能实现 --- 自测 ---- 测试人员测试 ---- 集成测试 --- 试运行 --- 上线后期维护

      前后端分离的开发模式:后端:postman 或 swagger 前端:mock 或 easyMock跨域问题:什么是跨域及解决方案

      一个是业务,一个是技术。医院系统和银行系统,技术是相通的,必须熟悉业务和技术。

      写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看,所以分为上下篇吧...

      下篇写完啦,感兴趣的朋友可以继续关注~ =用Vue开发仿旅游站webapp项目总结 (下)

      此文章,仅是做完项目后的个人觉得可以总结下来的操作/思路,接触vue不久的朋友应该会有收获。此项目也才是萌新做的第二个Vue项目,使用了脚手架工具( vue-cli 2.x 非 3 ),前辈老手们有时间看的话,有写得不好的地方还请多多指导!~

      在网页的head标签中增加以上代码,可以让网页的宽度自动适应手机屏幕的宽度。

      以上我设置的参数的目的是:想要一打开网页,就自动以原始比例显示,并且不允许用户修改,不允许用户缩放。

      在不同的手机浏览器上,默认的一些样式是不同统一的。我们需要把这些不同手机的初始化样式做一个统一。

      也就是有的手机屏幕分辨率比较高,如果我们在页面上写border-bottom啥的样式,会导致这些手机屏幕分辨率高的当中,1px边框显示成2px边框或3px边框等显示成多像素。

      为了解决这个1像素边框问题,我们就引入了border.css(貌似这是哪个团队提出的解决方案?忘记啦,只知道怎么用...但仍然要表示感谢。还有其他解决方案,这个就自行搜索了。)

      具体这个解决方案的用法,看过border.css代码的同志就会发现很简单:在元素上根据想要的需求加以下这些类名。

      边框也可以改颜色的,举个项目中的例子,按照这种格式去改颜色(本文例子有css代码的话基本都是stylus的写法):

      在移动端开发中,某些机型、某些浏览器上,click点击事件要延迟300ms执行。

      --save的意思是:不管在开发环境测试,还是线上跑代码,安装了的库都可以使用。并且下载好后,自动存到package.json的dependencies属性中,比如这里install的fastclick:

      然后在iconfont上选购,添加到购物车,选好后添加到自己的项目,然后下载到本地。

      然后把iconfont.css放到一个文件夹中并且在入口函数main.js处引入后就可以全局使用了。

      注意类名要加iconfont,然后这里在span里输入的代码就是你选中的图标的代码:

      在build文件夹下的f.js中配置,如下图,圈起来的是我在项目中配置的。

      比如要使用按钮区的话,就需要配置参数。根据个人在项目中的需求,可以查阅其github文档按需使用。

      比如这个test。在网速慢慢加载的时候,可能test会先在上面显示,然后等图片撑开区域的时候再跑回下面。

      给轮播swiper外面套一层类为wrapper的div,然后给div固定大小。比如在项目中这里的轮播图片的宽高比是 364:97 约等于 3.75,高度是宽度的百分之 26.6。

      其实吧。。这个vue-aowsome-swiper组件目前为止已经不存在这种抖动问题了。。

      因为有scoped作用域的原因,这个类的属性的设置是在原本的 swiper组件下,而不是在我们这里设置的swiper组件下。

      要实现溢出时产生省略号的效果,应该在定义两个样式:强制文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示为省略号效果。

      一般情况下在mounted钩子里发送ajax请求数据。想详细了解生命周期 = 我有写过一篇文章

      首先,用vue脚手架工具生成的工程里面,只有static目录(静态文件目录)下,才能被外界访问到。

      我们就把本地的一些模拟数据放在这个static目录下,自己建个文件夹存储数据。这个项目中是static/mock/index.json:

      这数据是本地的模拟数据,我们不希望到时候一起把它push到线上,可以在.gitignore里这样配置:

      这样配置还不够,目前在局部根组件中写的请求的路径是这样的,拿项目中举例:

      当我们上线这代码的时候,我们请求的网址,最好前面加上个‘api’,如下面的红框中:/api/index.json 这样子最好了。

      很好的是,恰好Vue脚手架里面有这样一个转发的代理功能。通过这个功能,就可以实现以上构想。

      config配置文件下,有个 index.js 脚本,官方给我们提供了一个 proxyTable{} 的配置项,我们可以这样配置:

      这意思是:当我们请求api的时候,依然映射到本地8080端口,然后访问任何以api为开头的url的时候,做一个路径替换,代理访问到 /static/mock 处。

      如果可以的话,最好能在局部根组件里请求一次ajax数据,然后从局部根组件里把接收到的数据分别传给各个局部的子组件,而不是每个局部的子组件都发送一次ajax请求。

      这两部会贴着,不那么好看。想要给这个输入框加个padding,留点间隙会更好。

      如果直接给input加padding左右一点的话是会撑开input框的宽度的。所以会溢出。

      这样的话,我们直接给input设置的宽高就包括了padding、border在内的宽高了。

      此时我们要修改padding的值的话,就只会在这个框内变化 不会撑开框宽高了。

      初始开发页面时,到这步,因为加了比较多字母对应的区域,页面出现了滚动条的时候:

      为了使用better-scroll库,我们仅让列表区域显示到刚进页面时能显示到的区域就行了,不需要出现滚动条。所以可以给最外层的包裹整个列表区域的框div.list 加个overflow: hidden就行了。(整个列表页指下图中的从当前城市开始到最后,城市选择和输入框是其他子组件写的了)

      接下来具体better-scroll的用法,github上其文档有说明,各人可根据具体情况查阅使用。

      在Vue的一个点击事件里,在methods定义点击方法时这个方法可以接收一个参数e,e就是我们点击到的那个事件对象。

      better-scroll这个第三方插件有个方法可以实现这个需求,思路是:

      监听所点击的字母表里字母的值letter的变化,一旦letter变了,就利用better-scroll的提供的一个接口,如下图划线的部分

      利用touchstart、touchmove、touchend事件,并给个限制(touchStatus) 只当手指在屏幕移动的时候才执行一些操作。然后用个数组letters来存放字母表的所有字母,这里的letters大概是[A,B,C...],并让页面v-for这个letters来显示相应的内容。用数组存放这些字母的原因也是为了实现这需求的主要思想:根据下标,找到对应的字母。

      接下来,先用offsetTop找到字母表中字母A距离包裹它的顶部的高度。下图红框。

      然后获取移动时手指所在的高度,此高度时针对于客户端的高度,用clientY。 touchmove事件有个事件对象,事件对象里有个touches数组,touches[0]里面就有当前手指的信息,包括clientY属性。

      我们要获取距离包裹块的高度 = 也就是clientY的高度要减去headers区和serach区的高度,这两个区高度是 79px。

      然后算我们手指移到的字母在数组中的下标 逻辑是(touchY - startY)/每个字母的高度,再把结果向下取个整。

      最后,把这个下标在letters数组中对应的字母传给需求1所在的组件利用需求1的思路就行了。(这里的传值涉及到了兄弟组件之间的传值,此时该页面比较简单不建议用vuex,可以用event bus/找同一父组件做媒介传值,具体方法百度。)

      这里为什么用updated这个钩子呢?在项目中初次渲染字母表组件alphabet.vue的时候,从它父组件City.vue传过来的值是一个空对象。当City.vue里ajax动态获取数据后,从City再传到alphabet的值让数据从初次的空对象发生改变。在数据更新完毕后,就触发了updated钩子,此时给startY赋值就是值都有,而且只会赋一次。

      通过函数节流 减少handleTouchMove()的执行频率 (因为我们手指在滑动的时候 该函数执行频率很高的)。

      如果已经正在做这件事情的时候,我呢,让它延迟16ms之后再去执行。假设在这16ms之间你又去做了手指的滚动,那么它会把上一次你要做的操作给清除掉(clearTimeout),然后重新执行你这次要做的事情 (等于以最终的手指滑动的位置为准 )。

      函数节流的方式,当一个函数执行次数很多想要减少而且减少也没影响的时候,是很有必要采用的一种方式。

      可能用户会有不小的概率关闭了本地自动存储的功能,一般我们使用localStorage的时候 都要使用 try catch 代码块,这样就算用户关闭本地自动存储功能,也不会让整个代码都不能运行,只是没了这个localStorage的功能而已。

      选择“插入一条新的数据”后,提示用户输入学号,姓名,爱好,年龄,专业,如果学号已存在,则提示名称重复,插入不成功。

      选择“删除一条数据”后,提示用户输入学号,如果数据库中存在记录,则删除,提示删除成功,如果不存在,提示该账号不存在。

      选择“查询账号”,提示用户输入账号名称,如果数据库中存在记录,则显示该记录,如果不存在,提示该账号不存在。

      1)① 新建一个数据库t_student里面包含了几个字段学号,姓名,爱好,年龄,专业

      2) 新建一个java项目src目录下新建包:mapper:用来操作数据库文件的接口与xml文件

      Pojo:用来存放学生对象的类.resources:用来存放数据库的配置文件

      6)配置数据库对应的Mapper的xml文件,删除需要对应的函数名,插入需要对应的对象地址名,返回类型.查询也需要对应的返回类型

      课上写了一个项目实训作业,历经千辛万苦终于弄完,记录一下,并且分享给大家。

      首先要保证你的webpack基础配置正确并且安装脚手架vue-cli,这个前期工作挺艰难的,我配的时候花了几个钟才配好。

      刚开始写,不知道怎么直接在这里导入资源,我上传了代码资源在上面链接中,不用积分直接下载即可,环境配好创一个项目,这个复制过去就可以运行看效果了。

      在vscode中,保存一个txt文件在项目那,然后Ctrl+Shif+p打开外部终端,输入npm run serve启动项目,如果项目启动成功,在谷歌浏览器中输入本地域名,“,可以打开谷歌浏览器的控制台,选择使用谷歌浏览器的模拟手机效果

      毕设可以参考以下这种,不过这是静态的,自己再加上一些后台的东西、数据库,就挺好的了。

      什么是SpringBoot SpringBoot是Spring项目中的一个子工程,与我们所熟知的Spring-framework 同属于spring的产品 官方介绍: Spring Boot makes it easy to create stand-alone, production-grade Spring based ...

      npm install -g vue-cli   2:选择 webpack , 记得选安装vue-router vue init webpack sell   3:如果出现indent错误,在.eslintrc.js文件里面加入 indent  :0 3:     ...

      1.SpringBoot简介 1.1什么是Spring Boot SpringBoot是一个可使用Java构建微服务的微框架。是Spring框架及其社区对“约定优先于配置”理念的最佳实践。...一般把Spring Boot称为搭建程序的

      一下。 1.技术选型 前端技术: 基础的HTML、CSS、JavaScript(基于ES6标准) JQuery Vue.js 2.0以及基于Vue的UI框架:Vuetify 前端构建工具:WebPack 前端安装包...

      前言 距离上篇文章已经好长一段时间了,这两个星期公司派驻到京东方这边出差负责入驻项目团队的前端...这次正好对以前的进行一次优化,并

      了一些经验分想给大家。如果大家有更好的想法,欢迎留言交流。 温馨提...

      ============上篇============ 1. 摘要 最近写了不少代码,review了不少代码,也做了不少重构,总之是对着烂代码工作了几周。为了抒发一下这几周里好几次到达崩溃边缘的情绪,我决定写一篇文章谈一谈烂代码的...

      一下这一年的收获与进步。 自我学习(3个月):前端基础知识,在图书馆随意借书看了好几本(无营养)。感觉CSS3+DOM操作没有太大问题了,其实还是一个未入门的小垃圾。。。感觉这是入门前端初学者的...

      ,理解了layer,才能盖好神经网络这座摩天大楼。 下图是一张关于layer的思维导图,在功力到达一定程度的时候才可练此功,到时一定会有不一样的收获。 1. Outline 此部分主要概述了...

      标签: php 2017-06-04 12:18 1265人阅读 评论(1) 收藏 举报  分类: php(22) 面试 版权声明:本文为博主原创文章,未经博主允许不得转载。 目录(?)[+] ...

      这是一部史上最全的面试题库,根据本人多年面试经验汇总,面试多了,问来问去总逃不出这些问题....对于实际问题的解决,每个公司的侧重点不一样,这里就不详谈. 看完这些题,妈妈再也不用担心我的面试了 ...

      2017 年要去学的 3 个 CSS 新属性 - 前端 - 掘金Feature Query, Grid Layout, Native Variable。前端的亲们你们颤抖了吗?... 【译】CSS 动画之工具、框架和教程 - 前端 - 掘金在这篇文章中,我们将不讨论使用 CSS ...

      第二回合(定期更新、动态、架构、云技术、算法、后端、前端、收听/收看...、影视、好歌、新奇)[含泪

      开篇词 大家好!以下是我在 2020 年 2 月 1 日至 29 日的所见、所闻、所学和所悟。 现在,我把它们安利给你们。 定期更新 原创专栏: 一文搞定 Linux 管理员手册:既简单又深刻 ...从我的英...

      ,其中包括一些组件,积累的量比较多的时候,发现零散的堆积已经不太适合进行管理了。 于是我开始思考,有什么好的办法可以比较规范地来管理这些比较零散的东西呢?如果以...

      前言:近日发现掘金上有所有的热门文章的排行榜,但是仅仅只是排行,不利于收藏查阅。于是乎我就把热门文章全部爬下来了(站长看到别打我啊

      pip install时发生raise ReadTimeoutError(self._pool, None, ‘Read timed out.‘)的解决方案

      论文阅读-How to Cut Out Expired Data with Nearly Zero Overhead for Solid-State Drives