本文参考git教程:http://www.runoob.com/git/git-tutorial.html

由于教程写的比较清楚,本文只针对初次使用git,并希望使用git能同步并参与项目的开发者.

git安装配置

git和mac只需要在官网:https://git-scm.com/上下载,安装.

git配置

  • 配置个人的用户名称和电子邮件地址:
$ git config --global user.name "runoob"
$ git config --global user.email test@runoob.com

如果用了 --global 选项,那么更改的配置文件就是位于你用户主目录下的那个,以后你所有的项目都会默认使用这里配置的用户信息。
如果要在某个特定的项目中使用其他名字或者电邮,只要去掉 --global 选项重新配置即可,新的设定保存在当前项目的 .git/config 文件里。

用户名和电子邮件地址是对项目进行git操作的凭证,已使用coding为例,这个用户名和电子邮件地址和你的coding的注册邮箱和用户名称一致.如果你有该项目的权限,就可以对该项目进行git操作.

下面说明一下,如何从仓库同步文件:

新建仓库

git init

  • Git 使用 git init 命令来初始化一个 Git 仓库,Git 的很多命令都需要在 Git 的仓库中运行,所以 git init 是使用 Git 的第一个命令。
  • 在执行完成 git init 命令后,Git 仓库会生成一个 .git 目录,该目录包含了资源的所有元数据,其他的项目目录保持不变(不像 SVN 会在每个子目录生成 .svn 目录,Git 只在仓库的根目录生成 .git 目录)。

使用方法

使用当前目录作为Git仓库,我们只需使它初始化。

git init

该命令执行完后会在当前目录生成一个 .git 目录。
使用我们指定目录作为Git仓库。

$ git add *.c
$ git add README
$ git commit -m '初始化项目版本'

以上命令将目录下以 .c 结尾及 README 文件提交到仓库中。

git clone

我们使用 git clone 从现有 Git 仓库中拷贝项目(类似 svn checkout)。

克隆仓库的命令格式为(拷贝到当前文件夹):

git clone <repo>

如果我们需要克隆到指定的目录,可以使用以下命令格式:

git clone <repo> <directory>

参数说明:
- repo:Git 仓库。
- directory:本地目录。
-
比如要克隆coding代码仓库里面的项目(ssh地址可以在项目->代码->HTTPS SSH 方式访问仓库 中复制):

git clone  https://git.coding.net/xxx/xxx.git

几种效果等价的git clone写法:

git clone http://github.com/CosmosHua/locate new
git clone http://github.com/CosmosHua/locate.git new
git clone git://github.com/CosmosHua/locate new
git clone git://github.com/CosmosHua/locate.git new

克隆下来之后就可以使用git命令对代码进行操作啦,这边就不仔细说git的基本操作了,具体可以参考:http://www.runoob.com/git/git-basic-operations.html

唯一要注意的是,你在git push的时候,第一次会让你输入用户名密码,输入对了才可以哦.如果你是coding项目中的组员,是有权限进行push和pull的.

ps:强烈建议使用vscode进行前端代码的编写,自带的git工具非常好用,只需要点点按钮就可以进行git操作,具体用法参见:https://www.cnblogs.com/xuanhun/p/6019038.html?utm_source=tuicool&utm_medium=referral

Version 5.0.0 of Angular Now Available

Angular版本5.0.0现在可用

We are pleased to announce version 5.0.0 of Angular, pentagonal-donut. This is a major release containing new features and bugfixes. This release continues our focus on making Angular smaller, faster, and easier to use.

我们很高兴地宣布Angular的五角形甜甜圈5.0.0版本。这是一个包含新功能和错误修正的主要版本。此版本继续关注使Angular更小,更快,更易于使用。

Here’s a breakdown of some of the biggest changes in v5. For the full list, please see the changelog.

以下是v5中的一些最大变化的细节。有关完整列表,请参阅更新日志。

Build Optimizer

构建优化器

As of 5.0.0, production builds created with the CLI will now apply the build optimizer by default.

从5.0.0开始,使用CLI创建的生产版本现在将是默认的构建优化器。

The build optimizer is a tool included in our CLI for making your bundles smaller using our semantic understanding of your Angular application.

