发布于

前端开发

 前端开发环境

环境搭建

知识储备

  • velocity——java后端模板
  • fis3——百度开发的，前端工程化工具
  • jello——基于Java的前端集成解决方案，就当他是fis3好了
  • jQuery——js基础api
  • bootstrap——主题+组件、帮助迅速开发样式
  • less——css预处理语言

前端目录介绍

目录/文件名 作用
page 所有页面入口模板
resource 运营资源目录，本地测试用
static 静态、公用资源目录
test 本地测试用，模拟后端数据（静态 + ajax接口）
widget 页面片断，用于组成页面的组件 + 模块
.gitignore git忽略文件配置，如果用的svn此文件没用
fis-conf.js fis3配置文件，js/css/图片优化打包、服务器部署等
README.md 说明文档，可能也没写什么有用的东西
server.conf 本地测试用，路由配置

一、fis3环境配置

参考：http://fis.baidu.com/fis3/docs/beginning/install.html

  1. 安装node（包含npm），版本号：4.x（5.x不兼容）
    http://nodejs.cn/
  2. 安装fis3
    1. npm install -g fis3

    如果国外源安装不上，试试淘宝的源

    1. npm install -g fis3 --disturl=http://registry.npm.taobao.org/mirrors/node --registry=http://registry.npm.taobao.org
  3. 执行 fis3 -v 看看是否安装成功，如果你看到一个老漂亮的FIS你就成功了
  4. 安装项目fis插件
    1. npm install -g fis3-jello@1.0.8
    2. npm install -g fis3-server-jello
    3. npm install -g fis-parser-less@0.1.3
    4. npm install -g fis3-hook-amd@0.1.14
    5. npm install -g fis3-parser-reactjs@1.0.0
    6. npm install -g fis3-preprocessor-extlang@1.1.7
    7. npm install -g fis-parser-babel-5.x
    • fis3-parser-less是网友贡献的插件，有bug，不要安装

二、本地调试

参考：https://github.com/fex-team/jello

  1. 命令行cd到前端开发目录web
  2. 启动fis3本地服务器，使用8081端口
    1. fis3 server start -p 8081 --type jello
  3. 执行发布命令
    1. fis3 release -w
  4. 打开http://127.0.0.1:8081

三、与后端联调开发（已经不用这种方式了）

  1. 配置前端开发目录web根目录下的fis-conf.js文件，找到以下一坨配置代码
    1. fis.media('rd').match('*', {
    2. deploy: fis.plugin('http-push', {
    3. receiver: 'http://127.0.0.1:8080/upload',
    4. // receiver: 'http://172.20.198.179:8080/upload',
    5. to: '/Users/erin/new-work/laosiji/chosengamer/backend/spring-mongo-demo/target/demo-1.0.0' // 注意这个是指的是测试机器的路径，而非本地机器
    6. })
    7. });

    receiver改成 http://<后端局域网ip>:8080/upload
    to改成后端 spring-mongo-demo/target/demo-1.0.0 目录，后端是window机器记得加盘符

  2. 在确保后端项目启动的前提下，在web目录下执行命令行
    1. fis3 release rd
  3. 访问http://<后端局域网ip>:8080/

其他——前端推荐使用sublime编辑器

  1. 安装sublime3
  2. 从菜单 View – Show Console 或者 ctrl + ~ 快捷键，调出console。将以下 Python 代码粘贴进去并 enter 执行
    1. import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
  3. ctrl + shift + p 并在输入框输入 ip （install package的缩写）， enter 安装
  4. 在输入框输入 velocity ， enter 安装默认插件，用于高亮.vm文件
  5. 重复步骤3，在输入框输入 less ， enter 安装默认插件，用于高亮.less文件

前端页面开发流程

本文以一个todo-list页面为?：
页面url为/demo/todo-list，实现对list增删改操作，布局使用老司机的通用页头页尾。

1. 创建本地路由

修改根目录下的server.conf文件，增加路由条目

  1. rewrite ^\/demo\/todo-list$ /page/demo/todo-list

2. 创建页面vm

根据路由配置，在/page/demo目录下创建todo-list.vm