Shang Silicon Valley Java プロジェクト <Cloud Shang Office System> 超詳細 (2) プロジェクトのフロントエンド基盤

プログラミング 2023-04-17 10:08:33 訪問数: null

1.はじめに

1. フロントエンド開発入門

アメリカ出身のフロントエンドエンジニア「Front-End-Developer」。2005年頃からフロントエンドエンジニアの正式な役割が業界に認知されるようになり、2010年にはインターネットが完全にモバイル時代に入り始め、フロントエンド開発の仕事はますます重要になってきました。

開発当初はすべてバックエンドのエンジニアが担当していましたが、業務が複雑化するにつれて作業負荷が大きくなったため、プロジェクト内の可視化部分と一部のインタラクティブ機能の開発作業を分離し、フロントエンド開発。

インターネット産業の急速な発展により、国によって分業システムがまったく異なります。

日本や、カナダやオーストラリアなど比較的人口が少ない国では、フルスタックエンジニアと呼ばれる「フルスタックエンジニア」が人気です。平たく言えば、フロントエンド開発とバックエンド開発の仕事を一人で完結させるだけでなく、プロダクトデザインからプロジェクト開発、その後の運用保守までを一人で行い、UIやアニメーション、または床を掃除する、窓を掃除する、書類を書く、テーブルや椅子を修理するなど。

しかし、インターネット環境が比較的発達しているアメリカなどでは、プロジェクト開発における分業と協力がより明確になっており、プロジェクト開発全体は、フロントエンド、ミドルレベル、バックエンドの 3 つの開発段階に分かれています。これらの 3 つの段階は、それぞれ 3 人以上で実行されます。

中国のほとんどのインターネット企業には、フロントエンド エンジニアとバックエンド エンジニアしかいないため、中間層の作業の一部はフロントエンドが行い、一部はバックエンドが行います。

PRD (プロダクト プロトタイプ - プロダクト マネージャー) - PSD (ビジュアル デザイン - UI エンジニア) - HTML/CSS/JavaScript (PC/モバイル Web ページ、Web ページ上で視覚的な表示とインタラクションを実現するため - フロントエンド エンジニア)

2. VS Code をダウンロードしてインストールし、使用する

2.1. ダウンロード先

https://code.visualstudio.com/

2.2. プラグインのインストール

その後の開発を容易にするために、次のプラグインをインストールすることをお勧めします

2.3. プロジェクトの作成

Vscode 自体には新しいプロジェクトを作成するオプションがないため、最初に project_xxxx などの空のフォルダーを作成します。

次に、vscode を開き、vscode で [ファイル] -> [フォルダーを開く] を選択してフォルダーを開き、プロジェクトを作成できるようにします。

2.4. ワークスペースの保存

フォルダを開いた後、「ファイル -> 名前を付けてワークスペースを保存...」を選択し、ワークスペース ファイルに名前を付けて、先ほどのフォルダに保存します。

2.5. 新しいフォルダーと Web ページを作成する

2.6. Web ページのプレビュー

Web ページのプレビューをファイル パスとして開く

「ブラウザーで開く」プラグインをインストールする必要があります。

ファイルを右クリック -> デフォルトのブラウザで開く

サーバーモードで Web ページのプレビューを開く

「Live Server」プラグインをインストールする必要があります。

ファイルを右クリック -> Live Server で開く

2.7. フォントサイズの設定

左列 管理 -> 設定 -> 「フォント」で検索 -> フォントサイズ

2.ES6の紹介

1. ECMAScript 6 の紹介

ECMAScript 6.0 (以下、ES6) は、2015 年 6 月に正式リリースされた JavaScript 言語の次世代標準です。その目標は、JavaScript 言語を使用して複雑で大規模なアプリケーションを作成し、エンタープライズ レベルの開発言語にすることです。

2. 基本文法

このパートでは、後のプロジェクト開発でコードの理解を容易にするために、フロントエンド開発で必要な最小限の ES6 の知識のみを学習します。

2.1、テンプレート文字列

create-template-string.html

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.

2.2、オブジェクト拡張演算子

オブジェクト拡張 operator.html を作成する

スプレッド演算子 (...) を使用して、パラメーター オブジェクトのトラバース可能なすべてのプロパティを取り出し、それらを現在のオブジェクトにコピーします。

// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}

2.3. アロー機能

アロー Function.html を作成