构建优化器是一个包含在我们的CLI中的工具,通过对您的Angular应用程序的语义理解,使您的bundle变小。

The build optimizer has two main jobs. First, we are able to mark parts of your application as pure, this improves the tree shaking provided by the existing tools, removing additional parts of your application that aren’t needed.

构建优化器有两个主要的工作。首先,我们可以将应用程序的某些部分标记为纯粹的,这样可以改善现有工具提供的树震动(译者注:就是消除无用代码,同摇树优化),从而删除不需要的应用程序的其他部分。

The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.

构建优化器所做的第二件事是从应用程序的运行时代码中删除Angular装饰器。 装饰器由编译器使用,在运行时不需要,可以删除。 这些作业中的每一个都会减少JavaScript包的大小,并为用户提高应用程序的启动速度。

Compiler Improvements

编译器改进

We’ve improved the Angular compiler to support incremental compilation. This provides faster rebuilds, especially for production builds and builds with AOT. We’ve also added features to our Decorators and made it possible to ship smaller bundles by removing whitespace.

我们改进了Angular编译器来支持渐进式编译。这提供了更快的重建,特别是对于生产构建和使用AOT构建(译者注:Ahead-of-Time Complication,预编译)。 我们还为装饰器添加了功能,并通过删除空格来发送更小的包。

TypeScript Transforms

TypeScript转换

Under the hood, the Angular compiler now operates as a TypeScript transform, making incremental rebuilds dramatically faster. TypeScript transforms were a new feature introduced as part of TypeScript 2.3 that allows us to hook into the standard TypeScript compilation pipeline.

在引擎盖下,Angular编译器现在作为TypeScript转换运行,使增量重建速度显着加快。 TypeScript变换是作为TypeScript2.3的一部分引入的一项新功能,它允许我们挂接到标准的TypeScript编译管道。

You can take advantage of this by running ng serve with the AOT flag turned on.

您可以通过在打开AOT标志的情况下运行ng服务来利用此优势。

ng serve --aot

We recommend everyone give this a try. This will become the default in a future release of the CLI. There are some known speed issues with projects with more than a thousand components. We want to be sure projects of all sizes will experience these improvements.

我们建议大家试试这个。这将成为CLI未来版本的默认设置。有超过一千个组件的项目有一些已知的速度问题。 我们希望确保各种规模的项目都能体验到这些改进。

When performing an incremental AOT build of https://angular.io, the new compiler pipeline saves 95% of the build time (from more than 40 seconds to less than 2 seconds on our development machines).

当执行https://angular.io的增量式AOT构建时,新的编译器管道可以节省95%的构建时间(从开发机器上的40秒到不到2秒)。

Our goal was to make AOT compilation fast enough so that developers could use it for development, eliminating the differences that developers sometimes run into when trying to go to production for the first time. The team has hit its 2 second incremental AOT rebuild performance targets, and will be turning AOT on by default in a future release of the CLI.

我们的目标是使AOT编译速度足够快,以便开发人员可以将其用于开发,消除开发人员第一次尝试投入生产时所遇到的差异。该团队已经达到了2秒的增量AOT重建性能目标,并将在未来的CLI版本中默认开启AOT。

As part of this transition to transforms, we don’t need a genDir anymore, and outDir has changed: we are now always emitting generated files for packages in node_modules.

作为转换过程的一部分,我们不再需要genDir了,而outDir已经改变了:现在我们总是发出node_modules中包的生成文件。

Preserve Whitespace

保留空白

Historically tabs, newlines, and spaces in your templates have been faithfully recreated and included in your build by the compiler. You can now choose whether or not to preserve whitespace coming from your components and your application.

从历史上看,模板中的制表符,换行符和空格已被编译器忠实地重新创建并包含在构建中。 您现在可以选择是否保留来自组件和应用程序的空白。

You can specify this as part of each component’s decorator, where it currently defaults to true.

您可以将其指定为每个组件的装饰器的一部分,其中当前默认为true。

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

Or you can specify it application wide in your tsconfig.json, where it also currently defaults to true.

或者你可以在你的tsconfig.json中指定它的应用程序范围,它当前也默认为true。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

