前端方案

angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合

今年转向做前端开发,主要是做angularjs开发,期间接触了nodejs平台,从此一发不可收拾。

npm丰富的插件库,express 开发框架, grunt, gulp构建工具,karma测试管理工具,jasmine单元测试框架,ng-scenario e2e测试框架(以前不知道javascript还能做端对端测试的),coffeescript, less, sass等前端技术,没想到前端是可以这样玩的。

根据这段时间的学习,我将各种相关的技术做一个前端方案的整合,主题为博客网站,命名为SingleUI,功能还没完全做好,但会继续更新。有兴趣的同学可以根据自己的需求做调整。项目地址

--------------华丽分界线------------

环境安装部署

1. nodejs: v0.12.2 以上

2. bower: npm install bower -g

3. gulp:npm install gulp -g

安装包: 进入webui目录下, 执行命令 npm install prebuild 安装相关包 (若相关的包安装失败或执行命令报错,请将它删掉再安装)

命令: 请查看package.json的scripts和build目录下相关任务配置

项目架构

build: 相关task配置,config目录下是单个配置,task目录下是组合配置

dist: 源代码编译后的目录,connect服务器指向该目录

lib: 第三方插件库

mocks: 本地模拟数据,routes为后端api接口

node_modules: npm依赖包

src: 源代码,架构分层根据功能模块划分,每个目录下有对应的js, spec.js, scenario.js, scss, html文件

test: karma 单元测试和e2e测试配置文件

test_out: 单元测试和e2e测试的代码覆盖率报表,测试结果报表

vendor: bower 依赖的包

bower.json: bower 配置文件

gulpfile.js: gulp 配置文件

middleware.js: 中间组件

package.json: npm配置文件

前后端分离

本项目采用前后端分离开发的方式,即开发前约定数据格式,就各干各的,那么对于前端来说,发出http请求,获取数据,应该如何做?

目前想到有两种:

1. 通过express或其它服务器作为中间组件拦截。

2. angularjs可以通过MockJS拦截。

本项目用的是第一种,使用gulp-connect启动服务器,中间组件middleware指向express,那么对应的请求就会到express,只需要写对应的API接口即可,这其实相当于写express后端。

命令

我想要的开发模式:当源文件下的文件例如scss,html,js发生改动时,会执行对应的task,并且浏览器自动刷新。

产品版本:合并压缩重命名css,js,html。

根据项目的需求,通过各种插件处理,就有了现在的解决方案。

build目录下命令,请查看具体配置。

1. gulp dev : 编译开发版本

  1)复制相关文件

  2)将app.sass编译

  3)将项目下的html模板合并成angularjs templates module

  4)inject 模板 index.html, admin/index.html, admin/login.html 外部引用css和script

2. gulp prod --env production 或 npm run publish : 编译产品版本

  1)sass编译压缩重命名

  2)js合并压缩重命名

  3)将项目下的html模板合并成angularjs templates module

  4)inject 模板 index.html, admin/index.html, admin/login.html 外部引用css和script

3. gulp : 开发模式

  1)编译开发版本

  2)启动connect服务器,指定中间件,使用本地mock数据

  3)watch 文件自动刷新

  4)karma,启动单元测试和e2e测试

4. gulp server --env production : 产品模式

  1)编译产品版本

  2)启动connect服务器,指定中间件,使用本地mock数据

5. gulp test_singleRun --env production : 产品模式,并且跑测试

  1)编译产品版本

  2)启动connect服务器,指定中间件,使用本地mock数据

  3)karma,启动单元测试和e2e测试

测试

基于karma, 单元测试使用jammine, e2e测试用 ng-scenario, 输出报表有代码覆盖率karma-coverage, 执行结果报表junit-reporter

项目文件名为xx.spec.js为单元测试,xx.scenario.js为e2e测试

UI

计划

1. 完善SingleUI

2. 对HTML, CSS, JS做强化训练,试图弥补项目经验上的差距。项目地址

时间: 2024-10-12 21:41:03

前端方案的相关文章

如何利用Boostrap做响应式设计的前端方案?

Boostrap提供了一系列的前端css和各种小物件支持,让前端设计变得轻松可以很容易支持多屏. 资源下载https://www.slidestalk.com/s/css_responsive_design 原文地址:https://www.cnblogs.com/slidestalk/p/9759618.html

web前端入门到实战:把HTML转成PDF的4个方案及实现

在本文中,我将展示如何使用 Node.js.Puppeteer.headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档. 背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容.该页面基本上是患者病例的报告和数据可视化结果,其中包含许多 SVG.另外还有一些特殊的请求来操纵布局,并对 HTML 元素进行一些重新排列.因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容. 由于这个任务比用简

互联网产品团队中Web前端工程师的重要性

国内外各大互联网公司,都有UEx/d|UCD|CDC(Customer Research & User Experience Design Center)团队. 在很多公司会认为,合格的产品经理应该具备技术能力.从另一些角度思考,是否技术人员也需要拥有产品策划能力或设计能力?技术思维与产品思维是相辅相成.缺一不可的.高超娴熟的编码技巧支撑项目快速落地.但拥有了产品的角色之后,能让我们站在更高的角度去解读产品,避免走弯路. 打住,我思考的还不是这些高大上的主题,只是实实在在的前端编码解决方案. 好

如何优雅处理前端异常?

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人. 一.为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情. 增强用户体验: 远程定位问题: 未雨绸缪,及早发现问题: 无法复线问题,尤其是移动端,机型,系统都是问题: 完善的前端方案,前端监控系统: 对于?JS?而言,我们面对的仅仅只是异常,异常的出现不会直接导致?JS?引擎崩溃,最多只会使当前执行的任务终止. 二.需要处理哪些异常? 对于前端来说,

异常监控:教你如何优雅的处理前端异常

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人. 一.为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情. 增强用户体验: 远程定位问题: 未雨绸缪,及早发现问题: 无法复线问题,尤其是移动端,机型,系统都是问题: 完善的前端方案,前端监控系统: 对于 JS 而言,我们面对的仅仅只是异常,异常的出现不会直接导致 JS 引擎崩溃,最多只会使当前执行的任务终止. 二.需要处理哪些异常? 对于前端来说,

微前端(Micro Front-end)

微前端(Micro Front-end) 这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享一下我们在使用 Angular 微前端这条路上的心得(踩过的坑)了额,希望和 Angular 社区一起成长一起进步,如果你对微前端有一定的了解并且已经在项目中尝试了可以忽略前面的章节. 什么是微前端 微前端这个词这两年很频繁的出现在大家的视野中,最早提出这个

Vue.js写一个SPA登录页面的过程

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

Access-Control-Allow-Origin 跨域问题

1.同源.同源策略(Same origin policy) 同源指的是协议,端口,域名全部相同. 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 2.跨域 Web 浏览器具有一个称为相同站点源策略的安全策略,此策略可阻止网页访问另一个域中的数据. 网站通常会让其服务器在后端请求其他站点服务器中的内容,由此避开浏览器中的

前后分离

前后分离 前后分离的总结 我们遇到了什么问题? 1.前端无法调试后端未完成的 API:如果后端同学还没有完成 API 开发,那么前端同学就不能对这个 API 进行开发.之前我们都是在代码里直接通过给变量赋假数据,又或者是在后端 Controller 里直接 return JSON 的方式来进行调试的.这样的方式很容易会出现的情况就是,每次提交 commit 都要把它删除掉,有时忘了没有删除掉,那么提交历史就会变得很脏. 2.没有自动化测试:前端对接口的调用没有做自动化的测试. 3.前端需要依赖后