アロー関数を使用すると、関数をより簡潔に記述できます。基本的な構文は次のとおりです: パラメータ => 関数本体

// 传统
var f1 = function(a){
    return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8
// 前面代码相当于：
var f4 = (a,b) => a+b

簡単に、ES6 を使い始めることは、このプロジェクトで使用される基本的な文法を理解できるようにすることです。

3. Vueの基本

1.はじめに

1.1. Vue.js とは

Vue (発音は /vjuː/、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。

Vue のコア ライブラリは、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトと簡単に統合できるビュー レイヤーにのみ焦点を当てています。一方、最新のツールチェーンやさまざまなサポート ライブラリと組み合わせると、Vue は複雑な単一ページ アプリケーションを完全に強化することもできます。

公式ウェブサイト: https://cn.vuejs.org

1.2. 例

demo.html を作成する

<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {
    
    {}} 插值表达式，绑定vue中的data数据 -->
    {
    
    { message }}
</div>
<script src="vue.min.js"></script>
<script>
    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })
</script>

これは宣言型レンダリングです: Vue.js の中核となるのは、簡潔なテンプレート構文を使用してデータを宣言的に DOM にレンダリングできるようにするシステムです。

ここでの核となる考え方は、面倒な DOM 操作がないことです.たとえば、jQuery では、最初に div ノードを見つけ、DOM オブジェクトを取得し、一連のノード操作を実行する必要があります.

2.インスタンスのライフサイクル

vue instance.html のライフサイクルを作成する

<body>
    <div id="app">
        {
    
    {info}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
               info:'hello atguigu' 
            },
            created() { //渲染前
                debugger
                console.log('created....')
            },
            mounted() { //渲染后
                debugger
                console.log('mounted....')
            }
        })
    </script>
</body>

3、アクシオス

Axios は、ブラウザーおよび node.js 用の promise ベースの HTTP クライアントである Vue から独立したプロジェクトです。

  • ブラウザでは、ajax リクエストの送信を完了するのに役立ちます

  • node.js では、リモート インターフェイスにリクエストを送信できます

vueとaxiosのjsファイルを紹介

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

axios 呼び出しを行う

var app = new Vue({
    el: '#app',
    data: {
        memberList: []//数组
    },
    created() {
        this.getList()
    },
    methods: {
        getList(id) {
            axios.get('data.json')
            .then(response => {
                console.log(response)
                this.memberList = response.data.data.items
            })
            .catch(error => {
                console.log(error)
            })
        }
    }
})

data.json ファイルを作成する

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "list":[
            {"name":"lucy","age":20},
            {"name":"mary","age":30},
            {"name":"jack","age":40}
        ]
    }
}

コンソール ビューの出力

4. Node.js の紹介

1. Node.js の紹介

1.1. Node.jsとは

簡単に言うと、Node.js はサーバー側で実行される JavaScript です。

Node.js は、イベント駆動型の I/O サーバー側 JavaScript 環境です。Google の V8 エンジンに基づいており、V8 エンジンは Javascript を非常に高速に実行し、非常に優れたパフォーマンスを発揮します。

1.2. Node.js の用途とは

フロントエンド プログラマーで、PHP、Python、Ruby などの動的プログラミング言語を知らず、独自のサービスを作成したい場合、Node.js は非常に良い選択です。

Node.js はサーバー側で実行される JavaScript です。Javascript に精通していれば、Node.js を簡単に学習できます。

もちろん、バックエンド プログラマーで高性能サービスをデプロイしたい場合は、Node.js を学習することも非常に良い選択です。

2. Node.js のインストール

2.1. ダウンロード

公式サイト： https: //nodejs.org/en/

中国のウェブサイト: http://nodejs.cn/

LTS: 長期サポートリリース

現在: 最新バージョン

2.2. バージョンのインストールと表示

node -v

3. 始めやすい

01-console program.js を作成する

console.log('Hello Node.js')

プログラムが置かれているディレクトリを入力し、次のように入力します。

node 01-控制台程序.js

ブラウザのカーネルは、次の 2 つの部分で構成されています。

  • DOM レンダリング エンジン。

  • js パーサー (js エンジン)

  • js は、ブラウザのカーネルの js エンジン内で実行されます

Node.js は、V8 エンジン (Chrome の JavaScript エンジン) に基づく、ブラウザー環境外で実行される JavaScript プログラムです。

5.NPM

1.NPMの紹介