In general, the component-level specifications override application-wide specifications. In the future the team hopes to default to false to save space for developers by default. Don’t worry about your ,<pre>tags, these are handled intelligently.

一般来说,组件级别的规范覆盖了应用程序范围的规范。在未来,团队希望默认为false,以节省开发者的空间。 不要担心你的<pre>标签,这些标签是智能处理的。

Read more about preserveWhitespaces on our docs site.

在我们的文档站点阅读更多有关preserveWhitespaces的信息。

Improved Decorator Support

改进的装饰器支持

We now support expression lowering in decorators for lambdas and the value of useValue, useFactory and data in object literals. This allows you to use values that can only be calculated at runtime in decorators for expressions that are lowered.

我们现在支持lambda表达式的装饰器中的表达式降低以及对象文本中useValue,useFactory和数据的值。这使您可以在降低表达式的装饰器中使用只能在运行时计算的值。

You can now use a lambda instead of a named function, meaning you can execute code without affecting your d.ts or your public API.

您现在可以使用lambda代替命名函数,这意味着您可以执行代码而不会影响d.ts或公共API。

Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

We will also lower expressions as part of useValue.

我们也将表达式作为useValue的一部分。

Component({
  provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}

Internationalized Number, Date, and Currency Pipes

国际化的号码,日期和货币管道

We have built new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills.

我们已经建立了新的号码,日期和货币管道,增加了浏览器的标准化,并消除了对国际化的填充需求。

In Angular we have relied on the browser to provide number, date, and currency formatting using browser i18n APIs. This resulted in the need for a polyfill for most developers, meant that users were seeing inconsistent results across browsers, and we received comments that common formats (such as the currency pipe) didn’t match developer expectations out of the box.

在Angular中,我们依靠浏览器的i18n API提供数字,日期和货币格式化。 这导致了大多数开发人员需要使用polyfill,这意味着用户在浏览器中看到的结果不一致,并且我们收到了常见格式(如货币管道)不符合开箱即用的预期的评论。

In 5.0.0 we’ve updated the pipes to use our own implementation, relying on the CLDR to provide extensive locale support and configurations for any locales you want to support. We’ve produced a document comparing the pipe behavior between v4 and v5.

在5.0.0版本中,我们更新了管道以使用我们自己的实现,依靠CLDR为您想要支持的任何语言环境提供大量的语言环境支持和配置。我们已经制作了一个比较v4和v5之间管道行为的文档

If you aren’t ready for the new pipes, you can import DeprecatedI18NPipesModule to get access to the old behavior.

如果您尚未准备好新的管道,则可以导入DeprecatedI18NPipesModule以访问旧的行为。

Read more about the changes to our i18n pipes in the changelog

阅读更多关于更改日志中对i18n管道的更改

Replace the ReflectiveInjector with StaticInjector

用StaticInjector替换ReflectiveInjector

In order to remove even more polyfills, we’ve replaced the ReflectiveInjector with the StaticInjector. This injector no longer requires the Reflect polyfill, reducing application size for most developers.

为了去除更多的填充物,我们用StaticInjector替换了ReflectiveInjector。这种注射器不再需要反射填充,从而减少了大多数开发人员的应用规模。

Before

ReflectiveInjector.resolveAndCreate(providers);

之前
ReflectiveInjector.resolveAndCreate(提供商);

After

Injector.create(providers);

Injector.create(提供商);

Zone speed improvements

区域速度改进

We’ve made zones faster by default, and we’ve made it possible to bypass zones entirely for performance focused applications.

默认情况下,我们已经使区域更快,而且我们已经可以完全绕过专注于性能的应用程序。

To bypass zones, bootstrap your application with ‘noop’ as your ngZone.

要绕过区域,请使用'noop'作为您的ngZone引导您的应用程序。

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

For a full example, take a look the example ng-component-state project.

有关完整的示例,请看一下ng-component-state项目的示例

exportAs

We’ve added support for multiple names for your components / directives. This can be very useful for helping your users to migrate without breaking changes. By exporting a directive with multiple names, you can make new names available in the Angular microsyntax without breaking existing code. This has been used as a part of the Angular Material project in its prefix migration, and can help other component authors as well.

我们已经添加了对组件/指令的多个名称的支持。这对于帮助用户迁移而不会中断更改非常有用。 通过导出多个名称的指令,您可以在Angular microsyntax中创建新的名称,而不会破坏现有的代码。这已经在其前缀迁移中用作为Angular Material项目的一部分,并且可以帮助其他组件作者。

Example

@Component({
  moduleId: module.id,
  selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
  exportAs: 'matButton, matAnchor',
  .
  .
  .
}

HttpClient

In version 4.3 we shipped HttpClient in @angular/common as a smaller, easier, and more powerful way to make web requests in Angular. The new HttpClient has gotten some great praise from developers, so we’re now recommending HttpClient for all applications, and deprecating the previous @angular/http library.

在4.3版本中,我们以@ angular / common的形式发布了HttpClient,这是一个更小,更简单,更强大的在Angular中进行Web请求的方式。新的HttpClient得到了开发人员的一些好评,所以我们现在推荐HttpClient用于所有的应用程序,并且弃用以前的@ angular / http库。

To update to HttpClient, you’ll need to replace HttpModule with HttpClientModule from @angular/common/http in each of your modules, inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.

要更新到HttpClient,需要在每个模块中使用@ angular / common / http中的HttpClientModule替换HttpModule,注入HttpClient服务,并删除任何地图(res => res.json())调用不再需要。

CLI v1.5

Starting with v1.5 of the Angular CLI, we have added support for Angular v5.0.0 and will generate v5 projects by default.

从Angular CLI v1.5开始,我们增加了对Angular v5.0.0的支持,默认会生成v5项目。

With this minor release we have turned on the build optimizer by default, so developers can benefit from smaller bundles.

有了这个小版本,我们默认打开了构建优化器,所以开发人员可以从更小的包中受益。

We’re also updating the way we use tsconfig.json files to follow TypeScript standards more strictly. Previously if we detected a lazy loaded route and you were manually specifying a list of files or include in your tsconfig.json, we would automatically add these routes, but we now follow the TypeScript specification and no longer do this. By default, the CLI configures TypeScript without files or include sections, so most developers won’t be affected by this.

我们也更新了我们使用tsconfig.json文件更严格地遵循TypeScript标准的方式。以前,如果我们检测到延迟加载的路由,并且手动指定了文件列表或包含在您的tsconfig.json中,我们将自动添加这些路由,但是现在我们遵循TypeScript规范,不再执行此操作。默认情况下,CLI配置没有文件或包含部分的TypeScript,因此大多数开发人员不会受此影响。

Angular Forms adds updateOn Blur / Submit

Angular Forms添加updateOn模糊/提交

You can now run validation and value updates on blur or on submit, instead of on every input event.

现在,您可以在“blur”或“submit”上运行验证和值更新,而不是在每个输入事件上运行验证和值更新。

Forms are a very important part of many applications, and if you have any sort of server side validation, or any heavier processes triggered by validation or value changes that you want to run less often, you can now take control of the validation and value change timing at the control level, or specify it for an entire form.

表单是许多应用程序中非常重要的一部分,如果您有任何类型的服务器端验证,或者您希望运行较少的验证或值更改触发的任何较重的流程,则您现在可以控制验证和值更改在控制层面进行计时,或将其指定为整个表格。

Additionally, you can now specify asyncValidators directly in the options object, rather than specifying it as the third parameter.

另外,你现在可以直接在options对象中指定asyncValidators,而不是将它指定为第三个参数。

Template Driven Forms

模板驱动的形式

Before

<input name="firstName" ngModel>

After

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

or

<form [ngFormOptions]="{updateOn: 'submit'}">

Reactive Forms
响应式表格

Before

new FormGroup(value);
new FormControl(value, [], [myValidator])

After

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

RxJS 5.5

We’ve updated our use of RxJS to 5.5.2 or later. This recent release of RxJS fully empowers developers to avoid the side effects of the previous import mechanism with a new way of using RxJS called “lettable operators”. These new operators eliminate the side effects and the code splitting / tree shaking problems that existed with the previous ‘patch’ method of importing operators.

我们已经将RxJS的使用更新到5.5.2或更高版本。 RxJS最近发布的这个版本完全支持开发人员通过使用RxJS的一种称为“可发布的操作符”的新方法来避免以前导入机制的副作用。这些新的操作符消除了前面导入操作符的“补丁”方法中存在的副作用和代码分割/树抖动问题。

Instead of

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

You can now


import { Observable } from 'rxjs/Observable'; import { map, filter } from 'rxjs/operators'; names = allUserData.pipe( map(user => user.name), filter(name => name), );

Additionally, RxJS now distributes a version using ECMAScript Modules. The new Angular CLI will pull in this version by default, saving considerably on bundle size. But if you’re not using the Angular CLI, you should still point to the new distribution. Documentation can be found in the Build and Treeshaking section of the lettable operators documentation.

另外,RxJS现在使用ECMAScript模块分发一个版本。新的Angular CLI将默认使用这个版本,大大节省了包的大小。但是如果你不使用Angular CLI,你仍然应该指向新的发行版。文档可以在可运算符文档的Build和Treeshaking部分找到。

New Router Lifecycle Events

新的路由器生命周期事件

We’ve added new lifecycle events to the router, allowing developers to track the cycle of the router from the start of running guards through to completion of activation. These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and/or resolvers.

我们已经向路由器添加了新的生命周期事件,允许开发人员从运行守卫的开始到完成激活,跟踪路由器的周期。这些事件可以用于诸如在子组件更新时在特定路由器插座上显示微调器或者衡量守卫/解析器的性能表现。

The new events (in sequence) are GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd. An example of using these events to start/stop a spinner might look like this:

新的事件(按顺序)是GuardsCheckStart,ChildActivationStart,ActivationStart,GuardsCheckEnd,ResolveStart,ResolveEnd,ActivationEnd,ChildActivationEnd。使用这些事件来启动/停止微调器的例子可能如下所示:

class MyComponent {
  constructor(public router: Router, spinner: Spinner) {
    router.events.subscribe(e => {
      if (e instanceof ChildActivationStart) {
        spinner.start(e.route);
      } else if (e instanceof ChildActivationEnd) {
        spinner.end(e.route);
      }
    });
  }
}

How do I update?
We built the Angular Update Guide to help guide you through the process and to learn about any changes you’ll want to make in your code before you start the update process, the steps to update your app, and information on preparing for future versions of Angular.

我们制作了Angular Update Guide,帮助指导您完成整个过程,并在开始更新过程,更新应用程序的步骤和准备未来版本的信息之前了解您的代码中所做的任何更改角。

We’ve removed many previously deprecated APIs (like OpaqueToken ) and released several new deprecations. This guide will walk you through the changes you’ll need to make to your application.

我们已经删除了许多先前弃用的API(如OpaqueToken),并发布了几个新的弃用。本指南将引导您完成您需要对应用程序进行的更改。

Known Issues

已知的问题

There are known issues with production build source maps. Some source maps may result in undefined sources for errors.

有生产建设源地图已知的问题。某些源地图可能会导致错误的未定义来源。
https://github.com/angular/angular/issues/19840

VSCODE介绍

我为什么使用VSCODE

我曾经试过sublime、atom、vscode等相对轻量级的开发工具,sublime和atom是比较老牌的前端IDE。
- sublime的体验还是可以的,速度很快,但是现在好像不那么流行了,可能是因为sublime并没有开源,插件数据其实也并不是很多。我用过漫长一段时间的sublime,没觉得有什么不好,当然了,C#也没什么不好但是依然没有java流行,是吧。
- 关于ATOM,atom给我的感觉就是卡,atom其实就是一个javasricpt开发的IDE,运行在V8引擎上面,准确点说是用coffeescript,但是不知道为什么,就是卡卡的,MAC上可能还好点,windows上面就是卡。但是atom的插件非常丰富,基本上你能想到的都有。
- VSCODE,后起之秀,2016年才慢慢风靡起来的前端IDE,微软荣誉出品,一改微软封闭的作风,并且把微软做牛逼IDE的传统继承下来,丝般顺滑,只要内存够大,各种爽翻天。到目前为止,插件也非常丰富,已经可以说是前端IDE的首选了。本身是用typecript写的,对typescript的支持那是一级棒。可以说如果你要使用typescript开发,那vscode是首选。如果你使用angularJS,那么vscode更是首选。

VSCODE插件介绍

  • HTML Snippets
    超级实用且初级的 H5代码片段以及提示

  • HTML CSS Support
    让 html 标签上写class 智能提示当前项目所支持的样式

  • jQuery Code Snippets
    jquery提示及代码片段

  • vscode-icon
    让 vscode 资源树目录加上图标,强迫症患者必备

  • Path Intellisense
    自动路劲补全,默认不带这个功能的

  • Npm Intellisense
    自动提示引用包名称

  • Document this
    注释帮手

  • Project Manager
    多项目快速切换

  • beautify
    代码格式化插件

  • fileheader
    顶部注释模板

其他的美化相关,可以搜索Material、Dracula、One Dark Pro或者直接搜索theme会有很多好看的主题。

后面有不错的插件再来补充。

环境搭建

PS:环境搭建最佳实践,angularJS官方文档地址:https://www.angular.cn/guide/quickstart

搭建环境说明

简介:angularJS为谷歌开发维护的开源的前端框架,AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。我们现在用的为angularJS2.0之后的版本,2.0之后的版本完全不兼容以前的版本,可以基于现阶段最流行的npm开发模式,为现在最流行的前端框架之一。

搭建前提条件:

开始搭建:

  • 全局安装Angular CLI
npm install -g @angular/cli
  • 可以设置npm模式为cnpm,由于一些不可说的原因,某些包是用npm无法安装,因此建议是用cnpm ,命令如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 设置ng的安装包模式为cnpm,本质上ng的安装包模式默认为npm,angluar可以通过命令设置ng的安装包命令为cnpm或者yarn,本文所有的文章现阶段都是用cnpm,因此是用一下命令进行设置:
ng set --global packageManager=cnpm
  • 创建新项目:打开终端窗口,在windows下,在指定文件夹中按住shift再右击菜单,可以在当前窗口打开dos窗口。使用以下命令创建新项目,命令如下:
ng new mysite
  • 等待项目创建完成,时间可能比较长,请耐心等待。
  • 安装完成之后在命令提示符窗口执行:
cd mysite
  • 进入mysite文件夹中,然后执行:
ng serve --open
  • --open为可选参数,表示直接打开浏览器,angular应用启动默认地址为:http://localhost:4200,此刻,你的第一个程序就完成了,效果如下:
  • image

FF14建站进展 - 2017年9月29日

从接手网站前端开发到现在已经接近1个月的时间,完成了以下工作。
  • 页面整体布局及架构部分
  • 文章页列表级明细页
  • 副本列表绑定
剩余的工作大概分为以下几个部分
  • 副本明细
  • 狩猎、采集、制造业相关数据绑定及展现
  • 物品展示列表及插件
  • 其他综合信息的展现

由于工作比较忙,新网站的升级进展稍稍落后于游戏更新。国庆期间,计划将beta版本的4.0攻略站展现给大家,尽请期待。

最后:请大家多多关注现有FF14攻略站,相关链接:     http://www.ffxiv.cn

 

to be continue...

经过2天的折腾,也算是开博完成,使用centOS+lnmp+wordpress建站,虽然踩了一些坑,但是也算是没走太多弯路。

此博客将记录我在前端平台搭建,包括前后端分离、前端框架和后台服务搭建的心路历程及踩坑填坑的经验。

稍微介绍下我自己,IT男,18(????)岁,有个4岁的小儿子,长期从事电力自动化为祖国的工业4.0、中国制造2025愿景而奋斗中(手动滑稽)。

本人现在除了工作,业务时间参与FF14网站的开发建设,https://www.ffxiv.cn,此网站由小伙伴们自发维护,感谢素素,小牛给我个这个机会参与其中。其4.0版本正在制作中。

4.0版本前端使用ng4.0技术栈,严格的前后端分离策略,后面会将建站的经验记录下来,供学习交流用。

继续写我的前端.....

每天都要进步,加油!