1.1、NPMとは

NPM の正式名称は Node Package Manager. Node.js パッケージ管理ツールであり、世界最大のモジュール エコシステムです. その中のすべてのモジュールはオープン ソースで無料です. Node.js パッケージ管理ツールでもあります.フロントエンドでは Maven と同等です。

1.2. NPM ツールのインストール場所

js ライブラリを簡単にダウンロードし、npm を介してフロントエンド プロジェクトを管理できます。

Node.js にデフォルトでインストールされる npm パッケージとツールの場所: Node.js directory\node_modules

  • このディレクトリに npm ディレクトリが表示されますが、npm 自体は NPM パッケージ マネージャーによって管理されるツールであり、Node.js が npm ツールを統合したことを示しています。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

2. npm を使用してプロジェクトを管理する

2.1. npm フォルダーの作成

2.2. プロジェクトの初期化

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

2.3. npm イメージの変更

NPM が管理する公式パッケージはすべてhttp://npmjs.comからダウンロードされますが、この Web サイトは中国では非常に低速です。

Taobao NPM ミラーhttp://npm.taobao.org/を使用することをお勧めします. Taobao NPM ミラーは完全なnpmjs.comミラーです. 同期の頻度は現在、公式と確実に同期するために 10 分ごとに 1 回です.可能な限りサービスします。

ミラー アドレスを設定します。

# 经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

2.4. npm install コマンドの使用

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
#如果安装时想指定特定的版本
npm install [email protected]

6. モジュール開発

1. モジュール化の概要

1.1、モジュール化の背景

Web サイトが徐々に「インターネット アプリケーション」になるにつれて、Web ページに埋め込まれた Javascript コードはより大きく、より複雑になっています。

Javascript モジュラー プログラミングは緊急の必要性になっています。理想的には、開発者はコア ビジネス ロジックのみを実装する必要があり、他のモジュールは他のユーザーがロードできます。

但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。

1.2、什么是模块化开发

传统非模块化开发有如下的缺点：

  • 命名冲突

  • 文件依赖

模块化规范：

  • CommonJS模块化规范

  • ES6模块化规范

2、ES6模块化写法（一）

每个文件就是一个模块，有自己作用域。在一个文件里定义的变量、函数、类，都是私有的，对其他文件不可见。ES6使用 export 和 import 来导出、导入模块。

2.1、导出模块

创建 src/userApi.js

export function getList() {
    console.log('获取数据列表')
}
export function save() {
    console.log('保存数据')
}

2.2、导入模块

创建 src/userComponent.js

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()

注意：这时程序无法运行，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

2.3、安装Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install --global babel-cli
#查看是否安装成功
babel --version

2.4、配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则，将es2015规则加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

2.5、安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

2.6、转码

# 整个目录转码
mkdir dist1
# --out-dir 或 -d 参数指定输出目录
babel src -d dist1

2.7、运行程序 

node dist1/userComponent.js

3、ES6模块化写法（二）

3.1、导出模块

创建 es6/userApi2.js

export default {
    getList() {
        console.log('获取数据列表2')
    },
    save() {
        console.log('保存数据2')
    }
}

3.2、导入模块

创建 es6/userComponent2.js

import user from "./userApi2.js"
user.getList()
user.save()

3.3、转码

# 整个目录转码
mkdir  dist2
# --out-dir  或 -d 参数指定输出目录
babel  es6 -d dist2

3.4、运行程序 

node dist2/userComponent2.js

おすすめ

転載: blog.csdn.net/qq_60870118/article/details/129364463
おすすめ
TIOBE 5 月リスト: Fortran がトップ 10 に「復活」
GCC 14.1 发布
ランキング
Linuxの一般的なコマンドの緊急対応
FPGAの設計者は、5つの基本的なスキルです
Javaの研究では、2019年6月12日ノート
Golang底层原理剖析之内存逃逸
VIM - Viは、プログラマーのテキストエディタを改善しました
魔法書（MagicTable）入門チュートリアルは、CADの一括転送複数のテーブルExcelをExcelを回し--CAD
mockitoとの望ましくないモック
EVE-NG MPLS L2VPN BGP pw -- スタティック ルート、スタティック mpls lsp
抵抗性タッチスクリーンドライバ（II）
PHP 安装扩展 Api Version 和扩展extensions路径不匹配的问题
アーカイブ
もっと
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)

コードワールド

© 2018 codetd.com